Copy
Generally, any copy content is just put within an ARTICLE element using standard tags associated with text content, e.g. P, B, I, UL, LI, etc.
Note:
- Usually, H1 should be used for the site title in the page header except if the website is an amalgum of independing topics, such as Wikipedia.
- H2 should be the top-level header on each page.
<main> <article> <h2>Title</h2> <p> This is a paragraph </p> <ul> <li>One <li>Two <li>Three </ul> </article> </main>
Content block elements
All content block elements have all margin and padding removed by default except UL and OL. Each is then given just 1em of top margin, except for H2 as it should be the first element of the page.
H1,H2,H3,H4,H5,H6,P,PRE,BLOCKQUOTE
{
margin: 0;
padding: 0;
}
H2:not(:first-child),
H3,H4,H5,H6,P,PRE,BLOCKQUOTE
{
margin-top:1em;
}
UL,OL
{
margin-top:1em;
margin-bottom:0;
}
Font styling
Font styling is intentionally left to the browser defaults.
PRE styling
ARTICLE PRE
{
border: solid 1px #ddd;
border-top-left-radius: 20px;
padding: 20px;
overflow-x: scroll;
}
ARTICLE HEADER { text-align:center; line-height:40px; } ARTICLE HEADER#title { font-size:40px; } ARTICLE HEADER#subtitle { font-size:16px; }