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

推薦する

プレーヤー機能を実現するためのvue + element uiのサンプルコード

効果画像のない表示は単なる空虚な言葉です。 1. オーディオをベースにし、elementUI と組み...

mysql5.7.24 バージョンのインストール手順と解凍時に発生した問題の概要

1. ダウンロード参考: 2. D:\MySQL\mysql-5.7.24 などの固定の場所に解凍し...

WeChatアプレットがスネークゲームを実装

この記事では、参考までに、スネークゲームを実装するためのWeChatアプレットの具体的なコードを紹介...

MySQLトリガートリガー例の詳細な説明

目次トリガーとは何かトリガーを作成する表は次のようになります。さらにいくつかの単語を挙げます。制限と...

auto.jsを使用して毎日の自動チェックイン機能を実現する

auto.js を使用して毎日のチェックインを自動化する感染症のせいで、毎日時間通りに家に帰らなけれ...

WeChat アプレット ピッカー マルチ列セレクター (モード = multiSelector)

目次1. 効果図(複数列) 2. 通常セレクター: mode = selector、複数列セレクター...

写真のプレビューとアップロード機能を実現するhtml+css+js

はじめに: Web ページを作成するときに、画像をアップロードする必要がある場合がよくあります。画像...

MySQL 8.0.18 安定版がリリースされました! 予想通りハッシュ結合が実装されました

MySQL 8.0.18 安定版 (GA) が昨日正式にリリースされ、Hash Join も期待通り...

Linux ファイアウォールの状態確認方法の例

Linuxファイアウォールの状態を確認する方法1. 基本操作 # ファイアウォールのステータスを表示...

7つの便利なTypeScriptの新機能

目次1. オプションの連鎖2. NULL値の結合3. 再帰型エイリアス4. アサーション署名5. P...

0.1秒の価値!フロントエンドのウェブページの高速化の問題について簡単に説明します

私が現在の仕事の面接を受けたとき、リーダーが真剣にこう言っていたのを覚えています。「今の世の中はイン...

Alibaba Cloud Centos7.3 インストール mysql5.7.18 rpm インストール チュートリアル

MariaDBをアンインストールするCentOS7 ではデフォルトで MySQL の代わりに Mar...

CSS 要素を表示および非表示にする 9 つの方法

Web ページの制作では、要素の表示と非表示は非常に一般的な要件です。この記事では、要素を表示したり...

Vmwareでディスクを追加する方法:ディスクを拡張する

この記事では、ディスクを追加または拡張して、Vmare で有効にする方法について説明します。シナリオ...

Vite2+Vue3を使用してMarkdownドキュメントをレンダリングする練習

目次カスタム Vite プラグインvite-plugin-markdownの使用Front Matt...