ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLのセマンティック構造を理解する_HTML/Xhtml_Webページ制作
HTMLのセマンティック構造を理解する_HTML/Xhtml_Webページ制作
- WBOYオリジナル
- 2016-05-16 16:42:551239ブラウズ
誰もが html と css を知っており、html 構造と css パフォーマンスの分離を知っており、html セマンティクスを知っていると思います。これらは近年人気のキーワードです。セマンティック HTML が中国で普及し始めたのは 1 ～ 2 年前です。現在グループで議論されている HTML 構造と、HTML 構造に関するインタビューの質問を見ると、セマンティック HTML が大きな部分を占めています。では、なぜセマンティック HTML を使用するのでしょうか?セマンティック HTML の利点は何ですか?
HTML は Web ドキュメントのコンテンツのコンテキスト構造と意味を提供します。たとえば、
は太字で、フォント サイズは 2em です。 , これが HTML のパフォーマンスであるとは考えないでください。これらは実際には HTML のデフォルトの CSS スタイルです。まず、HTML はページのパフォーマンスとは何の関係もないことを知っておく必要があります。ページにおける 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 の各タグの意味を理解します。
- は順序付けされていないリストです。お待ちください...コンテンツを表示したら、どのタグがそれをより適切に説明できるかを考え、必要なタグを使用してください。
セマンティック HTML 構造の利点は何ですか?
HTML5 には
や 1. スタイルが削除または失われると、ページには明確な構造が表示されます:
HTML 自体にはパフォーマンスがありません。たとえば、
のフォント サイズは太字です。これが HTML のパフォーマンスであるとは考えないでください。これらは実際には HTML のデフォルト値であるため、CSS スタイルが削除または失われると、ページは明確な構造を表示できます。ただし、ブラウザーにはデフォルト値があります。デフォルト スタイルの目的は、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 に感謝します