main
該当するページのメインコンテンツを表します。
article要素、aside要素、footer要素、header要素、nav要素の子孫要素として使用することは出来ません。
カテゴリー
フロー・コンテンツ
パルパブル・コンテンツ
main属性
固有の属性はありません。
main使用例
main使用例1
[html highlight=”21,26″]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TOP | tech.pjin.jp</title>
</head>
<body>
<header>
<nav>
<ul class="globalnav">
<li>TOPへ</li>
<li>このサイトについて</li>
<li>カテゴリー</li>
<li>お問い合わせ</li>
</ul>
</nav>
</header>
<aside class="left">
<!– サイドバー –>
</aside>
<main>
<section>
<h1>ページの見出し</h1>
<p>(内容…)</p>
</section>
</main>
<footer>
<!– フッターナビ –>
</footer>
</body>
</html>
[/html]
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TOP | tech.pjin.jp</title>
</head>
<body>
<header>
<nav>
<ul class="globalnav">
<li>TOPへ</li>
<li>このサイトについて</li>
<li>カテゴリー</li>
<li>お問い合わせ</li>
</ul>
</nav>
</header>
<aside class="left">
<!– サイドバー –>
</aside>
<main>
<section>
<h1>ページの見出し</h1>
<p>(内容…)</p>
</section>
</main>
<footer>
<!– フッターナビ –>
</footer>
</body>
</html>
[/html]
main使用例2
[html highlight=”8,20″]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML GO(Amazon Goではない) | tech.pjin.jp</title>
</head>
<body>
<main id="main_contents">
<article id="A3452">
<header>
<h1>HTML GO(Amazon Goではない)</h1>
</header>
<section>
<p>HTML5の真面目な内容です。</p>
</section>
<footer>
<!– フッターナビ –>
</footer>
<article>
</main>
</body>
</html>
[/html]
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML GO(Amazon Goではない) | tech.pjin.jp</title>
</head>
<body>
<main id="main_contents">
<article id="A3452">
<header>
<h1>HTML GO(Amazon Goではない)</h1>
</header>
<section>
<p>HTML5の真面目な内容です。</p>
</section>
<footer>
<!– フッターナビ –>
</footer>
<article>
</main>
</body>
</html>
[/html]
