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 内の各タグのセマンティクスを理解する必要があります。<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 を正しく使用しやすくなります。 6. チーム開発とメンテナンスが容易 W3C は私たちにとって非常に優れた標準を設定しました。チームの全員がこの標準に従えば、多くの相違点が減り、開発と保守が容易になり、開発効率が向上し、さらにはモジュール開発も実現できます。 異なる意見や追加事項がある場合は、メッセージを残して議論してください。 議論にご協力いただいたGuige、Milk Tea、Xiaozhi、Toufianmi、Caspar、CSS Forest Groupに感謝します。 |
<<: CSS @font-face パフォーマンス最適化の詳細な理解
>>: Docker コンテナのカスタム ホストのネットワーク アクセス操作
目次MySQL フェデレーテッド クエリ実行戦略。実行計画フェデレーテッドクエリオプティマイザーMy...
Dockerイメージ内のファイルを表示する方法1. すでに実行中の場合すでに実行中のイメージについて...
目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...
最初にコード、次にテキストコードをコピーコードは次のとおりです。 <!DOCTYPE html...
目次レンダリングインストールコードの実装カスタムスタイル要約する効率的に要件を満たし、車輪の再発明を...
1. web01にzabbix-agentをインストールするZabbix ウェアハウスをデプロイする...
会社が現在使用しているソリューションを確認するためにバックエンドにログインしました。使用される FT...
目次導入主な特徴エフェクト表示キーコード導入音声キューイングシステムは、銀行、レストラン、病院などの...
目次序文解決ツールの紹介仕組み使用制限使用上の注意使用例いくつかのパラメータの説明出力例Tencen...
デフォルトでは、ヘッダーの幅と高さはコンテンツに応じて自動的に調整されます。ヘッダーの幅と高さを手動...
この記事は主にMysqlの複数データベースのバックアップのコード例を紹介します。この記事ではサンプル...
導入MySQL InnoDB エンジンがレコードをクエリし、インデックス カバレッジを使用できない場...
最悪の選択肢は、結果を時間順に並べ替えて最初のものを取ることです。 *から選択 ここで、create...
システムの問題、アプリケーションの速度低下、または原因不明の問題をトラブルシューティングする場合、最...
通常、コンポーネントのライフサイクルは、ビジネス ロジックが始まる場所です。ビジネスシナリオが複雑で...