HTML5 semantic tags: Why you need to use them

#html #webdev #ux

Its now one year experience with HTML and CSS, but I came to have a clear and better understanding after joining Microverse Bootcamp.
what is semantic Html?
Semantics is the study of language meaning, which is the words we use to communicate and for HTML is the mark up for documents.

for example, a <p> tag indicates a paragraph.

This is semantic because it represents paragraph display in a browser.
On the flip side of this equation, tags like <b> and <i> are not semantic, because they define only how the text should look (bold or ) and do not provide any additional meaning to the markup.
Why semantic in Html? Why is it important that our HTML is semantic? Well, for example, when it comes to finding a page on the internet, search engines ‘see’ the page without styles and the only way to understand which elements are more important is through marking. That is, if we put the name of the page inside a ‘

’ (paragraph) tag, it is likely to be lost in other content and not show up in the search engine results. But if we place it inside a <h1> (header 1) tag, the search engines know that they have to give it more importance. Therefore, search engine optimization is a very good reason to use semantic markup.

This is semantic:

This is not:

Do we need to use Semantic tags: Yes. Use HTML5’s semantic elements
Semantics tags have many benefits beyond pure efficiency and site performance in search engines. They help us build better site structures, and more importantly, they can seriously improve websites’ accessibility.
And if you’re “not too concerned” about your site’s accessibility, consider for a moment that, according to the U.S. Census Bureau, about 1 in 5 people have some form of disability.
HTML5 and semantics
Published in October 2014, the HTML5 standard enjoys almost universal browser support today. All modern browsers support HTML5 — some older browsers like Internet Explorer do not.
It improves and rationalizes the markup available for documents. Plus, it natively handles multimedia and graphical content, with the addition of the new <video>, <audio>, and <canvas> elements, and support for scalable vector graphics (SVGs).
Ok, so what is semantics? And what are semantic elements?
Semantics, put simply, is the study of meanings. For you fans of linguistics, it’s the study of the relationships among signs, signifiers, and signifieds.
So, in web design, a semantic element is an element that has intrinsic meaning and conveys that meaning to both the browser and the developer.
For example, <div> and <span> are non-semantic elements. They tell us nothing about their contents. But <form>, <table>, and <article> are semantic elements: They clearly define their content.
To enrich the semantic content of documents, HTML5 introduced several new page structure elements web developers and designers should know and use.
HTML5 semantic elements you can use in the Web design workflow

When it's this easy to add an HTML5 tag, why wouldn't you?

## HTML5 tags include:

<header> defines a header for the document or a section
<footer> defines a footer for the document or a section
*<nav> defines navigation links in the document
<main> defines the main content of a document
<section> defines a section in the document—the spec defines this as “a thematic grouping of content, typically with a heading," so you can think of it as being like a chapter
<article> defines an article in the document
<aside> defines content aside from the page content
<address> defines the contact information for the author/owner of a document or an article
<figure> defines self-contained content, like illustrations, diagrams, photos, code blocks, etc.

Here’s an example of a fairly simple web page divided up using these elements:
‍An example page using HTML5’s semantic tags from W3Schools.

Other HTML5 semantic elements

The HTML5 spec also includes several other tags with more precise uses. With the exception of <figcaption>, which is image captions, these are also available but rarly used.

<bdi> defines a section of text that might be formatted in a different direction from other text (for instance, a quote in Hebrew or Arabic in an otherwise-English article)
<details> defines additional details that people can view or hide (like a tooltip)
<dialog> defines a dialog box or window
<figcaption> defines the caption for a <figure>
<mark> defines marked or highlighted text
<menuitem> defines a command/menu item that the user can select from a popup menu
<meter> defines a scalar measurement within a known range (a gauge)
<progress> defines the progress of a task
<rp> defines what to show in browsers that do not support ruby annotations
<rt> defines an explanation/pronunciation of characters (for east asian typography)
<ruby> defines a ruby annotation (for east asian typography)
<summary> defines a visible heading for a <details> element
<time> defines a date/time
<wbr> defines a possible line-break

So what are semantic elements good for?

As their name implies, semantic tags are only good for semantic purposes. They’re all block-level elements that will render as expected, regardless of their HTML tag.
They have other important benefits that we’ll list below, but if you read about HTML5 semantic elements on the web, you’ll often find this advice:
Don’t spend too much time setting semantic elements at the detriment of more important tasks.
Which is fair. After all, semantic elements don’t affect your site's performance in search engines, and your clients and website visitors probably won’t notice them.
But once you read about how HTML5 affects accessibility (below), you might rethink your site structures and consider semantic elements an important — if not mandatory — aspect of your web design process.

Semantic elements’ benefits for designers and developers

HTML5’s semantic elements help structure the code we create, making it more readable and easier to maintain.
They help us think about the structure of our dynamic data, and to choose the titles’ hierarchy properly.
They help us differentiate the semantic elements of our markup from the ones we use solely for layout.
And finally, HTML5 semantic elements push us to learn the meanings of HTML elements and better understand our audiences, particularly those who live with disabilities.

Semantic elements’ benefits for accessibility

For sighted users, it’s easy enough to identify the various parts of a website. Headers and footers, menus, and form elements are all immediately, visually apparent.
But for a machine like Google’s spiders or a screen reader, these visual semantics aren’t so obvious.
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.