This Website And All Of It's Contents Are Protected By The First Amendment Of The Constitution Of The United States Of America.

If You Can't Explain It Simply, You Don't Understand It Well Enough.

Albert Einstein

HTML CSS Notes
h1 to h6 size gauge

<h1></h1>
<h1>
</h1>

h1 font size checker.

h1 font size checker. - Font Size 32px, Bold

<h2></h2>
<h2>
</h2>

h2 font size checker.

h2 font size checker. - Font Size 24px, Bold

<h3></h3>
<h3>
</h3>

h3 font size checker.

h3 font size checker. - Font Size 18px, Bold

<h4></h4>
<h4>
</h4>

h4 font size checker.

h4 font size checker. - Font Size 16px, Bold

<h5></h5>
<h5>
</h5>
h5 font size checker.

h5 font size checker. - Font Size 13px, Bold

<h6></h6>
<h6>
</h6>
h6 font size checker.

h6 font size checker. - Font Size 11px, Bold

This page is just to see what the font sizes of the h1 to h6 html heading tags are in pixels.


The top sentence is formatted with the appropriate html heading tags and nothing else. The sentence beneath it is formatted without the html tags, but with the labeled font size.


All of the h1 to h6 tags are automatically formated as either bold or strong, so the sentence beneath them will also be formatted with bold or strong.


Note; I have not read the technical specifications of the h1 to h6 tags. However I believe I have read on someone else's site that they are measured in "em". Ems are a relative sizing, which means their exact size can be different in different uses such as on different size monitors. Pixels are a fixed size, which means they will always be the same size for every use. For this webpage, I just wanted to see what the comparative sizes are on my desktop. It may be different on other medium such as your phone or a tablet.


Further Note; The h1 to h6 tags are block elements and can be styled or classed to be whatever you want them to be.


For example;


<h1 style="font-size:23px; color:blue;">A styled h1 heading.</h1>


Or;


<h1 class="myclass">A classed h1 heading.</h1>


In the example above, myclass is a variable that you would create yourself to connect your code to another part of your code or to another code system. In this case it would connect to your CSS code, either in the "head" section of your html doc or to an external CSS doc.


The CSS code would look like this;


.myclass { font-size:20px; color:green; }


Note that in the examples above, the html or css code would not show up on the webpage. Only the actual heading would be seen. I just posted it that way, with the code, so that you could see what it looks like.

Copyright © 2012 - 2026 By Frederick Charles Jenkins Morton. All Rights Reserved.