#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

👉 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





UI developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What if we told you there are ways to minimize cloud service costs?

What if we told you there are ways to minimize cloud service costs?

The One Stop Destination for Negative Weight Cycle-BELLMAN -FORD ALGORITHM

A Meet Lumi Cue-te

Lumi Cue logo

Behavior of Objects in Java

Programming Habits That Will Help You Become a Professional Developer

Modify deadlock_timeout parameters in Postgresql

What I Learned by Transitioning from Backend to Frontend Development

Top 7 Biggest Hidden Costs of Mobile App Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Kovuri

Abhishek Kovuri

UI developer

More from Medium

#1 Layout Design

MDN Styling and Layout w/CSS chapter 8

The 5 Short Frontend tips for June

JAWS can’t find the search using Insert+F3 keys on the Preply website because the search role is missed

Rounded gradient borders in CSS