演習課題「ヘッダを設定してみよう」
現在、ブログの先頭にナビゲーションを表示していますが表示が本文と同様になってしまっています。
正しくヘッダとして表示されるようheader
タグを使用して表示を変更して下さい。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです!
#07:ヘッダ(header)
このチャプターでは、ヘッダについて学習します。
ヘッダは導入的なコンテンツ、つまり文書の見出しやナビゲーション、ロゴや検索フォームなどを含んだグループを表現します。
ヘッダの親要素がbody要素のときは、文書全体のヘッダを表し、ヘッダの親要素がarticle要素のときは、その記事のヘッダを表します。
それら文書やセクションのヘッダをマークアップする際に使用される要素がheader要素です。
また、header要素はセクショニングコンテンツではないため、アウトラインを生成することはありません。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/header
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<header>
<nav>
<h1>最近の記事</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Hobby</a></li>
</ul>
</nav>
</header>
<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>