Zenn
📚

[2023年6月版]HTML5 意味づけタグ 入門

2023/06/04に公開
HTML 5
tech

技術ブログサイトを作成していて最近のHTMLにやっと追いついてきたので学習メモです。

先に要点

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

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>タグが良いのではないでしょうか。

Address タグについて

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

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

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

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

Discussion