DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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 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

Top comments (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!πŸ‘πŸΎ

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.