誰もが html と css を知っており、html 構造と css パフォーマンスの分離を知っており、html セマンティクスを知っていると思います。これらは近年人気のキーワードです。セマンティック HTML が中国で普及し始めたのは 1 ～ 2 年前です。現在グループで議論されている HTML 構造と、HTML 構造に関するインタビューの質問を見ると、セマンティック HTML が大きな部分を占めています。では、なぜセマンティック HTML を使用するのでしょうか?セマンティック HTML の利点は何ですか?
HTML は、Web ドキュメントのコンテンツのコンテキスト構造と意味を提供します。たとえば、<h1> はフォント サイズが 2em で太字であるため、太字にしません。これは HTML だと思いますが、これらは実際に動作する HTML のデフォルトの CSS スタイルです。そのため、まず HTML はページのパフォーマンスとは関係がなく、CSS の問題であることを理解する必要があります。ページにおける HTML の役割は、構造と意味です。平たく言えば、ここに何を配置するかです。
セマンティック HTML 構造では、まず HTML 構造を強調する必要があります
HTML 構造はページの骨組みです。HTML 構造は鉄とコンクリートの壁です。家に鉄とコンクリートの壁がなければ、それは単なる役に立たないレンガの山です。居住したり、仕事に使用したりすることはできません。 CSS は、家の装飾に使用される丸太の床、大理石、ペイントです。CSS が HTML 構造を持たなければ、単なる木の塊です。これらは一緒に塗装されており、実際の使用価値はありません。 CSS は、それを参照する (X)HTML ドキュメントに完全に依存します。 CSS の機能を最大限に活用したい場合は、クリーンで構造化されたコンテンツを HTML に提供する必要があります。「HTML は、インターネット上でハイパーテキストを公開するための共通語です。HTML はタグを使用してテキストを構造化します。化」（ http://www.w3.org/MarkUp/ ）。
セマンティックな HTML 構造を記述するにはどうすればよいでしょうか?
HTML は、テキスト コンテンツに構造と意味 (または「セマンティクス」) を追加する方法です。 「この行はタイトルであり、これらの行は段落を形成します。これらの単語は項目のリストであり、これらの単語はインターネット上の別のファイルへのハイパーリンクです。HTML を使用しないように注意する必要があります。」 「これらのテキストは青で、これらのテキストは赤です。コンテンツのこの部分は右端の列で、コンテンツのこの行は斜体で表示されます。パフォーマンスに関連するこの情報は CSS の仕事です。」フロントエンド開発を行うときは、次の点に注意してください。HTML は、コンテンツがどのようなものであるかではなく、コンテンツが何であるか (またはその意味) を教えてくれます。 「セマンティック マークアップ」について話すとき、私たちが話している HTML はプレゼンテーション情報から完全に分離されるべきであり、その中のタグはドキュメントの構造を意味論的に定義する必要があります。
HTML のセマンティック構造は実際には非常に単純です。まず、<div> はコンテナーであり、<ul><li> は順序付けられていないリストです。コンテンツの表示 どのラベルがそれをより適切に説明できるかを考えるときは、それがどんなラベルであっても使用してください。
セマンティック HTML 構造の利点は何ですか?
HTML5 には <header> や <footer> などの新しいタグがあり、HTML はより堅牢でセマンティックな HTML 構造を目指して開発されていることがわかっています。この点でも、これが理由の 1 つです。 xhtml2 の死は、セマンティック HTML 構造が HTML の開発トレンドであることも示しています。
1. スタイルが削除または失われると、ページは明確な構造を示すことができます。
たとえば、<h1> は太字、フォント サイズは 2em、<strong> は太字です。これらは実際には HTML のデフォルトの CSS スタイルです。 . 関数なので、スタイルを削除または失うと、ページに明確な構造が表示されますが、これはセマンティック HTML 構造の利点ではありません。ただし、デフォルトのスタイルの目的は、セマンティクスをより適切に表現することです。 html. ブラウザのデフォルトのスタイルとセマンティックな HTML 構造は切り離せないものであると言えます。
2. スクリーン リーダー (訪問者が視覚障害がある場合) は、マークアップに完全に基づいてページを「読み取り」ます。
たとえば、セマンティック マークアップを使用すると、スクリーン リーダーは単語全体を発音しようとするのではなく、単語を「スペルアウト」します。
3. PDA や携帯電話などのデバイスは、通常のコンピュータ ブラウザのように Web ページをレンダリングできない場合があります (通常、これらのデバイスの CSS サポートが弱いため)。
セマンティック マークアップを使用すると、これらのデバイスが意味のある方法で Web ページをレンダリングできるようになり、理想的には、表示デバイスはデバイス自体の条件に合わせて Web ページをレンダリングする役割を果たします。
セマンティック タグ付けにより、必要な関連情報がデバイスに提供されるため、考えられるすべての表示シナリオ (既存のデバイスまたは将来の新しいデバイス) を考慮する手間が省けます。たとえば、電話機はタイトルのタグが付いたセクションを表示することを選択できます。テキストは太字で表示されます。いずれの場合も、テキストをタイトルとしてマークすると、読み取りデバイスが適切にページを表示します。
4. 検索エンジン クローラーもタグに依存して、個々のキーワードのコンテキストと重みを決定します。
以前は、検索エンジンのクローラーも Web サイトの「訪問者」であるとは考えなかったかもしれませんが、現在では、クローラーは実際には非常に貴重なユーザーであり、クローラーがなければ、検索エンジンは Web サイトのインデックスを作成できません。一般のユーザーが訪問するのは困難です。
5. クローラーはパフォーマンスのために使用されるマークアップをほとんど無視し、セマンティック マークアップのみに焦点を当てるため、ページがクローラーにとって理解しやすいかどうかは非常に重要です。
したがって、ページ ファイルのタイトルがタグ付けされているのではなくタグ付けされている場合、そのページは使いやすさの向上に加えて、CSS と JavaScript の正しい使用を促進します。これは、セマンティック マークアップ自体が多くの機能を提供するためです。フック」を使用して、ページのスタイルと動作を適用します。
SEO は主に Web サイトのコンテンツと外部リンクに依存します。
6. チームの開発と維持を促進する
W3C は私たちに適切な標準を設定しており、チームの全員がこの標準に従っています。これにより、多くの差別化された要素が削減され、開発とメンテナンスが容易になり、開発効率が向上し、モジュール型開発も実現できます。
異なる意見や追加がある場合は、議論のためにメッセージを残してください。
ディスカッションに協力してくれた Brother Gui、Milk Tea、Xiaozhi、Stealing Rice、Caspar、CSS Forest Group に感謝します。
原文：http: //www.css88.com/archives/1668