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> shouldn't be used solely for styling; use CSS for that. Don't use it to denote importance (use <code><strong> or <em> for that). Use <mark> to highlight relevance to the current user action.

2. Lower Importance with <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> cannot lower the importance of text already emphasized with <code><strong> or <em>. Don't use it solely for size control.

3. Quotations with <q> and <blockquote>

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

Practical Example:

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

<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> tags (source title).

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

<ins> marks added text, <del> removed text, and <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> for corrections where the original is replaced. Don't use these solely for styling.

5. Organizing Options with <optgroup>

<optgroup> categorizes options within <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> itself can't be selected or styled directly.

6. Predefined Options with <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.

The above is the detailed content of Do You Know These Eight HTML5 Tags?. For more information, please follow other related articles on the PHP Chinese website!