a blog for those who code

Friday 4 March 2016

Useful but less known HTML Tags

In this post we will be discussing about some of the less known HTML5 tags. As a web developer you should be aware of all the different tags so that you might take advantage of some of them in your next project. There are some tags which are either forgotten or less used by programmers. You might have worked with these tags before but not in the same way.

The tags are as follows :

1. Tag <optgroup>

The <optgroup> is used to group related options in a drop-down list. It is a great way to add a little definition between the groups of options. The optgroup itself cannot be selected. Example

<select>
  <optgroup label="Group 1">
    <option value="option1"> Option 1 </option>
    <option value="option2"> Option 2 </option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3"> Option 3 </option>
    <option value="option4"> Option 4 </option>
  </optgroup>
  <optgroup label="Group 3">
    <option value="option5"> Option 5 </option>
    <option value="option6"> Option 6 </option>
  </optgroup>
</select>

2 Tag <abbr>

The <abbr> tag defined an abbreviation or an acronym. When this tags are used with "title" attribute and hover over the text, the title will be shown in the form of tooltip and is recognized in almost all browsers. Example

The definition of <abbr title="World Wide Web">WWW</abbr> is that it is a network of online content that is formatted in HTML.


3. Tag <ins> and <del>

The <ins> tag defined a text that has been inserted into a document whereas <del> tag defines text that has been deleted from a document. These are useful because you wanted to let the user know that what have to deleted and what have you inserted in place of that. With this two tags you can even use cite and datatime tags where cite will help for linking a resource and datetime attribute for when this occurred. Example

Coding Defined Copyright 2014-<del>2015</del><ins>2016</ins>


4. Tag <mark>

The <mark> tag defines marked text, that means if you want to highlight parts of your text use <mark>. This is helpful when you want your user to show relevant results.You should not use this keyword as an alternative of styling, but perhaps you can use it if you want to show something relevant.  Example

Price of Flight Ticket reduced to <mark>$500</mark> from $750


Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.

No comments:

Post a Comment