区切りタグ
(1) navタグ(ナビゲーション)
Webサイトのナビゲーションを作成するタグ。
(2) articleタグ(記事)
記事を書く場所を宣言するための記述。
(3) sectionタグ(セクション)
(2)内でテーマの違う複数の記事を記述するときの区切り。
<!DOCTYPE html>
<html>
<body>
<header>
<h1>ヘッドラインニュース</h1>
<nav>
<a href="layout.html">ホーム</a>
<a href="https://www.google.com">スポーツ</a>
<a href="https://www.google.com">経済</a>
<a href="https://www.google.com">天気</a>
</nav>
</header>
<main>
<article>
<section>
<h2>速報</h2>
<h3>動物園でゾウの赤ちゃん誕生!</h3>
<p>市内の動物園でゾウの双子の赤ちゃんが産まれました。赤ちゃんの名前を募集中です。</p>
</section>
<section>
<h2>気象情報</h2>
<h3>全国の天気</h3>
<p>全国的に晴れますが、山間部で一時的に雪が降るところがあります。</p>
</section>
</article>
</main>
<footer>
</footer>
</body>
</html>
特殊タグ
(4) audioタグ(音声再生)
「controls属性」を記述すると、音声ボタンや音量ボタンなどが表示される。
<!DOCTYPE html>
<html>
<body>
<audio src="audiotag.mp3" controls></audio>
</body>
</html>
(5) videoタグ(動画再生)
「width属性」で幅、「height属性」で高さを指定する。
<!DOCTYPE html>
<html>
<body>
<audio src="videotag.mp4" controls width="640"></audio>
</body>
</html>
(5) detailsタグ(折りたたみ機能)
クリックで表示、非表示を切り替える折りたたみ機能を作るタグ。
「open属性」…初期値が表示。これがなければ初期状態は非表示になる。
「summaryタグ」…詳細という文字を任意で変更できる。
(6) iframeタグ(別ページの埋め込み)
<!DOCTYPE html>
<html>
<body>
<h2>東京タワー</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747798533325!2d139.74324421566527!3d35.658584838820154!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1636041735064!5m2!1sja!2sjp
" width="500" height="500">
</iframe>
</body>
</html>