Movable type blocks photographed on an angle with a blurry background

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.


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. It's possible for HTML5 pages to use the h1 element multiple times in different contexts, although this may generate issues with some 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.


<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>
<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