A Primer on Semantic Tags and How To Use Them Properly

iHTML and CSS are like a web development Savior, the only opportunity available for website development

The common purpose of writing HTML codes is to open them inside the web browser to enjoy the result, which means a web designers' job is to display things on the web browser and make them look good for users.

So what do you think? As a website user, it is just fun to use good looking things on the web browser, but is that the case with a web designer? Yes maybe, but a web designer must go beyond that, a web designer thinks in terms of code that can interact with the web browser in the best efficient way possible.

So the important principle as a developer or a web designer is the idea of using HTML elements to indicate what they actually, not only how they appear, so the reason why semantic HTML tags are the most important is that they are telling the browser, a computer, a smartphone about the meaning of the content of the website.

WHY SHOULD YOU CARE

A web developer's duty is to write code that is more efficient, and most importantly that a system like a web browser understands just like its native language, but semantic tags go beyond that! we are going to elaborate some key point that can explain how important semantic tags are:

1. SEO
   these days we depend on the search engines, the most important aspect of organic SEO is writing valuable content. Utilizing and understanding the semantic tags helps to ensure that the valuable content of a web reaches a target and that means more audience for example tag <h1> is given more importance then <p>, this aspect is highly important not only for a developer but also web users.
   
2. Accessibility
   Because semantic HTML uses elements for their given purpose, it’s easier for both people and web browser and also the machine to read and understand it. That aspect helps people with disabilities to benefits the content of the web by allowing to customize their experiences that means semantics allow other tools and devices to serve properly web content.
   
3. Meaningful, well structured web development and maintenance
   as we explained semantic tags is like a native language to build an HTML document that is understandable for browsers and devices, so using semantic in code is to ensure that your web content will be useful and visible, writing semantic tag in code is ensuring that a developer is building something that has a real meaning, and meaningful website.
   

USAGE

As a web developer we are all familiar to <div> and <span> these tools are powerful tools that can help structure website contents but honestly to tags don't tell anything about the content and the meaning of the element to a browser or a device, even if they are useful and fine to use in most of the case, if a semantic tag is available and appropriate for a specific use, use it before the non-semantic tag.
We are going to look at the most important of them and elaborate a little bit

The commonly used

Documents structures
We are going to elaborate semantic tags that can help structure a document without using tags like

<div class="header">

or

<div class="nav">

because those tags don't tell anything to the browser here is some:

<nav></nav>

: an element that contains site navigation or menu it is mostly place up in the header or inside the header.

<header></header>

: an element that mostly contains the site logo, heading elements, or navigation

<main></main>

: an element that contains all the content that is unique to a web page.

<footer></footer>

: an element that contain a page footer

<section></section>

: an element that is used to mark sections of a web page

<article></article>

: an element is used to structure block of a content.

<ul>

,

<li>

: this element are used for listing elements

Textual

<em>:

This tag makes an element italic

<h1>

,

<h2>

,

<h3>

,

<h4>

,

<h5>

,

<h6>

: this tag are used in headings of a text from 1 to 6 heading

<strong>

: This tag makes an element strong.

<mark>

: is used to highlights a text

Media

<video>

: is to display video on the page

<audio>

: to add a browser audio player

This HTML tags are mostly used or well known by developers but there others that are that are less used.

Less used

<aside>

: Defines content aside on the web page contents

<details>

: to show details that user can view or hide
<figure>: to show illustrations, photos, diagrams

<picture>

: This element is used to allow a web browser to pick the best image from available options and the list continue, if you are interested this resources can help you find more, the important is to be aware how semantic tags are the most valuable way to build a tangible website.

BONUS

As we have seen we have to do our best to use semantic tags, but this article is not the best option to just ensure you have learned everything needed to start using them in future projects, the best option available is to start using them as possible, this options I am going to share are the best to consider plus your commitment:

w3shools, freeCodeCamp, YouTube: The Net Ninja but we have to consider that this option is for developers, you must have some HTML and CSS or just front-end developers that want to learn more,

these links are not considered, to begin with.

Remember that a real software developer is a long lifetime learner