使用場所によって混乱しやすいXHTMLタグ

使用場所によって混乱しやすいXHTMLタグ
<br />jb51.net では、常に記事のセマンティクスを重視してきましたが、HTML タグはどのように使用すればよいのでしょうか。一般的にどこで使われていますか?
XHTML CSS を使って Web ページをデザインし始めた頃は、タグの使用経験も少なく、あまり気楽に使っていました。目的の効果が得られれば何でもいいだろうと、思いついたことを何でも使ってしまうことが多かったです。しかし、検索エンジン最適化について学び、理解を深めるにつれて、タグの使用は実際には科学であることがわかりました。
ここでは、CSS の各タグの対応するプロパティと使用法については詳しく説明しません。Web ページでの適用に焦点を当て、皆様のお役に立てれば幸いです。
1. 部門
XHTML ウェブサイトを構築する人にとって、DIV はなじみのある言葉でしょう。多くのウェブサイトや資料では、Web 標準のウェブサイト構築を DIV CSS ウェブサイト構築と呼んでいます。この名前には理由があります。W3C では、Web ページのレイアウトに Table タグを使用することを推奨しておらず、レイアウト タグとしての DIV が当然レイアウトの責任を負っているからです。
DIV は大きなコンテナとも言えます。ウェブページの全体的な構造レイアウトに加えて、ウェブページ上で比較的独立しているように見える領域を分割するために使用することをお勧めします。 DIV の機能は、新聞と同じように、さまざまなコンテンツを大きなコンテナーに分割することです。さまざまな領域で、特定の状況に応じて適切なラベルが選択されます。
2. H タグH タグはタイトル タグであり、段落の意味を示すために段落の前によく使用されます。表示レベルや表現する意味に応じて、H1~H6に分けられます。
H1 は最も重要であり、Web サイト全体の役割と性質の説明を表現したり、Web サイトの対象ユーザーを示したりするためによく使用されます。その他のタグは、レベルに応じて、特定の領域の名前や特定の紹介テキストの一般的な説明を表示するために使用されます。
H タグは、Web サイトまたはテキストの段落の一般的な説明を表すため、検索エンジンにとって高い価値を持ちます。しかし、気軽に使えるというわけではありません。たとえば、一部の Web サイトでは、特定のキーワードのランキングを意図的に追求するために、H タグを使用してテキストの段落内にキーワードを表示します。または、Web ページをレイアウトするためのコンテナーとして H タグを使用することもできます。これは H タグの目的を完全に混乱させるため、推奨されません。
3. ピ
P は段落タグであり、テキスト グループの異なる段落を区別するために使用されます。検索エンジンの場合、クロール順序に応じて、最初の P タグ内のテキストも価値が高くなります。たとえば、Baidu は Meta タグの説明内のテキストを無視し、最初の P タグ (絶対ではない) 内のコンテンツを取得します。
検索エンジンがより多くのコンテンツをクロールできるようにし、ユーザーに優れたブラウジング体験を提供するために、一部の Web サイトではコンテンツを分割するときに <br /> タグを使用します。不可能というわけではありませんが、期待した効果が得られない場合もあります。厳密なタイプのドキュメントの場合、<br /> はプレゼンテーション タグであり、使用できません。
ほとんどの Web サイトでは移行ドキュメント タイプが使用されていますが、テキストのセグメント化には使用しないことをお勧めします。
4. UL タグと LI タグ<br />これは順序なしリストです。UL タグはリストの宣言で、LI はリスト項目です。項目が比較的独立しているため、ナビゲーション、ニュース、記事リストなどの場所でよく使用されます。 UL は、さまざまなリストを区別するためのコンテナーとしても使用できます。
一部の Web サイトでは、「Web 標準」を追求してテーブルを UL や LI に変換することがありますが、これにより Web ページの読み取りや保守が困難になります。この誤解は、Web 標準が伝える概念に反しています。
5. 表
ここでは Table の使い方については詳しく説明しません。Web 標準では将来的に Table が使えなくなるわけではありませんが、レイアウトに Table を使うことは推奨されておらず、データを表示するときのみ使うべきだということをお伝えしたいと思います。したがって、Web に準拠した Web ページと Table タグの使用との間に矛盾はありません。
6. 検索エンジン用に用意されたタグ(1) タイトル: ウェブページのタイトル、ウェブサイトの説明。このタグは検索エンジンにとっても非常に価値があり、多くの場合、ターゲットキーワードが含まれています。
(2)メタキーワード:ウェブページ内の主なキーワード。もともとは検索エンジンがウェブサイトを分類しやすくするために用意されたものですが、その後、多くのウェブサイトがキーワードランキングを有利にするためにこのタグを不正に使用することが多くなったため、現在ではこのタグは検索エンジンにとってほとんど意味をなさなくなっています。
(3)メタディスクリプション:ウェブページの説明。キーワードと同様に、元々は検索エンジンの分類を容易にすることを目的としていました。同様に、多くのウェブサイトがこのタグを不正行為に使用しているため、検索エンジンにとってそれほど重要ではなくなりました。現在、主流の検索エンジンの中で、Google だけがまだコンテンツをクロールしていますが、コンテンツに基づいてキーワードを決定することはほとんどなくなりました。
実際、検索エンジンにとって最も重要なのはコンテンツの品質です。同様に、ウェブサイトを作成する目的は、訪問者に対して自社を宣伝することです。一時の快楽に流されて基本を忘れないで下さい。結局のところ、ユーザーが気にするのは、Web サイトのランキングではなく、その情報が自分たちに必要なものであるかどうかです。
以上は、初心者にとって混乱しやすい、よく使われるタグの紹介です。jb51.net をフォローして、更新された記事をお楽しみ下さい。今後、新たな問題が発生した場合、引き続き拡張していきます。ディスカッションも歓迎します。

