読者です 読者をやめる 読者になる 読者になる

破棄されたブログ

このブログは破棄されました。

HTML5 でのサブタイトルのマークアップについて

ネタ元は How to mark up subheadings, subtitles, alternative titles and taglines | HTML5 Doctor

hgroup 要素が HTML5 勧告候補から削除されたばっかりだけど*1、じゃあどうやってサブタイトルをマークアップしたらいいのって話。

前提条件として

Do not use h1-h6 elements to markup subheadings, subtitles, alternative titles and taglines unless they are intended to be the heading for a new section or subsection.

4.13 Common idioms without dedicated elements — HTML 5.1 Nightly

新しいセクションやサブセクションの見出しとする場合を除いて、 h1-h6 要素を、サブタイトルや見出し、副題、タグライン (キャッチコピー?) に用いてはいけない。

つまるところ、h1-h6 要素はドキュメントアウトラインを形成してしまうので、タイトルに付随するだけの副題に h1-h6 が使われるべきではないということ。

図にすると、本来あるべき姿としてはこうなハズ。

section
| + title
| | + main title
| | + subtitle
| + [contents]

でも、サブタイトルに h1-h6 を使うとこうなる

section
| + h1-h6 main title
|   + (section)
|     + h1-h6 subtitle
|       + [contents]

代替案

代替案は大きく二つにわけられる。

  1. h1-h6 要素へメインタイトルと一緒にサブタイトルを入れてしまう方法
  2. メインタイトルは h1-h6 要素で、サブタイトルは p 要素などでマークアップして、それらを header 要素や div 要素でグループ化する方法

h1-h6 要素へメインタイトルと一緒にサブタイトルを入れてしまう方法

本のサブタイトルをマークアップする例

コロン (:) より後がサブタイトル

<h1>The Lord of the Rings: The Two Towers</h1>
section
| + h1 title
| | + main title
| | + subtitle
| + [contents]
サブタイトルを span 要素でマークアップした例

span タグを使っているため CSS で別のスタイルを適用することができる。

 <h1>ラブライブ!  
   <span>School idol project</span> 
   </h1>
section
| + h1 title
| | + main title
| | + span subtitle
| + [contents]

メインタイトルは h1-h6 要素で、サブタイトルは p 要素などでマークアップして、それらを header 要素や div 要素でグループ化する方法

タイトルとタグラインを header 要素でグループ化した例

タイトルを h2 要素、タグラインを p 要素でマークアップして、header 要素でグループ化している。(引用元 Wikipedia

<header>
   <h2>ラブライブ! School idol project</h2>
   <p>雑誌『電撃G's magazine』(アスキー・メディアワークス)・ランティス・サンライズの合同ユーザー参加企画、および関連作品の名義。</p>
   </header>
section
| + header title
| | + h1 main title
| | + p subtitle
| + [contents]

*1:http://hyper-text.org/archives/2013/04/drop_hgroup_html5_cr.shtml

広告を非表示にする