Do you use a div tag for enclosing every significant section of your webpage and are tired of maintaining the whole codebase afterward, then I highly suggest you to start using Semantic HTML in your code.
So, What is Semantic HTML
Semantic HTML is a way of writing HTML code that's readable, that gives meaning to the webpage rather than just the presentation part.
It does not affect the way your web page will look, but it certainly will make your code more accessible, making it easier to read for the humans as well as for the machines.
For example, A <p> tag states that it is a paragraph, so you can guess the content is gonna be a paragraph for sure.
But on the other side, a <div> tag it can be a navbar, footer, or a hero section. You can't guess this just by looking at it, and that's where the concept of semantic tags comes into place.
You write tags that convey something, such as
<strong><em><nav><header><section>
And a lot more...
But what's the impact of this?
You might have a question that when there is no major effect on the way my page will look to the audience, then why have an extra headache of caring about the tags I use?
Yeah, it won't matter much for a part of your audience, but for people using a screen reader or for someone going through your code and even for the web crawlers, it matters.
Benefits of using semantic tags
- Increases the readability and accessibility of your code
- Helps you rank higher in search engine results
- Easier to maintain in a large codebase
How do you shift to writing Semantic HTML
There are some basic semantic tags that you should start using from now onwards every time you build a new website replacing the old way of enclosing everything inside a div or span.
For example, instead of writing a navbar like this:
<div class="nav"> ...... </div>
Prefer to use this whenever possible
<nav> ..... < /nav>
Seeing at it anyone can tell this is the nav section of the page and similarily you can use other semantic tags like to breaking the code into different parts that will be easier to manage -
<header> .... </header>will contain the header part of your page<footer> .... </footer>the footer of your pageYou can use a
<section>tag to break the content of your page into various sectionsThe
<article>tag whenever you need to write an article or a long paragraphThe
<aside>tag for the additional information alongside the content or as a sidebarThe
<figure>for wrapping your image content, and<figcaption>to write a caption for that image.
Now let's talk about some lesser-known HTML tags that may be helpful to you in various scenarios -
<pre>- pre stands for preformatted text. Sometimes you want to have spaces or line breaks in between your text, which you cant achieve simply using a paragraph tag, so the text inside a pre element preserves both spaces and line breaks and will be displayed exactly as written in the HTML source code.<picture>- This tag is used when you want to have different images for different media queries; it's most commonly used for responsive designs. Instead of having one image that is scaled up or down based on the viewport, multiple images can be put up to fit the browser viewport.<details> & <Summary>- Used to Show/hide content under a collapsible heading without having to use JS. The details tag allows you to put additional details that the user can open and close on demand.
And the summary tag is used with the details to specify a visible heading for the details.
For e.g
<details open>
<summary>Heading</summary>
<p>The content will go here…</p>
</details>
-
<datalist> & <option>- Used to specify a list of predefined options for an input element.So it is used to provide an autocomplete feature to input elements.
For e.g.
<datalist>
<option value="Option 1">
<option value="Option 2">
<option value="Option 3">
<datalist>
-
<dialog>- Used to display a popup or modal window This element makes it easy to create popup dialogs and modals on any web page.
For e.g.
<dialog open>
<p>Content goes here...</p>
</dialog>
<cite> and <q>- the<q>tag is used to specify a quote, and the cite tag defines the title of the work. Often we have to quote something, and simply wrapping the quote inside " " won't give it meaning, so it's best to put the quote inside a<q>tag and the title inside the cite tag.<time>- The time tag is used to define a specific time or date.
Dates and times are formatted differently across the world, and so it becomes difficult to parse through a search engine or email client. So, by enclosing the time information on your page inside a time tag, you make the code machine-readable.
You see how the use of div's and spans is highly reduced, and the code is now much cleaner. That's the power of semantic HTML.
Writing HTML is easy, but the way you structure your code matters much more than the content, in a way that it's more accessible to everyone and maintainable when the size of the codebase increases on your page. So, Semantic HTML isn't just an option, but it's a necessity, and more people should start considering this when building any web project.
daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.
Top comments (6)
Thanks for the article Garv. It is a great starting point in my personal because i am starting a couple of pages and i want to begin with the right foot knowing i will have to handle a page structure by myself.
If you have more useful info about this subject, it will be more that welcome.
Yeah sure, if you want to build any personal project first start with planning, make a basic overview of your pages are going to look, you can use figma here. Then try to break them in component's, the navbar , header, main hero section , about section and like that, add comments at the top of each section and make sure to enclose every content in respective semantic tags and write the css accordingly using the semantic tags then it be easier to go through your code once it's gets large and you can maintain a consistently among your pages
I thought the content of this article was not necessary. Until I sourced some web-pages. The content is of a lot of pages is hilarious. Don't people learn css and html first? 80% of the js constructs can be done in html and css. T I is article not only makes sense, it is highly necessary.
Thanks, a lot of people don't focus much on the html and css part when you can achieve a lot just by using some best practices and maintaining your code in a proper format
I will teach a friend about Semantic HTML.
Share the knowledge as much as you can, let's grow together as a community..
Glad you liked it 😊