What is Semantic HTML

What is Semantic HTML‽....

That's something you may have asked yourself already. It is something that you may have heard other people talk and write about.

But most people don't really know what it is. It seems to be this mysterious technology that only the Web development gurus actually know anything about.

Semantic HTML is actually simpler than you think. And if you've written HTML youself, then you've probably created Semantic HTML without even know it. (Although you may have not used it to its full potential.)

This article explains what Semantic HTML is so that a beginner, with minimal HTML experience, can understand it.

Semantic HTML is not RDF

Just to say it explicitly, Semantic HTML is not RDF.

(If you do not know what RDF is, don't worry. You don't need it for this. I'm just trying to get rid of the confusion that some readers of this article might be having.)

When some people hear the phrase "Semantic HTML", they think about something called the "Semantic Web". And (technically) Semantic HTML is part of the semantic web.

However... just to avoid confusion I should say... when many many people talk about the Semantic Web, they are talking about RDF (and not Semantic HTML at all).

I am NOT talking about RDF. I'm talking about a part of the semantic web that has nothing to do with RDF... just Semantic HTML.

If you have never heard of the Semantic Web or RDF before, don't worry. They are not important for this article. (The important point was to not confuse Semantic HTML with RDF.)

Semantic HTML is HTML

The first thing to realize is that Semantic HTML is just regular HTML.

You're just making use of features that were always there. (In fact, you might already be using them and not even know you are writing Semantic HTML.)

What are Semantics

And BTW... "semantics" is just a fancy word for "meaning". If I were to ask, "what are the semantics of this?"... I would be asking, "what does this mean?"

Familiar Semantic HTML Examples

So.... here's some Semantic HTML you are already probably familiar with.

You can specify that a thing is a paragraph with the <p> element. So for example...

        This is a paragraph.  Simple, eh?!

Anyone who has ever written something like that has written Semantic HTML.

Also, if you are quoting something, you can use the <blockquote> element or the <q> element. For example...

        John said, <q>hello Jane</q>.

If you want to add a bit more semantics, you could specify where John said that. Imagine if he said it online, maybe in a chat session or something, and there is a log of it at "http://example.com/chatlog/123", then we could write...

        John said, <q cite="http://example.com/chatlog/123">hello Jane</q>.

There are ALOT more HTML elements that give all sorts of semantics. I won't enumerate them all, but hopefully that gives you some idea of it.

HTML Classes

So.... having said that... what if there is no HTML element to express what you are trying to say‽ What then‽

Well, HTML has a way of dealing with this.

HTML provides the "class" attribute for this. For example, what if we wanted an HTML element to specify an "article". There's no <article> element. So we could do something like this...

    <div class="article">
        Blah blah blah.

(<div> and <span> are kind of "blank" elements. They're useful when you want to kind of to make your own HTML elements.)

Now... some people might be thinking, "wait... the class attribute is only for styling". I used to think that myself. Well, it is true that the "class" attribute can be used for styling. BUT... it can be used for adding semantics too -- for adding meaning too. It's in the HTML spec!... and many people use it that way. (That's part of what the Microformats thing is all about.)

And here's an example that appears on alot of webpages...

    <div class="footer">
        Blah blah blah.

Many many many people on the web specify the "footer" like that (because there is no <footer> element).

Putting It Together

Here's another example that's a bit more complex.

What if I wanted an element that I could use to specify PHP code. Well, there's the <code> element. But that doesn't say it is PHP code.

However, I could do something like the following...

    <code class="php">$x = file_get_contents("http://example.com/it.html");</code>

Here I used an existing non-blank HTML element and added a class name to it to specify the semantics I wanted.

That's the Basics

That's the basics of Semantic HTML. It's just about adding "meaning" to HTML.