XHTML におけるタイトルタグと段落タグの使用に関する詳細な説明

XHTML におけるタイトルタグと段落タグの使用に関する詳細な説明

XHTML 見出しの概要
Word 文書を作成するときは、「第 1 章」、「1.2.1」などのタイトルをよく使用します。 XHTML 構文には見出しの概念もあります。 XHTML では、<h1> から <h6> までの 6 つのレベルの見出しが定義されています。

XML/HTML コードコンテンツをクリップボードにコピー
  1. < h1 >第 1 レベルの見出し</ h1 >   
  2. < h2 >第 2 レベルの見出し</ h2 >   
  3. < h3 >第 3 レベルの見出し</ h3 >   
  4. < h4 >第 4 レベルの見出し</ h4 >   
  5. < h5 >第 5 レベルの見出し</ h5 >   
  6. < h6 >第 6 レベルの見出し</ h6 >   

タイトルの使用
XHTML ドキュメントでは、タイトルが非常に重要です。検索エンジンはタイトルを使用して、Web ページの構造とコンテンツをインデックスします。タイトルを使用してドキュメントの階層を識別するのが上手になるはずです。
見出しでは、第 1 レベルの見出しが最も高く、その後、順番に低くなります。一般的に、XHTML ドキュメントでは、見出しはドキュメント内の次の場所 (<body> タグ内) に適用されます。
ウェブサイトのレベルに応じて:
<h1>はウェブサイトのタイトルを定義します
<h2>ウェブサイトのナビゲーションや列を定義する
<h3>ウェブサイトのコンテンツに応じて記事のタイトルを定義します。
<h1>はウェブサイトのタイトルを定義します
<h2>記事のタイトルを定義する
<h3>列タイトルを定義します。h3より大きいタイトルh4〜h6については、著作権表示や免責事項など、比較的重要な箇所に適切な場所で使用できます。
また、レベルは下向きにする必要があることに注意してください。h1 の下には h2 レベルがあり、その次は h3 です...


タイトルの使用に関する提案
h1 はページ全体の中核コンテンツを表すため、一般的に h1 は 1 回しか出現できず (絶対に出現できないわけではありませんが、複数回出現することは絶対にできません)、記事の最も強調される部分で使用されます。したがって、特定のコンテンツ ページの場合は、このサイトのように、記事の重要性を強調するために記事のタイトルに h1 がよく使用されます。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <h1> XHTMLタイトル  

現時点でウェブサイトのタイトル(ウェブサイトのロゴ)に h1 を使用するかどうかは、実際の状況によって異なります。
タイトル 使用方法 演習 学習ドキュメント 1.html ファイルをエディターで開き、上記の <h1> から <h6> までのタグを <body> タグにコピーします。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <本文>   
  2. < h1 >第 1 レベルの見出し</ h1 >   
  3. < h2 >第 2 レベルの見出し</ h2 >   
  4. < h3 >第 3 レベルの見出し</ h3 >   
  5. < h4 >第 4 レベルの見出し</ h4 >   
  6. < h5 >第 5 レベルの見出し</ h5 >   
  7. < h6 >第 6 レベルの見出し</ h6 >   
  8. < p >こんにちは〜こんにちは! </p>   
  9. </本文>   

1.html ファイルを保存してブラウザで開きます (既に開いている場合は、ブラウザの更新ボタンをクリックしてドキュメントを再読み込みします。以下も同様で、これ以上の手順はありません)。次のようにタイトル タグの効果を確認できます。
201636113918682.gif (396×290)

例からわかるように、ブラウザはタイトルに対して自動的に改行を形成します (各タイトルは独自の行を占有します)。

段落 p タグ
XHTML では、段落は <p></p> タグによって定義されます。
XHTML 段落
段落タグの例:

XML/HTML コードコンテンツをクリップボードにコピー
  1. < p >これは段落です。 </p>   

実際の制作作業では、<p></p> 段落タグを多用します。
テキストに段落タグを追加すると、ブラウザは自動的にテキストに段落区切りを追加します。しかし、空行を形成するために空の <p></p> に頼るべきではなく、 <br /> 改行タグを使用する必要があります。


