カテゴリー:
HTML5
閲覧数:792 配信日:2015-10-13 19:43
使用した方が良いと思われる HTML5タグ
header
nav
main
article
section
figure
figcaption
nav
main
article
section
figure
figcaption
<nav>
要点
・<header>に入れても入れなくても良い
・複数設置可
コード例
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<header>The Lawson Academy:
<nav>
<ul>
<li><a href="courses.html">Courses</a></li>
</ul>
</nav>
</header>
<main>
<h1>Graduation</h1>
<nav>
<ul>
<li><a href="#ceremony">Ceremony</a></li>
</ul>
</nav>
<h2 id="ceremony">Ceremony</h2>
<p>Opening Procession</p>
<h2 id="graduates">Graduates</h2>
<ul>
<li>Eileen Williams</li>
</ul>
<h2 id="awards">Awards</h2>
<ul>
<li>Clara Faulkner</li>
</ul>
</main>
<footer></footer>
</body>
</html>
・4.4. Grouping content
<main>
main要素
body 要素(<body>)の主な内容を表す
具体的には？
「トピックの主なコンテンツ」や「アプリケーションの中心的な機能に直接関連する内容」で構成
入れ子
・NG
※そもそも<main>タグは複数使用不可
<main></main>
常に親要素
・<article>, <aside>, <footer>, <header>,<nav> これら要素の子孫に含めることは出来ない
常に1つ
・ドキュメントに main 要素を 1 つしか入れてはいけない
・複数の main 要素を含めることはできない
コード例
<main>
<h1>リンゴ</h1>
<p>リンゴはりんごの木の果実です。</p>
<article>
<h2>レッドデリシャス</h2>
<p>海外では有名なりんご</p>
<p>発色がかなり強い</p>
<p>暗い赤色</p>
</article>
<article>
<h2>ゴールデンデリシャス</h2>
<p>実が黄色い</p>
<p>味はとても甘い</p>
<p>皮や実が柔らかい</p>
</article>
</main>
<h1>リンゴ</h1>
<p>リンゴはりんごの木の果実です。</p>
<article>
<h2>レッドデリシャス</h2>
<p>海外では有名なりんご</p>
<p>発色がかなり強い</p>
<p>暗い赤色</p>
</article>
<article>
<h2>ゴールデンデリシャス</h2>
<p>実が黄色い</p>
<p>味はとても甘い</p>
<p>皮や実が柔らかい</p>
</article>
</main>
・<main>