Hey, it's the next part of my mini-series where you can find how popular websites deal with their HTML markup. If you haven't seen the recent post check it out!
Today we take a look at the Smashing Magazine homepage.
As you can see the
h2 tag has a bigger font-size then
h1. It's a very good example that the headers' hierarchy is about the text's importance, not a style property. Don't use
h1 just to make text bigger, CSS can make that job.
What's interesting to me they don't use a
section tag to wrap the latest articles and a heading.
They use the
figure tag for author image but I'm not sure why they don't put the author's name inside
figcaption. You can read more about figure here on MDN
The next chunk of articles is surrounded by the
section tag and has multiple
articles inside. We can see that they use the
header inside the article. Remember header tag can be used for every header content on your website, not just for the main header on a top.
What's also interesting how they placed
h4 heading. It's rotated and moved to the left. It looks awesome and at the same time is accessible for screen readers users.
I'm a little bit confused about why they used
h1in the red div. As far as I know, there should be only one
h1 heading for the site. If you have any ideas about is it wrong or right usage of
h1 please let me know in the comments below.
Thank's to that site I discovered a
small tag. You can read more about it here on MDN
Here I'm also a little bit confused about the
h1 tag. I've no idea why they used that here, but this is how it looks like.
In my opinion, they used the
h2 tag in a very smart way. They put the
span there to style the most important words for visual users, but for screen readers, it's just a normal title.
I initially thought that they forgot to use
label for the email input. I was wrong, there is a label but only for screen readers users, it's visually hidden for the rest.
Also If you want to find some cool open-source project and start contributing check out JustContribute