You want your XHTML to semantic. That means you use tags only where they intent to be used, so that everything has a clear structure and the XHTML gets meaningful. Even without CSS applied. Here are some things you should know:
Use H1 – H6 for headings
For sure you have headings in your document. You can structure everything by headings. But please don’t do the mistake and use just
<div class="heading">TITLE</div>.
For example, use H1 for the first-level heading of your webpage:
<h1>TITLE</h1>
You can apply a design to the element by using CSS (that way you can control font-size and type, you don’t need to use ‘smaller’ elements like H2, H3…)
h1 {
font-size: 12pt;
font-family: arial,sans-serif;
}
No more b and i
The b says just bold and i means italic. That is not semantic XHTML. Instead, use strong (which by default becomes bold) and em (which by default becomes italic). Now everyone knows what you wanted to appear strong or emphasised.
Use paragraphs
You know these p tags. They’re smart. They break text where you want to. So you use them. Arrghh…
Used properly, p elements have to be opened and closed. They’re intented to indicate paragraphs.
This is bad and wrong:
Lorem ipsum dolor sit amet,<p>
consectetuer adipiscing elit.<p>
Cras adipiscing massa id tortor.<p>
The whole paragraphs needs to be surrended by the p element:
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Cras adipiscing massa id tortor.</p>
Did you notice that there’s a beginning and an end? Just be sure you know where your pararaphs start and end.
Lists are actually lists
What a surprise. But why didn’t you use the elements for lists if you knew that?
<p><a href="home.html">Home</a><br>
<a href="about.html">About Us</a><br>
<a href="products.html">Products</a><br>
<a href="services.html">Services</a><br>
<a href="contact.html">Contact Us</a></p>
If you use proper markup, you have control over the single list items (li). You can apply styles to them.
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
Use ul for an unordered list and ol for an ordered list. Read Styling ordered lists to get an insight of what you can do with ol.
Tabular data gets into a table
And nothing else. In case you want to know Why tables for layout is stupid
Read The Elements of Meaningful XHTML for further information.
This article is to be continued.
