Less Known Tags of HTML5

In this article I shall discuss about some of the HTML5 tags which are unused by most users of HTML.  We will see the syntax of these, how to use them and some examples of how to use them. Many web developers deal hundreds of line of HTML code daily. The language developed to deal with the entire management of web content, defining standards of tags named for a specific purpose for each one, now dominates the universe of front-end development with regard to the organization of elements on the screen, hypertext.To be a good web developer, you must know HTML tags and their its use well.

There are some tags which are either forgotten or less used by programmers. In the following sections, I have discussed few tags, some of them even bringing benefits in terms of SEO (Search Engine Optimization), ie, higher ranking in web search results. This article is to show some of these tags with syntax, usage, attributes, practical examples and explanations of what they do.

Tags <abbr> (abbreviation) and <acronym>

These two are very similar in its basic form. When used with the “title” attribute and hover over the text, the title will be shown in the form of tooltip, and is recognized in almost all browsers. However, the use of javascript frameworks like jQuery as many do, the power of these tags is more in evidence. You can create custom balloons to be displayed as a tooltip with the definition of CSS, etc.. leaving the code used flexible and elegant.
An acronym is the initial letters of some words (e.g.Hypertext Mark-up Language => HTML), while an abbreviation is a shortened form of a word (e.g. Doctor => Dr). These are often used to pass the meaning of an acronym, as is shown in Listing 1 and 2. The results of the browser can be checked in Figures 1 and 2, respectively.

Listing 1 . Example use of tag

<!DOCTYPE html>
<html>
<head>
	<title>Acronym Example</title>
</head>
<body>
<br><br>
<acronym title="World Wide Web"> WWW </acronym> is an international community.   </body>
</html>

Image1_acronym
Figure 1 – Results Listing 1 – Acronym

Listing 2 . Example use of tag

<!DOCTYPE html>
<html>
<head>
	<title>Abbrevation Example</title>
</head>
<body>
<br><br>
<abbr title="Doctor"> Dr. </abbr> Sharma did not attend the meeting.
</body>
</html>

Image2_abbr
Figure 2 – Results of Listing 2 – Attr

Tag <cite>

Everyone already knows well the tag <blockquote> , used to store quotes of others. But one not so common tag <cite> refers to the reference work, service, etc. in question. It basically allows you to set the text within the element as a reference. Normally the browser will make the text inside the tag <cite> in italics, but this can be changed with a touch of CSS. The tag <cite> is really helpful to include references and other places. In Listing 3 is an example of how to use the tag in a paragraph:

Listing 3 . Example use of tag

<!DOCTYPE html>
<html>
<head>
	<title>Cite Example</title>
</head>
<body>
<br><br>
<p> My famous quote from ... - some source <cite> Publications in a Web Programmer </cite>
</body>
</html>


Image2_cite
Figure 3 – Results of Listing 3 – Cite

Note in the above listing the tag will not bring much change except the placement of italics. Furthermore, using this tag on your pages benefits in the category of SEO ranking for search engines.

Tag <fieldset>

This tag is used to define and for better organization of form elements within them. To use it the browser renders a border around the square representing the fieldset and together with the tag <legend> you can add a title to the table. In Listing 4 you can see an example of use of tags in an HTML form. Note that the use of tag is waived for reducing code. See the result in Figure 3.

Listing 4 . Example of using the fieldset tag

<!DOCTYPE html>
<html>
<head>
	<title>Fieldset Example</title>
</head>

<body>
<br><br>
<fieldset>
        <legend> Fieldset test </legend>
        Name: <input type="text" name="name" /> <br/>
        Address: <input type="text" name="address" /> <br/>
        <input type="submit" value="submit"/>
</fieldset>
</body>
</html>

Image4_fieldset
Figure 4 – Results from Listing 4 – Fieldset

Tag <Otgroup>

The tag <optgroup> is a great way to add a little definition between the groups of options within a box, famous combobox. To understand better, see how it would organize a combo with levels and sub levels through the style of lists in HTML in Listing 5 which is an example of organizing movies by titles.
Listing 5 . Example use of tag <optgroup>

<!DOCTYPE html>
<html>
<head>
	<title>Optgroup Example</title>
</head>

<body>
<br><br>
<select id="films" name="films">
<optgroup label="Action">
<option value="sprider_man"> Sprider Man</option>
<option value="mission_impossible"> Mission Impossible </ option>
</optgroup>
<optgroup label="Kids">
<option value="shrek"> Shrek</option>
<option value="princess_diaries"> The Princess Diaries </option>
</optgroup>
 </select>
</body>
</html>

See Figure 5 the result of the same code. Pay attention to the spaces between each data item in the sublist.

Image5_optgroup
Figure 5 – Results of Listing 5 – optgroup

If you want to display editing or revisions with marking, use <ins>, <del>. As the name indicates, the tag <ins> highlights what’s been added to the document with an underscore, and the tag <del> shows what was removed with a strike through (Listing 6).
Listing 6 . Example use of tags and<ins>, <del>

<!DOCTYPE html>
<html>
<head>
	<title>Optgroup Example</title>
</head>
<body>
<br><br>
<p><del> This text is deleted </del></p>
<p><ins>This text is added newly</ins></p>
</body>
</html>

Check the result in Figure 5 for the text in Listing 5.

Image6_ins
Figure 6 – Results of Listing 6 – ins and del

Tag <q>

The tag <q> has a purpose quite interesting but little explored. The tag is used for quotes embedded in a document. The concept is that the browser must surround the text with (‘) character (‘) . When it is necessary to use quotes within quotes, or sayings of insiders to another speech, this tag can be used well. Check in Listing 7 is a clear example.

Listing 7 . Example use of tag <q>

<!DOCTYPE html>
<html>
<head>
	<title>Q tag Example</title>
</head>
<body>
<br><br>
<q> John said <q> Good morning everyone! How <q>? </ q> </ q> replied Ana </ q>
</body>
</html>

The result of that listing will be:

Image7_qtag
Figure 7 – Results of Listing 7 – q tag

Summary

This article discussed some of the HTML tags which are less known. There are many other tags which are not included in the list above like <wbr> search by tags, <adress>, <section>, <nav>, <footer>, <dl> <dt> and <dd>, <dfn>. Hope you liked the article.

Comments

comments

About Manisha Patil

Manisha S Patil, currently residing at Pune India. She is currently working as freelance writer for websites. She had earlier worked at Caritor Bangalore, TCS Bangalore and Sungard Pune. She has 5 years of experience in Java/J2EE technologies.

Speak Your Mind

*