演習課題「明示的なアウトラインを生成してみよう」
現在、article要素内で暗黙的なアウトラインが生成されています。
article要素内のnav要素、aside要素のいずれにもあてはまらないセクションであるh2
タグとその内容をそれぞれsection
タグで囲んで下さい。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです!
#06:汎用セクション(section)
このチャプターでは、汎用的なセクションについて学習します。
セクショニングコンテンツは見出し要素の対象の範囲を限定します。
つまり見出しとともにセクショニングコンテンツを使用して、入れ子構造にすることで文書のアウトラインをより明確に表すことができます。
しかし、アウトラインの明確化のためにセクショニングコンテンツを使用する際、article要素、nav要素、aside要素のいずれにもあてはまらないセクションが存在します。そのような具体的な要素がないセクションのマークアップに使われるのがsection要素です。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/section
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<nav>
<h1>最近の記事</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Hobby</a></li>
</ul>
</nav>
<article>
<h1>ブログはじめました</h1>
<section>
<h2>あいさつ</h2>
<p>こんにちは、paiza太郎です。ブログを開設しました。</p>
</section>
<section>
<h2>今後の目標</h2>
<p>C言語とHTMLをマスターしたいです。</p>
</section>
<aside>
<h2>用語解説</h2>
HTMLは「HyperText Markup Language」の略でマークアップ言語の1つです。
</aside>
</article>
</body>
</html>