HTML Headings
Headings label the sections of a page and give it a clear outline.
HTML has six levels of heading, from <h1> for the most important down to <h6> for the least. Browsers show higher levels in larger, bolder text by default.
The Six Levels
All six headings
<!DOCTYPE html>
<html>
<body>
<h1>Web Development</h1>
<h2>Frontend</h2>
<h3>HTML</h3>
<h4>Elements</h4>
<h5>Headings</h5>
<h6>Best Practices</h6>
</body>
</html>Headings Create Structure
Search engines and screen readers use headings to understand how a page is organized, so choose levels by meaning rather than by size.
- Use one <h1> per page for its main title.
- Do not skip levels; follow an <h2> with <h3>, not <h5>.
- Reach for CSS when you only want bigger or smaller text.
Bigger Headings With CSS
If a heading needs a specific size, style it rather than picking the wrong level.
Styled heading
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:60px;">A large heading</h1>
</body>
</html>Note: Read the headings from top to bottom and you get a table of contents for the page.
Exercise: HTML Headings
How many levels of headings does HTML provide?
