10 活用されていない、または誤解されている HTML タグ_HTML/Xhtml_Web デザイン

ここでは、十分に活用されていない、または誤解されている 10 の HTML タグを紹介します。あまり知られていないかもしれませんが、特定の状況では非常に役立ちます。
Web 開発者は多くの場合、複数の言語を知り、習得したいと考えます。そのため、言語の隅から隅まで学習するのは難しい場合がありますが、特殊ではあるが便利なタグを十分に活用していないことが簡単にわかります。 。
翻訳元：TutsPlus
残念ながら、私たちはこれらのあいまいな HTML タグの可能性をまだ最大限に活用していません。しかし、この分野に再び参入し、これらの未開発のラベルの力を活用するコードを書き始めるのに遅すぎるということはありません。
ここでは、十分に活用されていない、または誤解されている 10 の HTML タグを紹介します。あまり知られていないかもしれませんが、特定の状況では非常に役立ちます。
1.

タグは皆さんよくご存知かと思いますが、

の弟であるをご存知ですか？ を使用すると、要素内のテキストを参照として定義できます。通常、ブラウザでは タグ内のテキストが斜体になりますが、これは少しの CSS で変更できます。
タグは、ディレクトリまたは他の Web サイト内の参照を引用する場合に便利です。段落内で cite タグを使用する例を次に示します。
デイビッド・アレンの画期的な組織本 Get Your Work Done は、忘却を嵐のように巻き起こします。 2.
タグは、select タグ内でオプションのグループ化を定義する優れた方法です。たとえば、映画のリストを時間ごとにグループ化する必要がある場合は、次のようにすることができます。
1 2
ラベル for="showtime">Showtime/ ラベル> 選択 id=「上映時間」 名前= "showtime"> optgroup label="One PM">/ optgroup> オプション 値="タイタニック">タイタニック/オプション> オプション 値= "nd">スラムドッグミリオネア/オプション> オプション 値="ワブ">シュレック/オプション> optgroup label=「午後 2 時」>/optgroup > オプション 値="bkrw">ライオン キング/オプション> オプション 値="stf" > スーパーマン フォー オール/オプション> /選択>
デモ:
リリース時間 タイタニック スラムドッグミリオネア シュレック ライオン・キング スーパーマン・フォー・オール

映画リストを視覚的に区別できます。 3.
は、一連の単語を定義または説明する方法です。 タグを使用してテキストの上にマウスを置くと、タイトル タグの内容を示すボックスが下に表示されます。例えば：
1
マイクロブログウェブサイト頭字語 タイトル=「2006年設立」> Twitter/の頭字語>は、最近非常に減少しています。
例:
ミニブログ Web サイト Twitter が最近頻繁にダウンしています。 4.

タグは非常に目立たない小さなタグですが、役に立たないというわけではありません。名前が示すように、

を使用すると、HTML 内のタグを意味論化できます。このコンパクト タグは、デフォルトでタグ内のコンテンツを斜体で表示します。もちろん、デフォルトのスタイルはスタイルを使用して簡単に変更できます。
1 2 3 4
住所>グレン・スタンスベリー 1234 ウェブ開発レーン アメリカならどこでも /アドレス> 5. と
タグを使用して編集済みバージョンを表示したい場合は、 と が最適です。名前が示すように、 は追加されたコンテンツを下線で強調表示し、 は削除された情報を取り消し線で表示します。
1
ジョン デル>好き/デル> イン >は/が>の新しいiPodを愛しています。
例:
みんながいいね 放棄 Zblog。 6.
テキストにマークを付けるタイミングを最も忘れやすいのはフォーム要素のようです。フォーム要素の場合、最も忘れられやすいのは タグです。これはテキストをマークアップする便利な方法であるだけでなく、 タグに「for」属性を渡してどの要素を関連付けるかを指定することもできます。 スタイルで簡単に制御できるだけでなく、タイトルをクリック可能にすることもできます。
1 2
ラベル for="ユーザー名">ユーザー名/ラベル> 入力 id="ユーザー名" タイプ= "テキスト" /> 7.

フィールドセットは、フォーム要素に論理グループを追加するために使用できる小さなタグです。

タグは、その中の要素の周囲にボックスを描画します。もう 1 つのポイントは、フィールドセットに タグを追加してグループのタイトルを定義できることです。
1 2 3 4 5 6 7
フォーム>フィールドセット> 伝説>あなたは 5 年生より賢いですか? /レジェンド> もちろん入力 名前=「はい」 タイプ="ラジオ" 値=「はい」 /> わからない入力 名前=「いいえ」 種類=「ラジオ」 値=「いいえ」 /> /フィールドセット> /フォーム>
例: 8.
タグは、 タグと非常によく似ていますが、 タグは短縮語の定義にのみ使用されます。 と同様に、このタグに title 属性を定義できます。ユーザーが略語テキストの上にマウスを置くと、内容全体が下に表示されます。 タグはめったに使用されませんが、スクリーン リーダー、スペル チェッカー、検索エンジンには非常に役立ちます。
1
略語 タイトル=「Brainless」>NC/略語>は野蛮な用語です。
例:
は未開の用語です。 は未開の用語です。 9. 関係
Rel は、 非常に便利な 属性にすることができ、HTML 要素には rel 属性を適用できます。他に指定されていない追加のパラメータを渡すと便利です。これは、HTML で JavaScript を使用する場合に非常に便利です。インラインで編集したいリンクがある場合は、以下を追加できます。
1
a rel=「クリック可能」 href= "page.html">このリンクは編集可能です。 /a>
JavaScript は、rel 属性「clickable」を持つリンクを検索し、Ajax を適用して、インラインで編集できるようにします。 rel 属性の可能性は無限であるため、これは rel 属性を使用できる多くのテクニックの 1 つにすぎません。興味のある友人は、W3C の Rel の概要を詳しく学ぶことができます。 10.
タグは、信じられないほど未知のタグです。率直に言って、このラベルはほとんど使用されていないため、このラベルに出会うことはないと思います。 (実際、私はこの記事を書くまで、このラベルをほとんど見たことがありませんでした)。実際、このラベルはソフト改行であり、特定の行内に改行ポイントを指定でき、この点で改行できることを示しますが、改行は必ずしも発生するわけではなく、行は単に改行されるだけです。ラインを中断する必要がある場合は中断されます。水平スクロールバーを回避したい場合は、このタグを使用すると便利です。
例:
以下は、オーバーフローが定義されていない幅 200 ピクセルのボックスです。 NowbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbr
ハヴァWbrハヴァWbrハヴァWbrハヴァWbrハヴァWbrハヴァWbrハヴァWbrハヴァWbr
タグを使用せずに同じ効果を実現したい場合は、これまたは を試してください。これら 3 つのタグはいずれも、すべてのブラウザーで完全にサポートされていないと言われています。この記事を使用して、3 つのタグに対する各ブラウザのサポートを確認できます。
追伸: この記事を翻訳するのは非常に困難でしたが、Shenfei はセマンティクスの魅力と HTML タグの威力を痛感しました。その結果、誰もがよく知っているタグがあると思います。誰もが使用していないおなじみのタグと珍しいタグ。以前の記事で説明したように、「セマンティック」の重要な部分は、単に div を使用するのではなく、適切な場所で適切なタグを使用することです。より多くの HTML タグを理解できれば、よりセマンティックな HTML コードを作成できるようになり、CSS を記述する難しさと作業負荷が大幅に軽減され、ページ構造がより合理的になります。