Semantics is one of the characteristics that distinguish one web platform from another web platform.
And, there is a real problem that needs to be addressed in regards to this. We need HTML mechanisms, which clearly and unambiguously will allow the developers to add more substantial semantics in markup, not pseudo-semantics. This is perhaps one of the most important goals of HTML5.
In HTML4, with the help of CSS, we can create pages with the structure, which was easy-to-understand by users. But were these pages equally understandable for search engines or browsers? For example, how does a search robot distinguish document content from the navigation menu, if they both are marked by the same div elements?
Semantic tag, added to HTML5, allows you to solve this problem and make the website pages more understandable for search engines and browsers.
Here are some basic elements of sectioning the document in HTML5:
• header – content at the upper (primary) part of the page or section
• footer - content at the lower (final) part of the page or section
• section - section webpage
• article - content of external article
• aside - associated Content
• nav - navigation Links
Here is one example.
Previously, the site markup looked like this:
<body>
<div id="header"></div>
<div id="nav_bar"></div>
<div
id="container">
<div
class="section">
<div
class="header"></div>
<p>Some
Text</p>
<div
class="footer"></div>
</div>
<div
class="section">
<div
class="header"></div>
<p>Some
Text</p>
<div
class="footer"></div>
</div>
</div>
<div
id="main_footer"></div>
</body>
Now, with the advent of HTML5, it can be rewritten using the new tags:
<body>
<header></header>
<nav></nav>
<div
id="container">
<section>
<header></header>
<p>Some
Text</p>
<footer></footer>
</section>
<section>
<header></header>
<p>Some
Text</p>
<footer></footer>
</section>
</div>
<footer></footer>
</body>
Now, search engines can correctly identify the types of content, which will surely enhance the quality of SERPs.
What about CSS styles? Well, these new elements also can be styled. But, the problem is that some browsers still don’t know that these new tags are block elements, and thus consider them as inline elements. Therefore, you have to manually indicate in CSS style file, that these tags are the block ones:
header, footer, nav, article {display: block;}
Happy Programming!
See also: Most common CSS and HTML mistakes
