Idevs

When building a website it is sometimes all too easy to forget that the main thing you are doing is marking up text, many developers use heading and paragraph tags but with the rise of CSS many developers forget about the semantic elements of markup.

Semantic tags are used to markup text that has a meaning other than its content. For example, if I enclose text in the <code> tag it demonstrates that that text is a example of source code for a computer program.

This not only has an effect on the display of the text, it also informs search spiders and user agents that the piece of text you have marked up contains computer code, this means that they could perform other actions on it e.g. place it in a special index for programmers or inform the user that the site contains code snippets, this could be a useful feature if the browser was built into an IDE.

Here is a list of inline semantic tags that may be useful to you when marking up documents in the future:

• cite - Demarcate a source citation
• code - Demarcate a code snippet
• dfn - Indicate a term is defined in the current location
• em - Demarcate that text should be emphasised
• kbd - Indicate keyboard input
• samp - Indicate that the contents reflect sample output, as from software
• strong - Indicate that text should have a strong emphasis
• sub - Indicate text should be rendered as subscript
• sup - Indicate text should be rendered as superscript
• var - Demarcate text as a variable name

I hope the above list will help you see how you can use markup to convey not only the text but also its meaning

This entry was posted on Friday, July 27th, 2007 at 12:00 am and is filed under . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.