HTML5 意味づけタグ 入門

先に要点

• Aside は何個おいてもOK
• Mainはページで１個
• 階層は、Main > Article > Section > Div となる。
• Article は複数でもOKだけど、まぁ１ページ１Articleだよね。。。
• Nav, Header, Footer は複数でもOK。まぁ１ページ１つずつが普通だよね。。。

HTML文章の”意味の構造化”

AやIMGなどHTMLのコンテンツや表示方法、振る舞いをまとめて決定するタグ以外にも、見た目や機能には影響しないがコンテンツの”ページにおける意味”を指定するタグがあります。Main、Article、Header などの構造の意味づけタグです。

細かいことはいつもの MDN サイトに詳しく記載されています。

• MDN: 文書とウェブサイトの構造

意味づけタグはざっくり以下のようなものがあります。

• <Main> タグ
  • <main> は 1つだけ。hidden 属性が指定されていれば 2 つ以上おける。
• <article> タグ
  • <article> は複数OK。<article> の中に <article> の入れ子も可能。
• <section> タグ
  • <section> は複数OK。
  • <footer>や<header>の中においてもOK。割とどこにでもおいてよい。<div>よりまとまりの意味がある、程度。
  • ただし見出し要素 <h1>～<h6> を置くのが推奨。
• <header> タグ
  • <header> は複数OK。
  • <header> の中に <header> の入れ子は不可。
  • <header> の中に <footer> を入れるの不可。
• <footer> タグ
  • <footer> は複数OK。
  • <footer> の中に <footer> の入れ子は不可。
  • <footer> の中に <header> を入れるの不可。
• <nav> タグ
  • <nav> は複数OK。
  • <nav> は入れ子もOK。
  • <footer>や<header>の中においてもOK。割とどこにでもおいてよい。<div>よりリンク集的なまとまりの意味がある、程度。
  • ただし、読み上げにも影響あるので乱用は注意
• <aside> タグ
  • <aside> は複数OK。
  • <aside> は入れ子もOK。
  • <article> の中になくてもOK。割とどこにでもおいてよい。<div>よりまとまりの意味がある、程度。

というわけで、<aside> タグはコンテンツに関係はあるけど付随的な意味を表す要素なので、メインコンテンツの注釈的なコンテンツ以外にもいろいろなボタンや検索窓を追加するなど、機能をバラバラに追加する積極的に使っていこうかなと。 <nav>タグで納まりが悪い場合には<aside>タグが良いのではないでしょうか。

Div タグについて

• <div> タグ

超汎用、<div>タグ (NNのLayerタグのほうが好きだったけど…) ですが乱用は非推奨？警告？となってます。 できる限り、上記であげたような意味付きの要素を使ってください。とのことです。 いや、しょうがないけど。

Address タグについて

• <address> タグ

Address タグは以前は”住所”を表す要素だったような気がしますが、今では”連絡先”を表すようになっています。 連絡先にはいろいろな情報を含めてOKとなり、自由度は上がってますが、相変わらず表示は <i>タグ、<em>タグ同様、イタリックで強調 となります。 微妙に扱いづらい。 そして、以下のタグは <address>タグの中に入れられません 。

• <address> 要素＝ネスト不可
• 見出しコンテンツ (<hgroup>, <h1>～<h6>)
• 区分コンテンツ (<article>, <aside>, <section>, <nav>)
• <header> および <footer> タグ

連絡先として<nav> タグ使いたいような気もしますが、<nav>タグはあくまでサイト内のコンテンツ、なんでしょうね。。。

本日はここまでとします。

HTML&CSSポケットリファレンス　［改訂3版］ [ 森 史憲 ] 価格：1,980円（税込、送料無料) (2023/6/4時点)

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本【電子書籍】[ Capybara Design 竹内直人 ] 価格：2,420円 (2023/5/31時点)

HTMLの入門書籍としてぜひ～！