HTML要素セクション
body
文書の本文
2009/8/26
構文
body要素は、文書の本文を表します。
body要素は、html要素においてhead要素の次にくる第2の要素です。
body要素に直接テキストを指定することはできません。
テキストは必ずp要素などのブロック要素でくくる必要があります。
【DOM】document.body
で文書の本文にアクセスできます。
属性
固有の属性はありません。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
サンプル

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>PHP & JavaScript Room's Blog</title> <style> body { font-family:verdana,sans-serif; font-size:12px; } header h1 { margin:0 0 10px 0; padding:0; font-size:140%; } nav { display:block; margin:0 0 10px 0; padding:10px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; background:#ccc;} nav h1 { font-size:100%; } nav li { margin:0; padding:0 5px; display:inline; list-style-type:none; } article { margin:0 0 1em 0; padding:0; border:1px solid #ccc; } article h1 { font-size:120%; color:navy; } section { margin:0 0 20px 0; padding:0; } section ul { margin:0; padding:0; } </style> </head> <body> <header> <h1>PHP & JavaScript Room's Blog</h1> <p> <a href="news.html">ニュース</a> - <a href="blog.html">ブログ</a> - <a href="forums.html">フォーラム</a> </p> </header> <nav> <h1>ナビゲーション</h1> <ul> <li><a href="prev.html">前の記事へ</a></li> <li><a href="articles.html">記事一覧</a></li> <li><a href="next.html">次の記事へ</a></li> </ul> </nav> <article> <header> <h1>音声・動画配信について</h1> <p>録音した音声や音楽、撮影した動画などの音声・動画ファイルをWebサイトで公開するには、 Windows Media Player、 RealPlayer、 QuickTime といったプレーヤーをWebページに埋め込んで再生させるか、音声・動画ファイルへ直接リンクを貼ります。</p> </header> <p>各プレーヤーの配信方法の詳細は、以下のコンテンツで解説しています</p> <section> <h1>Windows Media Player</h1> <p><a href="">Windows Media PlayerのWebページ埋め込み方法</a></p> <dl> <dt>目次</dt> <dd> <ul> <li>Windows Media PlayerのWebページ埋め込み〔基本的な記述例〕</li> <li>Windows Media PlayerのWebページ埋め込み〔コントロール非表示・自動再生〕</li> <li>Windows Media PlayerのWebページ埋め込み〔コントロール表示・自動再生しない〕</li> <li>Windows Media PlayerのWebページ埋め込み〔表示コントロール指定・自動再生〕</li> <li>Windows Media PlayerのWebページ埋め込み〔ActiveXコントロール(フォームボタン使用) ※IEのみ〕</li> <li>Windows Media PlayerのWebページ埋め込み〔ActiveXコントロール(画像ボタン使用) ※IEのみ〕</li> <li>プレーヤー画面下にバナー挿入</li> <li>リンクを貼って再生させる方法</li> </ul> </dd> </dl> </section> <section> <h1>RealPlayer</h1> <p><a href="http://localhost/test/pj_roomer/?t=strm&p=rm_embed">RealPlayerのWebページ埋め込み方法</a></p> <dl> <dt>目次</dt> <dd> <ul> <li>RealPlayerのWebページ埋め込み〔基本的な構文〕 <li>RealPlayerのWebページ埋め込み〔コントロール非表示・自動再生〕</li> <li>RealPlayerのWebページ埋め込み〔コントロール非表示・ActiveXコントロール(フォームボタン使用)〕</li> <li>RealPlayerのWebページ埋め込み〔コントロール非表示・ActiveXコントロール(画像ボタン使用)〕</li> <li>RealPlayerのWebページ埋め込み〔指定したコントロールのみ表示1〕</li> <li>RealPlayerのWebページ埋め込み〔指定したコントロールのみ表示2〕</li> <li>RealPlayerのWebページ埋め込み〔SMIL形式〕</li> <li>リンクを貼って再生させる方法</li> </ul> </dd> </dl> </section> <section> <h1>QuickTime</h1> <p><a href="http://localhost/test/pj_roomer/?t=strm&p=mov_embed">QuickTimeのWebページ埋め込み方法</a></p> <dl> <dt>目次</dt> <dd> <ul> <li>QuickTimeのWebページ埋め込み〔基本的な記述例〕</li> <li>QuickTimeのWebページ埋め込み〔コントロール非表示・自動再生〕</li> <li>QuickTimeのWebページ埋め込み〔コントロール表示・自動再生〕</li> <li>QuickTimeのWebページ埋め込み〔ActiveXコントロール ※IEのみ〕</li> <li>QuickTimeのWebページ埋め込み〔SCALEでムービーサイズ調整・拡大縮小〕</li> <li>リンクを貼って再生させる方法</li> </ul> </dd> </dl> </section> </article> <article> <header> <h1>Apples</h1> <p>Tasty, delicious fruit!</p> </header> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples and make a great filling for apple pies.</p> </section> </article> <footer> <p>© PHP & JavaScript Room All Rights Reserved.</p> <p> <a href="about.html">このサイトについて</a> - <a href="policy.html">プライバシー・ポリシー</a> - <a href="contact.html">お問合せ</a> </p> </footer> </body> </html>
section 
文書のセクション
2009/8/26
構文
section要素は、一般的な文書またはアプリケーションにおけるセクションを表します。
1つのセクションは、ヘッダー、章、フッターなどで構成されます。
属性
固有の属性はありません。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
サンプル

<section> <h1>Windows Media Player</h1> <p><a href="">Windows Media PlayerのWebページ埋め込み方法</a></p> <dl> <dt>目次</dt> <dd> <ul> <li>Windows Media PlayerのWebページ埋め込み〔基本的な記述例〕</li> <li>Windows Media PlayerのWebページ埋め込み〔コントロール非表示・自動再生〕</li> <li>Windows Media PlayerのWebページ埋め込み〔コントロール表示・自動再生しない〕</li> <li>Windows Media PlayerのWebページ埋め込み〔表示コントロール指定・自動再生〕</li> <li>Windows Media PlayerのWebページ埋め込み〔ActiveXコントロール(フォームボタン使用) ※IEのみ〕</li> <li>Windows Media PlayerのWebページ埋め込み〔ActiveXコントロール(画像ボタン使用) ※IEのみ〕</li> <li>プレーヤー画面下にバナー挿入</li> <li>リンクを貼って再生させる方法</li> </ul> </dd> </dl> </section>
nav 
他ページあるいはページ内にリンクするページのセクション
2009/8/26
構文
nav要素は、他ページあるいはページ内にリンクするページのセクションを表します。
ナビゲーションがあるセクションはリンクされます。 ページ内のすべてのリンクグループを、nav要素に指定する必要はなく、主要なナビゲーションのセクションのみnav要素に指定してください。
フッターにはサイトの様々な主要部分へのリンクリストがあるのが一般的ですが、それらはfooter要素に指定するとよいでしょう。
属性
固有の属性はありません。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
サンプル

