← HTML tutorial

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.

Try it yourself