Semantic HTML by real-life example part 2

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 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

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

Follow me on Twitter for a web dev content