pre要素［HTML5］

情報公開日: 2011年7月17日 編集者: adworks

<pre>…… 半角スペースや改行をそのまま表示する

<pre>タグは、半角スペースや改行をそのまま表示する際に使用します。<pre>とはpreformatted textの略で、日本語では「フォーマット（整形）済みのテキスト」という意味になります。つまり、見やすいように半角スペースや改行などで形が整えられたテキストのことです。

<pre>～</pre>で囲まれた範囲のソースは半角スペース・改行などがそのまま表示されるため、<pre>タグは、HTMLソースやプログラムのソースコードをそのまま表示したり、アスキーアートを表示する場合などに使用されます。

ただし、<pre>～</pre>の中でもタグは解釈されるため、HTMLソースをそのまま表示したい場合には、< と > を、&lt; と &gt; に置き換える必要があります。また、HTML構文の中では、<pre>の開始タグの直後の改行は取り除かれるので注意してください。

プログラムのソースコードを表す場合には、<pre>と<code>を組み合わせて使用するのが一般的です。また、プログラムによる出力結果を表す部分は<samp>、ユーザーによる入力テキストを表す部分は<kbd>と組み合わせて表します。

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

hr要素［HTML5］

情報公開日: 2011年7月17日 編集者: adworks

<hr>…… テーマや話題の区切りを表す

<hr>タグは、段落レベルのテーマの区切り、セクション内における話題の区切りを表す際に使用します。例えば、物語におけるシーンの変わり目や、参考書のセクション内で別の話題に移る箇所などです。

セクション同士の区切りとなる </section>と<section> の間については、すでにそれ自体でテーマの区切りを表しているので、<hr> を挿入する必要はありません。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01ではhr要素には非推奨とされながらもalign属性・noshade属性・size属性・width属性が用意されていました。HTML5ではこれらの属性はすべて廃止されています。
また、hr要素は、HTML 4.01では水平線（horizontal rule）が描画されると定義されていますが、HTML5ではテーマ・話題の区切りを表す要素であり、水平線の定義はありません。ただし、一般的なブラウザではHTML5の文書でhr要素を使用した場合にも、当面は今まで通り水平線が描画されると思われます。

参考：http://www.htmq.com/html5/hr.shtml

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

p要素［HTML5］

情報公開日: 2011年7月14日 編集者: adworks

<p>…… ひとつの段落（パラグラフ）であることを表す

<p>タグは、ひとつの段落（パラグラフ）であることを表す際に使用します。<p>タグは、段落よりもふさわしい要素がある場合には使用するべきではありません。例えば、以下の使用例は誤りではありませんが…

[html]
<section>
<p>最終更新日: 2011-07-14</p>
<p>作者: info@adworks24.co.jp</p>
</section>
[/html]

以下のようにしたほうが、より適切なマークアップとなるでしょう。

[html]
<section>
<footer>最終更新日: 2011-07-14</footer>
<address>作者: info@adworks24.co.jp</address>
</section>
[/html]

あるいは、以下のようにマークアップしても良いでしょう。

[html]
<section>
<footer>
<p>最終更新日: 2010-07-14</p>
<address>作者: info@adworks24.co.jp</address>
</footer>
</section>
[/html]

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01では、p要素には揃え位置を指定するalign属性が、非推奨とされながらも用意されていました。HTML5では、p要素のalign属性は廃止されています。揃え位置の指定にはCSSを使用してください。

また、HTML5では<article>・<aside>・<nav>・<section>などの新しい要素が追加されているので、これらの新しい要素のほうが段落よりも適切なケースがあるかもしれません。

参考：http://www.htmq.com/html5/p.shtml

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

address要素［HTML5］

情報公開日: 2011年7月14日 編集者: adworks

<address>…… 連絡先・問合せ先を表す

<address>タグは、連絡先・問合せ先を表す際に使用します。address要素は、通常はその文書の作者への連絡先情報を表しますが、article要素の中に配置されている場合には、直近の祖先となるarticle要素の内容の作者への連絡先情報を表します。

address要素は、あくまでも内容に関する連絡先・問合せ先を表す要素です。“address”という単語は日本語では“住所”という意味になりますが、文章中に住所が出てきたらからといって<address>～</address>でくくるのは誤りです。このような場合には<p>タグなどを使用するほうがふさわしいでしょう。また、address要素の中には、連絡先情報以外の情報を含めてはいけません。例えば、最終更新日時などの情報を含めるのは誤りです。

article要素の内容としては、例えば、連絡先のメールアドレスや問合せページへのリンクなどを指定します。article要素は、一般的には、footer要素の中に他の情報と一緒に入れられることが多いでしょう。

■HTML4.01からHTML5へのバージョンアップによる変更点

address要素は、HTML4.01では文書の制作者への連絡先情報を表す要素でした。HTML5へのバージョンアップによる大きな変更はありませんが、article要素の中に配置された場合には、直近の祖先となるarticle要素の内容の作者への連絡先情報を表すことになっています。

■HTML5での使用例

[html]
<footer>
<address>
このウェブページの作者に連絡を取りたい方は、<a href="mailto:info@adworks24.co.jp">info@adworks24.co.jp</a>まで
メールをお送りいただくか、<a href="../contact/">お問合わせフォーム</a>からメッセージをお送りください。
</address>
</footer>
[/html]

参考：http://www.htmq.com/html5/address.shtml

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

footer要素［HTML5］

情報公開日: 2011年7月13日 編集者: adworks

<footer>…… フッタであることを示す

フッタとは、そのセクションに関する情報のことで、一般的には、誰が書いたのか、関連文書へのリンク、著作権などの情報が含まれます。作者の連絡先情報は<address>で示しますが、これを<footer>～</footer>の中に入れても良いでしょう。フッタはセクションの最後に配置されることが多いですが、必ずしもそうする必要はありません。以下のサンプルにはフッタが2箇所ありますが、それぞれ、記事セクションのフッタ、文書全体のフッタとなっています。

■HTML4.01からHTML5へのバージョンアップによる変更点

footer要素は、HTML5から新たに追加された要素です。

■HTML5での使用例

[html]
<body>

<h1>アドワークスからのお知らせ</h1>
<article>
<h1>html5で増える要素</h1>
<p>html5で増える要素を紹介します。</p>
<footer>
<p>Posted by adworks</p>
<address>info@adworks24.co.jp</address>
</footer>
</article>

<footer>
<nav>
<a href="index.html">トップページ</a>
<a href="privacy.html">プライバシーポリシー</a>
<a href="sitemap.html">サイトマップ</a>
</nav>
<p>Copyright 2010</p>
</footer>
[/html]

参考：http://www.htmq.com/html5/footer.shtml

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

header要素［HTML5］

情報公開日: 2011年7月13日 編集者: adworks

<header>…… ヘッダであることを示す

<header>タグは、イントロダクションやナビゲーショングループであることを示す際に使用します。文書のヘッダ情報を表す<head>タグとは異なりますので注意してください。<header>の中には、通常は<h1>〜<h6>や<hgroup>など、セクションの見出しが含まれることが想定されていますが、必ず必要というわけではありません。他にも、セクションの目次や検索フォーム、あるいは、関連ロゴをまとめるために<header>タグを使用することができます。

■HTML4.01からHTML5へのバージョンアップによる変更点

header要素は、HTML5から新たに追加された要素です。

■HTML5での使用例

[html]
<body>
<header>
<h1>ホームページ作成ならアドワークス</h1>
<nav>
<ul>
<li><a href="flow.html">お仕事の流れ</a></li>
<li><a href="design.html">デザインサービス</a></li>
<li><a href="web.html">webサービス</a></li>
<li><a href="print.html">印刷サービス</a></li>
</ul>
</nav>
<h2>お知らせ</h2>
<p>アドワークスからのお得なキャンペーン情報をはじめ、クライアント様のサイト更新履歴等をお知らせします。</p>
</header>
<p>ここにテキストが入ります。</p>
</body>
[/html]

参考：http://www.htmq.com/html5/header.shtml

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

hgroup要素［HTML5］

情報公開日: 2011年7月12日 編集者: adworks

<hgroup>…… セクションの見出しを表す、見出しをまとめる

<hgroup>はセクションの見出しを表します。小見出しや副題など、見出しが複数の階層にある場合、<h1>〜<h6>などの見出しセットをグループ化してまとめるために使用します。

hgroup要素はセクションの見出しですから、文書を要約したり概要を把握する目的ために、一定のルールに従って見出しのテキスト内容とランクが決められます。見出しのテキスト内容は、<hgroup>～</hgroup>の下にある<h1>〜<h6>の中で最もランクの高い要素のテキスト内容となります。それ以外は小見出しや副題を表すことになります。また、hgroup要素の見出しランクは、<hgroup>～</hgroup>の下にある<h1>〜<h6>の中で最もランクの高い要素と同じランクとなります。

以下の例では、<hgroup>～</hgroup>の下にある<h1>の内容がセクションの見出しとなり、見出しランクは<h1>と同等となります。文書が要約される際には、<h2>の内容が副題として隠されるのがポイントです。

■HTML4.01からHTML5へのバージョンアップによる変更点

hgroup要素は、HTML5から新たに追加された要素です。

■HTML5での使用例

