HTML5 — Semantic what?
The following articles will be about HTML5 and all the things around it. This article is about the real meaning behind semantics and why we should use it.
And a intro into HTML5 Semantic elements and some explanation and documentation of this mater.
What is the relation and difference between Syntax
and Semantics.
Semantics is related to Syntax, where Syntax is how you say something where Semantics is the meaning behind things.
Let,s take the following sentence as an example:
I Love Code!
The Syntax is about the letters, words and punctuations in the sentence
The Semantics is what the sentence actually means in this case it means you enjoy about and write new code.
If we change it to I
Code! , we changed the syntax of the sentence.
But note that the Semantics stay the same, you still enjoy about and write new code.
So years ago we started to let computers talk to each other with Syntax but we never learned what the words mend. What is the problem’ we have the Internet that lets us talk to each other, we have the web that lets us store and retrieve every document we want on the Internet and we have Search engines that can find every web page we want.
If we could make computers recognize what’s in a web page, they could learn what we are interested in. If they know that they can help us get what we need. This is the hole meaning behind a semantic web. Making data human and machine readable.
Today the Internet exists out of documents but with semantics we get a web of things, and we can teach computers how things are related to each other. There are some promising technologies for embedding semantics into HTML pages like Microformats and RDFA but more on that in a later article.
The possibilities this can create are endless, if a computer knows what a song is, then he can let you search a page by song instead of the name or author. Google just announced the recipe search engine, this is build because people adding microdata that tels the search engine i am a
recipe. Search engines would be more accurate then today, because engines are not only depending on keywords given by the developer.
So semantics help computers understand to help us get what we want
HTML5 Semantic Elements
After google did a research a few years back they discovered that most of the naming was the same across developers. You find the following element almost on every page on the web
Header
Footer
Sidebar
Main
Navigation
So now there are some new elements for this. Remember that HTML is all about structure of your content not style.
First thing to do is change the Doctype of the html document, and be surprised how short and simple it is you can even remember it without going to the W3C site to choose what you need.
For more details about how and why check out this article and this one
There are several new elements defined in HTML5 which are block-level elements. But when you want them to work in old browsers you have to do a little more. Because the old browsers don’t recognize the new elements so they will implement it as a node without children.
But some clever guy’s found a way around these problems.
First we have to make dummy elements with Javascript(ECMAscript) before you use it in your page, IE will magically recognize the element and let you style it with CSS. No need to insert it into the DOM, just create it. here is a example from Remy Sharp, a loop over all the new elements.
and
The section element represents a generic document or application section. A
section, in this context, is a thematic grouping of content, typically with a
heading. Examples of sections would be chapters, the tabbed pages in a
tabbed dialog box, or the numbered sections of a thesis. A Web site’s home
page could be split into sections for an introduction, news items, contact
information.
Comments
Post a Comment