HTML セマンティック タグの分析_html/css_WEB-ITnose

HTML セマンティクスとは

HTML セマンティクスとは、特定のコンテンツに基づいてコードを記述するために適切なタグを選択することです。これにより、開発者はより洗練されたコードの読み書きが容易になり、同時に検索エンジンのクローラーがコードをより適切に識別できるようになります。

セマンティック

特定のセマンティック タグの分析

この記事は主に、いくつかの HTML タグのセマンティックの違いを分析することを目的としています。同時に、HTML5 で新たに追加されたセマンティック タグについても調査します。

1. ul/ol (リストタグ)

ul と ol はどちらもリスト項目ですが、具体的な使用法には大きな違いがあります。

A. ul (順序なしリスト)

説明: ul の完全な英語名は順序なしリストであり、中国語では順序なしリストとして翻訳されます。リスト内の項目を表します。優先順位はありません。 Web ページ上のほとんどのリストは順序なしリストです。

<ul>  <li>Lxxyx的博客</li>  <li>Lxxyx的评论</li>  <li>联系Lxxyx</li></ul><!-- 列表中的三个项目，均没有前后顺序的分别。 -->

B. ol (順序付きリスト)

説明: ol の完全な英語名は、順序付きリストであり、リスト内の項目を表します。順序があります。これが ol と ul の本質的な違いです。

<ol>  <li>1. Lxxyx的第一篇文章</li>  <li>2. Lxxyx的第二篇文章</li>  <li>3. Lxxyx的第三篇文章</li></ol><!-- 列表中的三个项目，有前后顺序的分别。 -->

2. dl、dt、dd (定義リスト)

説明: dl、dt、dd はカスタム リストですが、その使用法は前の ul/ol とは異なります。カスタム リストは、単なる項目のリストではなく、項目とそのコメントの組み合わせです。

例:

<dl>   <dt>计算机</dt>   <dd>用来计算的仪器 ... ...</dd>   <dt>显示器</dt>   <dd>以视觉方式显示信息的装置 ... ...</dd></dl>

レンダリング:

C.強調タグ)

説明: HTML では、b とstrong は太字、i と em は斜体です。しかし、HTML4 から HTML5 へ、別の変化が起こりました。したがって、それを書き留める必要があります。

1. b/strong (太字)

説明: b と Strong は同じ表示効果を持ちますが、どちらもフォントを太字にします。しかし、b は HTML5 で再び変更されました。

タグは「オフセット テキスト」用です。余分な強調や重要性を伝えることなく、慣例的に太字でスタイル設定されています。