[ Home ] - [ Articoli ] - [ Traduzioni ] - [ Altro ] - [ Appunti sui CSS ] - [ L'autore ]
Sei qui: Home > Altro > CSS Articles > Semantic XHTML
In linguistics, semantics is the study of the meanings of words, phrases or systems. According to the web terminology of markup languages, semantic concerns the appropriate use of XHTML elements. To put it simple, elements should be used respecting their semantic role within the document and their intended purpose. To avoid the trivial mistake of using an element for its presentational effect, in this article I'll review the most common XHTML elements by providing a short description of their semantic role and scope.
We can use this element to insert information about the document's author, namely the person who actually created the document. Example:
<address>Gabriele Romanato<br />Italy</address>View the example - View the example as application/xhtml+xml
We should not use this element to insert information about the site's owner or our client. To do this, we should create a specific section that we can format with CSS. For example:
<div id="footer"><p>Site.com - S.p.A</p></div>View the example - View the example as application/xhtml+xml
We can use this element to insert a block-level quotation. The cite attribute (optional) specifies the
quotation's source (an URI). Example:
<blockquote cite="http://www.w3.org/TR/CSS21/"><p>This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1)...</p></blockquote>View the example - View the example as application/xhtml+xml
The blockquote element is mainly used for long quotations. We should not use this element to create
indentations.
We can use this element to insert the source of a quotation or a reference to another resource. Example:
<p>As <cite>Mark Twain</cite> said...</p>View the example - View the example as application/xhtml+xml
We should not use this element to italicize text.
We can use this element to insert fragments of computer code. Example:
<p>A paragraph is marked up with the <code><p></code> tag.</p>View the example - View the example as application/xhtml+xml
We can use this element to insert a definition in a definition list. Example:
<dl><dt>term</dt><dd>definition</dd><dt>term</dt><dd>definition</dd></dl>View the example - View the example as application/xhtml+xml
We should not use this element to create indentations.
We can use this element to mark up revised text. The del element marks up the text that has been deleted
in a previous revision of the document. Example:
<body><del>Deleted text...</del></body>View the example - View the example as application/xhtml+xml
We should not use this element to create a text decoration.
We can use this element to mark up a term that is to be defined. The dfn element, in fact, defines the first
instance of a term in a document. Example:
<p>The <dfn>web</dfn> is a collection of electronic documents.</p>View the example - View the example as application/xhtml+xml
We should not use this element to italicize text.
We can use this element to mark up the definition term in a definition list. Example:
<dl><dt>term</dt><dd>definition</dd><dt>term</dt><dd>definition</dd></dl>View the example - View the example as application/xhtml+xml
We can use this element to add a normal emphasis to text. Example:
<p>I want to emphasize <em>this</em>.</p>View the example - View the example as application/xhtml+xml
We should not use this element to italicize text.
We can use these elements (h1, h2, h3, h4, h5,
h6) to mark up six decreasing levels of importance for headings, where h1 is the most important
level. These elements can be inserted to build the structure of a document by dividing it up into sections and subsections.
Example:
<body><h1>Document's title</h1><h2>Section 1</h2><p>...</p><h3>Subsection 1.1</h3><p>...</p></body>View the example - View the example as application/xhtml+xml
We can use this element to mark up the insertion of new text after a revision. Example:
<body><ins>Text inserted here.</ins></body>View the example - View the example as application/xhtml+xml
We should not use this element to underline text.
We can use this element to mark up keyboard characters. Example:
<p>Press <kbd>Ctrl-C</kbd>.</p>View the example - View the example as application/xhtml+xml
We can use this element to mark up preformatted text. Example:
<body><pre>This is my letter to the worldThat never wrote to me.</pre></body>View the example - View the example as application/xhtml+xml
We should not use this element to mark up code listings, since the handling of overflowing text may cause problems
because of the special formatting used by browsers (white-space: pre). To format code listings, we can use
the following approach.
<ol class="code"><li><code>p {</code></li><li class="indent1"><code>color: green;</code></li><li class="last"><code>}</code></li></ol>View the example - View the example as application/xhtml+xml
By doing so, we gain more control over the single lines of code, respecting at the same time the semantic role of the
code element. Furthermore, when we change the width of the container or resize the browser's window, the overflow of
the lines can be easily avoided.
We can use this element to mark up short inline quotations. The cite attribute (optional) specifies the
quotation's source (an URI). Example:
<p>Ian Hickson says: <q cite="http://ian.hixie.ch/">I am a radical atheist</q>.</p>
View the example - View the example as application/xhtml+xml
We can use this element to mark up the result of a program or script. Example:
<p>The script returns <samp>null</samp>.</p>
View the example - View the example as application/xhtml+xml
We can use this element to add a strong emphasis to text. Example:
<p>I want to emphasize <strong>this</strong>.</p>
View the example - View the example as application/xhtml+xml
We should not use this element to insert bold text.
We can use this element to mark up a subscript. Example:
<p>H<sub>2</sub>O</p>
View the example - View the example as application/xhtml+xml
For more complex formulas we should use MathML.
We can use this element to mark up a superscript. Example:
<p>The 1<sup>st</sup> round.</p>
View the example - View the example as application/xhtml+xml
We can use this element to mark up teletype text. Example:
<p>I can read <tt>Login:</tt> and <tt>Password:</tt> on this window.</p>
View the example - View the example as application/xhtml+xml
We can use this element to mark up a variable or a program argument. Example:
<p><var>sval</var> is a character pointer.</p>
View the example - View the example as application/xhtml+xml
We should not use this element to italicize text.