Headings
Unfortunately, headings are where the inventor of HTML really screwed up. (I’m looking at you, Tim Berners-Lee.)
HTML headings are a disaster. Just sayin’.
I won’t confuse you by telling you how headings should have been implemented. Maybe later. But trust me when I say that more devs get headings wrong than get them right. Way more.
It’s a hierarchy!
HTML provides different elements for different levels of heading:
- The main heading on a page.
- Section headings.
- Subsection headings.
- Etc.
Instead of using the structure of the HTML document to determine which
headings were which, HTML decided to number the headings, 1 to 6. This
gives us six heading elements:
h1,
h2,
h3,
h4,
h5,
h6.
These correspond to their position in the page hierarchy! The have nothing to do with how the heading elements is styled.
But, of course, the typical browser default stylesheet had to
distinguish between them, so it made h1 big and bold, then
made each successive heading element a bit smaller.
A great many developers do not understand this. The do not think
that h1
means “top-level heading”. They think it means “make
this content big and bold”.
The h elements have nothing to do with styling! They represent
the position of that heading in the page hierarchy.
Have I stressed that enough yet? Do not use the h elements for how they look on the page. Just don’t do it. Don’t.
But if you look around online, you’ll see these elements abused everywhere.
As we go along, we will learn more elements and will see how to
structure a page. Then the use of h elements will become much
clearer. Here is what one looks like:
h1 element. <h1>This is a top-level heading</h1>
Next: Attributes and links
Previous: The default stylesheet