One of the cornerstones of web standards is semantics. For those confused with this term, semantics is meaning of the word, sentence or in our case – a piece of code. Producing meaningful code brings you closer to the idea of web standards.

Understanding Semantics

To get familiar with the term “semantics” I will give you an example I’ve found on the web (but can’t remember where so I can’t link to it). The phrase I love New York has pretty straight forward meaning. If you replace the word love with one of those heart symbols the sentence will change for sure but the meaning will not. So sentences I love New York and I (heart) New York have the same semantic value.

Validation and Semantics

Although both are very important when we talk about web standards, I honestly believe that having semantically correct code is more important then have a valid code, at least up to a level where you don’t make huge errors in the code’s structure. I mean, I’d rather see you using proper heading structure and miss out to put rows and cols attributes on textarea then the other way around. People get so preoccupied with validation that they forget that it’s only a one step towards web standards.

Talking HTML properly

There are many tags in HTML and each has it’s meaning or purpose. First step towards learning to talk HTML is to get familiar with all these tags. Just as learning a foreign language, how many different words and phrases you know will define how eloquent you can be. I said can be because knowing all these tags is not guarantee by itself.

Knowing and understanding all of the tags is just the first step. Many of these tags are actually abbreviations or acronyms of the full words. Knowing what they stand for will help you in understanding and using them properly. Some of the tags mean:

• p – paragraph
• em – emphasis
• div – division
• td – table data
• th – table header

The second and equally important step is to use them properly. In order to do that, what we have to understand the content and write a markup that will follow it’s meaning.

How exactly can markup “follow” the content?

First example I would point out is proper heading structure. This is not important just form semantics point of view, it also defines a structure of the document. So, if something is meant to be a heading use:

<h2>This is my fancy title</h2>

and don’t use

<div class="largeTitle">This is my fancy title</div>

because you strip away it’s meaning – you’re ruining the semantics. Div defines a logical division of a content and it’s meant for structure so this would not apply even if this wasn’t a title.

So use divs for structuring a document only and not for text formatting.

Separate text blocks into paragraphs using p tag, do not use repetitive br to add spacing between text blocks.

For lists use one of 3 list elements, ordered, unordered or definition list. If you have doubts about using ordered or unordered lists see have in mind that ordered list have a ascending order (1,2,3… etc). So if you’re displaying most recent list item (descending order) at the top then the ordered list is not the best solution.

Use tables. Don’t avoid tables all together. I saw a calendar sample marked up as an unordered list, not the best choice. Calendars are not linear therefore can’t be displayed as a list.

One step further

You can also add more semantic value to your document by adding certain HTML elements that you may overlook at first. For instance, if you are talking about CSS and HTML you know that these are abbreviations, but you can let your browser know that too. The sentence:

<p>I am trying to get to become a better CSS coder.</p> 

could look better and mean much more if you should use:

<p>I am trying to get to become a better <abbr title=”Cascading Style Sheets”>CSS</abbr> coder.</p>

Another example:

<p>To style that line properly use class attribute like this class=”alt”. </p>

vs

<p>To style that line properly use class attribute like this <code>class=”alt”</code>. </p>

Speak it

Just as any other language HTML takes time and practice to learn and “speak” properly. So, take it one step at the time. Don’t feel bad about “missing the word” here and there, more important is that you understand the language and that you are familiar with the idea of web standards and what web semantics stand for.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (25 Comments)

1. Gjergji Kokushta
   June 26, 2009

   Nice article! Good advice on how to write and "speak" HTML the right way.

2. Benjamin Alijagić
   June 26, 2009

   Nice post!

3. Jasmin Halkić
   June 26, 2009

   Awesome.

4. WebTurist
   June 26, 2009

   i like this "I love New York and I (heart) New York". good post. regards.

5. Andris
   June 26, 2009

   Nice post. I think it's important to "speak" semantic HTML. Just on point of criticism: proofread that post and extinct those spelling mistakes like <cite>This is not important just form semantics point of view,...</cite>

6. Jason Grant
   June 26, 2009

   I cover these kinds of topics into great depth too. Semantics are incredibly important for SEO, accessibiity, usability and general code reusability.

7. Anthony Barns
   June 26, 2009

   This is definitely an article I'll have to show some co-workers. Good read.

8. tapevil
   June 26, 2009

   It's very useful post konwing the basic of HTML

9. Cameron
   June 26, 2009

   Hey! Nice article :) Regarding the calendar/list example - I know it's just an example, but why would table be better (because of the days of the week = th, calendar days = td, or ? I mean, theoretically, dates are an ordered (or unordered) list of 'days' so it could work as a list. I understand that tables make for easier styling of calendar content, but wondering on reasoning behind using tables over lists in this context. Ta :) cam

10. cssglobe
    June 26, 2009

    @Cameron: Thanks for the comment. With calendar we don't just have a linear list of dates, we also have a relations to days of the week. So if you want to see all Sundays with one glance you need it displayed as table.

11. Brad
    June 26, 2009

    Fantastic article. I think another commonly overlooked element is the address tag. Most every site has a contact page so its one that consistently pops up and many times is lacking.b

12. Ivan Nikolic
    June 27, 2009

    Nice article, Alen. Speaking of abbreviations, what I like to do is mark up asterisk used to show required form fields into abbr tag and give it title attribute so the screen readers can easily interpret the meaning of that character—practice I don’t see used very often.

13. cssglobe
    June 27, 2009

    @Ivan: hmm, not too sure about the abbreviation for the asterisk since that is technically not an abbreviation of anything. You could easily put it inside em to emphasize it's meaning and put title to add more info.

14. cssglobe
    June 27, 2009

    @Brad: I agree with you and I do use it for contact pages.

15. Dainis Graveris
    June 28, 2009

    I remember when I got in touch with HTML at first I used w3schools, but now it seems it's even too easy learn this language, so many good tips, support e.t.c. This article just proves my point here:) thanks.

16. NotTheRealGrammarNazi
    July 4, 2009

    Please fix the sentence, "because you strip away it's meaning " to "because you strip away its meaning". It breaks my heart reading such a informative article to come across that single line and just get pissed off! Because you strip away it is meaning. Because you strip away it is meaning. Because you strip away it is meaning. AARRGHHH!

17. NotTheRealGrammarNazi
    July 4, 2009

    Ahm, I meant "an" informative article. Tehe! :D

18. Internetagentur
    July 14, 2009

    Nice article. Let's speak HTML :-)

19. çelik çati
    July 15, 2009

    Thanks you too much dude, i am waiting to it's new version now!

20. oyun
    July 21, 2009

    I will follow u.

21. Jake Rocheleau
    July 22, 2009

    This is an awesome article for beginners trying to learn how HTML works, what a markup language is, and just grasping the basic concepts. Really nice way to introduce the concepts though, easy to follow and simple

22. VA Creative
    July 25, 2009

    Nice writeup for teaching the basics of structure. I think when I was starting out I made some of those "div" mistakes, where I would just style anything that existed with a div class. Now I've grown up a bit, but it's nice to get kids started on the right foot these days.

23. Andreas
    July 25, 2009

    The Basics of html are enormous important. Even in times of xhtml, dhtml and web2.0..

24. chris
    July 26, 2009

    I wanna know I will not be shy.hmm im a beginner by the way :). can i ask? how do i add spacing between text blocks without using <br/> because I usually do that. thanks

25. Single Maria
    July 26, 2009

    Thanks for the post. That is what I was looking for. I am a cub here, I know too little things about HTML language. I know that its very important to know it, and your article helped me a lot. Thanks again)

Sorry, the comment form is closed at this time.