HTMLのセマンティクスといくつかの簡単な最適化についての簡単な説明

HTMLのセマンティクスといくつかの簡単な最適化についての簡単な説明

1. セマンティゼーションとは何ですか?

Bing辞書の説明

セマンティクス化とは、適切な HTML タグとその固有の属性を使用してドキュメント コンテンツをフォーマットすることを指します。簡単に言えば、セマンティクスとは、機械が理解できるようにデータや情報を処理することです。セマンティック (X) HTML ドキュメントは、PDA、テキスト ブラウザーを使用するユーザーや障害を持つユーザーなど、訪問者にとって Web サイトの使いやすさを向上させるのに役立ちます。検索エンジンやクローラー ソフトウェアの場合、インデックスの構築に役立ち、より高い重み付けが与えられる可能性があります。 実際、SEO を改善する最も効果的な方法の 1 つは、Web ページの HTML 構造を再構築することであり、これは本質的にはセマンティクス化です。

簡単に言えば、コンテンツの構造 (コンテンツ セマンティクス) に応じて適切なタグ (コード セマンティクス) を選択し、開発者がよりエレガントなコードを読み書きしやすくすると同時に、ブラウザ クローラーやマシンが適切に解析できるようにすることです。さまざまなコンテンツに適切なタグを使用します。

2. セマンティクスの利点は何ですか?

CSS ファイルが正常に読み込まれない場合でも、ページは適切なコンテンツ構造を提示できます。SEO に適しており、検索エンジンやクローラーはより有用な情報をクロールし、インデックスを構築し、より高い重みを取得できます。他のデバイス (スクリーン リーダー、視覚障碍者リーダー、モバイル デバイスなど) が解析して Web ページを意味のある方法でレンダリングするのに便利です。

3. HTML5のセマンティクス化

最新のHTML5は、ウェブページ構造に構造化タグのシステムを追加します。

構造：

XML/HTML コードコンテンツをクリップボードにコピー
  1. <header>ヘッダー</header>   
  2. < nav >ナビゲーション</ nav >   
  3. <記事>   
  4.      <セクション>コンテンツ 1 </セクション>   
  5.      <セクション>コンテンツ 2 </セクション>   
  6.      <セクション>コンテンツ 3 </セクション>   
  7. </記事>   
  8. < aside >サイドバー</ aside >   
  9. <フッター>下部</フッター>   

4. HTMLを書くときに注意すべきこと

タグ終了</>, />;

インライン要素がブロック要素を囲むのを避けるためにタグのネストを正しく使用します。

タグを合理的に使用し、div や span などの非セマンティック タグをできるだけ少なくして、CSS ファイルが正常に読み込まれなかった場合でも、ページが適切なコンテンツ構造を表示できるようにします。

タイトルには、<h1>、<h2>、<h3>、<h4>、<h5>、<h6> を重要度の降順で使用します。<h1> が最高レベルです。

段落を区切るには <p> を使用し、行を区切るには <br /> を使用しないでください。

b、font、u などの純粋なスタイル タグは使用せず、代わりに CSS 設定を使用します。

表を使用する場合は、<thead>、<tbody>、<tfoot> を使用して、ヘッダー、本文コンテンツ、表を囲みます。

5. SEO 最適化に関して、HTML では何を行う必要がありますか?

ドキュメント タイプでは、HTML5 doctype <!DOCTYPE HTML> が一貫して使用されます。

メタタグの最適化には、主にタイトル、説明、キーワードが含まれます。末尾に「 />」を使用せず、「>」を直接記述します。

1 つの CSS ファイルを使用して、それを <head> タグ内に配置するのが最適です。

js ファイルの読み込みによって HTML のレンダリングがブロックされるのを避けるには、js ファイルを一番下に配置するのが最適です。

HTML に CSS および JS コードを直接記述することを避けるために外部ファイルを使用します。

ファイルをインポートするときは絶対アドレスを使用します。絶対アドレスには、Web サイトのドメイン名が含まれます。

img タグに alt キーワードを追加すると、SEO の最適化に役立ちます。検索エンジンのデータベースにデフォルトで含まれていない「的」、「上」、「好」、「等」などの単語は使用しないようにしてください。

ロゴに h1 タグを追加します。検索エンジンは h1 タグが Web ページで最も重要な情報であると想定するため、最も重要な情報を <H1> タグに配置します。

このウェブページでは、HTML ウェブページが基準を満たしているかどうかを確認できます。リンクを入力するだけで、検査結果が表示されます。

https://validator.w3.org/nu/

以上が、HTMLのセマンティクスといくつかの簡単な最適化に関する編集者の短い説明の内容です。皆様の123WORDPRESS.COMへのご支援をお待ちしております。

<<:  ブラウザは関連するHTTPヘッダーをキャッシュし、HTTPリクエストの数を最小限に抑えます。

>>:  ページ内のリストプルダウン効果を実現するための純粋なCSS

推薦する

Vueはカルーセルのフレームレート再生を実装します

この記事の例では、カルーセルのフレームレート再生を実現するためのVueの具体的なコードを参考までに共...

Vue はトークンの有効期限が切れると自動的にログインページにジャンプする機能を実装します

このプロジェクトは最近テストされ、テスターから、トークンの有効期限が切れたため、ルートが自動的にログ...

Vue のプラグインとコンポーネントの違いと使い方のまとめ

このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...

MySQL データベースに基づくデータ制約の例と 5 つの整合性制約の紹介

非準拠データがデータベースに入るのを防ぐために、ユーザーがデータを挿入、変更、削除、その他の操作を行...

MySQL でレプリケーション フィルターを動的に変更する方法

MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...

MYSQLについては、データ型と操作テーブルを知る必要があります

データ型と操作データテーブル1.1 MySQL 型: 整数 1.2 MySQL データ型: 浮動小数...

CSS3は光る境界線効果を実現します

操作効果: html <!-- この要素は表示されません。DOM は JavaScript に...

HTML で dl(dt,dd)、ul(li)、ol(li) を使用する方法

HTML <dl> タグ#定義と使用法<dl> タグは定義リストを定義します...

Ubuntu で .sh ファイルを実行するいくつかの方法の違いについて簡単に説明します。

序文特に bash 環境では、スクリプトの実行方法によって結果が異なります。スクリプトを実行する方法...

ウェブページを白黒に変換します（Google、Firefox、IE、その他のブラウザと互換性があります）

CSSファイルに書き込むコードをコピーコードは次のとおりです。 01.html {グレイスケール（1...

Linux システムに Spring Boot アプリケーションをインストールするための詳細なチュートリアル

Unix/Linux サービスsystemd サービス操作プロセス1. JDKがインストールされたC...

Vue 開発ガイドの重要な知識の要約

目次概要0. JavaScriptとWeb開発の基礎1. Vueの基本概念Vue コア機能コンポーネ...

一般的なブラウザ互換性の問題（概要）

ブラウザの互換性とは、スタイルの互換性 (CSS)、インタラクションの互換性 (JavaScript...

el-table のテーブルを最適化するために仮想リストを使用する方法についての簡単な説明

目次序文解決具体的な実装満たすべき前提条件質問序文テーブルをよく使用します。データ量が多い場合は直接...

Linux の一般的な基本コマンドと使用方法

この記事では、一般的な基本的な Linux コマンドとその使用方法を例を使って説明します。ご参考まで...