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.
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.
<label for="comp-price-filter">
Select the price range of your next computer
</label>
<select
class="price-filter"
name="comp-price-filter"
id="comp-price-filter">
<optgroup label="Low End">
<option value="100-300">$100 - $300</option>
<option value="301-500">$301 - $500</option>
<option value="501-700">$501 - $700</option>
</optgroup>
<optgroup label="Middle Range">
<option value="701-1200">$701 - $1200</option>
<option value="1201-1600">$1201 - $1600</option>
</optgroup>
<optgroup label="High End">
<option value="1600-2500">$1600 - $2500</option>
<option value="2501-3200">$2501 - $3200</option>
</optgroup>
</select>
Optgroup
Predefined Options With <datalist>
One of the great things about the <select> element, along with the radio / checkboxinput 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.
<label for="favourite-sites">
Select your favorite website!
</label>
<input
type="url"
name="favourite-sites"
id="favourite-sites"
list="site-list"/>
<datalist id="site-list">
<option value="http://www.google.com.au">
<option value="http://www.reddit.com">
</datalist>
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.
<section>
<article>
<h3>Woolen Llama Print Jumper</h3>
<em>$65.99</em><small> - Excludes tax</small>
<p>
A warm, woolly jumper made from 100% llamas.
You will love the warmth.
</p>
<button>Add to cart</button>
</article>
</section>
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.
<section class="deal-list">
<article>
<h2>Vanuatu Cruise</h2>
<p><mark>$499</mark>- 5 Nights</p>
<p>A relaxing cruise around the southern most
parts of Vanuatu</p>
</article>
<article>
<h2>Fiji Resort Getaway</h2>
<p><mark>$649</mark> - 6 Nights</p>
<p>Includes all you can eat buffet and
entertainment</p>
</article>
<article>
<h2>Pacific Island Hiking</h2>
<p>$1199 - 5 Nights</p>
<p>Hike your way though several pacific islands
on this exercise focused holiday</p>
</article>
</section>
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:
<Html>
<head> Insert, Delete and S tag Use</head>
<body>
<p>To insert new data it is mainly Used:<ins>Data</ins></p>
<p>For deleting purpose:<del>Date</del></p>
<p>It is look like same as strike out,<s>update</s></p>
</body>
</Html>
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>
<div class="big-banner">
<h2>Try our latest sandwich!</h2>
<p>Come and try our latest, biggest and tastiest
sandwich. John Smith told us <q>he hasn't eaten
anything as good in his whole life!</q></p>
</div>
If you have a longer quote or something more complex you can wrap it inside <blockquote>
<div class="motivational-quote">
<blockquote
cite="http://bit.ly/1pbvjsL">
Infuse your life with action.
Don't wait for it to happen.
Make it happen. Make your own
future. Make your own hope.
Make your own love. And
whatever your beliefs, honor
your creator, not by passively
waiting for grace to come down
from upon high, but by doing
what you can to make grace
happen... yourself, right now,
right down here on Earth.
<cite>Bradley Whitford - Author</cite>
</blockquote>
</div>
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.
