HTML Headings

Headings are titles and subtitles that show the structure of a page.

The Six Heading Levels

HTML has six heading tags, from <h1> (most important) to <h6> (least important).

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

The browser makes each level a little smaller and adds space above and below it.

Headings Show Structure

Think of headings like the table of contents of a book. A page about a school might look like this:

<!DOCTYPE html>
<html>
<body>

<h1>Workownix Institute</h1>

<h2>Courses</h2>
<h3>Web Development</h3>
<p>HTML, CSS and JavaScript with real projects.</p>
<h3>Graphic Designing</h3>
<p>Photoshop, Illustrator and design basics.</p>

<h2>Contact</h2>
<p>Orangi Town, Karachi.</p>

</body>
</html>

Why Headings Are Important

• Readers scan headings to find what they need quickly.
• Screen readers let blind users jump from heading to heading.
• Search engines like Google use headings to understand what your page is about.

Do Not Use Headings for Big Text

Use headings only for titles. If you just want some text to be big or bold, use CSS instead. Choosing a heading because of its size gives the page a confusing structure.

Changing the Size of a Heading

Every heading has a default size, but you can change it with the style attribute and the CSS font-size property.

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:50px;">Big Sale</h1>
<h2 style="font-size:18px;">On all school bags this week</h2>

</body>
</html>

The <h2> is still a level-2 heading for Google and screen readers, even though it now looks smaller.

Horizontal Rules

The <hr> tag draws a horizontal line. It marks a change of topic between sections.

<h2>Morning Batch</h2>
<p>9 am to 12 pm.</p>
<hr>
<h2>Evening Batch</h2>
<p>5 pm to 8 pm.</p>

Exercise