Semantic HTML And Why Does it Matter

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 page

• You can use a <section> tag to break the content of your page into various sections

• The <article> tag whenever you need to write an article or a long paragraph

• The <aside> tag for the additional information alongside the content or as a sidebar

• The <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.