HTML5 tags you might not Know

A Quick Word on Interpretation

While the W3C stipulation is great for visionary overviews, sometimes they lack practical examples, which prepare it challenging when inquiring for the best way to use some of these tags. Very useful HTML5 Tags Cheat sheet

You might have used some of these tags before — maybe just not in the same way. There often are no tough and fast rules about what is treated good practice.however you might not be attentive of some of the lesser known / edge case tags you could be an expansive advantage of.

HTML5 Tags Example

Organising Options With <optgroup>

This tag is one of the oldest, but oddly enough it’s still overlooked by developers.

The <optgroup> tag is used within the <select> form control tag to supports categorize the various<options> elements.

If you have dozens (or hundreds) of options inside your select field, having the capability to categorize them into a local format is really handy. It is

It is the best to use to create Calender. I.E. If yo are filling form then It consists of “birth date” in which days, months and Years have many values so that purpose <optgroup> is used.

Optgroup
Optgroup

Predefined Options With <datalist>

One of the great things about the <select> element, along with the radio / checkbox input types is that it inhibit your users to a set of pretending choices.

You can now use the <datalist> fundamental to define the list of valid option for your various <input>tags. This integral is slightly different on discrete browsers, but the common way it entirely is by showing a small drop-down arrow to the right of the field mentioning that this field has options. When selected commonly the options will fold down and show themselves.

Example:

If you wanted to provide a list of URL’s that the user could select from, you could create a <datalist>and connect it to your <input> as follows.

input
input

Lower Importance With <small>

You have perhaps used the <small> tag before. It does same what you think it would do, which is make your text smaller. While browsers might make your text smaller, that is actually a byproduct of using the small tag, rather than its semantic meaning.

The specification for the <small> tag explains that this tag should be used to lower the attention of text or information. Gateway interprets this by making the font smaller so it has a less visible impact.

Example:

You can even use the <small> tag inside local content to denote that the content is not as important as the content surrounding it.

small tag use
small tag use

Overall if you want to make something have a perceived lower importance use. <small> Don’t just use it to control the size of elements.

You cannot lower the importance or emphasis of content that has been affected by the <strong> or<em> tags

Contextual Highlighting With <mark>

The specification for the <mark> tag says that this tag should be used to stand for “relevance” or “scrutiny”.

“Relevance’ is hard to describe. Elements and text are relevant when we are operating an activity and they are favorable to us at that moment (or could be useful in the future).

Example:

We can use the mark tag for highlighting content that is relevant. To illustrate, consider the following scenario:

We are on a page called “Cheapest Holiday Packages” and it shows us a grid of holiday packages sorted by price range. It starts off from the cheapest at the top to the most expensive at the bottom.

mark
mark

For the first two results, the price (which is what we are focused on) is wrapped within the <mark> tag. However the third result — which is much more expensive — isn’t marked as it isn’t as relevant as the others.

Do not use this tag to denote textual importance or to highlight strength — that is what the <strong>tag should be used for. Use <mark> when you want to pinpoint something of relevance to the current user.

Insertion, Deletion and Correction With,<ins><del> and <s>

The,<ins> <del> and <s> tags are useful when you are using dealing with content that has been changed or whose relevance has been updated.

The <ins> tag defines text that has been newly added to a document — it displays new content. You would use this tag to mark text that has been added or whose relevance has been updated within your content.

The <del> tag defines text that has been removed from the document, it represents deleted content. Even though it signifies deleted content, it still physically exists in the document as a record of what has been removed.

These two tags support two optional attributes — the cite attribute for linking to a resource that explains this change and also the datetime attribute for when this occurred. The daytime must be a valid DateTime string which unfortunately isn’t very easy to understand. You can cheat and use a timestamp generator if you’re in a flow.

The <s> tag is similar but rather defines text that is no high correct. It is same as strike out Output.  But it is no longer used for that.

The <s> tag is best used for when content has been removed and then updated, for example when correcting documents:

tags
tags

Quotations With <q> and <blockquote>

While you might use a styled <div> or <span> to enclose your quotes, a better style is to use either the<q> or <blockquote> tags. Both of these are meant to be used for external quotations (when you are quoting something), but they differ in how you should use them.

According to the spec, the <q> tag should be used to define a “short inline quotation” of text.

The <blockquote> tag, on the other hand, should be used for large spans of text.

Example:

If you have a small quote, use:<q>

If you have a longer quote or something more complex you can wrap it inside <blockquote>

For the above example, we’ve wrapped a long quote withing the <blockquote> tag and supplied both the cite “attribute” that the link to the resource and the <cite> “tag” that explaining what this resource is.

Both of these quote elements can support the cite attribute and the cite element.

Liked it? -> Share this article with Friends Becuase Sharing is Caring!

See more:

Learn animation using CSS3, Javascript, and HTML5

HTML5 Mastery: Tree Traversal

Cheat sheet