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

HTML Headings