A typical web page will have a structure similar to most real-world documents: a title, heading, body copy (in the form of paragraphs) and several sub-headings dividing the body copy into different sections.
Headings
HTML has six heading levels, from <h1> to <h6>. It is very important not to think of these headings in terms of “size” or “bigness”, but as levels of importance. <h1> is the most important heading in the web page, and is often the first element after the opening <body> tag. In a typical document <h1> is only used once one the page, and will usually contain content related to the page title, the company name, the name of the website, or a combination of all three. Technically, it is possible for HTML5 pages to use the h1 element multiple times in different contexts, although this is not formally supported in current browsers and generates issues in accessibility software. <h2>, on the other hand, is a sub-heading, of which there may be several in a document. <h3> is a sub-sub-heading, and so on.
As a general rule, subheadings down to the <h2> or <h3> level should be provided with unique id attribute values to provide easy anchor points for links.
Paragraphs
<p> tags mark up paragraph content. A paragraph normally consists of several sentences; if <p> content consists of a single word or image, you should probably use more appropriate markup.
Bringing Them Together
Using headings and paragraphs on the same page looks something like this:
<h1>About Dudley Storey</h1>
<h2>Biography</h2>
<p>I remember the days, sittin' on the porch with my family,
singin' and dancin' down in Mississippi…</p>Photograph by Xosé Castro Roig, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
