あなたが見逃しているかもしれないこれらの HTML タグを使用して HTML を目立たせましょう

<p>HTML の隠された宝石を解き放つ: 知っておくべき 11 のあまり知られていないタグ

<p>Web ページのバックボーンである HTML は、多くの人が思っているよりも多用途です。 <code><p> や <code><h1> などのよく知られたタグは不可欠ですが、あまり知られていないいくつかのタグは、強力な機能と改善されたアクセシビリティを提供します。 この記事では、そのような隠れた HTML の宝石 11 個を取り上げます。 経験豊富な開発者でもいくつかの驚きを見つけるかもしれません!

1. <code><abbr> タグ: 略語の定義

<p><code><abbr> タグは、頭字語や略語をエレガントに処理します。 タグ内で略語を囲み、<code>title 属性を使用して完全な意味を提供するだけです。

<p>

<p>カーソルを置くと、<code>title 属性のコンテンツがツールヒントとして表示され、ユーザーの理解を深めます。 このツールチップの機能はホバーに依存しているため、すべてのユーザー (モバイルなど) がアクセスできるわけではないことに注意してください。

2. <code><code> タグ: コード スニペットの強調表示

<p>コードをきれいに表現するには、<code><code> タグが非常に重要です。 このタグ内でコードを折り返すと、コードが自動的に等幅フォントでレンダリングされ、周囲のテキストと簡単に区別できるようになります。 CSS を使用してさらにスタイルを設定すると、読みやすさが向上します。

<p>

3. <code><kbd> タグ: キーボード入力を表す

<p><code><code> と同様に、<code><kbd> タグ (キーボード タグ) は、キーボード入力を表すために特別に設計されています。 囲まれたテキストは等幅フォントで表示され、キーボード ショートカットまたはコマンドを視覚的に示します。 CSS と組み合わせて、洗練されたキーボード ボタンの外観を実現します。

<p>

4. <code><datalist> タグと <code><option> タグ: 動的な提案の作成

<p>これらのタグは連携して直感的な入力候補を作成します。

<p>

<p><code><input> 属性を持つ <code>list 要素は、<code><datalist> 要素 (<code>id で指定) にリンクします。 <code><option> 内の <code><datalist> タグは、推奨値を提供します。ユーザーが入力すると、関連する提案が表示されます。

5. <code><dialog> タグ: 単純なモーダルの作成

<p><code><dialog> タグを使用すると、ポップアップ ボックスまたはモーダルの作成が簡単になります。 <code>open 属性を追加すると、ダイアログが表示されます。 JavaScript はその動作をさらに制御できます。

<p>

6. <code><details> タグと <code><summary> タグ: ネイティブの折りたたみ可能なコンテンツ

<p><code><details> と <code><summary> を使用して、CSS や JavaScript を使用せずにエレガントなネイティブのドロップダウン メニューを作成します。

<p>

<p><code><details> タグはコンテナとして機能し、<code><summary> はクリック可能なタイトルを提供します。 <code><details> 内のコンテンツは、概要をクリックすると表示が切り替わります。FAQ に最適です。

7. <code><time> タグ: 意味論的な時間表現

<p><code><time> タグは、見た目は控えめですが、時間値のセマンティック コンテキストを提供することで SEO とアクセシビリティを大幅に向上させます。

<p>

8. <code><ruby>、<code><rt>、および <code><rp> タグ: Ruby アノテーション

<p>これらのタグは、文字の上に小さな説明テキストを表示する、東アジアのタイポグラフィーで一般的な Ruby 注釈を容易にします。

<p>

<p><code><ruby> にはメインテキストが含まれ、<code><rt> アノテーションが含まれます。<code><rp> は Ruby をサポートしていないブラウザにフォールバック コンテンツを提供します。

9. <code><progress> タグ: プログレスバーの作成

<p><code><progress> タグを使用して CSS なしで進行状況バーを生成します。

<p>

<p>合計値には <code>max 属性を設定し、現在の進行状況には <code>value 属性を設定します。バーは自動的に更新されます。

10. <code><meter> タグ: スケールを表す

<p><code><progress> と同様に、<code><meter> はスケールを表示しますが、値の範囲を表すためのものです。

<p>

<p>範囲と現在の値には <code>min、<code>max、<code>value を使用します。 <code>low、<code>high、および <code>optimum は、バーの色に影響するしきい値を定義します。

11. <code><fieldset> タグと <code><legend> タグ: フォーム要素のグループ化

<p>これらのタグは、関連するフォーム要素をエレガントにグループ化します。

<p>

<p><code><fieldset> はコンテナを作成し、<code><legend> はフィールドセットの境界線内に自動的に配置される説明的なタイトルを提供します。

<p>結論

<p>これらの見落とされがちな HTML タグをマスターすると、Web 開発スキルが向上し、よりアクセスしやすく、セマンティックで視覚的に魅力的な Web サイトを作成できます。 コーディングを楽しんでください!

<p>フォローしてください: LinkedIn | 中 | ブルースカイ

以上があなたが見逃しているかもしれないこれらの HTML タグを使用して HTML を目立たせましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。