h1 h2 h3 h4 h5 h6 要素
セクションの見出しを指定する。<h1> に近いほど見出しのランクが高くなり、<h6> に近いほど低くなる。
表示される文字の大きさや上下のマージンは、<h1>～<h6> によって異なる。
属性
なし
見出しや段落、改行など文書を形作る基本的な要素について説明します。
ある程度の長さの文章を書くときは、本文の大きな内容のまとまりを分かりやすく示すために見出しをつけます。さらに長い文章の場合は、内容を細分化して大見出し、中見出し、小見出しといった具合に、段階に応じた階層的な見出しをつけていきます。
この階層的な見出しを表現するために、HTMLでは <h1> から <h6> まで6段階の見出し（Heading）要素が用意されています。<h1> がもっとも重要な見出しで、数字の順に階層が大見出しから中見出し、小見出しといった具合に移行します。文章の構造に合わせ、<h1> から順番に使用していきます。
したがって、<h2> から <h6> は何回出現してもかまいませんが、<h1> は最上位のただ１回にすべきです。
セクションの見出しを指定する。<h1> に近いほど見出しのランクが高くなり、<h6> に近いほど低くなる。
表示される文字の大きさや上下のマージンは、<h1>～<h6> によって異なる。
なし
<body>
<section>
<h1>第１巻</h1>
<section>
<h2>第１章</h2>
<section>
<h3>第１節</h3>
～
</section>
<section>
<h3>第２節</h3>
～
</section>
～
</section>
<section>
<h2>第２章</h2>
～
</section>
～
</section>
</body>
ただし、文書の構造は <h1> や <h2> などの見出しで決まるのではなく、section 要素などの包含関係で決定します。したがって、第２章が <h4> であったとしても、第１章第１節に含まれてしまうということはありません。つまり、セクション分けが行われてさえすれば、<h1> と書こうが <h6> と書こうがまったく一緒だということです。
<section>
<h2>第１章</h2> １ 第１章
<section>
<h3>第１節</h3> １．１ 第１節
</section>
</section>
<section>
<h4>第２章</h4> ２ 第２章
</section>
よって、section 要素で包含関係を記述した場合、すべて <h1> で記述するよう推奨されたこともありましたが、最新の勧告では包含関係に合わせた <h1>～<h6> を記述することが推奨されています。
<section>
<h2>第１章</h2> １ 第１章
<section>
<h3>第１節</h3> １．１ 第１節
</section>
</section>
<section>
<h2>第２章</h2> ２ 第２章
</section>
しかし、<section> などが省略してしまうと、 <h1> ～ <h6> のレベルに合わせた階層構造が暗黙的に想定されてしまうので、注意が必要です。
<h2>第１章</h2> １ 第１章
<h3>第１節</h3> １．１ 第１節
<h4>第２章</h4> １．１．１ 第２章
h1～H6 タグを使って見出しを表示しなさい。
<h1>h1 タグは大見出しに使います。例えば、部などです。</h1> <h2>h2 タグは中見出しに使います。例えば、章などです。</h2> <h3>h3 タグは小見出しです。例えば、節などです。</h3> <h4>h4 タグはさらに細かい見出しです。例えば、項などです。</h4> <h5>h5 タグはもっと細かい見出しです。例えば、段落などです。</h5> <h6>h6 タグはもっともっと細かい見出しです。例えば、小段落などです。</h6>
一般に文章はいくつかの段落（Paragraph）の集まりとして構成されています。段落は文書の内容的なまとまりを示す基本的な「要素」です。
HTML 文書における段落は、p 要素を用いて表します。
ひとつの段落（パラグラフ）であることを表す。
上下にマージンがとられるので、続けて記述した場合は段落の間に1行分の余白が取られる。
なし
<p>そら雲が出た まっ黒な大きい雲だ</p> <p>だんだん空に広がってきた 今日は雨が降るぞ</p>
上の HTML 文書は、一般的なブラウザでは次のように表示されます。
HTML 文書に書かれたタグではない文字列は、ブラウザで表示されます。ただし、連続する空白、タブ、改行はひとつの空白に置き換えられます。しかし、全角の空白はそのまま表示されます。
また、p 要素間には、1行分の余白が入ります。
p 要素は、よりふさわしい要素がある場合には使用するべきではありません。 例えば、次の p 要素は書かれている位置にもよりますが ...
<p>Last updated: April 26, 2016</p>
下のようにした方がよいでしょう。
<footer>Last updated: April 26, 2016</footer>
<p> タグを使って段落を表示しなさい。
<p>そら雲が出た まっ黒な大きい雲だ</p> <p>だんだん空に広がってきた 今日は雨が降るぞ</p>
「４．２ 段落」で書いたように、改行はひとつの空白に置き換えられてしまいます。そのため、ブラウザで表示されたときに改行したい場合は、<br> タグで、明示的に改行を記述する必要があります。
なお、<br> には、終了タグはありません。
改行を表す。終了タグはない。
本来なら段落を分けるべきところでは使用すべきではない。
なし
<p>春雨や<br>暮れなむとして<br>けふもあり</p>
上の HTML 文書は、一般的なブラウザでは次のように表示されます。
ただし、本来段落を分けるべきところには使用すべきではありません。
<p>行く川のながれは絶えずして、しかも本の水にあらず。<br>よどみに浮ぶうたかたは、かつ消えかつ結びて久しくとゞまることなし。</p>
それぞれを p 要素として記述すべきです。
<p>行く川のながれは絶えずして、しかも本の水にあらず。</p> <p>よどみに浮ぶうたかたは、かつ消えかつ結びて久しくとゞまることなし。</p>
wbr 要素は、改行位置の候補を表します。例えば、スペースを入れずに英単語を連続させた場合、通常は右端で折り返されずに領域をはみ出してしまいます。しかし、<wbr> が記述されていると、必要に応じて折り返されるようになります。<br> とは異なり、強制的に改行されるのではなく、改行すべきだったらこの位置で改行してほしいという指示です。
なお、<wbr> には、<br> と同様終了タグはありません。
改行位置の候補を表す。終了タグはない。
単語の字数が長くて本来なら折返しが出来ない場合、折返しを許可する箇所に入れる。ただし、日本語では機能しない。
なし
<p>ランヴァイル<wbr>プルグウィンギル<wbr>ゴゲリフウィルンドロブル<wbr>ランティシリオゴゴゴホ</p> <p>Llanfair<wbr>pwllgwyngyll<wbr>gogerychwyrndrobwll<wbr>llantysiliogogogoch</p>
上の HTML 文書の改行されている場所は、wbr 要素のところです（wbr 要素のところで必ず改行されるわけではありません）。ただし、wbr 要素は、日本語では機能しないようです。
なお、文字列が折り返すように表示枠を狭めています。
注意
では、そのままでは改行されません。
表示例では、<wbr> のスタイルシートで、display: inline-block; を指定することによって、この問題を回避しています。
hr 要素は、段落レベルのテーマの区切り、セクション内における、セクションを分けるほどでもない話題の区切りを表す際に使用します。
セクション同士の区切りとなる </section>と<section> の間については、すでにそれ自体でテーマの区切りを表しているので、 <hr> を挿入する必要はありません。
なお、<hr> には、<br> と同様終了タグはありません。
段落レベルのテーマの区切り、セクション内における、セクションを分けるほどでもない話題の区切りを表す際に使用する。
hr 要素は、セクションを分けることはしないので、hr 要素で区切られた前後は同じセクションに属する事となる。
終了タグはない。
なし
<section> <p>今日は朝 6時に起きなければならなかった。</p> <p>目が覚めたら10時だった。</p> <hr> <p>終わった。</p> </section>
上の HTML 文書は、一般的なブラウザでは次のように表示されます。
必ずしも必要はないが、入れるとしたらどこが良いか、適当と思われるところに、<hr> を挿入しなさい。
<section> <h1>あること</h1> <p>Aの内容の段落</p> <p>まだAの内容が続いている段落</p> <p>ところでってかんじで、Bの内容に変わった段落</p> </section> <section> <h1>別のこと</h1> <p>Cの内容の段落</p> </section>
pre 要素は、整形済みテキストを表します。この要素内の空白文字や改行はそのままで等幅フォントで表示されます。
そのため、HTML ソースやプログラムのソースコードをそのまま表示したり、 アスキーアートを表示する場合などに使用されます。
ただし、<pre>～</pre> の中でもタグは解釈されるため、 HTML ソースをそのまま表示したい場合には、< と > を、< と > に置き換える必要があります。
整形済みテキストを表す。
この要素内の空白文字や改行はそのままで等幅フォントで表示される。
なし
<pre> <html> <head> <title>文書のタイトル</title> </head> <body> <h1>pre要素の使用例</h1> <p>空白も そのまま</p> </body> </html> </pre>
上の HTML 文書は、一般的なブラウザでは次のように表示されます。
アスキーアートを描きなさい。
Internet ExplorerEdge に合わせてありますので、他のブラウザでは文字幅などの違いにより意図したとおりに表示されないことがあります。
div 要素は、フロー・コンテンツを1つのグループとしてまとめます。フロー・コンテンツとは、子孫としてテキストを持つ要素で、ほとんどの要素がこれに当たります。
また、ほとんどのブラウザで、div 要素の前後で改行が入ります。
フロー・コンテンツを1つのグループとしてまとめる。
次の例は、div 要素に含まれる要素をまとめて、色を指定してします。
<div style="color:red;"> <span>one</span> <span>two</span> </div> <div style="color:blue;">three</div>
div 要素の属性に style="border:solid 1px red;"（赤い枠）を指定して、次のように表示しなさい。
span 要素は、フレージング・コンテンツを1つのグループとしてまとめます。フレージング・コンテンツとは、段落内で使用するようなコンテンツです。フレージング・コンテンツに属する要素は、同時にフロー・コンテンツにも属しています。
また、ほとんどのブラウザで、div 要素の前後に改行が入るのに対して、span 要素では改行が入りません。
フレージング・コンテンツを1つのグループとしてまとめる。
次の例は、内部のテキストがフランス語、ドイツ語、スペイン語で記述されていることを示しています。また、マウスを重ねるとそれぞれの言語が表示されます。
<p>赤は、<span lang="fr" title="フランス語">Rouge</span>、<span lang="de" title="ドイツ語">Rot</span>、
<span lang="es" title="スペイン語">Rojo</span> だ。</p>