Headings and Paragraphs

Web pages, like any other document, is often structured into different sections for different topics, for contact information, and so on. In HTML, heading elements are used for this purpose, and paragraphs are further used to keep everything clean and readable.

Headings (<h1>-<h6>)

HTML defines six levels of headings, h1, h2, h3, h4, h5, and h6. These descend in order of emphasis on the page.

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

Primary (top-level) heading

Secondary heading

Tiertiary heading

Quarternary heading

Quinary heading

Senary heading

Thus, a good way to structure out your page is to give it a title with the h1 element and then partition topics, navigation, contact information, and other sections of your page with the h2 element. Any sections within those sections should go under an h3 element heading, and so on. This gives the page hierarchy, or a sensible structure where a large topic is broken down into smaller topics.

<h1>Tesserae</h1> (Page title, most important heading)

	<h2>Headings and Paragraphs</h2> (Section, secondary heading)
	
		<h3>Headings</h3> (Subsection, tiertiary heading)
		
		<h3>Paragraphs</h3> (Subsection, tiertiary heading)
		
		<h3>Blocks of text</h3> (Subsection, tiertiary heading)

You should avoid using headings merely because they're rendered as large text. Semantically, this can confuse browsers, screen readers, and users who rely on convention.

Paragraphs (<p>)

You're likely writing text in paragraphs, and while HTML will work fine enough with basic text, it has a tendency to get rather messy. Remember that HTML ignores whitespace like extra spaces and line breaks. Thus, if you want paragraphs to look like paragraphs, you should wrap each one in <p>...</p> tags like such:

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

Aside from making the point of the text clear (telling the browser that this is a paragraph of text), the p element gives each paragraph a consistent (and ultimately controllable) amount of whitespace around it. In short, your page will look much cleaner.

Blocks of text

While I won't be going over it in this section of the site, you might notice that headings and paragraphs show up like chunks that never overlap, have some space around them, and never lay side-by-side with one another. This is completely intentional, and actually rather important when you get into the weeds of page design and layout.

For now, just know that some tags (like the emphasis ones discussed on the previous page) sit nicely inline with the text they're around, while others always sit on their own line, as they're blocks. You don't need to know which is which for now, but that's why your headings get their own line and your em elements don't.