HTML5 now emphasize more on semantics – by introducing new elements

Semantics is the study of relationships between words and how we construct meaning out of them. HTML5 semantic elements do the same job. Sounds confusing!!!

Well its not. Semantics is the branch of linguistics and logic concerned with meaning. Specially while programming and that too in case of web technologies where search engines and new evolving technologies are all the time trying to make more sense out of data and web pages, HTML semantic tags can help to achieve that easily.

With HTML5 the web standards have evolved to improve HTML code to represent the idea of using HTML semantic for what they are rather than how they may appear in the browser by default. This is known as using Semantic HTML in the righht sense.

Its not that prior to HTML5 there were no semantic elements. For example tag <p> indicates  that text enclosed within <p> and </P> tag is paragraph. This is both semantic and presentable because people know what paragraphs are and browsers know how to display them.But tags for example <div> and <span> are not semantic elements. It is not meaningful at its first place. So HTML5 has introduced new semantic tags that should be used rather than non-semantic elements. Now this is something to do with recommendation, other wise HTML5 is backward compatible and non-recommended tags for example <b>, <i>,<div> or <span> etc. can still be used if you choose to.

List of few of the newly added semantic elements in HTML5 are:

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

It is recommended that you should use these newly added tags in HTML5, instead of old and obsolete tags for ex. <DIV< and <Span> This is simply because these newly added tags have been optimized and better understood by modern browsers and these tags are also best for search engine optimization (SEO).

You don’t need to worry about existing websites or webpages, they are just going to work fine, as I said HTML5 s backwards compatible. For new developments, stick to these newly added HTML5 semantic elements.

So Let’s keep the good work going.

Keep playing with HTML and CSS. Have Fun!!!

Pawan Arora AdministratorKeymaster
Founder , Edukers
Teaching, Coding and Sharing is his passion. A true mentor and motivator. C/C++, Python, Java, Web Technologies (html5 / CSS/ Javascript/ JQuery,Bootstrap, nodeJS ,PHP etc.) and a WordPress enthusiast with more than two decades of experience.
follow me