DEV Community

loading...
Cover image for Semantic HTML by real-life examples

Semantic HTML by real-life examples

Dominik Ilnicki
Building embedtables.com / Learning frontend / Studying mathematical modeling & data analysis
・Updated on ・1 min read

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 Dev.to use semantic HTML tags like article, section, or nav on their home page. I'll continue that series if you find it interesting too.

Dev.to

Alt Text

Twitter

Alt Text

Discussion (5)

Collapse
lifelongthinker profile image
Sebastian

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, ...).

Collapse
dominikilnicki profile image
Dominik Ilnicki Author

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

Collapse
readthroughmyglasses profile image
Pranati

Agreed

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

Collapse
diegomouradev profile image
Diego Moura

Great idea for exercising semantic HTML, going to practice in some sites I like!👍🏾