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.
Gjergji Kokushta 26 Jun, 2009
Benjamin Alijagić 26 Jun, 2009
Jasmin Halkić 26 Jun, 2009
WebTurist 26 Jun, 2009
good post.
regards.
Andris 26 Jun, 2009
<cite>This is not important just form semantics point of view,...</cite>
Jason Grant 26 Jun, 2009
Anthony Barns 26 Jun, 2009
Good read.
tapevil 26 Jun, 2009
Cameron 26 Jun, 2009
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
cssglobe 26 Jun, 2009
Brad 26 Jun, 2009
Ivan Nikolic 27 Jun, 2009
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.
cssglobe 27 Jun, 2009
cssglobe 27 Jun, 2009
Dainis Graveris 28 Jun, 2009
NotTheRealGrammarNazi 4 Jul, 2009
Because you strip away it is meaning.
Because you strip away it is meaning.
Because you strip away it is meaning.
AARRGHHH!
NotTheRealGrammarNazi 4 Jul, 2009
Internetagentur 14 Jul, 2009
çelik çati 15 Jul, 2009
oyun 21 Jul, 2009
Jake Rocheleau 22 Jul, 2009
VA Creative 25 Jul, 2009
Andreas 25 Jul, 2009
chris 26 Jul, 2009
can i ask? how do i add spacing between text blocks without using <br/> because I usually do that. thanks
Single Maria 26 Jul, 2009