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>
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>
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>
Figure 2 – Results of Listing 2 – Attr
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>
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.
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.
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.
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.
Figure 6 – Results of Listing 6 – ins and del
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:
Figure 7 – Results of Listing 7 – q tag
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.