【2023年6月版】

HTML5 意味づけタグ 入門

公開日: 2023/06/01
読了時間: 約 6分

先に要点

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

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

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

細かいことはいつもの 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>タグ (NNのLayerタグのほうが好きだったけど…) ですが乱用は非推奨?警告?となってます。 できる限り、上記であげたような意味付きの要素を使ってください。とのことです。 いや、しょうがないけど。

Address タグについて

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

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

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

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

HTMLの入門書籍としてぜひ~!