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

Semantic HTML by real-life examples

dominikilnicki profile image Dominik Ilnicki ・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

markdown guide
 

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

 

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

 
 

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.

 

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