#4 Layout Design
With Semantic HTML
Hello Everyone, Welcome to my blog 🙏.
I hope you are all safe and that this blog finds you in good health ❤️.
In my previous blogs, we have learned
If you missed it, you can revisit them here.
In this blog, we will learn more about Semantic HTML and how it helps to create meaningful layouts and leverage Accessibility.
As we know HTML stands for HyperText Markup Language and then what is Semantic HTML, it means HTML with meaningful elements.
<div>, <span> are non-semantic which can be used as substitute to any of the semantic elements.
<header>, <aside>, <footer>, <p>, <li>, etc are semantic elements which gives meaning to your code i.e. header clearly tells that it is the heading to your piece of code.
Benefits of Semantic HTML
👉 Structure the code we write.
👉 Easy to maintain.
👉 Improves readability.
How Semantic leverage Accessibility
For a normal person, it is very simple to recognise elements on the screen like which is header and footer but, it is not the same for the people who are visually challenged. They rely more on google assistants or screen readers or other machines to read the content for them.
So, for machines, it is not so obvious to identify elements based on visual styling. So here semantics play a vital role.
By defining block-level elements as semantic elements, we tell the machines what they are, so the machines can render elements appropriately. For example, we no longer declare italic elements with an <i> for “italics,” (which is a purely visual change, without intrinsic meaning) but with an <em>, for “emphasize.”
On a screen, the browser will display text wrapped in an <em> in italics. But on an audio device for the visually impaired, the text will be pronounced with a corresponding emphasis, just like a friend would say it.
Layout Design with Semantic HTML
Now, Let’s design a semantic HTML Layout using flex and grid.
For that let’s take our stocked example of a simple layout:
So, the above implementation promotes great accessibility and support for the machines which read the screens.
You may still see divs in it but very limited and my intention is not that we need to avoid divs and spans but to give some meaning to your code and also provide an awesome user experience using semantic HTML
divs and spans anyways are handy and we can use them for the layout structuring.
Here we go, That’s it folks for this blog. I hope everyone liked it.
If you like it, give it a clap 👏 ,
and share it with your friends.
For more exciting content on Frontend, Please do follow me 🎯.
Thanks a lot, Everyone 🙏.
Until Next time,
Happy Learning ✍️
Abhishek Kovuri, UI developer