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, 2023</p>
下のようにした方がよいでしょう。
<footer>Last updated: April 26, 2023</footer>
「４．２ 段落」で書いたように、改行はひとつの空白に置き換えられてしまいます。そのため、ブラウザで表示されたときに改行したい場合は、<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 要素は、日本語では機能しないようです。
なお、文字列が折り返すように表示枠を狭めています。
hr 要素は、段落レベルのテーマの区切り、セクション内における、セクションを分けるほどでもない話題の区切りを表す際に使用します。
セクション同士の区切りとなる </section>と<section> の間については、すでにそれ自体でテーマの区切りを表しているので、 <hr> を挿入する必要はありません。
なお、<hr> には、<br> と同様終了タグはありません。
段落レベルのテーマの区切り、セクション内における、セクションを分けるほどでもない話題の区切りを表す際に使用する。
hr 要素は、セクションを分けることはしないので、hr 要素で区切られた前後は同じセクションに属する事となる。
終了タグはない。
なし
<section> <p>今日は朝 6時に起きなければならなかった。</p> <p>目が覚めたら10時だった。</p> <hr> <p>終わった。</p> </section>
上の HTML 文書は、一般的なブラウザでは次のように表示されます。
pre 要素は、整形済みテキストを表します。この要素内の空白文字や改行はそのままで等幅フォントで表示されます。
そのため、HTML ソースやプログラムのソースコードをそのまま表示したり、 アスキーアートを表示する場合などに使用されます。
ただし、<pre>～</pre> の中でもタグは解釈されるため、 HTML ソースをそのまま表示したい場合には、< と > を、< と > に置き換える必要があります。
整形済みテキストを表す。
この要素内の空白文字や改行はそのままで等幅フォントで表示される。
なし
<pre> <html> <head> <title>文書のタイトル</title> </head> <body> <h1>pre要素の使用例</h1> <p>空白も そのまま</p> </body> </html> </pre>
上の HTML 文書は、一般的なブラウザでは次のように表示されます。
div 要素は、フロー・コンテンツを1つのグループとしてまとめます。フロー・コンテンツとは、子孫としてテキストを持つ要素で、ほとんどの要素がこれに当たります。
また、ほとんどのブラウザで、div 要素の前後で改行が入ります。
フロー・コンテンツを1つのグループとしてまとめる。
なし
次の例は、div 要素に含まれる要素をまとめて、色を指定してします。
<div style="color:red;"> <span>one</span> <span>two</span> </div> <div style="color:blue;">three</div>
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>
hgroup 要素は、見出し(h1 h2 h3 h4 h5 h6)と１つ以上の段落要素(p)をグループ化します。主題とともに、副題、代替の見出し、キャッチフレーズなどを表現することができます。
見出し(h1 h2 h3 h4 h5 h6)と 1 つ以上の段落要素(p)を１つのグループとしてまとめる。
ただし、見出し(h1 h2 h3 h4 h5 h6)が複数あっても、段落要素(p)でなくても問題なく表示される。
なし
次の例は、主題として h3、副題として p を指定して表示しています。
<hgroup> <h3>hgroup とは</h3> <p>主題と副題を表現</p> </hgroup> <p>hgroup は W3C の HTML5 から削除されていましたが、WHATWG では存続していました。</p>
定型の要素構造を提供します。Javascript でテンプレートとなる要素構造を複製して表示します。
テンプレートとして要素構造を提供する。Javascript などでテンプレートを利用して、定型の要素構造を複製する。
template 要素自体は表示されないが、未対応のブラウザでは表示されることもある。
なし
選択された都県の都市名のリストを表示します。
テンプレートのコンテンツを複製して、id が list の div 要素内に追加しています。
都道府県： <select name="code" onchange="makeList(this.value);"> <option value="" label=""></option> <option value="13" label="東京都"></option> <option value="14" label="神奈川県"></option> <option value="11" label="埼玉県"></option> </select> <template id="template"> <div><img src="images/mark.png"><span></span></div> </template> <div id="list"> </div> <script> var data = [ ["国立","13"], ["三浦","14"], ["茅ヶ崎","14"], ["深谷","11"], ["相模原","14"], ["秩父","11"], ["府中","13"], ]; function makeList(value) { let list = document.getElementById("list"); let contents = list.getElementsByTagName("div"); while (contents.length > 0) { // 前に追加した list 内の要素を削除する list.removeChild(contents[0]); } let template = document.getElementById("template"); for (let i = 0 ; i < data.length ; i++) { if (value == data[i][1]) { let clone = template.content.cloneNode(true); // ディープコピー（子孫を含めてすべて複製される） clone.querySelector("span").textContent = data[i][0]; list.appendChild(clone); // list 内に追加する } } } </script>
都道府県を選択してください。都市名が表示されます。
定型の要素構造を提供する template 要素のコンテンツの書き換えを可能にします。
template 要素内の slot 要素の name 属性の値と一致する slot 属性を持つ要素のコンテンツを、slot 要素のコンテンツに挿入する。
| 属性 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| name | スロットの名前 | 他の要素の slot 属性と一致するとき、その要素のコンテンツを挿入する | × |
<template id="template"> <div><slot name="mark">不明</slot> <slot name="city"><img src="images/question.png"></slot></div> </template> <div> <span slot="city">鶴ヶ島</span> <img slot="mark" src="images/saitama.png"> </div> <div> <span>館山</span> <!-- slot がないので、値の挿入が行われない --> <img src="images/chiba.png"> </div> <div> <span slot="city">立川</span> <img slot="mark" src="images/tokyo.png"> </div> <div> <span slot="city">茅ヶ崎</span> <img slot="mark" src="images/kanagawa.png"> </div> <script> let templete = document.getElementById("template"); let data = document.getElementsByTagName("div") ; for (let i = 0 ; i < data.length ; i++) { let clone = templete.content.cloneNode(true); let rootElement = data[i].attachShadow({mode: "open"}) ; rootElement.appendChild(clone); } </script>
２つ目の館山は slot 属性がないため、テンプレートに値の挿入が行われません。そのため、テンプレートの規定値がそのまま表示されます。
name 属性のない slot 要素の場合は、slot 属性のない要素のコンテンツがまとめて１つ目の slot に挿入されます。
<template id="template"> <!-- name 属性がない slot --> <div><slot>不明</slot> <slot><img src="images/question.png"></slot></div> </template> <div> <span slot="city">鶴ヶ島</span> <!-- slot があるので挿入されない --> <img slot="mark" src="images/saitama.png"> </div> <div> <span>館山</span> <!-- slot がないので、まとめて１つ目の slot に挿入される --> <img src="images/chiba.png"> </div> <div> </div> <script> let templete = document.getElementById("template"); let data = document.getElementsByTagName("div") ; for (let i = 0 ; i < data.length ; i++) { let clone = templete.content.cloneNode(true); let rootElement = data[i].attachShadow({mode: "open"}) ; rootElement.appendChild(clone); } </script>
１つ目の鶴ヶ島は、slot 属性があるため、name のない slot 要素に挿入されません。
２つ目の館山は、span 要素と img 要素とも slot 属性がないため、name のない最初の slot 要素にいっしょに挿入されます。