[Semantic Web] and [Semantic Tag]

What is "Semantic Web"?

The Semantic Web (widely known as Web 3.0) is an extension of the World Wide Web through standards set by the World Wide Web Consortium (W3C).
The goal of the Semantic Web is to make Internet data machine-readable.
According to the W3C, "The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries."

The Semantic Web is therefore regarded as an integrator across different content and information applications and systems.

An example of a tag that would be used in a non-semantic web page:

<item>blog</item>

Encoding similar information in a semantic web page might look like this:

<item rdf:about="https://example.org/semantic-web/">Semantic Web</item>

Tim Berners-Lee calls the resulting network of Linked Data the Giant Global Graph, in contrast to the HTML-based World Wide Web. Berners-Lee posits that if the past was document sharing, the future is data sharing. His answer to the question of "how" provides three points of instruction. One, a URL should point to the data. Two, anyone accessing the URL should get data back. Three, relationships in the data should point to additional URLs with data.

What is "Semantic Tag"?

The word semantic is anything related to meaning. Following this definition, An HTML semantic element is an element with some type of meaning. An example of semantic elements are

and .These elements are semantic because they define some specific portion of the webpage. Tags like state the main content of a webpage while a tag defines a form.
With these tags, we no longer need to write elements like but instead can just use the appropriate semantics tag of .This allows you as a developer to write cleaner code as instead of looking through a multitude of div tags trying to find one specific one all you have to do is find the one tag.
Just look at the two lists below. Isn't the second one using semantic markups a lot easier to read? These are the benefit of using semantic elements in your code. Easier Readability.

1. without Semantic Tags

<div id="main">
  <div id="nav">
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  <div/>
  <div id="article">
    <h1 id="title">Title</h1>
    <p>Lorem Ipsum</p>
  </div>
</div>

2. with Semantic Tags below

<main>
  <nav>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  <nav/>
  <article>
    <h1 id="title">Title</h1>
    <p>Lorem Ipsum</p>
  </article>
</main>

Why should we use HTML Semantic element?

HTML semantic tags have a lot more benefits than just allowing you as a developer to write cleaner and more readable code. Using semantic elements allows greater accessibility to your sites. This accessibility comes in the form of assistive technologies, like screen readers, and search engines having the ability to better understand the content of your website.

Semantic Tags also have the benefits of allowing developers to write more consistent code. Two developers might have different ways of writing a navbar. For example, one might create a class called nav and attach it to a div like: <div class=” nav”> while another developer might instead use an id called navbar like this: