Forgotten Tags
When coding its important to make your site as semantic as possible, using the correct elements to give your code as much meaning as possible. So while some may of gotten over their Divitis, the question to ask is are you really using the right tags for your elements?
Below are some tags that often get forgotten about while coding, and could help to add that extra bit of semantic meaning to a website.
<abbr>
This is uses to markup and describe an abbreviated phrase. The title attribute is useful to give the full name of the abbreviation.
Example of use:
<abbr title="HyperText Markup Language">HTML</abbr>
<acronym>
Used to markup and describe acronyms. The title attribute is useful in to give the full name of the acronym.
Example of use:
<acronym title="Disk Operating System">DOS</acronym>
Note: acromyn will not be a valid element in HTML5, as it is seen to cause confusion having two very similar tags. So if using HTML5 you should use the abbr tag for all all abbreviations and acronyms.
<address>
The address is used to display contact information for a document, this information can include the name, address, email, phone number. It shouldn’t be used for all contact information of a site, just the information for contacting the document owner.
Example of use:
<address> Address: this random place, in an unknown village<br /> <a href="mailto:example@somerandomemail.co.uk">Email us</a> </address>
<cite>
This is used to markup citations, such as titles of websites, book titles and magazines. Browsers will render the citation as italic text, however this can be manipulated through CSS.
Example of use:
<cite>The Principles of Beautiful Web Design by Jason Beaird</cite>
<code>
Used to demonstrate computer code, browsers display this as monospaced text by default, but this can be manipulated through CSS.
Example of use:
An example of a paragraph: <code><p> this is a paragraph</p></code>
<dfn>
Used to introduce a term to the reader, by default browsers show this in italic, but this can be manipulated through CSS
Example of use:
<dfn>Definition</dfn>: The act of making clear and distinct.
<del> and <ins>
These two are used to show revisions to the content, be it to show something removed or added to it. The browser defaults settings are, <del> displaying with a strike through the text and <ins> is displayed underlined.
Example of use:
<p>I like<del>icecream</del> <ins>pizza</ins> </p>
<kbd>
Used to demonstrate keyboard inputs, such as telling someone which keys to press on their keyboard. By default browsers will display this as monospaced text, but it as always can be manipulated in CSS.
Example of use:
press <kbd>ctrl alt del</kbd> together
<q>
Used to define a short quote, if it is a long quote then blockquote should be used. What this tag will do is add quotation marks to the quote that has been defined while giving it the semantic value that simply placing ” ” around the quote would not.
Example of use:
<q>this is a short quotation</q>
twitter
forrst
google+
Rss
6
Comments
I’m guilty of not using some of these, and some of them I didn’t even know existed. Nice Article Diz :tup:
Another cracking article. Well done
Keep up the good work pixie!
:wub:
Keep em coming Dizi – another great article for the pond!
Great article Dizi.
I recently discovered a super little tag, great for displaying code where you want to show indents etc. <pre> By default it shows all the white space, which is useful when showing code on a site. Can be used as follows:
<pre><code>HTML code shown here</code><pre>
Definition lists and the tags that go with it, I think that they are really forgotten tag as I don’t really hear many people mention them.
Super article, keep up the hard work Helen