The Untold Story Of Semantic Web

John, a freshman,with umpteen ideas in his mind and a very good web development knowledge,built on resources from the web, seems like lost when it comes to attracting the traffic to his web app.

Sounds familiar?

This is the case for most of the self taught web developers.But why so?
Though there are zillion of things behind a weak traffic to your most promising web app,the most important is ignoring the Semantics.

HTML Semantics

“So what exactly is semantics and how does it affect the traffic to my web app”, asked John.

John did a simple mistake. He studied every thing,did everything but forgot to do it semantically. He forgot the very basic idea of why a particular thing(read tags in case of HTML) exists.Let’s take it straight to web semantics and try to understand.

What we see during web development is what we are trying to achieve but then if it was that simple then semantics would never be needed. Since there is a language that is understood by people and another language that is understood by machines or web browsers in this case,we needed to be clear on that part.The same applies to the HTML elements that a web developer uses in his everyday life.

For example : the <time> tag.

Why was it needed in the first place? What it is, that we should write the time within the <time> tag.

<p>We open at <time>10:00</time> every morning.</p> is valid and semantic,
while
<p>We open at 10:00 every morning.</p> is valid but not semantic. Why?

When the web was made,the emphasis was on presenting the content on the webpage rather than the actual meaning of a particular tag. With advancement people also looked into it.

In general, Semantics is the meaning of words and phrases in a particular context. The context here is web development and how the web is interpreted on both the side- the Human side and the machine side(browsers). So if i say, <time> tag then a human must know that we are talking about time and at the same time the browser will be able to verify it as time. This comes in really handy while doing text search.

A semantic element clearly describes its meaning to both the browser and the developer — w3schools

The tags give proper know how about what is to be presented and what it means in human as well as machine context. A <p> tag can clearly tell a human that it is paragraph(as humans we have read English and we know how a paragraph looks like) and at the same time the browser knows how to represent that paragraph(otherwise its normal text for a browser)in the web page.

Web without Semantics looks different from different Views

Semantics can make your and a user’s experience more enriching as it follows a certain standard and provides a means of communication with the search engines very well.

Following are few semantic tags

• <aside>
• <article>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

For practice,try to understand the semantics of <code> tag.

Semantic HTML Tags