使用場所によって混乱しやすい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になる問題を解決する

推薦する

Dockerは元のタグのイメージの再タグ付けと削除を実装します

docker イメージ ID は一意であり、イメージを物理的に識別できます。repository: ...

Ubuntu で XFS ファイルシステム用の LVM を作成する方法

序文lvm (論理ボリューム マネージャー) 論理ボリューム管理は、Linux システムのニーズを満...

MySQL で制限を使用するとパフォーマンスに影響するのはなぜですか?

まず、MySQL のバージョンについて説明します。 mysql> バージョンを選択します();...

テーブルの最大幅と最小幅を設定する際の互換性の問題と解決策の詳細な説明

テーブル内の min-width と max-width プロパティの設定 <テーブル>...

Vue-cli4 ルーティング構成の詳細な理解

目次序文 - Vue ルーティング1. 最も基本的なルーティング構成1. router/index....

jsシミュレーションでJingdongの詳細ページで画像を拡大する効果を実現

この記事では、Jingdongの詳細ページの画像の拡大を実現するためのjsの具体的なコードを紹介しま...

モバイル開発における 1px ラインの理解と解決策

1pxの線が太くなる理由モバイルプロジェクトに取り組むとき、設計図に従って要素ノードのサイズとスタイ...

ReactJs 基礎チュートリアル - 基本編

目次1. ReactJS の紹介2. ReactJSの理解とReactJSの利点1. ReactJS...

Linux のバックグラウンドで & と nohup を使用する方法

ターミナルやコンソールで作業しているときは、メールを読むなど、もっと重要な作業があるかもしれないので...

JavaScript でフロントエンドのカウントダウン効果を実装する

この記事では、フロントエンドのカウントダウン効果を実現するためのJavaScriptの具体的なコード...

jQueryはフォーム検証機能を実装します

jQuery フォーム検証の例 / ユーザー名、パスワード、住所、電子メールの検証を含む下記の通り ...

Centos7 システムでの .NET Core 2.0 + Nginx + Supervisor 環境の構築

1. Linux .NET Core の紹介Microsoft は常に自社のプラットフォームに対して...

Ubuntuにmysql5.7.10を手動でインストールする

このチュートリアルでは、UbuntuにMySQL 5.7.10を手動でインストールする手順を参考まで...

HTML をホームページとして設定し、お気に入りに追加_Powernode Java Academy

IE ブラウザで「ホームページとして設定」および「お気に入りに追加」機能を実装する方法解決:指定さ...

Linux システム Docker への ASP.NET Core アプリケーションのデプロイのプロセス分析

目次1. システム環境2. 運用プロセスと途中で遭遇した問題1. システム環境1. Tencent ...