セマンティック HTML 構造の利点は何ですか?

セマンティック HTML 構造の利点は何ですか?

1つ:

1.セマンティック タグは単なる HTML であり、CSS にはセマンティクスはありません。 HTML はタグ、CSS は属性です。

2.セマンティックタグの要約 文書化されたページに基づいて、Web ページはドキュメントと見なされます。DOM の D (ドキュメント) と js の記述に使用されるドキュメントは、コンピューターがページをドキュメントとして見なしていることを明確に示しています。ページをドキュメントの一種として分類することもできます。

3. HTML タグ自体に意味があります。 p---段落、li---リスト、img---画像などですが、div---区分など一部は意味的ではなく、div タグ内のコンテンツの属性や表示スタイルを表すことができません。

4. HTML5 では、HTML とほとんどの人の開発習慣、および一般的な Web サイト ページの表示形式に基づいて、<header><footer><nav><article> などのセマンティック タグが追加されています。

5.私の個人的な理解では、HTML は定義された属性を持つ XML です。セマンティック HTML を使用すると、ページ構造が明確になり、CSS と JS の記述が少なくなり、SEO にもより効果的になります。

二:

検索エンジンのクローラーも、個々のキーワードのコンテキストと重みを判断するためにマークアップに依存しています。

これまでは、検索エンジンのクローラーをウェブサイトの「訪問者」とは考えていなかったかもしれませんが、現在では彼らは非常に貴重なユーザーです。彼らがいなければ、検索エンジンはウェブサイトをインデックスすることができず、一般ユーザーが訪れるのが難しくなります。

6.クローラーはプレゼンテーションに使用されるマークアップをほとんど無視し、セマンティック マークアップのみに注意を払うため、ページがクローラーにとって理解しやすいことは非常に重要です。

したがって、ページのタイトルが ではなく でタグ付けされている場合、そのページは検索結果で下位にランク付けされる可能性があります。

セマンティック HTML 構造の利点に関する上記の簡単な説明は、エディターが皆さんと共有する内容のすべてです。これが皆さんの参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。

<<:  Linuxコマンドunzipの詳しい説明

>>:  この記事ではMySQLのNULLについて説明します。

推薦する

HTML 名 ID とクラスの違い_PowerNode Java アカデミー

名前タグの名前を指定します。形式 <input type="text" n...

ReactでCSSスタイルを動的に変更する2つの方法の詳細な説明

最初の方法: デモとしてボタンをクリックしてテキストを表示または非表示にするクラスを動的に追加します...

Vueでeslintを使用する方法の詳細な説明

目次1. 説明2. 関連する依存パッケージをダウンロードする3. 設定ファイル .eslintrc....

MySQL 8.0 の非表示列に対する基本操作

目次01 非表示の列を作成する02 非表示の列に対する基本操作03 非表示の列メタデータ04 主キー...

Linuxサーバーのディスク容量を拡張する方法

目次序文ステップ序文今日、es ログが記録されていないことに気付きました。filebeat、elas...

ネイティブWeChatアプレット開発におけるreduxの使用の詳細な説明

前提複雑なシナリオでは、複数の異なるページ間で大量のデータを使用したり変更したりする必要があります。...

CSS3でアニメーションを実装する3つの方法

これは、面接者の CSS に関する基本的な知識をテストするものです。 CSSでアニメーションを実装す...

HTML に埋め込まれた Flash HTML ウェブページ コードに Flash ファイルを埋め込むソリューション (パート 2)

上の記事で、SWFObject V1.5 の使い方の紹介は一旦終了です。これから、SWFObject...

MySql クライアントが数秒で終了する問題を解決する (my.ini が見つからない)

問題の説明 (環境: windows7、MySql8.0)今日、MySql をインストールした後、M...

Nginx をベースに特定の IP への短期アクセス数を制限する

特定の期間内に特定の IP へのアクセス回数を制限する方法は、特に悪意のある DDOS 攻撃に直面し...

ユーザーエクスペリエンスの構築

<br />おそらく、あなたは会社に入社したばかりで、その会社が「ユーザビリティ」に関す...

HTML フォームを送信するいくつかの方法_PowerNode Java Academy

方法1: 送信ボタンから送信する <!DOCTYPE html> <html>...

Vueのキーボードイベントの詳細な説明

目次共通キーエイリアスエイリアスが指定されていないキーシステム修飾キーカスタムキーエイリアス要約する...

HTML 形式の JSON 出力の例 (テスト インターフェース)

JSON データを美しいインデント形式で表示するには、最も単純な JSON.stringify 関...