＜main要素＞ - 主要なコンテンツ

公開日: 2017/02/09

main要素は、主要なコンテンツをマークアップするための要素です。この要素でマークアップしたコンテンツは、別のコンテンツと一線を画して主要であることを意味付けできます。main要素は、Sectioning contentに属する要素とは違い、ドキュメントのアウトラインの構築には寄与しません。

概要

名前

main

カテゴリー

Flow content

Palpable content

配置できる場所

Flow contentが期待される場所。

コンテンツモデル

Flow content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

main {
	display: block;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-main-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜main要素＞ - 主要なコンテンツ</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/main/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>main要素は、主要なコンテンツをマークアップする要素です。</p>

<h1>SYNCER</h1>
<p>このページではSYNCERについて案内しています。</p>

<nav>
	<a href="./">← 著者紹介</a>
	<a href="./">沿革 →</a>
</nav>

<main>
	<p>SYNCERは2014年6月に生まれたウェブサイトです。開発者のYuta Arai氏が2014年2月にsyncer.jpというドメインを取得したことに端を発する。</p>
	<p>このドメインは、当初は、あらゆるSNSのログを1つの画面で管理できるSYNCERというウェブサービスを公開するために取得したものである。</p>
	<p>しかし、Yuta Arai氏の怠惰が原因でこのウェブサービスの開発は頓挫、仕方なく同名でブログを始めたのが誕生のきっかけだ。</p>
</main>

<footer>
	<p>Copyright © 2014</p>
</footer>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/597/"> <meta charset="utf-8"> <title>【デモ】＜main要素＞ - 主要なコンテンツ</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/main/"> </head> <body>

<p>main要素は、主要なコンテンツをマークアップする要素です。</p> <h1>SYNCER</h1> <p>このページではSYNCERについて案内しています。</p> <nav> <a href="./">← 著者紹介</a> <a href="./">沿革 →</a> </nav> <main> <p>SYNCERは2014年6月に生まれたウェブサイトです。開発者のYuta Arai氏が2014年2月にsyncer.jpというドメインを取得したことに端を発する。</p> <p>このドメインは、当初は、あらゆるSNSのログを1つの画面で管理できるSYNCERというウェブサービスを公開するために取得したものである。</p> <p>しかし、Yuta Arai氏の怠惰が原因でこのウェブサービスの開発は頓挫、仕方なく同名でブログを始めたのが誕生のきっかけだ。</p> </main> <footer> <p>Copyright © 2014</p> </footer>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>