HTML

Headings & Paragraphs

HTML gives you six levels of heading, <h1> through <h6>, from most important to least. A page should normally have exactly one <h1>, its main title, and work down from there, the same way a book has one title and then chapters and subheadings underneath it.

Example 1: correct hierarchy

<h1>Code Secure Academy</h1>
<h2>Our Tracks</h2>
<h3>Frontend</h3>
<h3>Backend</h3>

"Frontend" and "Backend" are both <h3> because they're both subsections of "Our Tracks", siblings at the same level get the same heading level. Don't pick a heading level by how big you want text to look on screen; that's what CSS is for. Heading levels exist to describe real structure, which is what lets a screen reader user jump directly between sections and what lets a search engine understand how a page is organized.

Example 2: paragraphs

<p>This is the first paragraph, with its own topic.</p>
<p>This is a second, separate paragraph.</p>

Regular text goes in <p> paragraph tags. The browser automatically adds visual space above and below each one, resist the temptation to fake that spacing with repeated <br> tags instead of actually starting a new paragraph, since that throws away the real structural meaning that these are two separate thoughts.

<!DOCTYPE html>
<html>
<body>

  <h1>Main Page Title</h1>
  <h2>A Section Heading</h2>
  <p>This is the first paragraph, explaining the section above.</p>
  <h2>Another Section</h2>
  <p>And another paragraph here.</p>

</body>
</html>

← Elements, Tags & Attributes Text Formatting →