<<:  製品の拡大鏡効果を実現する JavaScript

>>:  Dockerが新しいイメージをロードした後にリポジトリとタグ名が両方ともnoneになる問題を解決する

推薦する

HTMLテーブルで、各セルに異なる色と幅を設定します

設定が有効にならない場合が多いため、幅や高さなどをテーブル内で直接設定しないことをお勧めします。スタ...

CSSは、閉じることができるマスクレイヤーを備えたポップアップウィンドウ効果を実装します。

実際の開発ではポップアップウィンドウがよく使われます。CSS3を勉強していたときに、閉じることができ...

元のPATHを上書きしてコマンドが見つからないというメッセージが表示されるコマンド失敗の問題を解決する方法

同僚から、LINUX サーバー上の多くのコマンドが (コマンドが見つかりません) というプロンプトで...

CSSアニメーションに基づくSVGボタンのサンプルコード

具体的なコードは次のとおりです。 <a href="#"> <...

Dockerコンテナアプリケーションログの表示方法

docker アタッチコマンドdocker attach [options] 容器実行中のコンテナに...

Docker での Tomcat インストールの 404 問題の解決方法

tomcat の containerID を見つけて、tomacat ディレクトリに入ります。 [r...

MySQL Installer 8.0.21 インストール チュートリアル (画像とテキスト付き)

1. 理由新しいシステムに MySQL を再インストールする必要があったので、将来詳細を忘れた場合...

ウェブデザイン経験

<br />著者はかつてWebデザインの初心者でしたが、継続的な探求と実践を通じて、今で...

WeChatアプレットはシンプルな計算機を実装する

WeChatアプレットの簡単な計算機は参考用です。具体的な内容は次のとおりです。 1. はじめに1....

MySQL 結合テーブルと ID 自動増分の例の分析

結合の書き方左結合を使用する場合、左側のテーブルが必ず駆動テーブルになりますか? 2 つのテーブルの...

Keepalived を使用して Nginx の自動再起動とデュアルアクティブ ホットスタンバイの高可用性を実現する方法について

目次1. 概要2. Keepalivedを使用してNginxを自動的に再起動する2.1 シェルスクリ...

Dockerイメージ作成の完全なプロセス

目次序文作成手順CentOSベースイメージを作成するコンテナを作成してカスタマイズするカスタムコンテ...

Webデザインチュートリアル(1):手順と全体レイアウト

<br />注:ウェブサイトの種類を示すものを除くすべてのテキストは、企業サイト用です。...

React.js フレームワーク Redux 基本ケースの詳細な説明

react.js フレームワーク Redux https://github.com/reactjs/...

ReactでuseStateを使用する詳細な例

使用状態useState は、関数コンポーネント内で呼び出すことで、コンポーネントに内部状態を追加し...