<nav> <h1>ナビゲーション</h1> <ul> <li><a href="prev.html">前の記事へ</a></li> <li><a href="articles.html">記事一覧</a></li> <li><a href="next.html">次の記事へ</a></li> </ul> </nav>
article 
外部コンテンツ
2009/8/26
構文
article要素は、ニュース記事、フォーラムの投稿、ブログ記事、ブログのユーザーコメントなどの外部コンテンツを表します。
article要素は、その内容が単独で成り立っており、文書からは独立しています。
article要素を入れ子にした場合、内側のarticle要素は原則として外側の記事のコンテンツに関連する記事を表します。 入れ子にされたarticle要素はブログに対するユーザーのコメントを表すかもしれません。 そのため、article要素に関連している作者情報は、入れ子にされたarticle要素に適用されません。
属性
固有の属性はありません。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
サンプル
<article> <header> <h1>音声・動画配信について</h1> <p>録音した音声や音楽、撮影した動画などの音声・動画ファイルをWebサイトで公開するには、 Windows Media Player、 RealPlayer、 QuickTime といったプレーヤーをWebページに埋め込んで再生させるか、音声・動画ファイルへ直接リンクを貼ります。</p> </header> <p>各プレーヤーの配信方法の詳細は、以下のコンテンツで解説しています</p> <section> <h1>Windows Media Player</h1> <p><a href="">Windows Media PlayerのWebページ埋め込み方法</a></p> <dl> <dt>目次</dt> <dd> <ul> <li>Windows Media PlayerのWebページ埋め込み〔基本的な記述例〕</li> <li>Windows Media PlayerのWebページ埋め込み〔コントロール非表示・自動再生〕</li> <li>Windows Media PlayerのWebページ埋め込み〔コントロール表示・自動再生しない〕</li> <li>Windows Media PlayerのWebページ埋め込み〔表示コントロール指定・自動再生〕</li> <li>Windows Media PlayerのWebページ埋め込み〔ActiveXコントロール(フォームボタン使用) ※IEのみ〕</li> <li>Windows Media PlayerのWebページ埋め込み〔ActiveXコントロール(画像ボタン使用) ※IEのみ〕</li> <li>プレーヤー画面下にバナー挿入</li> <li>リンクを貼って再生させる方法</li> </ul> </dd> </dl> </section> <section> <h1>RealPlayer</h1> <p><a href="http://localhost/test/pj_roomer/?t=strm&p=rm_embed">RealPlayerのWebページ埋め込み方法</a></p> <dl> <dt>目次</dt> <dd> <ul> <li>RealPlayerのWebページ埋め込み〔基本的な構文〕 <li>RealPlayerのWebページ埋め込み〔コントロール非表示・自動再生〕</li> <li>RealPlayerのWebページ埋め込み〔コントロール非表示・ActiveXコントロール(フォームボタン使用)〕</li> <li>RealPlayerのWebページ埋め込み〔コントロール非表示・ActiveXコントロール(画像ボタン使用)〕</li> <li>RealPlayerのWebページ埋め込み〔指定したコントロールのみ表示1〕</li> <li>RealPlayerのWebページ埋め込み〔指定したコントロールのみ表示2〕</li> <li>RealPlayerのWebページ埋め込み〔SMIL形式〕</li> <li>リンクを貼って再生させる方法</li> </ul> </dd> </dl> </section> <section> <h1>QuickTime</h1> <p><a href="http://localhost/test/pj_roomer/?t=strm&p=mov_embed">QuickTimeのWebページ埋め込み方法</a></p> <dl> <dt>目次</dt> <dd> <ul> <li>QuickTimeのWebページ埋め込み〔基本的な記述例〕</li> <li>QuickTimeのWebページ埋め込み〔コントロール非表示・自動再生〕</li> <li>QuickTimeのWebページ埋め込み〔コントロール表示・自動再生〕</li> <li>QuickTimeのWebページ埋め込み〔ActiveXコントロール ※IEのみ〕</li> <li>QuickTimeのWebページ埋め込み〔SCALEでムービーサイズ調整・拡大縮小〕</li> <li>リンクを貼って再生させる方法</li> </ul> </dd> </dl> </section> </article>
aside 
ページの本題と関連が薄い内容のセクション
2009/8/26
構文
aside要素は、ページの本題とはわずかに触れる程度にしか関連がない内容のセクションを表します。
属性
固有の属性はありません。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
サンプル
<!-- The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe. --> <aside> <h1>Switzerland</h1> <p> Switzerland, a land-locked country in the middle of geographic Europe, has not joined the geopolitical European Union, though it is a signatory to a number of European treaties. </p> </aside> <!-- The following example shows how an aside is used to mark up a pull quote in a longer article. --> ... <p>He later joined a large company, continuing on the same work. <q>I love my job. People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. Some people wonder what they would do if they didn't have to work... but I know what I would do, because I was unemployed for a year, and I filled that time doing exactly what I do now.</q></p> <aside> <q> People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. </q> </aside> <p>Of course his work — or should that be hobby? — isn't his only passion. He also enjoys other pleasures.</p> ...
h1-h6
header要素の見出し
2009/8/26
構文
h1~h6要素は、header要素の見出しを表します。
内容を区分する要素中の内容を率いる最初の要素は、そのセクション用のヘッダーを表わします。 これらの要素は、h1なのかh2なのか、その要素名に含まれる数値によってランクがあります。 h1要素がランクが高く、h2、h3、h4、h5、h6の順にランクが低くなります。 同じ要素名は同ランクとなります。
属性
固有の属性はありません。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
サンプル
<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6>

header 
セクションあるいは文書のヘッダー
2009/8/26
構文
header要素は、セクションあるいは文書のヘッダーを表します。
header要素は、通常、サブタイトルまたはタグラインによってタイトルをマークアップするために、1セットの見出し要素を分類するのに使用されます。
属性
固有の属性はありません。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
サンプル

<header> <h1>PHP & JavaScript Room's Blog</h1> <p> <a href="news.html">ニュース</a> - <a href="blog.html">ブログ</a> - <a href="forums.html">フォーラム</a> </p> </header> ・・・ <article> <header> <h1>音声・動画配信について</h1> <p>録音した音声や音楽、撮影した動画などの音声・動画ファイルをWebサイトで公開するには、 Windows Media Player、 RealPlayer、 QuickTime といったプレーヤーをWebページに埋め込んで再生させるか、音声・動画ファイルへ直接リンクを貼ります。</p> </header> <p>各プレーヤーの配信方法の詳細は、以下のコンテンツで解説しています</p> ・・・
address
セクションの連絡先情報
2009/8/26
構文
address要素は、セクションあるいは文書の連絡先情報を表します。
通常、addresss要素はfooter要素に含まれます。
address要素がセクションに含まれている場合は、該当セクションの連絡先情報を表します。
address要素がbody要素に適用されている場合は、文書全体に適用されます。
address要素内のテキストは、一般的なブラウザにおいてイタリック体で表示され、address要素の前後に改行が挿入されます。
- address要素に、連絡先情報以外の情報を含めてはいけません。
- 例えば郵便の宛先など、関係ないアドレスをaddress要素でマークアップしないように。
属性
固有の属性はありません。
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | 全要素共通の属性。 |
サンプル
<address>© <a href="http://phpjavascriptroom.com/">PHP & JavaScript Room</a> All Rights Reserved.</address>