HTML レッスン6
セマンティックHTML
意味のあるタグでページの構造を明確にしよう
セマンティックHTMLとは？
「セマンティック」は「意味のある」という意味です。divの代わりに、その内容の「意味」を表すタグを使うことで、 ブラウザ・検索エンジン・スクリーンリーダーがページの構造を正しく理解できるようになります。
悪い例
<div class="header">...</div> <div class="nav">...</div> <div class="main">...</div> <div class="footer">...</div>
良い例
<header>...</header> <nav>...</nav> <main>...</main> <footer>...</footer>
主なセマンティックタグ
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
30 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live Previewタグの使い分け
<header>ページやセクションのヘッダー（ロゴ、ナビ）<nav>ナビゲーションリンクのまとまり<main>ページの主要コンテンツ（1ページに1つ）<article>独立した記事やブログ投稿<section>テーマ別のセクション<aside>サイドバー、補足情報<footer>ページやセクションのフッター<figure>画像やイラスト+キャプション<time>日付・時刻<mark>ハイライトされたテキスト自由に試してみよう
セマンティックタグを使ってブログページの構造を作ってみましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
15 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live Preview