誰もが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構造の利点は何ですか？<header>や<footer>などのHTML5の新しく追加されたタグは、HTMLがより堅牢なセマンティックHTML構造に向けて開発されていることを知っています。 XHTML2は、この点でHTML5ほど高度ではありません。これがXHTML2の死の理由でもあります。これは、セマンティックHTML構造がHTMLの開発動向であることも示しています。
1.ページが削除されたり、スタイルが失われたりすると、ページに明確な構造を与えることができます。HTML自体はそれ自体を表現していません。たとえば、<h1>は太字であり、フォントサイズは2em、太字であることがわかります。 <strong>は大胆です、これがHTMLの現れだとは思わないでください。これらは実際にはHTMLのデフォルトのCSSスタイルであるため、スタイルを削除または紛失すると、ページが明確な構造を提示することがセマンティックHTML構造の利点ではありませんが、ブラウザにはデフォルトのスタイルがあります。デフォルトスタイルの目的は、HTMLのセマンティクスをよりよく表現することです。ブラウザのデフォルトスタイルとセマンティックHTML構造は分離できないと言えます。
2。スクリーンリーダー（訪問者が視覚障害者の場合）は、マークアップに基づいてWebページを完全に読み取ります。たとえば、セマンティックマーカーを使用する場合、スクリーンリーダーは、完全に発音しようとするのではなく、単語を1つずつ綴ります。
3。PDA、携帯電話、その他のデバイスは、通常のコンピューターブラウザのようなWebページをレンダリングできない場合があります（通常、これらのデバイスはCSSをサポートしているためです）。セマンティックタグ付けを使用すると、これらのデバイスが有意義な方法でWebページをレンダリングすることが保証されます。理想的には、デバイスを視聴するタスクは、デバイス自体の条件に合わせてWebページをレンダリングすることです。
セマンティックマーキングは、必要な関連情報をデバイスに提供し、可能なすべての表示状況（将来の既存または新しいデバイスを含む）を検討するために自分自身を排除します。たとえば、電話は太字のタイトルでマークされたテキストの段落を作成することを選択できます。ハンドヘルドコンピューターは、大きなフォントに表示される場合があります。いずれにせよ、テキストをタイトルとしてマークすると、読者が独自の条件に基づいて適切にページを表示することを確認できます。
4.検索エンジンクローラーもタグに依存して、個々のキーワードのコンテキストと重みを決定します。過去には、検索エンジンクローラーもウェブサイトへの訪問者であるとは考えていなかったかもしれませんが、今では実際には非常に貴重なユーザーです。それらがなければ、検索エンジンはあなたのウェブサイトのインデックスを作成することができず、平均的なユーザーを訪問するのが非常に困難になります。
5.クローラーは、クローラーが表現に使用されるマーカーをほとんど無視し、セマンティックマーカーのみに焦点を当てるため、ページがクローラーにとって簡単に理解できるかどうかです。したがって、ページファイルのタイトルが代わりにマークされている場合、ページは検索結果の低い位置にある可能性があります。使いやすさの改善に加えて、セマンティックタグ付けは、CSSとJavaScriptの正しい使用を助長します。それ自体がページのスタイルと動作を適用するための多くのフックを提供するからです。
SEOは、主にWebサイトのコンテンツと外部リンクに依存しています。
6.チームの開発とメンテナンスが簡単ですW3Cは私たちにとって良い基準を設定します。チームの全員がこの基準に従って、多くの差別化されたものを減らし、開発とメンテナンスを促進し、開発効率を向上させ、モジュール開発を実現することができます。
意見が異なる場合は、追加してください。議論するためにメッセージを残してください。
GUI GE、ミルクティー、Xiaozhi、盗みの米、Caspar、CSS Forest Groupに感謝します。