#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 ❤️.

Intro

In my previous blogs, we have learned

👉 Importance of layout and how it helps to leverage accessibility and responsiveness.
👉 Layout Design using Flex.
👉 Layout Design using Grid.

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.

Semantic HTML

As we know HTML stands for HyperText Markup Language and then what is Semantic HTML, it means HTML with meaningful elements.
For Example:
<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.

For example:
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:

Using Flex

Semantic HTML with Flex

Using Grid

Semantic HTML with Grid

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

#TWBloggersClub