改行<br />
XHTML ドキュメントでは、タイトル タグまたは段落タグは改行マーカーのみを提供します。空白行または複数の改行が必要な場合は、改行タグ <br /> が必要です。 XHTML では、Word の編集と同じように Enter キーを押して改行することは無効です。ブラウザは、この方法で生成された改行スペースを無視します。
例:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <p>これコンテンツです</p>   
  2. < br   /> < br   />   
  3. < p >その他のコンテンツはこちら</ p >   

改行タグはブラウザにこの場所で改行が必要であることを伝えるだけで実質的な内容はないので、このタグはペアで出現することはなく、1 つの <br /> で行が 1 回だけ改行されます。複数の改行が必要な場合は、複数の <br /> タグを入力してください。
<p></p> 内に <br /> タグを挿入すると、改行効果も生成されます。


<br />それとも<br>?
<br> を使用することで改行効果を実現できますが、これはブラウザが HTML4.0 仕様と互換性があるためです。
XHTML 仕様では、ペアになっていないタグの場合は、コンテンツの末尾にスペースを追加し、/> でタグを閉じるだけです (<br /> や、後で説明する <img /><input /> などのタグ)。
したがって、 <br/> や <br> ではなく <br /> になります。

<<:  クリックして展開し、全文を読む機能を実現する純粋なCSS

>>:  CentOS6.5 に glibc-2.14 をインストールした後、ロケールで「そのようなファイルまたはディレクトリはありません」というメッセージが表示される場合の解決策

推薦する

モバイル適応型ウェブページ効果は、小さな表示ページの問題を解決します

仕事上、携帯電話に適応した Web ページ効果を作成する必要があります。ようやく完成しました。まずは...

iview権限管理の実装

目次iview-admin2.0 組み込み権限管理権限に基づいてコンポーネントの表示を制御するカスタ...

M1 ProチップでVueプロジェクトを開始する方法

目次導入Homebrewをインストールするnvmをインストールするノードをインストールするインストー...

Momentsで写真を整理するためのCSSコード

まず、Moments を開いて、写真の数が異なるいくつかのレイアウトを確認するか、以下の例を参照して...

WeChat アプレット計算機の例

WeChatアプレット計算機の例、参考までに、具体的な内容は次のとおりです。インデックス.wxml ...

ApacheとTomcatによるクラスタ環境構築プロセスの分析

実際、Apacheクラスタを構築するのは難しくありません。私もインターネットで情報を見つけて自分で設...

複数サーバーの負荷分散を実現するためのNginx構成

Nginx ロード バランシング サーバー: IP: 192.168.0.4 (Nginx-Serv...

MySQL 5.6 zipパッケージのインストールチュートリアルの詳細

これまでは、拡張子が .msi のファイル、つまり、完全なインストールが使用されていました。しかし、...

JavaScript でよく使われる 3 つの Web エフェクトの詳細な説明

目次1要素オフセットシリーズ1.1 オフセットの概要1.2 オフセットとスタイルの違い視覚領域クライ...

docker ログ - docker コンテナ ログの実装を表示します

docker logs コマンドを使用してコンテナ ログを表示できます。コマンド形式: $ dock...

GET POSTの違い

1. Get はサーバーからデータを取得するために使用され、Post はサーバーにデータを渡すために...

ウェブサイトのBGM実装方法

個々のウェブマスターにとって、自分のウェブサイトをいかにユニークで個性あふれるものにするかは、常に絶...

Ubuntu 18.04 で apt-get ソースを変更する方法

apt-get を使用してインストールすると、非常に遅くなります。国内のソースを変更すると、この問題...

JDBC を使用して MySQL を操作するための簡単な分析では、Class.forName("com.mysql.jdbc.Driver") を追加する必要があります。

導入データベースに接続するためにJDBCを使用することに慣れている場合は、データベースに接続するため...

MySQLの累積集計原理と使用例の分析

この記事では、例を使用して、MySQL 累積集計の原理と使用方法を説明します。ご参考までに、詳細は以...