HTML Headings

HTML headings are used to define titles and subtitles on a web page. They help organize content and improve readability for users and search engines.

Types of HTML Headings

• <h1> – Main heading
• <h2> – Section heading
• <h3> – Sub section heading
• <h4> – Smaller heading
• <h5> – Less important heading
• <h6> – Least important heading

Example of HTML Headings

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

Heading Hierarchy

Headings should be used in a proper order. The <h1> tag should represent the main topic, followed by <h2> and <h3> for sub topics.

Why HTML Headings are Important

• They define page structure
• They improve SEO
• They help screen readers
• They make content easy to scan

HTML Headings and SEO

Search engines use headings to understand the main topics of a web page. Proper use of heading tags helps improve SEO and page structure.

Best Practices

• Use only one <h1> per page
• Use <h2> for major sections
• Use <h3> to <h6> for sub-sections
• Do not use headings just for styling

Styling Headings with Inline CSS

You can change the color and size of a heading using the style attribute directly inside the tag.

<h1 style="color: red; font-size:50px;">Styled Heading</h1>
  

Common Mistakes with Headings

Avoid the following common mistakes when using HTML headings to maintain proper structure and SEO benefits.

• Using headings only for text styling
• Skipping heading levels
• Using multiple <h1> tags on one page
• Writing very long text inside headings