Share your valuable feedback, comments or suggestions on Web Semantics
Web Semantics
Google has become the Big Boss of the search engines, but it was not the first search engine, first search engines came in around 1994 by WebCrawler and Lycos. Fundamentally, search engines are working same then and now, a box provided to the search word or phrase and it lists the number of websites which are related to that. Everybody wants its websites on the top of that list now and for future.
For most of us, future means a lot, where we would be in next 10 years; it is a question of 100 million dollars. Most of the businesses are branded by their websites, and everybody wants it to be future proof, means more friendly to search engines, meaningful to users. For that, with the advancement in technologies, websites need to be also converted. This is the era of HTML5, RDFa Lite, micro-data, and metadata. Not only is the right content important, information about the type of the content is also important with latest standards provided by worldwide web consortium W3C.
HTML5 has come up with new tags like header, footer, article, aside, mark and many more to incorporate more semantic information into the specification. Every HTML5 webpage contains a doctype for HTML
<!DOCTYPE html>
And then, there is <html lang=” en”> tag, en for English, jp for Japanese, fr for French, de for German.
Semantic tags in HTML5 – Web Semantics
- <header>, <footer> & <nav> – A normal webpage is considered to be containing the following common elements: header, navigation and footer. A header often contains the logo, contact information and banner. All the header elements are enclosed in <header> tag.
Below header, there are navigation link elements, which are enclosed in a <nav> tag.
The footer contains the privacy policy, copyright statement, and disclaimers which are enclosed in a <footer> tag. - <article> – tag surround the block of text for the pages, like service or about us, comments and forums posts.
- <section> – tag surrounds the related information of text for grouping purpose.
- <mark> – while emphasizing the part of a text in presentational perspective.
Backward Compatibility Issues with IE
Download html5shiv.zip from https://code.google.com/p/html5shiv/ , extract it on your local computer, from the src folder, copy html5shiv.js to the javascript or js folder of your domain. Insert the following code in the head section of your website to take care of the compatibility issues on IE prior version 9.
<!—[if lt IE 9]>
<script src=”js/html5shiv.js”></script>
<![endif]–>
Earlier versions treat HTML5 new tags as inline tags as opposed to block-level elements and do not apply any styling on them.
Creating Links in HTML5 – Web Semantics
Links in HTML5 are specified as a standard hyperlink using an HREF tag (linking other pages of the website) and exterior links (links to PDFs, office documents, feeds, translations, stylesheets, favicon) according to the purpose of the link.