Go to content Go to navigation Go to search

Customize:a a a

Semantic elements

Oct 25, 10:05 AM by Alicia Ramirez | Technorati Tags: ,,, | 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 &amp; 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 71 0 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 71 0 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 said No 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.


Comments

  1. Rachel DuBois | Feb 1, 06:43 PM | #

    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!

Leave a Comment

Name

E-mail

http://

Message

Textile Help

Tell a Friend

Send a link to this page to a friend. All fields are required. No email addresses are saved, sold or used for any other purpose than to send this email.

captcha

Enter code from left: