目次一覧
状態:-
閲覧数:2,679
投稿日:2015-10-13
更新日:2020-03-31
使用した方が良いと思われる HTML5タグ ／ <nav> ／ <main>
<article>
<section>
figure ／ figcaption
<article>
<section>
figure ／ figcaption
使用した方が良いと思われる HTML5タグ ／ <nav> ／ <main>
使用した方が良いと思われる 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>
<article>
article要素
ドキュメント、ページ、アプリケーション、あるいはサイトの中で自己完結した構成物を表す
・独立して配布可能なもの
・ブログやニュース記事のように、それ単体で意味をなすもの
<article>の子要素
・見出し (<h1>-<h6> element) を含む
入れ子
・OK
<article><article></article></article>
コード例
<article class = "cartoon_review">
<header>
<h2>はじめの一歩</h2>
</header>
<section class = "main_review">
<p>はじめの一歩見た今ならデンプシーロール打てそうな気がする✊</p>
</section>
<section class = "user_reviews">
<article class = "user_review">
<p>ドラゴンボール読み終わったあとにかめはめ波撃てそうな錯覚に陥る奴か</p>
<footer>
<p>
宇野さんによって<time datetime = "2015-05-16 19:00"> 5月16日</time>に投稿されました。
</p>
</footer>
</article>
<article class = "user_review">
<p>えっ かめはめ波とデンプシーロールとフリッカーはみんなするよね？！</p>
<footer>
<p>
美空さんによって<time datetime = "2015-05-17 19:00"> 5月17日</time>に投稿されました。
</p>
</footer>
</article>
</section>
<footer>
<p>
スタッフによって<time datetime = "2015-05-15 19:00"> 5月15日</time>に投稿されました。
</p>
</footer>
</article>
<header>
<h2>はじめの一歩</h2>
</header>
<section class = "main_review">
<p>はじめの一歩見た今ならデンプシーロール打てそうな気がする✊</p>
</section>
<section class = "user_reviews">
<article class = "user_review">
<p>ドラゴンボール読み終わったあとにかめはめ波撃てそうな錯覚に陥る奴か</p>
<footer>
<p>
宇野さんによって<time datetime = "2015-05-16 19:00"> 5月16日</time>に投稿されました。
</p>
</footer>
</article>
<article class = "user_review">
<p>えっ かめはめ波とデンプシーロールとフリッカーはみんなするよね？！</p>
<footer>
<p>
美空さんによって<time datetime = "2015-05-17 19:00"> 5月17日</time>に投稿されました。
</p>
</footer>
</article>
</section>
<footer>
<p>
スタッフによって<time datetime = "2015-05-15 19:00"> 5月15日</time>に投稿されました。
</p>
</footer>
</article>
・article
<section>
section要素
見出しを伴う意味的なグループ化が可能な、文書の一般的なセクションを表す
コンテンツをまとめる
簡単に言えば？
・内容を分割する際に使用
<section> の子要素
・見出し (<h1>-<h6> 要素) を含めるべき
入れ子
・OK
<section><section></section></section>
注意
<section> 要素の内容が単独で意味を成す集合の場合
・section 要素より <article> 要素の使用がより適している
単なる汎用コンテナとして使用するのは誤り
・汎用コンテナは、従来通り<div>
コード例
<section>
<h1>Heading</h1>
<p>Bunch of awesome content</p>
</section>
<h1>Heading</h1>
<p>Bunch of awesome content</p>
</section>
<section>
<h2>Heading</h2>
<img>some image</img>
</section>
<h2>Heading</h2>
<img>some image</img>
</section>
・section 要素
・HTML Standard 日本語訳
figure ／ figcaption
headingタグ
<!DOCTYPE html>
<html lang="en">
<title>RPG System 17</title>
<style>
header, nav, aside, main, footer {
margin: 0.5em; border: thin solid; padding: 0.5em;
background: #EFF; color: black; box-shadow: 0 0 0.25em #033;
}
h1, h2, p { margin: 0; }
nav, main { float: left; }
aside { float: right; }
footer { clear: both; }
</style>
<header>
<h1>System Eighteen</h1>
</header>
<nav>
<a href="../16/">← System 17</a>
<a href="../18/">RPXIX →</a>
</nav>
<aside>
<p>This system has no HP mechanic, so there's no healing.
</aside>
<main>
<h2>Character creation</h2>
<p>Attributes (magic, strength, agility) are purchased at the cost of one point per level.</p>
<h2>Rolls</h2>
<p>Each encounter, roll the dice for all your skills. If you roll more than the opponent, you win.</p>
</main>
<footer>
<p>Copyright © 2013
</footer>
</html>
HTML Standard 日本語訳