Headings and Paragraphs

Content Hierarchy

When writing a newspaper article, you have a massive main headline, smaller sub-headlines, and then the normal paragraph text. HTML works exactly the same way.

Creating a logical hierarchy makes your website readable for humans, and it helps search engines (like Google) understand what your page is about.

Headings

HTML provides six levels of headings: <h1> through <h6>.

• <h1> is the most important heading. Every webpage should have exactly one <h1> that describes the main topic of the page.
• <h2> is used for major sections.
• <h3> is used for sub-sections inside an <h2>, and so on.

Syntax / Structure

<h1>Main Page Title</h1>
<h2>Major Section</h2>
<h3>Sub-section</h3>
<h4>Smaller Sub-section</h4>
<h5>Even Smaller</h5>
<h6>Smallest Heading</h6>

Paragraphs & Line Breaks

For regular body text, we use the paragraph tag: <p>.

When you put text inside a <p> tag, the browser automatically adds some margin (empty space) above and below the paragraph to separate it from other content.

Syntax / Structure

<p>This is a paragraph of text. Browsers automatically wrap this text to fit the screen size.</p>

Line Breaks

What if you want to force a line break without starting a new paragraph (which adds extra spacing)? You can use the line break tag: <br>.

The <br> tag is special. It is called an empty element or a self-closing tag. It does not have any content inside it, so it does not need a closing tag!

Code Example

<p>
  First line of a poem.<br>
  Second line of a poem.<br>
  Third line of a poem.
</p>

Try It Yourself

Try organizing the text below into logical headings and paragraphs!

Key Takeaways

• Use <h1> to <h6> to create a logical structure for your document.
• Every page should have exactly one <h1>.
• Use <p> for standard blocks of text.
• Use <br> to force a new line without creating a new paragraph.
• <br> is an empty element that does not require a closing tag.