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

1. セマンティクスとは何ですか?

Bing オンライン辞書からの説明

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

簡単に言うと、コンテンツの構造（コンテンツセマンティクス）に基づいて適切なタグ（コードセマンティクス）を選択することで、開発者がより洗練されたコードを読み書きできるようにしながら、ブラウザのクローラーやマシンがうまく動作できるようにすることです。どのようなコンテンツにどのようなタグを使用するかを分析します。

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

CSS ファイルが正常に読み込まれない場合でも、ページは適切なコンテンツ構造を表示できます。

これにより、検索エンジンやクローラー ソフトウェアがより有用な情報をクロールし、インデックスを構築し、より高い重みを取得できるようになります。

他のデバイス (スクリーン リーダー、ブラインド リーダー、モバイル デバイスなど) が意味のある方法で Web ページをレンダリングするのに便利です

3. HTML5 のセマンティクス

最新の HTML5 では、体系的な構造が追加されています。 Web ページの構造:

構造:

<header>头部</header>
<nav>导航</nav>
<article>
    <section>内容1</section>
    <section>内容2</section>
    <section>内容3</section>
</article>
<aside>侧边栏</aside>
<footer>底部</footer>

4. HTML を記述する際の注意事項

タグクロージャ

, />; >

ブロック要素を囲むインライン要素を避けるためにタグのネストを正しく使用します。タグを合理的に使用し、CSS ファイルが正常に読み込まれない場合でもページに適切なコンテンツ構造を表示できるように、セマンティック タグを div および span としてできるだけ少なく使用します。

が最高レベルになるようになり、段落を区別し、

改行の使用を避けます。 純粋なスタイル タグ、b、font、u などを使用せず、代わりに を使用します。 css 設定;

テーブルを使用する場合は、ヘッド、メインコンテンツ、テーブルを

、

、

で囲みます。

ドキュメント タイプは HTML5 doctype を使用します

メタ タグの最適化 (主にタイトル、説明、キーワードを含みます) は最後に " />" を使用しないでください。

を使用するのが最善です。ヘッダー

タグ内に配置される css ファイル。js ファイルの読み込みによる HTML のレンダリングのブロックを避けるために、

js ファイルは下部に配置するのが最適です。

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

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

img タグと alt キーワードは、SEO の最適化に役立ちます。 etc.」など、デフォルトではエンジンデータベースに含まれていない単語を検索する場合は、 ロゴにh1タグを追加してください。検索エンジンはデフォルトでh1タグを使用します。このタイトルはWebページの最も重要な情報です。 , そのため、最も重要な情報を

HTML Web ページについて基準を満たしているかどうかをこの Web ページで確認し、リンクを直接入力して検査結果を表示できます

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