Semantic elements
Oct 25, 10:05 AM by Alicia Ramirez | Technorati Tags: html,xhtml,semantic html,web standards | Category: CSS-and-HTML
I made a list of some HTML elements that have a very specific semantic purpose, and that a lot of web coders often forget (including me).
If you find yourself using nothing but divs, ps, and h1s, you may want to check these often neglected elements.
Block
<address>-
Used for defining addresses.
For example:
<address>W302-160 Princess St<br/>Winnipeg, MB</address>Output:
W302-160 Princess St
Winnipeg, MB <blockquote>-
For quoting paragraphs.
For example:
<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel.</p><p>Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p></blockquote>Output:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel.
Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
Inline
<abbr>-
For abbreviations. Hover over the abbreviation to see what it stands for.
For example:
<p>Friendly <abbr title="Manitoba">MB</abbr>.</p>Output:
Friendly MB
<acronym>-
For acronyms. Hover over the acronym to see what it stands for.
For example:
<p>I love <acronym title="Cascading Stylesheets">CSS</acronym>! </p>Output:
I love CSS!
<cite>-
For an inline citation or reference to another source.
For example:
<p>Castro, Elizabeth. 2007. <cite>HTML, XHTML & CSS</cite>. Sixth Edition. Peach Pit Press. </p>Output:
Castro, Elizabeth. 2007. HTML, XHTML & CSS. Sixth Edition. Peach Pit Press.
<code>-
For when showing code.
For example:
<p><code>echo 'Hello World!';</code> </p>Output:
echo 'Hello World!'; <del>-
To show deleted text (corrections).
For example:
<p>No accidents in this class in <del>71</del> 0 days. </p>Output:
No accidents in this class in
710 days. <dfn>-
For defining a term.
For example:
<p>A <dfn>computer</dfn> is a machine that computes stuff. </p>Output:
A computer is a machine that computes stuff.
<ins>-
Inserted text (corrections).
For example:
<p> No accidents in this class in <del>71</del> <ins>0</ins> days.</p>Output:
No accidents in this class in
710 days. <kbd>-
Shows text that users must input.
For example:
<p>To change all permissions at once type <kbd>chmod 775 *</kbd>. </p>Output:
To change all permissions at once type chmod 775 *.
<q>-
For short quotations (quotes show by default).
For example:
<p>...and then she said <q>Nah ha!</q>, and then I said <q>No Way!</q>. </p>Output:
...and then she said
Nah ha!
, and then I saidNo Way!
. <samp>-
Examples of computer code or expected input.
For example:
<p>Enter your postal code (<samp>A1A-1A1</samp>):</p>Output:
Enter your postal code (A1A-1A1):
<var>-
Defines a variable.
For example:
<p>Variable <var>$_POST</var> is an array. </p>Output:
Variable $_POST is an array.
The q and dfn tags are ones I particularly like. I’ll have to bookmark this page and come back regularly when I write my posts and articles. Thanks!