これらの8つのHTML5タグを知っていますか？

Web開発者は、Webサイトの構築中に多数のHTMLタグを利用しています。多くの人は <code><p></p> 、<h1></h1>、<div>などの一般的なHTML5タグに精通していますが、あまり知られていないタグには大きな利点があります。 この記事では、W3Cの仕様を調べ、実用的な例を提供して、そのようなタグを8つ説明します。 <p>HTML5タグの使用を理解する<strong></strong> </p>W3C仕様は概念的な概要を提供しますが、実用的なアプリケーションは困難な場合があります。 グッドプラクティスは常に厳密に定義されているわけではありません。この記事では、推奨される使用例を提供しています <p></p>キーテイクアウェイ<p><strong> </strong> </p>使用<ul>を使用して、ユーザーアクティビティに関連するテキストを強調し、可視性を向上させます。 <li> <code><mark></mark> 重要性の低いテキストでは、視覚的影響を最小限に抑えます。

<small></small>短いインラインの引用符を使用し、

をより長い抜粋の場合は、セマンティックの精度を維持します。

実装<q></q>、<blockquote></blockquote>、および

編集に役立つ追加、削除、修正をマークするには。

選択肢を分類し、ユーザーエクスペリエンスを向上させるために<ins></ins>オプションを整理します。 <del></del> <s></s>

1。

<select></select><optgroup></optgroup>でのコンテキストハイライト

タグは「関連性」または「精査」を意味します。 関連性はコンテキスト依存です。特定のアクティビティ中に役立つ場合、要素は関連性があります。たとえば、検索結果を

でマークして、検索クエリとの関連性を示すことができます。 <mark></mark>実用的な例：「最も安いホリデーパッケージ」ページでは、最も安いパッケージの価格を

：

を使用して強調することができます。 <mark></mark> <mark></mark>

ベストプラクティス：

スタイリングのみに使用するべきではありません。そのためにCSSを使用します。 重要性を示すために使用しないでください（そのためには または<mark></mark>を使用してください）。現在のユーザーアクションとの関連性を強調するには、

を使用してください。

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

2。 <strong></strong> <mark></mark>での重要性が低くなります <strong></strong><em></em>テキストサイズは、その意味の意味の視覚的副産物である、重要性が低いことを示します。 フッターやサイドバーでよく見られるより重要な情報のためにそれを使用してください。 <mark></mark>

実用的な例：

フッター： <small></small> または製品リスト：

<small></small>

ベストプラクティス：

または

ですでに強調されているテキストの重要性を下げることはできません。 サイズ制御のみに使用しないでください

<code class="language-html"><small>Designed and developed by Simon Codrington. © 2016 My Company - All rights reserved</small></code>

3。

および

<code class="language-html"><h3>Woolen Llama Print Jumper</h3>
<em>.99</em><small> - Excludes tax</small></code>

との引用

短いインラインの引用符を使用し、ブロックの引用符を使用するには<q></q>を使用します。 これらは、スタイリングではなく引用符のためです（そのために<blockquote></blockquote>を使用）。<span></span>

実用的な例：<strong></strong>

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

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

Best Practices：属性（ソースのURL）と

タグ（ソースタイトル）。 cite<cite></cite>4。

、

、および <ins></ins><del></del>による挿入、削除、および補正 <s></s>マークが追加されたテキスト、

削除されたテキスト、

テキストは修正されなくなりました。 すべてのサポート<ins></ins>および<del></del>コンテキストの属性。<s></s> citedatetime実用的な例：

ベストプラクティス：

<code class="language-html"><small>Designed and developed by Simon Codrington. © 2016 My Company - All rights reserved</small></code>

オリジナルが置き換えられている補正に

を使用します。これらをスタイリングのみに使用しないでください。 <s></s>5。

でオプションを整理します <optgroup></optgroup>要素内でオプションを分類し、ナビゲーションを改善します。

および

属性があります。<optgroup></optgroup> <select></select>label実用的な例：disabled

<strong></strong>ベストプラクティス：

<code class="language-html"><h3>Woolen Llama Print Jumper</h3>
<em>.99</em><small> - Excludes tax</small></code>

それ自体は、直接選択またはスタイルを選択できません。

<strong></strong>6。 <optgroup></optgroup>

を備えた事前定義オプション <datalist></datalist>タグの有効な選択肢を定義し、ドロップダウンの提案リストを提供します。

実用的な例：

<datalist></datalist> <input>

ベストプラクティス：ブラウザーサポートはさまざまです。検証は、タイプに依存します。

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

結論として、これらのしばしば見過ごされているHTML5タグは、貴重なセマンティック強化とユーザーエクスペリエンスの向上を提供します。 適切な使用法を理解することは、よりクリーンでアクセスしやすく、より効果的なWeb開発につながります。