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

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

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 構造の利点は何ですか?

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 を正しく使用しやすくなります。
SEO は主に、Web サイトのコンテンツと外部リンクに依存します。

6. チーム開発とメンテナンスが容易

W3C は私たちにとって非常に優れた標準を設定しました。チームの全員がこの標準に従えば、多くの相違点が減り、開発と保守が容易になり、開発効率が向上し、さらにはモジュール開発も実現できます

異なる意見や追加事項がある場合は、メッセージを残して議論してください。

議論にご協力いただいたGuige、Milk Tea、Xiaozhi、Toufianmi、Caspar、CSS Forest Groupに感謝します。

<<:  CSS @font-face パフォーマンス最適化の詳細な理解

>>:  Docker コンテナのカスタム ホストのネットワーク アクセス操作

推薦する

MySQLの共同クエリ最適化メカニズムの詳細な説明

目次MySQL フェデレーテッド クエリ実行戦略。実行計画フェデレーテッドクエリオプティマイザーMy...

Dockerイメージ内のファイルを表示する方法

Dockerイメージ内のファイルを表示する方法1. すでに実行中の場合すでに実行中のイメージについて...

JavaScript の Set データ構造の詳細な説明

目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...

Google ブラウザのラベルと入力間のスペースに関する小さな問題

最初にコード、次にテキストコードをコピーコードは次のとおりです。 <!DOCTYPE html...

1分でVueが右クリックメニューを実装

目次レンダリングインストールコードの実装カスタムスタイル要約する効率的に要件を満たし、車輪の再発明を...

Linux zabbix エージェントの展開と設定方法の詳細な説明

1. web01にzabbix-agentをインストールするZabbix ウェアハウスをデプロイする...

Serv-U FTPとADの完璧な統合ソリューションの詳細な説明

会社が現在使用しているソリューションを確認するためにバックエンドにログインしました。使用される FT...

音声キューイングシステムを実装するためのJavaScript

目次導入主な特徴エフェクト表示キーコード導入音声キューイングシステムは、銀行、レストラン、病院などの...

MySQL DDL による同期遅延を解決する方法

目次序文解決ツールの紹介仕組み使用制限使用上の注意使用例いくつかのパラメータの説明出力例Tencen...

HTML テーブル マークアップ チュートリアル (41): テーブル ヘッダーの幅と高さの属性 WIDTH、HEIGHT

デフォルトでは、ヘッダーの幅と高さはコンテンツに応じて自動的に調整されます。ヘッダーの幅と高さを手動...

Mysql 複数データベースのバックアップ コード例

この記事は主にMysqlの複数データベースのバックアップのコード例を紹介します。この記事ではサンプル...

MySQL テーブルを返すとインデックスが無効になるケースの説明

導入MySQL InnoDB エンジンがレコードをクエリし、インデックス カバレッジを使用できない場...

MySQL は SQL ステートメントの最新のレコードをクエリします (最適化)

最悪の選択肢は、結果を時間順に並べ替えて最初のものを取ることです。 *から選択 ここで、create...

Linux でメモリ使用量を確認する方法

システムの問題、アプリケーションの速度低下、または原因不明の問題をトラブルシューティングする場合、最...

WeChatアプレットコンポーネントライフサイクルの落とし穴の記録

通常、コンポーネントのライフサイクルは、ビジネス ロジックが始まる場所です。ビジネスシナリオが複雑で...