Top 9 HTML Elements To boost Up Your Web
All the hype recently has been about Html5, and the new elements it brings to the table for us to use. However, the way I see it, we currently don’t even utilise all that the current version of html has to offer. There are several really useful elements available to use, that make our code more semantic, our website more usable, and in general, everything easier for both us, the coder, and the end-user of our site.
1. Label
Description- The tag defines a label for an input element in forms. The tag itself doesn’t render any differently to people who don’t wrap their descriptors in the tag, but it does however, provide usability improvements. Clicking a form inputs label will focus you on the input, and for inputs such as check boxes and radio buttons, clicking the label will toggle them.
Usage- The <label> tag should be placed next to their relevant form controls in your code. The only real requirement of the <label> tag is that it’s “for” attribute should be equal to the id attribute of the form control it is related to. This allows them to be linked together by the browser for the usability enhancements. Here is an example
<label for=”name”>Your Name</label>
<input type=”text” id=”name” />
Styling
The label element has become quite popular recently, and while it still isn’t used by everyone, it’s styling, and some creative uses have been conjured up. Check these links out below for further ideas.
2 Fieldset & Legend
Description- The <fieldset> tag is used to logically group together elements in a form. Basically, the <fieldset> tag draws a box around the form elements it contains to separate them from other elements or <fieldset>’s in the form. The <legend> tag is then used to define a caption for its specific fieldset.
Usage- The <fieldset> and <legend> tags can, and really should be used in any form. They allow you to describe, and split up forms into relevant sections.
<form> <fieldset> <legend>Personal Details</legend> <label for=”firstname”>First Name</label> <input type=”text” id=”firstname” /> <label for=”lastname”>Last Name</label> <input type=”text” id=”lastname” /> </fieldset>
</form>
Styling
There are plenty css tutorials out there for styling forms, and the vast majority of them, as they should, make use of the <fieldset> and <label> tags. Check out these links for styling ideas.
3. Optgroup
Description- The <optgroup> tag is used to group together related options in a select (dropdown) list. This can often make long lists of options easier for users to navigate, and handle.
Usage- The <optgroup> tag simply wraps the options within it, with the title being added to it via an attribute called “label”. Here is some sample markup for a <select>.
<select> <optgroup label=”Swedish Cars”> <option value=”volvo”>Volvo</option> <option value=”saab”>Saab</option> </optgroup> <optgroup label=”German Cars”> <option value=”mercedes”>Mercedes</option> <option value=”audi”>Audi</option> </optgroup>
</select>
Styling- As is usual with form element styling in browsers, support is fairly limited, and nowhere near being standard across browsers. The default seems to be bold headers within your dropdown.
4. Dl
Description- The <dl> tag defines a definition list. Basically the <dl> tag is uses with <dt> which defines the item in the list, and <dd> which described the current item in the list. This makes it useful for a lot of things, such as dictionary style lists, and other things such as contact details, and so on.
Usage- This example usage I am going to show is an example for how I’d used the definition list on a contact page.
<dl> <dt>Email</dt> <dd>email@domain.com<script type=”text/javascript”>
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName(“script”);l=b[b.length-1].previousSibling;a=l.getAttribute(‘data-cfemail’);if(a){s=’’;r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script></dd> <dt>Location</dt> <dd>Here</dd> <dt>Phone</dt> <dd>+0123456789</dd> <dt>Skype</dt> <dd>myname</dd>
</dl>
5. cite
Description- The <cite> tag contains a citation or a reference to other sources. It is usually used to wrap the name of the source of a quote, or resource.
Usage- The <cite> tage is basically used to provide a reference, usually with a title attribute to provide full source information such as below.
According to <cite title=”HTML & XHTML: The Definitive Guide. Published by O’Reilly Media, Inc.; fifth edition (August 1, 2002)”>Chuck Musciano and Bill Kennedy</cite>, the HTML cite tag actually exists!
Styling- <cite> tags are generally styled as italics, and most browsers normally do this automatically. The title attribute is shown on hover.
6. Blockquote
Description- The <blockquote> tag defines a long quotation. It can be used with the <cite> tag, and is usually used for testimonials, and pull quotes.
Usage- The <blockquote> tag basically wraps the quote, and can be used along with <p>, and <cite> as well as other tags for further styling.
<blockquote>
This is an example of a blockquote which is not inline, and is long!
</blockquote>
Styling
There are two universally accepted styles for blockquotes, but there are plenty other ideas out there as well. Here they are below.
7. Code
Description- The <code> tag is used to display computer code text. This is usually displayed in a different font with characters that are all the same size.
Usage- You should pretty much always use your <code> tag wrapped in the <pre> tag. This basically preserves all spacing, and tabbing in your code.
<pre> <code> .classname { /** Code goes here **/ /** Code goes here **/ /** Code goes here **/ } </code>
</pre>
Styling
8. Colgroup
Description- The <colgroup> tag is used to group columns in a table for easy formatting. Instead of applying styles to each individual column cell, you can simply apply it to the <col> in the <colgroup> and it will be applied to the entire column.
Usage- This below example shows how <colgroup> and <col> should be used in the markup of a table. You can then apply class’s to each <col> rather than every <td> in that column to style that column.
<table> <colgroup> <col /> <col /> <col /> </colgroup> <tr> <td>One</td> <td>Two</td> <td>Three</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr>
</table>
9.Aacronym
Description- The <acronym> tag, funnily enough, defines an acronym. An acronym can be spoken as if it were a word, example NATO, NASA, ASAP, GUI. By marking up acronyms you can give useful information to browsers, spell checkers, screen readers, translation systems and search-engines.
Usage- The acronym tag works in pretty much the same way as the <cite> tag does, in that you simply hover over it to see the full acronym.
Can I get this <acronym title=”As soon as possible”>ASAP</acronym>?
Mike Swan is a HTML developer from last 8 years in HTML to wordpress development company. He takes tutorial classes of PSD to HTML for newbie to understand HTML completely.
