Semantic HTML is really just normal HTML; but HTML which takes advantage of
built-in features of HTML to add semantics -- to add meaning.
What are Semantics
"Semantics" is just a fancy way of saying "meaning". When you ask,
what are the semantics of this? You are asking,
what does this mean? (Using the word "semantics" just sounds better to some people.)
The purpose of semantic HTML is to put meaing into HTML. To give a series of characters structure.
Adding semantics to HTML is generally done to make it so machines (like your web browser, web crawlers, search engines, and web caches) can understand what the author of the webpage is saying.
A human can usually understand what another human is saying fairly easy, based on context, culture, and shared knowledge. (In this day and age) machines cannot yet do this very well, if at all. Machines need some help to understand what you are saying.
Semantic HTML is a way to provide this help to machines.
Understanding Semantic HTML
With HTML, there are many ways to embed semantics into your document; many ways to embed meaning into your document.
Some HTML Elements have intrinsic meanings.
For example, HTML has a special element for making paragraphs:
HTML has a set of element for a making quote:
And HTML has a pair of elements for revision control:
Obviously there are alot more semantically endowed elements in HTML. These and other HTML elements are one of the technologies that let machines understand what you are saying.
Understanding Semantic HTML Better
So what happens when there is not an HTML element that can express the semantics you want to express‽ What do you do then‽
HTML provides a special facility for adding more semantics. It is the HTML
Not Every Semantic HTML is a Microformat
One mistake that is common today is for people to call Semantic HTML: Microformats.
However, Micoformats are basically just Semantic HTML with a specification. And one
does NOT need a Microformat specification to use or create new Semantic HTML.
Many HTML elements have inherent meaning. For example, the <p>...</p> element denotes
a paragraph, the <code>...</code> denotes a computer code, and the
<blockquote>...</blockquote> denotes a quotation. Meaning can be added to HTML beyond these
HTML can also have meaning added with rel attribute, the rev attribute, and the class attribute.
One of the hurdles web developers have to get over when first approaching
Semantic HTML is that the HTML class attribute is NOT just for appling
CSS stylesheets. The class attribute is also for applying semantics.