html
  1. html-headings
PreviousNext

HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.

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

Default Headings

The to HTML elements represent six levels of section headings. h1 is the highest section level and h6 is the lowest.

  1. Heading <h1>:

    This is the highest level heading and represents the main title of the page. There should typically be only one <h1> per page.

    <h1>Main Page Title</h1>
  2. Heading <h2>:

    These headings are used to define subsections within the <h1> section. They indicate a lower level of importance than <h1>.

    <h2>Section 1</h2>
  3. Heading <h3> to <h6>

    These headings are used to further subdivide content within their parent headings, with <h3> being more important than <h4>, and so on.

    <h3>Subsection 1.1</h3>
<h4>Subsection 1.1.1</h4>

Custom 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:

h1 {
  font-size: 36px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 14px;
}
h6 {
  font-size: 12px;
}
Try Playground

Key Points

  • It's important to maintain a proper hierarchy when using headings.
  • This makes your content more readable and helps search engines and screen readers understand the structure of your web page.
  • Avoid skipping heading levels or using headings solely for styling purposes.
  • Also, remember that HTML headings have default styling, which can be customized with CSS to match your website's design.
AttributesParagraphs
Published on: