セマンティックHTML構造を理解する方法

HTML と CSS は誰もが知っていると思います。HTML の構造と CSS の表現の分離も知っていますし、HTML のセマンティクスも知っています。これらは近年のホットなキーワードです。セマンティック HTML が中国で普及し始めたのは、ほんの 1、2 年前のことです。現在グループで議論されている HTML 構造を見ると、セマンティック HTML は HTML 構造に関する面接の質問の大部分を占めています。では、なぜセマンティック HTML を使用するのでしょうか?セマンティック HTML の利点は何ですか?

HTML は、Web ドキュメントのコンテンツのコンテキスト構造と意味を提供します。HTML 自体には表現はありません。たとえば、<h1> は太字で、フォント サイズは 2em で、太字です。<strong> は太字です。これが HTML の表現だと思わないでください。実際、HTML のデフォルトの CSS スタイルが機能しています。したがって、まず最初に、HTML はページの表現とは何の関係もないことを知っておく必要があります。これらは CSS が行うことです。ページにおける HTML の役割は構造と意味であり、簡単に言えば、コンテンツを分割して、ここに何を置くか、何を置くかということです。

セマンティックHTML構造はまずHTML構造を重視する必要がある

HTML 構造はページの骨組みです。ページは家のようなもので、HTML 構造は鉄筋コンクリートの壁です。家に鉄筋コンクリートの壁がなければ、それはただの役に立たないレンガの山で、生活やオフィスワークには使用できません。 CSS は装飾材料です。木の床、大理石、塗料のように、家を飾るために使用されます。CSS の威力については多くを語る必要はありません。CSS に HTML 構造がなければ、それは単に塗装された木の板の山であり、実用的な価値はありません。 CSS はそれを参照する (X)HTML ドキュメントに完全に依存します。 CSS を最大限に活用するには、HTML にクリーンかつ構造化されたコンテンツを提供する必要があります。「HTML は、インターネット上でハイパーテキストを公開するための共通言語です。HTML は、タグを使用してテキストを構造化します」( http://www.w3.org/MarkUp/ )。

セマンティック HTML 構造をどのように記述しますか?
HTML は、テキスト コンテンツに構造と意味 (または「セマンティクス」) を追加する方法です。これは、「この行は見出しです。これらの行は段落を形成します。このテキストは項目のリストです。このテキストはインターネット上の別のファイルへのハイパーリンクです。」ということを示しています。HTML では、「このテキストは青です。このテキストは赤です。コンテンツのこの部分は右端の列です。コンテンツのこの行は斜体です。」ということを示すべきではないことに注意することが重要です。このようなプレゼンテーション関連の情報は、CSS の役割です。フロントエンド開発を行うときは、HTML はコンテンツの見た目ではなく、コンテンツの内容 (またはその意味) を伝えるものであることを覚えておいてください。 「セマンティック マークアップ」とは、プレゼンテーション情報から完全に分離された HTML のことを指し、その中のタグはすべてドキュメントの構造を意味的に定義する必要があります。

セマンティック HTML 構造は、実はとてもシンプルです。まず、HTML 内の各タグのセマンティクスを理解する必要があります。<div> はコンテナー、<strong> は強調、<ul><li> は順序なしリスト、などです。コンテンツを見たら、どのタグがそれをより適切に説明できるかを考え、それを説明するタグを使用します。

セマンティック HTML 構造の利点は何ですか?

HTML5 で追加された <header> や <footer> などの新しいタグにより、HTML はより堅牢なセマンティック HTML 構造に向かっていることがわかっています。この点では、XHTML2 は HTML5 ほど進んでおらず、これが XHTML2 が消滅した理由の 1 つです。これは、セマンティック HTML 構造が HTML の開発トレンドであることも示しています。

1. スタイルが削除または失われると、ページは明確な構造を示すことができます。

HTML自体には表現がありません。たとえば、<h1>は太字で、フォントサイズは2emで、太字です。<strong>は太字です。これがHTMLの表現だと思わないでください。実際、これらはHTMLのデフォルトのCSSスタイルが機能しているのです。したがって、スタイルを削除したり失ったりすると、ページに明確な構造が提示される可能性があり、これはセマンティックHTML構造の利点ではありません。ただし、ブラウザにはすべてデフォルトのスタイルがあります。デフォルトのスタイルの目的は、HTMLのセマンティクスをよりよく表現することです。ブラウザのデフォルトのスタイルとセマンティックHTML構造は切り離せないものであると言えます。

2. スクリーン リーダー (訪問者が視覚障害を持っている場合) は、マークアップに基づいてページを「読み取り」ます。

たとえば、セマンティック マークアップを使用すると、スクリーン リーダーは単語を発音するのではなく、単語を「綴り」ます。

3. PDA、携帯電話、その他のデバイスでは、通常のコンピュータ ブラウザーのように Web ページをレンダリングできない場合があります (通常、これらのデバイスでは CSS のサポートが弱いため)。

セマンティック マークアップを使用すると、これらのデバイスが意味をなす方法で Web ページをレンダリングすることが保証されます。理想的には、表示デバイスは、デバイスのネイティブ機能と一致する方法で Web ページをレンダリングするタスクを実行します。

セマンティック マークアップは、デバイスに必要な関連情報を提供するため、考えられるすべての表示状況 (既存および将来のデバイスを含む) を考慮する必要がなくなります。たとえば、携帯電話では、見出しとしてタグ付けされたテキストのセクションを太字で表示することを選択できます。PDA では、より大きなフォントで表示できます。いずれにしても、テキストを見出しとしてマークすると、読み取りデバイスが独自の状況に基づいてページを適切に表示することを確信できます。

4. 検索エンジンのクローラーも、タグを利用して個々のキーワードのコンテキストと重みを判断します。

これまでは、検索エンジンのクローラーをウェブサイトの「訪問者」とは考えていなかったかもしれませんが、現在では、彼らは非常に貴重なユーザーです。彼らがいなければ、検索エンジンはウェブサイトをインデックスすることができず、一般ユーザーが訪問することが難しくなります。

5. クローラーはプレゼンテーションに使用されるマークアップをほとんど無視し、セマンティック マークアップのみに重点を置くため、ページがクローラーにとって理解しやすいことは非常に重要です。

したがって、ページ ドキュメントのタイトルが ではなく でマークアップされている場合、そのページは検索結果で下位にランクされる可能性があります。セマンティック マークアップは、使いやすさを向上させるだけでなく、ページのスタイルと動作を適用するための多くの「フック」を提供するため、CSS と JavaScript を正しく使用しやすくなります。
SEO は主に、Web サイトのコンテンツと外部リンクに依存します。

6. チーム開発とメンテナンスが容易

W3C は私たちにとって非常に優れた標準を設定しました。チームの全員がこの標準に従えば、多くの相違点が減り、開発と保守が容易になり、開発効率が向上し、さらにはモジュール開発も実現できます。

異なる意見や追加事項がある場合は、メッセージを残して議論してください。

議論にご協力いただいたGuige、Milk Tea、Xiaozhi、Toufianmi、Caspar、CSS Forest Groupに感謝します。