Heading tags - From H1 to H6
I’ve seen a lot of headings related horrors in my time building websites.
p>strong is not a heading
Firstly, you should be using actual heading tags for your headings.
This may look like a title when rendered but it really isn’t. Screen readers will have no idea it’s a heading, for example.
In my experience, the main reason this happens is a lack of education. Content managers often write their copy in Word or Google Docs and paste it into your CMS. Content managers are often completely unaware they should be using anything other than bold text (sometimes in block capitals - shudder!)
h2 is not a sub-title
This may be acceptable. I'd avoid it if possible though! 😆
<h2>A deep dive into the HTML spec</h2>
Whatever you do, please don’t do this;
<h2>is about to happen!</h2>
Just because the default styles for Headings give them a larger font size than basic body copy doesn't mean we should be using them for all "large text".
How does the Heading hierarchy work then?
You can think of headers as like indenting bullet-points;
Information sits beneath headers of equal importance. In the example above, breed names are all equal. Hair types sit beneath breed names but are equal to one another.
The tiny loveable daschund comes in three varieties...
This variety is ideal for allergy sufferers as the short hair doesn't shed.
Just because something looks like a heading, doesn't mean it is. There are rules around how and when we use
<h[1-6]/> tags and these need to be communicated to your Content Managers.
Real. Simple. Syndication.
Get my latest content in your favorite RSS reader.
I use InoReader but you don't have to.
In almost all cases, the comments section is a vile cesspool of Reply Guys, racists, and bots.
I don't want to have to deal with that kind of hell so I don't have a comments section.
If you want to continue the conversation, you can always hit me up on Mastodon (which is not a vile cesspool of Reply Guys, racists, and bots).