Headings and Paragraphs

Headings and paragraphs are the most common elements you'll write — almost every page starts with them.

Headings: <h1> through <h6>

HTML has six levels of headings, <h1> (most important) down to <h6> (least important):

<h1>Page Title</h1>
<h2>A Major Section</h2>
<h3>A Subsection</h3>

A page should have exactly one <h1> — it's the main title of the page. From there, headings should nest in order: don't jump from <h2> straight to <h4> just because you want smaller text. Skipping levels breaks the outline that screen readers and search engines build from your headings.

If you want a heading to look bigger or smaller than its default size, that's a job for CSS — not for picking a different heading level.

Paragraphs: <p>

The <p> tag wraps a block of text:

<p>
  HTML doesn't care about the line breaks or extra spaces in your source
  code — it collapses any run of whitespace into a single space when
  rendering the page.
</p>

That's why the paragraph above renders as one continuous line of text even though it spans multiple lines in the file — formatting your HTML source for readability doesn't affect the output.

Line breaks and horizontal rules

Sometimes you need a break within a block of text rather than a whole new paragraph. <br> inserts a line break:

<p>
  123 Main Street<br />
  Springfield, USA
</p>

Use <br> sparingly — for things like addresses or poem lines. If you're just trying to add space between two blocks of content, that's a CSS margin problem, not a <br> problem.

<hr> draws a horizontal rule, typically used to separate distinct sections of content:

<p>End of section one.</p>
<hr />
<p>Start of section two.</p>

Both <br> and <hr> are self-closing — they don't wrap any content, so there's no </br> or </hr>.