← 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
Ready to go further?

These free tutorials are a preview, our Frontend Development cohort covers it in depth, with a real project and a cohort alongside you. Active

Enroll in Frontend Development
Don't miss out

Ready to build something real?

Create a free account to enroll in a track, and get notified the moment a cohort opens.

Create free account