Newbie Spellweaver
- Joined
- Jul 18, 2012
- Messages
- 66
- Reaction score
- 44
----------------------------------------------------------------------
I found this article quite interesting and very well explained, So being the person that I am, I've decided to share it on ragezone.
*I take no credit whatsoever in the making or development of what you are about to read.*
So let's begin...
---------------------------------------------------------------------------------
[h=3]1. <cite>[/h]All of us will be familiar with the <blockquote> tag, but did you know about <blockquote>’s little brother <cite>? <cite> allows you to define the text inside of the element as a reference. Typically the browser will render the text inside of the <cite> tag in italics, but this can be changed with a touch of CSS.I found this article quite interesting and very well explained, So being the person that I am, I've decided to share it on ragezone.
*I take no credit whatsoever in the making or development of what you are about to read.*
So let's begin...
---------------------------------------------------------------------------------
The <cite> tag is really useful for citing bibliographic and other site references. Here’s an example of how to use the cite tag in a paragraph:
David Allen’s breakthrough organization book Getting Things Done has taken the web by storm.
[h=3]2. <optgroup>[/h]The <optgroup> tag is a great way to add a little definition between groups of options inside a select box. If you needed to group movie listings by time, for example, then it would look like this:
- <label for="showtimes">Showtimes</label>
- <select id="showtimes" name="showtimes"> <optgroup label="1PM"></optgroup> <option value="titanic">Twister</option> <option value="nd">Napoleon Dynamite</option> <option value="wab">What About Bob?</option> <optgroup label="2PM"></optgroup> <option value="bkrw">Be Kind Rewind</option> <option value="stf">Stranger Than Fiction</option> </select>
[h=3]3. <acronym>[/h]The <acronym> tag is a way to define or further explain a group of words. When you hover over text that has the <acronym> tag used, a box appears below with the text from the title tag. For example:
You must be registered to see links
You must be registered to see links
You must be registered to see links
You must be registered to see links
- The microblogging site <acronym title="Founded in 2006"> Twitter</acronym> has recently struggled with downtimes.
[h=3]4. <address>[/h]The <address> tag is quite an obscure little tag, but that doesn’t mean it isn’t useful! As the name implies, <address> allows you to semantically markup addresses in HTML. The nifty little tag will also italicize all of the data within the brackets, though the style can easily be changed through simple CSS.
You must be registered to see links
You must be registered to see links
You must be registered to see links
You must be registered to see links
- <address>Glen Stansberry
- 1234 Web Dev Lane
- Anywhere, USA
- </address>
[h=3]5. <ins> and <del>[/h]If you’re wanting to display editing revisions with with markup, <ins> and <del> are just the ticket. Like the name implies, <ins> highlights what’s been added to the document with an underline, and <del> shows what’s been taken out with a strikethrough.
You must be registered to see links
You must be registered to see links
You must be registered to see links
You must be registered to see links
- John <del>likes</del> <ins>LOVES</ins> his new iPod.
[h=3]6. <label>[/h]Form elements seem the easiest to forget when marking up a document. Of the form elements, one of the most forgotten is the <label> tag. Not only is it a quick way to note the label’s text, the <label> tag can also pass a “for” attribute to specify which element is to be given the label. Not only are these <label> tags great for styling, they also allow you to make the caption clickable for the associated element.
You must be registered to see links
You must be registered to see links
You must be registered to see links
You must be registered to see links
- <label for="username">Username</label>
- <input id="username" type="text">
[h=3]7. <fieldset>[/h]Fieldset is a nifty little attribute that you can add to your forms to logically group form elements. Once applied the <fieldset> tag draws a box around the elements within the fieldset. Bonus points for adding a <label> tag within the fieldset to define the title of the group.
You must be registered to see links
You must be registered to see links
You must be registered to see links
You must be registered to see links
- <form><fieldset>
- <legend>Are You Smarter Than a 5th Grader?</legend>
- Yes <input name="yes" type="radio" value="yes">
- No <input name="no" type="radio" value="no">
- </fieldset>
- </form>
[h=3]8. <abbr>[/h]The <abbr> tag is much akin to the <acronym> tag, except the <abbr> tag is only used to define abbreviated words. Just like <acronym>, you define a title within the tag. When a visitor hovers over the abbreviated text, the full definition appears below. The <abbr> tag is rarely used, but the benefits are many for screen readers, spellcheckers and search engines.
You must be registered to see links
You must be registered to see links
You must be registered to see links
You must be registered to see links
- <abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album.
[h=3]9. rel[/h]Rel can be an insanely useful attribute, as any HTML element can have a rel applied to it. It’s helpful for passing extra variables that aren’t otherwise specified. This is helpful when using Javascript with your HTML. If you have a link that you want to edit inline, you might add:
You must be registered to see links
You must be registered to see links
You must be registered to see links
You must be registered to see links
- <a rel="clickable" href="page.html">This link is editable</a>
[h=3]10. <wbr>[/h]The <wbr> tag is an incredibly obscure tag. To be honest, I doubt many of you have come into contact with the tag, as it’s hardly ever used. (Truthfully, I hadn’t seen the tag before I started researching this article.) Essentially, the tag allows you to specify a place where you think a line break might be useful, but only if needed. This tag is unique as it relies on the discretion of the browser to insert the linebreak, if needed. It’s perfect for creating layouts that you want to avoid having horizontal scrollbars.
If you were wanting to achieve the same effect but without using the <wbr> tag, you could also try or . It should be noted that none of these tags have full support across all browsers. To see which browsers support the tags check out
You must be registered to see links
by Quirksmode.
You must be registered to see links
You must be registered to see links
You must be registered to see links
You must be registered to see links
- <span>How do you say Supercalifragilistic<wbr>expialidocious?</span>
-----------------------------------------------
I hope you have taken something usefull out of this article, A big thanks to the people at:
For this.
-----------------------------------------------
Farewell,
-Vondric
I hope you have taken something usefull out of this article, A big thanks to the people at:
You must be registered to see links
For this.
-----------------------------------------------
Farewell,
-Vondric
:
