Semantic Markup
In short, semantic markup is using markup to describe what it contains.
For example, using a <p>
to markup a paragraph of text or
using a <ul>
(and <li>
elements) to
markup a list of navigational links. HTML 4.01 and XHTML 1.0 are
semantically the same. We feel strongly that semantically correct markup is
more important than many people seem to think, so we encourage you to read some
of the articles listed below under Related Links.
A <table>
should be used to mark up tabular data, which
consists of rows and columns. Using <table>
s to layout pages
was a hack to be able to layout pages before CSS was widely supported. Now that
browsers have adequate support for CSS2, we can use correct markup and use CSS
to style it how we want. However, due to IE's lack of support for some things,
including display:table
and display:table-cell
, there
are still some things that we can't do cross-browser with CSS alone, so we must
resort to using a <table>
or JavaScript to maintain
cross-browser compatibility for certain design elements.
<div>
s and <span>
s
Both are generic elements; they don't have semantic meaning. They should be used when no element with the required meaning to mark up the given content exists.
<div>
s are block-level. They are used to group elements.
Anything that can go in <body>
can go in a <div>
. Inline elements can also be placed inside a <div>
but, in general, it's best not to. <span>
s are inline elements; they are used to give a special
effect to some text. They may only contain text and other inline elements.
Common Semantic Errors
- Using more than one
<h1>
on a page. If you have multiple topics that need more than one, then it might be a good idea to split the contents of the page across multiple pages. - Using header elements to increase the font size of text and/or make it bold.
- Using
<br>
(line breaks) to add white space between elements. You should use CSS properties likemargin
,padding
, and/orborder
to do that. - Embedding what is semantically a list in a paragraph with
<br>
elements to put each item on it's own line. For example:
should be marked up something like this:<p>I went to the store and bought:<br> - 5 apples<br> - a bunch of bananas<br> - a crate of clementines</p>
<p>I went to the store and bought</p> <ul> <li>5 apples</li> <li>a bunch of bananas</li> <li>a crate of clementines</li> </ul>
Related Links:
- Semantic code: What? Why? How?
- What is ‘semantic mark-up’?
- Guide to Semantic Mark-up
- Semantic HTML and Search Engine Optimization
- The Meaning of Semantics (Take I)
- Semantic code
- Creating Semantic Structure
- Semantics, HTML, XHTML, and Structure
- Standards don't necessarily have anything to do with being semantically correct
- Semantic Coding
- Semantics and design
- An urban legend bites the dust — divs do not replace tables
- What is divitis?
- What is semantic markup and why should you care?