見出し

Revised: 2nd/June/2002; Since: 29th/May/2002

文書の見出しは head 要素内の title 要素に記述します。文書の本文である body 要素の内容にも見出しを記述しておきます。本節では、 HTML 文書の本文に見出しを記述してみます。

body 要素内の見出しには、最大階層見出しを意味する h1 要素から、最小階層の見出しを意味する h6 まで、6つの要素タイプが用意されています。

サンプルの確認

前節で作った HTML 文書 index.html を編集します。テキストエディタで開いてソースを確認してください。テキストエディタで開く方法は、以前紹介しました。この時点で、ソースは次のようになっています。

<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

    <head>
        <meta http-equiv="content-type" 
            content="text/html; charset=Shift_JIS" />
        <title>HTML 文書 -要素の概要</title>
    </head>

    <body>
        <h1>HTML 文書の概要</h1>
    </body>

</html>

文字コードを Shift_JIS 以外のものに選んで保存した場合は、 xml 宣言の encoding 属性の値と、 head 要素内の子要素である meta 要素の charset 属性の値を書き換えてください。

改行、半角スペース、タブの個数は任意です。ブラウザが解釈するとき、改行/タブは一つの半角スペースと等価です。複数の改行、複数のタブ、複数のスペースが連続しているときも、一つの半角スペースと等価です。

見出し要素 -Headings

見出し要素の種類

本文には見出しがつきものです。大見出し、小見出しなど、見出しには階層があります。 HTML では見出しを表す要素は、最上位の階層の見出しから最下位の見出しまで、六つ用意されています。

要素名意味
h1chapter 章
h2section 節
h3subsection 小節(項)
h4subsubsection 小々節(目)
h5paragraph title 段落小見出し
h6subparagraph title 小段落小見出し

見出し要素の記述方法

  1. index.html をテキストエディタで開いて下さい。
  2. index.html の body 要素の内容 (<body> から </body> の間)を、次のように編集しましょう;
    <h1>HTML 文書の概要</h1>
    
        <h2>html 要素</h2>
    
        <h2>head 要素</h2>
    
        <h2>body 要素</h2>
    
            <h3>h1 要素</h3>
    
            <h3>address 要素</h3>
    
    記述できたら、「上書き保存」してください。
  3. index.html をブラウザで開いて下さい。
図:index.html の表示例

ここでは見だしを意味する要素しか記述していませんので、単なる箇条書きになってしまいました。次から、この見出しの間を文章で埋めていきます。

見出しを表す要素は六つあります。これらは見出しの階層を表現するための要素であり、文字を大きくする要素ではありません。文字の大きさは後で CSS と云う仕組みで変更しますので、 HTML は意味のマークアップに専念する必要があります。

文字の大きさを変更するために見出し要素を利用すると、非視覚系ブラウザにとっては意味がわからない文書になってしまいます。視覚障害者のための音声出力ブラウザ、文字の大きさの変更ができないテキスト・ベースのブラウザなどが存在します。例えば、目次を作るために、見出しだけ抜き出して出力することがあります。

CSSという仕組みで見栄えを調整するときも、同じ要素が別の意味で散在していると、統一的に調整することができなくなります。

h1 から h6 までの要素の内容は、単なるテキストかインライン要素しか許されません。例えば、h1 要素の内容に副題のつもりで h2 要素や p 要素を書きたいと思っても、それは誤りです。

次の例は h1 要素の中に h2 要素が入って入るので誤りです:

<h1>HTML 文書序説
<h2>構造化文書入門</h2></h1>

ブロックレベルとテキストレベル

HTML の要素は、ブロックレベル要素と、テキストレベル要素に分けられます。


Copyright © 2002 SUGAI, Manabu. All Rights Reserved.
SEO [PR] !uO z[y[WJ Cu