Intro
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.
01
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
02
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 h1
in 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
03
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.
04
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
Top comments (0)