Headings and Paragraphs

More than likely, your page can be split into different sections about different things, or maybe more specific things about the same topic. A good way to start structuring your page is with the heading elements, and then marking off paragraphs using the paragraph element.

Heading elements

HTML defines six different heading elements, <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

<h1>Primary (top-level) header</h1>
<h2>Secondary header</h2>
<h3>Tiertiary header</h3>
<h4>Quarternary header</h4>
<h5>Quinary header</h5>
<h6>Senary header</h6>

The result:

Primary (top-level) header

Secondary header

Tiertiary header

Quarternary header

Quinary header

Senary header

These descend in order of importance, with <h1> usually meant for the page name and then each descending heading tag used to denote sections of the page itself, or sections of sections. (Because of its importance, it's a good idea to avoid reusing <h1> on the same page if you can.)

For example, the page title up there ("Headings and Paragraphs") is an <h1> element, while the name of this section ("Heading elements") is marked using the <h2> element. If this section were to have subsections, they would be marked using the <h3> element. This gives the page hierarchy, or a sensible structure where a large topic is broken down into smaller topics.

You should avoid using heading elements merely because they're rendered as large text. Different browsers can render the different headings at whichever size they'd like, and this isn't a terribly semantic way to use them either. CSS is more functional and exact for getting the text size you want.

Paragraphs

Technically, plain text on a page not enclosed in any tags will work fine, but this has a tendency to get rather messy. Browsers don't respect most whitespace, ignoring line breaks and turning any number of spaces into a single one. To get proper line breaks, you should wrap each paragraph in its own paragraph tag, <p>.

<p>Lorem ipsum dolor amet freegan pour-over hella sed bitters crucifix la croix chillwave adipisicing poutine paleo small batch. Vegan truffaut squid iceland, tumblr ullamco air plant pok pok consectetur cronut. Meh flexitarian gentrify ut.</p>

The paragraph element renders as a solid block that sits on its own line, always. This is why they're good for structuring your page—each paragraph will sit on a new line and have a consistent (and when you get more comfortable with this, controllable) amount of whitespace around it, making your page look a lot neater.