HTML header – H1 to H6 tags

The H1 to H6 tags help the browser know how the page is organized.

You enclose the text you want between the two h tags <h2></h2> or between the 2 H tags <h3></h3> up to h6. The H tags don’t show up on screen. the alternative text that is used to make <h2> show up on the webpage you are viewing is &lt;h2&gt; and the alternative text that is used to display </h2> on the webpage is &lt;/h2&gt; .

Become a Patron!

  • &lt;h2&gt; outputs <h2> to a webpage so that visitors can see that text instead of starting an H2 heading.
  • &lt;/h2&gt; outputs </h2> to a webpage so that visitors can see that text instead of ending a H2 heading.
  • H1 goes into the page’s header. WordPress places it there for you if you are using WordPress, otherwise it is best to enter it there if you are entering everything manually. The H1 that WordPress creates is the name that you entered for the title of the page. The title of this page is “HTML header – H1 to H6 tags”. That’s the only time H1 should be used, but you can use it again if you desire.
  • H2 adds one or more subcategories to the H1 title.
  • H3 adds one or more subcategories to the H2 subcategory above it.
  • H4, H5, and H6 can also be used in the same way if you need to make more subcategories out of the earlier subcategories.
  • The h tags are made to stand out visually. And google uses them to better know your site to help determine how how it ranks in searches.
  • The browser has a bit of a different appearance and size for each numbered H tag. You can change them using CSS if you want (not really covered on this page.
  • At the top of my page is a menu that was created by a WordPress add on that automatically creates the menu list for me. Notice how it is simply organized by what H tags I am using.

This H2 is the 1st subcategory of the H1 title.

Here is where you enter info, images, links,etc. about whatever the H2 subcategory is.

<h2>This H2 is the 1st subcategory of the H1 title.</h2> was the text written by WordPress to post it to the page as an H2 header.

This H3 is the 1st subcategory of the H2 title above.

Here is where you enter info, images, links,etc. about whatever the H2 subcategory is.

<h3>This H3 is the 1st subcategory of the H2 title above.</h3> was the text written by WordPress to post it to the page as an H3 header.

This H2 is the 2nd subcategory of the H1 title.

Here is where you enter info, images, links,etc. about whatever the H2 subcategory is.

<h2>This H2 is the 2nd subcategory of the H1 title.</h2> was the text written by WordPress to post it to the page as an H2 header.

This H3 is the 1st subcategory of the H2 title above.

Here is where you enter info, images, links,etc. about whatever the H2 subcategory is.

<h3>This H3 is the 1st subcategory of the H2 title above.</h3> was the text written by WordPress to post it to the page as an H3 header.

Moving the heading to alight to the center or to the right:

I mostly prefer to assign the headings to the center using the style attribute. Without assigning, the default is that the text is alligned to the left, but you can also assign them to the right, the center, or to the left if you want. The text that follows the illustration heading below, is the text used to make it so.

  • Note: The style attribute is  actually part of CSS. There is all kinds of things you can do to change the appearance of  your text  between the H tags, P tags, etc.

H3 assigned to the left:

<h3>H3 assigned to the left:</h3>

H4 assigned to the center:

<h4 style=”text-align: center;”>H4 assigned to the center:</h4>

H5 assigned to the right:

<h5 style=”text-align: right;”>H5 assigned to the right:</h5>

Combining multiple style attributes:

H4 aligned to the right:

<h4 style=”text-align: right; color: red; background-color: blue; font-size: 300%;”>H4 aligned to the right:</h4>

Versus a regular a plain ole H4…

Plain ole H4

<h4>Plain ole H4</h4>

Related topics to check out:

  • CSS: display

To support this site, check out the following links:

Home page

  • Information on this site is not guaranteed to be accurate. Always consult the manufacturer info/datasheet of parts you use. Research the proper safety precautions for everything you do.
  • Electronzap is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.