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

htmlとcssを知る、htmlの構造とcssの表現分離を知る、html semanticを知る、これらはここ数年のホットキーワードだと思います。セマンティックhtmlは、1、2年前に中国で求められただけです。今グループで話しているhtml構造を見て、html構造に関するインタビューの質問を見て、セマンティックhtmlが大きな部分を占めています。では、なぜセマンティックHTMLを使うのか、セマンティックHTMLの利点はいったい何なのでしょうか？

HTMLは、Webページのコンテンツのコンテキスト構造と意味を提供することです。html自体は性能ではありませんが、我々は、例えば、＆lt;h1＆gt;は、太字、フォントサイズ2em、太字です;＆lt;強い＆gtは、これはhtmlのパフォーマンスであると考えないで、これらは実際にアクションでhtmlのデフォルトCSSスタイル、だから最初に我々は知っておく必要があるhtmlとページのパフォーマンスは関係ありませんが、これらはCSSのですものです。ページ内のhtmlは、構造と意味の役割であり、平たく言えば、コンテンツを分割することです、何がここに置かれ、我々は何を置くかである。

セマンティックなHTML構造は、HTML構造を重視することから始まる

HTML構造はページの骨格、ページは家のようなもの、HTML構造は鉄骨と鉄筋コンクリートの壁、鉄骨と鉄筋コンクリートの壁のない家はレンガの山、住めない、働けない。CSSは装飾材料、元の木の床、大理石、塗料、家を飾るために使用されて、CSSは強力です言うまでもなく、HTML構造のないCSSは板の山、塗料と共に、実用的ではありません。CSSは、それを参照する(X)HTML文書に全面的に依存する。CSSの威力を最大限に発揮させるには、きれいで構造化されたコンテンツを持つhtmlを提供することが不可欠です, "HTML はインターネット上でハイパーテキストを公開するための共通言語です...... HTMLはタグを使ってテキストを構成します "( http://www.w3.org/MarkUp/ ).

セマンティックなHTML構造はどのように書くのですか？
HTMLは、テキストコンテンツに構造と意味（セマンティクス）を追加する方法です。この行は見出しで、この行は段落を構成しています。この行は項目のリストで、この行はインターネット上の別の文書へのハイパーリンクです。この部分は右端の列で、この行はイタリック体です。フロントエンドの開発をするときに覚えておいてください。HTMLは、コンテンツが何であるか（あるいは何を意味するか）を示すものであって、それがどのように見えるかを示すものではありません。セマンティックマークアップとは、プレゼンテーション情報から完全に切り離されたHTMLのことであり、タグが意味的に文書の構造を定義していることを意味するのです。

HTMLのセマンティック構造は実にシンプルです。まず、HTMLの各タグのセマンティクスを把握し、コンテンツを見たときに、どのタグがそれをよりよく表現するかを考え、それが何であれ使うのです。

セマンティックHTML構造の利点は具体的に何ですか？

HTML5の新しいタグ、例えば<header>や<footer>によって、htmlはより強固なセマンティックHTML構造へと向かっていることがわかります。xhtml2はこの時点でhtml5ほど進んでおらず、この点からもセマンティックHTML構造が xhtml2が死んだ理由の1つと言えるのではないでしょうか？

1. 削除またはスタイル損失は、ときにページに明確な構造を与える。

html自体は表現されていませんが、私たちは例えば、<h1>は太字、フォントサイズ2em、太字; <strong> は太字ですが、これはHTMLのパフォーマンスだと思わないで、これらは実際にアクションのHTMLのデフォルトのCSSスタイルなので、削除またはスタイルの損失は、ページが明確な構造をレンダリングすることができます意味的ではありません HTML構造の利点は、ブラウザはデフォルトスタイルを持って、デフォルトスタイルの目的も良いHTMLのセマンティクスを表現するためには、ブラウザのデフォルトスタイルと意味HTML構造は切っても切れないと言うことができる。

2. スクリーンリーダー（視覚障害者の場合）は、マークアップに基づきページを読みます。 .

たとえば、セマンティックマークアップを使用すると、スクリーンリーダーは、単語をそのまま発音しようとするのではなく、1つずつスペルアウトします。

3. PDAや携帯電話などのデバイスは、通常のコンピューターのブラウザと比較して、ウェブページをうまく表示できないことがあります（これらのデバイスのCSSサポートが弱いことが原因であることが多い）。

セマンティックマークアップを使用することで、これらのデバイスが意味のある方法でウェブページをレンダリングすることを保証します。理想的には、閲覧デバイスのタスクは、そのデバイス自身の条件でページをレンダリングすることです。

セマンティックマークアップは、デバイスに必要な関連情報を提供するため、（既存のデバイスや将来の新しいデバイスを含め）考えられるすべての表示シナリオを自分で検討する手間を省くことができます。例えば、携帯電話では、見出しのあるテキストを太字にすることを選択するかもしれません。一方、ハンドヘルドコンピューターは、より大きなフォントで表示させるかもしれません。いずれにせよ、テキストを見出しとしてマークしておけば、読書用のデバイスがそれぞれの条件で適切にページを表示してくれることは間違いありません。

4. 検索エンジンのクローラーは、個々のキーワードの文脈や重みを判断する際にも、マークアップを頼りにしています。

検索エンジンのクローラーは、以前はあなたのサイトの訪問者だとは思っていなかったかもしれませんが、今では非常に貴重なユーザーです。彼らがいなければ、検索エンジンはあなたのサイトをインデックスすることができず、そして一般ユーザーはサイトに来るのが難しくなってしまいます。

5. クローラーは体裁のためのマークアップをほとんど無視し、セマンティックマークアップを重視するため、クローラーにとってわかりやすいページであることが重要です。

したがって、ページファイルのタイトルがマークアップされている場合、そうでない場合、そのページはおそらく検索結果のさらに下位に表示されるでしょう。セマンティックマークアップは、使いやすさを向上させるだけでなく、本来、ページにスタイルや動作を適用するための多くのフックを提供するため、CSSやJavaScriptを適切に使用することを容易にします。
SEO対策は、サイトのコンテンツと外部リンクに大きく依存しています。

6. チームによる開発・保守が容易

W3Cは、チームの誰もが従う良い基準を与えてくれるので、多くの差別化が図れ、開発・保守が容易になり、開発効率が向上し、さらには モジュール開発の実現 .

もし、違う意見があれば、それを追加して、コメントで自由に議論してください。

Ghostさん、Milk Teaさん、Xiaozhiさん、Stealing Riceさん、Casparさん、css forest groupさん、議論してくださってありがとうございました