Do You Know These Eight HTML5 Tags?

Web developers utilize numerous HTML tags during website construction. While many are familiar with common HTML5 tags like <code><p></p>, <h1></h1>, and <div>, some lesser-known tags offer significant advantages. This article explores eight such tags, examining their W3C specifications and providing practical examples. <p><strong>Understanding HTML5 Tag Usage</strong></p> <p>W3C specifications provide conceptual overviews, but practical application can be challenging. Good practice isn't always strictly defined; this article offers recommended usage examples.</p> <p><strong>Key Takeaways</strong></p> <ul> <li>Use <code><mark></mark> to highlight text relevant to user activity, improving visibility.

Employ <small></small> for less important text, minimizing visual impact.

Use <q></q> for short inline quotes and <blockquote></blockquote> for longer excerpts, maintaining semantic accuracy.

Implement <ins></ins>, <del></del>, and <s></s> to mark additions, deletions, and corrections, useful in editing.

Organize <select></select> options with <optgroup></optgroup> to categorize choices, enhancing user experience.

1. Contextual Highlighting with <mark></mark>

The <mark></mark> tag denotes "relevance" or "scrutiny." Relevance is context-dependent; elements are relevant when useful during a specific activity. For example, search results could be marked with <mark></mark> to indicate relevance to the search query.

Practical Example: On a "Cheapest Holiday Packages" page, the prices of the cheapest packages could be highlighted using <mark></mark>:

<div class="deal-list">
  <div>
    <h2 id="Vanuatu-Cruise">Vanuatu Cruise</h2>
    <p><mark>9</mark> - 5 Nights</p>
    <p>A relaxing cruise...</p>
  </div>
  <div>
    <h2 id="Fiji-Resort-Getaway">Fiji Resort Getaway</h2>
    <p><mark>9</mark> - 6 Nights</p>
    <p>Includes all you can eat buffet...</p>
  </div>
  <div>
    <h2 id="Pacific-Island-Hiking">Pacific Island Hiking</h2>
    <p>99 - 5 Nights</p>
    <p>Hike your way...</p>
  </div>
</div>

Best Practices: <mark></mark> shouldn't be used solely for styling; use CSS for that. Don't use it to denote importance (use <code><strong></strong> or <em></em> for that). Use <mark></mark> to highlight relevance to the current user action.

2. Lower Importance with <small></small>

<small></small> reduces text size, a visual byproduct of its semantic meaning: denoting lower importance. Use it for less critical information, often found in footers or sidebars.

Practical Example: In a footer:

<small>Designed and developed by Simon Codrington. © 2016 My Company - All rights reserved</small>

Or in a product listing:

<h3 id="Woolen-Llama-Print-Jumper">Woolen Llama Print Jumper</h3>
<em>.99</em><small> - Excludes tax</small>

Best Practices: <small></small> cannot lower the importance of text already emphasized with <code><strong></strong> or <em></em>. Don't use it solely for size control.

3. Quotations with <q></q> and <blockquote></blockquote>

Use <q></q> for short inline quotes and <blockquote></blockquote> for longer block quotes. These are for quotes, not styling (use <span></span> for that).

Practical Example:

<q>He hasn't eaten anything as good in his whole life!</q>

<div class="deal-list">
  <div>
    <h2 id="Vanuatu-Cruise">Vanuatu Cruise</h2>
    <p><mark>9</mark> - 5 Nights</p>
    <p>A relaxing cruise...</p>
  </div>
  <div>
    <h2 id="Fiji-Resort-Getaway">Fiji Resort Getaway</h2>
    <p><mark>9</mark> - 6 Nights</p>
    <p>Includes all you can eat buffet...</p>
  </div>
  <div>
    <h2 id="Pacific-Island-Hiking">Pacific Island Hiking</h2>
    <p>99 - 5 Nights</p>
    <p>Hike your way...</p>
  </div>
</div>

Best Practices: Both support cite attributes (URL of the source) and <cite></cite> tags (source title).

4. Insertion, Deletion, and Correction with <ins></ins>, <del></del>, and <s></s>

<ins></ins> marks added text, <del></del> removed text, and <s></s> text no longer correct. All support cite and datetime attributes for context.

Practical Example:

<small>Designed and developed by Simon Codrington. © 2016 My Company - All rights reserved</small>

Best Practices: Use <s></s> for corrections where the original is replaced. Don't use these solely for styling.

5. Organizing Options with <optgroup></optgroup>

<optgroup></optgroup> categorizes options within <select></select> elements, improving navigation. It has label and disabled attributes.

Practical Example:

<h3 id="Woolen-Llama-Print-Jumper">Woolen Llama Print Jumper</h3>
<em>.99</em><small> - Excludes tax</small>

Best Practices: <optgroup></optgroup> itself can't be selected or styled directly.

6. Predefined Options with <datalist></datalist>

<datalist></datalist> defines valid choices for <input> tags, providing a dropdown suggestion list.

Practical Example:

<blockquote>
  <p>Infuse your life with action. Don't wait for it to happen. Make it happen.</p>
  <cite>Bradley Whitford - Author</cite>
</blockquote>

Best Practices: Browser support varies; validation depends on the <input> type.

In conclusion, these often-overlooked HTML5 tags offer valuable semantic enhancements and improved user experience. Understanding their proper usage leads to cleaner, more accessible, and more effective web development.