CSS における XHTML タグの対応する属性と使用法

CSS における XHTML タグの対応する属性と使用法

XHTML CSS を使って Web ページをデザインし始めた頃は、タグの使用経験も少なく、あまり気楽に使っていました。目的の効果が得られれば何でもいいだろうと、思いついたことを何でも使ってしまうことが多かったです。しかし、検索エンジン最適化について学び、理解を深めるにつれて、タグの使用は実際には科学であることがわかりました。 123WORDPRESS.COM - jb51.net の CSS チュートリアル記事ではセマンティクスを重視していますが、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 タグ これは順序なしリストです。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 の更新された CSS チュートリアル記事をフォローすることを歓迎します。今後、新しい問題が発生した場合、引き続き拡張していきます。

<<:  MySQL リンクを表示し、異常なリンクを削除する方法

>>:  Dockerイメージの作成とプロジェクト全体のワンクリックパッケージングとデプロイ

推薦する

Linux でユーザーを完全に削除する 2 つの方法

Linux 操作実験環境: Centos7 仮想マシンまず、共通ユーザーgubeiqingを作成しま...

CSS3で実装されたテキストポップアップ効果

成果を達成する実装コードhtml <div>123WORDPRESS.COM</d...

Linux インストール Redis 実装プロセスとエラー解決

今日、redis をインストールしたところ、今までになかったいくつかのエラーが発生しました。ここで記...

素晴らしいCSS属性MASKの詳しい説明

この記事では、CSS の非常に興味深い属性マスクを紹介します。名前が示すように、マスクはマスクと翻訳...

Linux CentOS インストール JDK および Tomcat チュートリアル

まずJDKをダウンロードします。ここではjdk-8u181-linux-x64.tar.gzを使用し...

MySQL双方向バックアップの実装方法

MySQL 双方向バックアップはマスター-マスター バックアップとも呼ばれ、両方の MySQL サー...

2021年の花火効果をJSで描画(ソースコードダウンロード付き)

この作品はフロントエンド開発(JSコンテンツ)の知識を使用していますが、フロント部分の後半部分の知識...

crontab 実行時間とシステム時間の不一致の解決方法

序文LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...

表面的なウェブデザイン

<br />私はいつもYahooのウェブデザインが素晴らしいと信じてきました。しかし、こ...

HTML ハイパーリンク スタイル (4 つの異なる状態) の設定例

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

CSS で画像アダプティブ コンテナを実装するいくつかの方法 (要約)

多くの場合、画像をコンテナのサイズに合わせて調整する必要があります。 1. imgタグ方式幅と高さを...

MySQL 8.0.12 のインストールと環境変数の設定チュートリアル (Win10 の場合)

Windows 10 プラットフォームでの MySQL のインストール、構成、起動、ログイン、環境...

MySQLからHiveにさらにデータをインポートするためのソリューション

元の派生コマンド: bin/sqoop インポート -connect jdbc:mysql://19...

vue+drf+サードパーティのスライディング検証コードアクセスの実装

目次1. 背景2. 検証プロセス3. 検証を作成する4. フロントエンドコード4.1 コアjsファイ...

Node.js における path.join() の利点の分析

文字列連結ではなく path.join() メソッドを使用する必要があるのはなぜか疑問に思うかもしれ...