Search

HTML要素セクション

  1. body〔文書の本文〕
  2. section HTML5～〔文書のセクション〕
  3. nav HTML5～〔他ページあるいはページ内にリンクするページのセクション〕
  4. article HTML5～〔外部コンテンツ〕
  5. aside HTML5～〔ページの本題と関連が薄い内容のセクション〕
  6. h1-h6〔header要素の見出し〕
  7. header HTML5～〔セクションあるいは文書のヘッダー〕
  8. footer HTML5～〔セクションあるいは文書のフッター〕
  9. address〔セクションの連絡先情報〕

body
文書の本文

2009/8/26

構文

<body>~</body>

body要素は、文書の本文を表します。

body要素は、html要素においてhead要素の次にくる第2の要素です。

body要素に直接テキストを指定することはできません。
テキストは必ずp要素などのブロック要素でくくる必要があります。

【DOM】document.bodyで文書の本文にアクセスできます。

属性

固有の属性はありません。

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>&copy; 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 HTML5～
文書のセクション

2009/8/26

構文

<section>~</section>

section要素は、一般的な文書またはアプリケーションにおけるセクションを表します。
1つのセクションは、ヘッダー、章、フッターなどで構成されます。

属性

固有の属性はありません。

section要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

<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 HTML5～
他ページあるいはページ内にリンクするページのセクション

2009/8/26

構文

<nav>~</nav>

nav要素は、他ページあるいはページ内にリンクするページのセクションを表します。

ナビゲーションがあるセクションはリンクされます。 ページ内のすべてのリンクグループを、nav要素に指定する必要はなく、主要なナビゲーションのセクションのみnav要素に指定してください。

フッターにはサイトの様々な主要部分へのリンクリストがあるのが一般的ですが、それらはfooter要素に指定するとよいでしょう。

属性

固有の属性はありません。

nav要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

<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 HTML5～
外部コンテンツ

2009/8/26

構文

<article>~</article>

article要素は、ニュース記事、フォーラムの投稿、ブログ記事、ブログのユーザーコメントなどの外部コンテンツを表します。

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 HTML5～
ページの本題と関連が薄い内容のセクション

2009/8/26

構文

<aside>~</aside>

aside要素は、ページの本題とはわずかに触れる程度にしか関連がない内容のセクションを表します。

属性

固有の属性はありません。

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>~<h1>

h1～h6要素は、header要素の見出しを表します。

内容を区分する要素中の内容を率いる最初の要素は、そのセクション用のヘッダーを表わします。 これらの要素は、h1なのかh2なのか、その要素名に含まれる数値によってランクがあります。 h1要素がランクが高く、h2、h3、h4、h5、h6の順にランクが低くなります。 同じ要素名は同ランクとなります。

属性

固有の属性はありません。

head要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

<h1>見出し1</h1>
	<h2>見出し2</h2>
		<h3>見出し3</h3>
			<h4>見出し4</h4>
				<h5>見出し5</h5>
					<h6>見出し6</h6>

header HTML5～
セクションあるいは文書のヘッダー

2009/8/26

構文

<header>~</header>

header要素は、セクションあるいは文書のヘッダーを表します。

header要素は、通常、サブタイトルまたはタグラインによってタイトルをマークアップするために、1セットの見出し要素を分類するのに使用されます。

属性

固有の属性はありません。

header要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

<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>
	・・・

2009/8/26

構文

<footer>~</footer>

footer要素は、セクションあるいは文書のフッターを表します。

footer要素には、作者、通常、関連文書へのリンク、著作権データなど、セクションに関する情報を指定します。 fotter要素は、普通、セクションの終わりに記述しますが、必ずしも記述する必要はありません。

セクションに対する連絡先情報は、address要素を使用してマークアップしましょう。

属性

固有の属性はありません。

footer要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

<footer>
	<p>&copy; 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>

address
セクションの連絡先情報

2009/8/26

構文

<address>~</address>

address要素は、セクションあるいは文書の連絡先情報を表します。

通常、addresss要素はfooter要素に含まれます。
address要素がセクションに含まれている場合は、該当セクションの連絡先情報を表します。
address要素がbody要素に適用されている場合は、文書全体に適用されます。

address要素内のテキストは、一般的なブラウザにおいてイタリック体で表示され、address要素の前後に改行が挿入されます。

  • address要素に、連絡先情報以外の情報を含めてはいけません。
  • 例えば郵便の宛先など、関係ないアドレスをaddress要素でマークアップしないように。

属性

固有の属性はありません。

address要素の属性
属性値説明
グローバル属性-全要素共通の属性。

サンプル

<address>&copy; <a href="http://phpjavascriptroom.com/">PHP & JavaScript Room</a> All Rights Reserved.</address>
© PHP & JavaScript Room All Rights Reserved.

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2024 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women