[html]
<hgroup>
<h1>HTMLの基本</h1>
<h2>HTMLとは？</h2>
<h2>HTMLの書き方</h2>
<h2>HTML文書の作成</h2>
</hgroup>
<hgroup>
<h1>CSSの基本</h1>
<h2>CSSとは？</h2>
<h2>CSSの書き方</h2>
<h2>HTML文書にCSSを適用する</h2>
</hgroup>[/html]

参考：http://www.htmq.com/html5/hgroup.shtml

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

h1〜h6要素［HTML5］

情報公開日: 2011年7月12日 編集者: adworks

<h1>〜<h6>…… 見出しを付ける

<h1>・<h2>・<h3>・<h4>・<h5>・<h6>タグは、見出しを付ける際に使用します。数値が小さいほど高いランクの見出しとなります。<h1>が最も高位の大見出しで、<h6>が最も低位の小見出しです。同じ数値のものが複数ある場合には同じランクとなります。

見出しを配置すると暗黙的に新しいセクションを開始したことになります。セクショニング・コンテンツの要素（<article>・<aside>・<nav>・<section>）の中にある、最初のヘッディング・コンテンツの要素（<h1>・<h2>・<h3>・<h4>・<h5>・<h6>・<hgroup>）は、そのセクションの見出しを表します。 そのあとに低いランクの見出しが続く場合には、暗黙的にそのセクションの一部となるサブセクションを開始したものとみなされます。 また、同じランクの見出しや高いランクの見出しが続く場合には、暗黙的に別の新しいセクションを開始したものとみなされます。

一つのセクションの中に複数の見出しを配置すれば、暗黙的にそれぞれがセクションとみなされますが、明示的にセクションで区切ることが推奨されています。また、セクション内には、どのランクの見出しでも配置することができますが、h1要素だけを使用するかセクションの入れ子階層に合ったランクの見出しを配置することが強く推奨されています。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01では、h1-h6要素には揃え位置を指定するalign属性が、非推奨とされながらも用意されていました。HTML5では、h1-h6要素のalign属性は廃止されています。揃え位置の指定にはCSSを使用してください。

HTML4.01でh1-h6要素を使用する場合には、文書全体における見出し階層を意識して見出しレベルをルール付けしていたと思います。HTML5では文書全体における見出し階層はもちろんですが、同時にセクションの概念を意識してセクションごとに見出しレベルをルール付けしてやる必要があります。

HTML5では見出し要素だけを配置して暗黙的にセクションを生成することもできますが、見出しレベルのルール付けが分かりにくくなりがちです。HTML5でh1-h6要素を使用する際には、推奨されているようにセクショニング・コンテンツの要素で明示的にセクションを区切ってやると、文書構造が分かりやすくなるでしょう。

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

aside要素［HTML5］

情報公開日: 2011年7月11日 編集者: adworks

<aside>…… 余談・補足情報のセクションであることを示す

<aside>タグは、その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用します。ここで言う余談・補足情報とは、本文と関連してはいるけれど区別して掲載するべき内容のことです。例えば、印刷物などで本文の補足として欄外に掲載されるような内容です。

<aside>でタグ付けした要素は、あくまでも本文から外れる余談・補足情報ですから、本文の流れの一部となる挿入句（カッコでくくって差し込むような内容など）に対して、<aside>タグを使用するのは適切ではありません。

■HTML4.01からHTML5へのバージョンアップによる変更点

aside要素は、HTML5から新たに追加された要素です。

■HTML5での使用例

[html]
<p>
ホームページ制作のことなら、アドワークスにお任せください。
</p>
<aside>
<h1>アドワークスとは</h1>
<p>
ここに、アドワークスについての補足情報等を記述します。
</p>
</aside>[/html]

参考：http://www.htmq.com/html5/aside.shtml

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |

article要素［HTML5］

情報公開日: 2011年7月11日 編集者: adworks

<article>…… 記事であることを示す

<article>タグは、内容が単体で完結するセクションであることを示す際に使用します。例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。<article>を入れ子にして使用する場合、内側の<article>の内容は、原則として外側の<article>の内容に関連していることになります。例えば、<article>タグでくくられたブログのエントリの内側に、さらに<article>タグでくくられたユーザーコメントを入れ子に配置することで、そのコメントがそのブログエントリに対して投稿されたものであることを示すことができるでしょう。
この際、ウェブページ内で<address>タグを使って示されている作者情報は、入れ子の内側の<article>の内容にまでは適用されません。

■HTML4.01からHTML5へのバージョンアップによる変更点

article要素は、HTML5から新たに追加された要素です。

■HTML5での使用例

[html]
<h1>アドワークスからのお知らせ</h1>
<article>
<h2>本日のお知らせ</h2>
<p>今日は今から会議です。</p>
<article>
<h2>コメント</h2>
<p>了解しました。</p>
</article>
</article>
[/html]

参考：http://www.htmq.com/html5/article.shtml

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート |