DEV Community

Cover image for Semantic HTML by real-life examples
Dominik Ilnicki
Dominik Ilnicki

Posted on • Updated on

Semantic HTML by real-life examples

On my way of learning semantic HTML, I found it very useful to take a look at how other big players cope with that.

I prepared for you two examples of how Twitter and use semantic HTML tags like article, section, or nav on their home page. I'll continue that series if you find it interesting too.

Alt Text


Alt Text

Top comments (5)

lifelongthinker profile image

A really nice way of visualizing the markup.
Thanks for sharing!

I think it would also be very interesting to see where these elements end up on a smaller screen size (mobile devices) and on different media (e-ink, projectors, print, ...).

dominikilnicki profile image
Dominik Ilnicki

Thanks for that idea, I’ll keep that in mind :)

readthroughmyglasses profile image


progapanda profile image
Khaled Alba.

That's interesting indeed.
But maybe it needs clarifications under each example? Why use aside and not section like the above? When to nest an article inside the section.

That'd be really useful

Thanks for the effort Dominik, please continue.

diegomouradev profile image
Diego Moura

Great idea for exercising semantic HTML, going to practice in some sites I like!πŸ‘πŸΎ