HTML Headings

Headings are a crucial part of any HTML document. They help organize content, improve readability, and enhance accessibility and SEO. Let’s dive into everything you need to know about HTML headings.

What Are HTML Headings?

HTML headings are used to define titles and subtitles in a webpage. They range from <h1> to <h6>:

<h1>: Largest and most important heading.
<h6>: Smallest and least important heading.

Basic Syntax

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

Try It Now

Visual Differences

Each heading level has a different font size by default. For example:

<h1> is bold and large.
<h6> is much smaller and often used for less prominent subheadings.

Example: Simple Heading Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Headings</title>
</head>
<body>
  <h1>Main Heading</h1>
  <h2>Subheading Level 1</h2>
  <h3>Subheading Level 2</h3>
  <h4>Subheading Level 3</h4>
  <h5>Subheading Level 4</h5>
  <h6>Subheading Level 5</h6>
</body>
</html>

Try It Now

Best Practices for Using Headings

Use Only One <h1> Per Page:
- The <h1> tag is typically reserved for the main title of the page.
- Example:
```
<h1>Welcome to My Website</h1>
```
  Try It Now
Follow a Logical Hierarchy:
- Use <h2> for major sections, <h3> for subsections, and so on.
- Example:
```
<h1>Website Title</h1>
<h2>About Us</h2>
<h3>Our History</h3>
<h3>Our Mission</h3>
```
  Try It Now
Avoid Skipping Levels:
- Don’t jump from <h1> to <h4> without using <h2> and <h3>.
Use Headings for Content, Not Styling:
- Headings are for structuring content, not for making text bigger or bolder. Use CSS for styling.

Styling Headings with CSS

Headings can be customized using CSS.

Example: Customizing Heading Styles

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Styled Headings</title>
  <style>
    h1 {
      color: #4c4cff;
      font-size: 36px;
      text-align: center;
    }
    h2 {
      color: #ff6347;
      font-size: 28px;
    }
    h3 {
      color: #6c63ff;
      font-style: italic;
    }
    h4 {
      color: #2e8b57;
      text-decoration: underline;
    }
    h5 {
      color: #8b0000;
      font-weight: lighter;
    }
    h6 {
      color: #555;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <h1>Main Heading</h1>
  <h2>Subheading Level 1</h2>
  <h3>Subheading Level 2</h3>
  <h4>Subheading Level 3</h4>
  <h5>Subheading Level 4</h5>
  <h6>Subheading Level 5</h6>
</body>
</html>

Try It Now

SEO and Accessibility Tips

SEO (Search Engine Optimization):
- Search engines use headings to understand the structure and content of your webpage.
- Place important keywords in headings.
Accessibility:
- Proper heading structure helps screen readers navigate the page.
- Always follow the logical order of headings to assist visually impaired users.

Interactive Example with Headings

Use this code to experiment with headings in your browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Headings</title>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <h2>Learn HTML Headings</h2>
  <h3>Why Use Headings?</h3>
  <ul>
    <li>Organize your content</li>
    <li>Improve readability</li>
    <li>Boost SEO</li>
  </ul>
  <h4>Example Headings</h4>
  <p>Here are some sample headings:</p>
  <h5>Smaller Headings</h5>
  <p>Use smaller headings for less important information.</p>
  <h6>Footer Information</h6>
  <p>Footer and minor details often use `<h6>`.</p>
</body>
</html>

Try It Now

Headings are fundamental for organizing content in HTML documents. By following best practices and using proper styling, you can create clear, accessible, and visually appealing webpages.