Discussion on "Semantic HTML: What, Why, and How"

Abbey Perini · 2022-03-15T21:04:52.114Z

TL;DR - Watch the lightning talk version! Watch my Front-end Foxes Day 2022 talk or read the transcript! What Use HTML elements for their intended purpose. Separate content and presentation. Why It's easier to read and naturally leads to more con...

Hey Abbey, thanks a lot for this article! I wrote something similar but I noticed that when I published it, the html tags disappeared on hashnode. So I'm wondering how you were able to successfully put the tags, if you don't mind can you show me? 🙏

I should make notes from this article. Useful.

This is a wonderful guide to the deeper nuances of HTML. Usually, once up and running with the basic tags, developers tend to rush towards CSS and JS. We tend to leave behind a lot of interesting tidbits, which Abbey Perini has done a wonderful job summarizing. Thanks!!!

This is such a great article, truly we as developers don't understand the true power html has on its own, Thanks for this tips. I want to ask, for the link icon, why does the type have to be image/x-icon, I have seen this on multiple websites but never understood the reason

It doesn't have to be image/x-icon, that's the MIME type for ICO (fileName.ico) files. You can also use PNG (image/png) and static GIF (image/gif) files in all browsers: en.m.wikipedia.org/wiki/Favicon

The difference is within one ICO file there are multiple images with different sizes and color depths to allow browsers to scale it appropriately. With a raster image like PNG, you'd have to link to multiple images, specify sizes, and the various browsers have conflicting rules about which one they'll pick.

If you have an ICO file at root level, browsers will check for it automatically. There are also some <meta> tag types that allow you to specify other uses for the favicon like bookmark icons.

Abbey Perini Thank you, i understand better now

This is an amazing article. I wrote something similar for Freecodecamp

I also try to be semantic as possible for making html file. for example i write header and nav tag separately but under one wrapper tag by which I can make them under one top bar

<div class="wrapper">
  <header>...</header>
  <nav>...</nav>
</div>

Search Hashnode

Semantic HTML: What, Why, and How

Responses(8)