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>
