Java Training School

HTML Headings

HTML headings are like the big titles or smaller subtitles you see on a webpage. They help organize and highlight different sections of content.

HTML offers six levels of headings, from <h1> to <h6>, each with its own semantic meaning and styling.

<h1> defines the most important heading. <h6> defines the least important heading.

Examples:

<!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>

You can see in above example browsers automatically add some white space (a margin) before and after a heading.

Note: Use HTML headings for headings only. Don’t use headings to make text BIG or bold.

Why Use Headings?

  • Semantic Structure: Headings define the logical structure of your content, allowing users and assistive technologies to navigate your page more efficiently.
  • SEO Benefits: Search engines use headings to understand the main topics of your page. Properly structured headings can improve your site’s visibility in search engine results.
  • Readability: Clear headings make your content more readable, enabling users to quickly scan and understand the information presented.

Bigger Headings:

Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style = "font-size: 50px;">Heading 1 with style attribute</h1>

</body>
</html>
<— Previous
Next —>