BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

XHTMLにおけるtitleタグとparagraphタグの使い方を説明する。

2022-01-26 09:34:54

XHTMLタイトルの概要
私たちがWord文書を書くとき、"Chapter 1"、"1.2.1"などの見出しをよく使用します。XHTMLの構文にも見出しの概念はあります。XHTMLでは、<h1>から<h6>までの6段階の見出しが定義されています。

XML/HTMLコード 内容をクリップボードにコピーする
  1. <スパン < h1 > 第一階層タイトル </ h1 >
  2. <スパン <スパン <

    h2 > 第2レベルの見出し </ h2 >
  3. <スパン <スパン <

    h3 > 第3階層タイトル </ h3 >
  4. <スパン <スパン <

    h4 > 第4階層タイトル </ h4 >
  5. <スパン <スパン <

    h5 > レベル5見出し </ h5 >
  6. <スパン <スパン <

    h6 > レベル6の見出し </ h6 >

ヘッダーの使用
XHTML文書では、見出しが重要です。検索エンジンは見出しを使ってページの構造と内容をインデックス化します。そして、見出しを使って文書の階層を識別することに長けている必要があります。
見出しでは、最初のレベルが最も高く、そこから下がっていきます。一般に、XHTML文書では、見出しは文書内の以下の場所（<body>タグ内）に適用されます。
サイトレベル別
<h1> サイトタイトルの定義
<h2>サイトのナビゲーションやセクションの定義
<h3>記事のタイトルを定義する
サイトコンテンツ別
<h1> サイトタイトルの定義
<h2>記事のタイトルを定義する
<h3>カラムのタイトルを定義する
h3より大きいh4～h6の見出しについては、著作権表示や免責事項の表示など、比較的重要な場所など、適切な場所で選択することができます。
また、h1、h2、h3・・・と順に階層が下がっていくことに注意しましょう。


見出しの使い方に関するいくつかの提案
h1はページの核となる内容を名付けているので、一般的にh1は一度だけ（絶対とは言いませんが、絶対に複数回出てはいけません）、テキストが最も強調される場所に使用されるべきです。そのため、特定のコンテンツのページでは、このサイトのように、記事の重要性を強調するために記事タイトルにh1が使われることが多いようです。

XML/HTMLコード 内容をクリップボードにコピーする
  1. <スパン < h1 > XHTMLタイトル <

    h1 >

そして、その後にサイトタイトル（サイトロゴ）がh1を使うかどうかは、実際の状況次第です。
見出しの使い方の練習
学習用文書1.htmlファイルをエディタで開き、上記の <h1> から <h6> タグを <body> タグ内にコピーしてください。

XML/HTMLコード 内容をクリップボードにコピーする
  1. <スパン < 本体 >
  2. <スパン <スパン <

    h1 > 第一階層タイトル </ 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を保存してブラウザで開くと（すでに開いている場合はブラウザの更新ボタンをクリックして文書を再読み込み、以下同様）、次のようにtitleタグの効果が確認できます。

この例からわかるように、ブラウザはタイトルに対して自動的に改行します（各タイトルは別々の行を占めます）。

段落pタグ
XHTMLでは、段落は <p></p> というタグで定義されています。
XHTML パラグラフ
段落タグの例です。

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

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


行送り <br />
XHTML文書では、見出しタグや段落タグでは1回しか改行できないので、空白行や複数の改行が必要な場合は、改行タグ <br />が必要です。XHTMLでWordのようにEnterキーを押して改行するのは無効で、ブラウザはその結果生じる改行の空白を無視します。
例

XML/HTMLコード 内容をクリップボードにコピーする
  1. <スパン < p > 以下は、その内容の一部です。 </ p >
  2. <スパン <スパン <

    ブラン /> < ブラン />
  3. <スパン <スパン <

    p > 以下はその内容です。 <スパン </ p >

改行タグは、ブラウザに「ここで改行が必要です」と伝えるだけで、実体がないので、このタグは対になって表示されず、<br />は1回の改行のみで、複数回の改行は、複数の<br />を入力することになります。
<p></p> の中に <br /> タグを挿入しても、改行されます。


<br />または<br>？
なお、<br>でも改行はできますが、これはHTML4.0仕様のブラウザ互換の結果です。
XHTMLの仕様では、対になっていないタグは、<br />や後述する<img /> <input /> のように、内容の最後にスペースを入れ、/>で閉じればいいのです。
つまり、<br />であって、<br/>でもなく、<br>でもないのですね。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します