先週末に行われたというWCAN 2017 Summerのスライドを見て、若干なんだかなーと思ったところがあったので殴り書き。
スライド134以降にある
“<hn>になれなかった<p>問題”
ですけれども(おそらくコンセントさんの社内チャットだろう)、DTP用語が飛びかってますが、
タラシ
デザイン用語辞典:グラフィックデザイン:た行:タラシ:デザイン事典
文字組みにおいて画像や本文の間に入れるアイキャッチ的な文字のこと。
ショルダー
http://www.glocalcity.org/dtpyougo_sa.html
「サブタイトル」。
これらにぴったりのことがW3C HTML 仕様*1に書いてあると思います。代替案ですけども。
- 4.12.1 小見出し、サブタイトル、代替タイトルおよびキャッチフレーズ — HTML5 日本語訳
- 4.13.1. Subheadings, subtitles, alternative titles and taglines - HTML 5.2(このエントリーを書いた時点で、最新のW3C HTML Public Working Draft)
HTML 5.0とHTML 5.2でぱっと見、違いはないように見えるので訳文を見てもらえればいいと思いますが要するに、header
要素で囲めばよろしかろうと。
言い換えるなら、裸のp
要素と、セクション(セクショニングコンテンツではない)で囲まれたp
とでは(header
はもちろんのこと、aside
やarticle
など)、意味合いが変わってくるのではないでしょうか、と。
あとはまあ、aria role
を使うとかですかね。現時点でどこまでご利益があるのかは不明ですが、電子書籍を念頭に置いたDigital Publishing WAI-ARIA Module 1.0仕様なんかですと、サブタイトルを表すのにdoc-subtitle
というロールが用意されています。
<header> <h1>ここに見出しを入れて</h1> <p role="doc-subtitle">こっちに小見出しを入れる</p> </header>
また、脚注に関してはHTML Standard 日本語訳にある「脚注」にも記述がありますし、dpub-ariaでもdoc-footnote
というロールが用意されていたりします。例えばこんな感じで。
<aside id="6baa07af" role="doc-footnote"> * 脚注ってほら、やたら長いのあるじゃないですか、初めてのPerlみたいなの。 </aside>
出自はEPUB 3 Structural Semantics Vocabulary(参考日本語訳)ということなので、DTPをかじったことがあるという人は、想像力をかき立てられるかもしれません(残念ながら、文書名にVocabularyとあるように、ボキャブラリーしか用意されていませんが。)
まあ、p
でしか表現できないためにclass
を使うというのも方法の一つでしょうが、それ以外のやり方もあるということですね。見た目に囚われることなく、コンテキストを反映できるHTMLを書けるといいかなって。
*1:なぜにLiving Standardではないのかというと、LSでは`hgroup`要素を使えばよいと言うことになっているため。個人的には勧めない。