Skip to HeaderSkip to PostSkip to Footer

HTML Headings

Table of Content

    HTML Headings - The following is a summary of the HTML headings tag/element.

    What are HTML Headings?

    HTML Headings or <h1>, <h2>, <h3>, <h4>, <h5>, <h6> is an HTML element that functions to display document headings on web pages.

    HTML Headings only have 6 types of starting tags namely <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Apart from these six tags, it is not a valid HTML heading.

    Elements such as <h7> or <h8> will still be displayed by the browser but do not place any emphasis on the screen reader that the element those are headings.

    Screen readers and web crawlers read HTML Headings in priority order with <h1> as the most important, then <h2> and so on until <h6> is the heading with the least priority.

    Tips: Using HTML Headings helps search engine crawlers to determine which article title and which subtitle. So, it's good to optimize the use of HTML Heading in web/blog content.

    Default Stylesheet

    HTML Element Default Stylesheet Pixel Height
    <h1></h1>
    • Font Size: 2em
    • Font Weight: bolder
    32 px
    <h2></h2>
    • Font Size: 1.5em
    • Font Weight: bolder
    24 px
    <h3></h3>
    • Font Size: 1.17em
    • Font Weight: bolder
    18.72 px
    <h4></h4>
    • Font Size: 1em
    • Font Weight: bolder
    16 px
    <h5></h5>
    • Font Size: .83em
    • Font Weight: bolder
    13.28 px
    <h6></h6>
    • Font Size: .67em
    • Font Weight: bolder
    10.72 px

    Attributes and Functions

    Attribute Function Value Example
    class Contains class selector for CSS Styling. class-selector <h1 class='heading1'>Title of the Article</h1>
    id Contains the unique code id selector for CSS Styling and element targeting. id-selector <h1 id='heading1'>Title of the Article</h1>
    style Contains CSS styling code for images. CSS Value <h1 style='font-size:3rem'>Title of the Article</h1>

    Example of Implementation

    The following code is a sample code that will be implemented as an example.

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

    Result

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6
    Note: The sizes that appear in the results section are already affected by CSS Styling, so they don't appear as default.

    Notes

    • Use HTML Headings in order of priority. Skipping usage on documents is not recommended.

    Closing

    That's a little summary of HTML Headings that I can share. If something is missing, unclear, or wrong, please let me know or just ask through the comments column below. Hopefully useful and see you in my other posts.

    Headings really help content readers understand every part of the content on the webpage.Ninura

    Comments