CSS Zibaldone

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.

Table of contents

address

We can use this element to insert information about the document's author, namely the person who actually created the document. Example:

Listing 1. The address element

  1. <address>Gabriele Romanato<br />
  2. Italy
  3. </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:

Listing 2. A normal footer

  1. <div id="footer">
  2. <p>Site.com - S.p.A</p>
  3. </div>

View the example - View the example as application/xhtml+xml

blockquote

We can use this element to insert a block-level quotation. The cite attribute (optional) specifies the quotation's source (an URI). Example:

Listing 3. The blockquote element

  1. <blockquote cite="http://www.w3.org/TR/CSS21/">
  2. <p>This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1)...</p>
  3. </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.

cite

We can use this element to insert the source of a quotation or a reference to another resource. Example:

Listing 4. The cite element

  1. <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.

code

We can use this element to insert fragments of computer code. Example:

Listing 5. The code element

  1. <p>A paragraph is marked up with the <code>&lt;p&gt;</code> tag.</p>

View the example - View the example as application/xhtml+xml

dd

We can use this element to insert a definition in a definition list. Example:

Listing 6. The dd element

  1. <dl>
  2. <dt>term</dt>
  3. <dd>definition</dd>
  4. <dt>term</dt>
  5. <dd>definition</dd>
  6. </dl>

View the example - View the example as application/xhtml+xml

We should not use this element to create indentations.

del

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:

Listing 7. The del element

  1. <body>
  2. <del>Deleted text...</del>
  3. </body>

View the example - View the example as application/xhtml+xml

We should not use this element to create a text decoration.

dfn

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:

Listing 8. The dfn element

  1. <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.

dt

We can use this element to mark up the definition term in a definition list. Example:

Listing 9. The dt element

  1. <dl>
  2. <dt>term</dt>
  3. <dd>definition</dd>
  4. <dt>term</dt>
  5. <dd>definition</dd>
  6. </dl>

View the example - View the example as application/xhtml+xml

em

We can use this element to add a normal emphasis to text. Example:

Listing 10. The em element

  1. <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.

h1-h6

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:

Listing 11. The h1-h6 elements

  1. <body>
  2. <h1>Document's title</h1>
  3. <h2>Section 1</h2>
  4. <p>...</p>
  5. <h3>Subsection 1.1</h3>
  6. <p>...</p>
  7. </body>

View the example - View the example as application/xhtml+xml

ins

We can use this element to mark up the insertion of new text after a revision. Example:

Listing 12. The ins element

  1. <body>
  2. <ins>Text inserted here.</ins>
  3. </body>

View the example - View the example as application/xhtml+xml

We should not use this element to underline text.

kbd

We can use this element to mark up keyboard characters. Example:

Listing 13. The kbd element

  1. <p>Press <kbd>Ctrl-C</kbd>.</p>

View the example - View the example as application/xhtml+xml

pre

We can use this element to mark up preformatted text. Example:

Listing 14. The pre element

  1. <body>
  2. <pre>This is my letter to the world
  3. That never wrote to me.
  4. </pre>
  5. </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.

Listing 15. Proposed markup for code listings

  1. <ol class="code">
  2. <li><code>p {</code></li>
  3. <li class="indent1"><code>color: green;</code></li>
  4. <li class="last"><code>}</code></li>
  5. </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.

q

We can use this element to mark up short inline quotations. The cite attribute (optional) specifies the quotation's source (an URI). Example:

Listing 16. The q element

  1. <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

samp

We can use this element to mark up the result of a program or script. Example:

Listing 17. The samp element

  1. <p>The script returns <samp>null</samp>.</p>

View the example - View the example as application/xhtml+xml

strong

We can use this element to add a strong emphasis to text. Example:

Listing 18. The strong element

  1. <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.

sub

We can use this element to mark up a subscript. Example:

Listing 19. The sub element

  1. <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.

sup

We can use this element to mark up a superscript. Example:

Listing 20. The sup element

  1. <p>The 1<sup>st</sup> round.</p>

View the example - View the example as application/xhtml+xml

tt

We can use this element to mark up teletype text. Example:

Listing 21. The tt element

  1. <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

var

We can use this element to mark up a variable or a program argument. Example:

Listing 22. The var element

  1. <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.

Download examples

examples.zip

Risorse interne

Altro

Risorse esterne

Post, demo, test

Feed dal blog

onwebdev

Gabriele Romanato