【HTML5】マイナーだけどブログ書くときに便利そうなHTML5のタグ3つ＋α

Su Yin Khoo

最近、マークダウンやWordPressでブログ記事を書くときに、「いちいちクラスをつけるの面倒だな」と思うことが増えました。できるだけクラスを使わずタグ自体にスタイルを適用したいと。そこで初心に返り、HTML5の要素を学び直そうと思いました。

HTMLとの付き合いは15年近くありますが、ブラウザでの表現が乏しい要素って、実務で必要になることが滅多にないですよね。大体のことはCSSやJSで対応するのが普通ですし、HTML5も audio や video、canvas みたいなのがメジャーな印象です。少し凝った人になると、article や section みたいなのを取り入れたりしますが必須ではありません。

そこで、

「今まで一回も使ったことなかったけど、ブログ書く時にCSSでいい感じにできそう」

と思ったHTML5のタグを紹介します。

（なお、この記事はHTML5の正確性よりも、ブログ記事の体裁を整えるときに便利かどうかを軸に書いてあるため、本来の意味などを調べたい方には参考にならない気がします）

ins タグ…追記であることを明記する

ブログなどでよく見る「追記」はinsを使うのが正しいようです。

ins 要素は、ドキュメントへの追記を表します。（中略）暗黙の段落の境界をまたぐべきではありません。
http://www.html5.jp/tag/elements/ins.html

暗黙の段落ルールがちょっと面倒ですが、なぜかバリデーションチェックしても怒られなかったので、個人的にはulやolの外にinsで囲って追記セクションとして明記しちゃおうかなと思っています。（正しい使い方としては微妙かも知れませんので参考程度に。）

cite タグ…引用元を明記する

cite 要素は創造的な作品への参照を表します。作品のタイトルや著者の名前（個人、人々、組織）や URL 参照を入れなければいけません。これらは、引用メタデータの追記によく使われる省略表記に入れることができます。
http://www.html5.jp/tag/elements/cite.html

blockquote の中に 引用元 URL を明記したい時があるかと思いますが、そういうときに使えそうです。ざっと「引用 デザイン」でググってみましたがciteも込みでデザイン入れてるCSS少なそう…。アイコンつけたり右寄せしたり調整できそうです。W3C公式のサンプルでもこういう使い方されてるんで、単純にマイナーな要素なんでしょうね。

（ちなみに blockquote や q は引用などに使うタグです。普通のサイトで使う機会は少ないですが、Twitterのつぶやきを埋め込むときに含まれていたりメジャーなタグかと。）

small タグ…注釈などを明記する

頭に 「※」 を使って表記したい内容なんかは、smallタグを使えば間違いなさそうです。ただ…文法的には正しいものの、毎回smallって書くのがだるいですね…。

<style>
    li>small::before  {
        content: '※';
    }
</style>
<ul style="list-style-type: none">
    <li><small>本キャンペーンは◯年◯月◯日まで有効です</small></li>
    <li><small>当選者の発表は賞品の発送をもって代えさせていただきます</small></li>
</ul>

【番外編】 個人的には使うけどマイナーかも？

自分はよく使うのですが、意外と知らない人も多そうなので。

time タグ…日付と時刻を明記する

最近はGoogleの検索結果で日付が表示されてると思いますが、time タグで囲まれた部分は特に意識して見てくれてるようですね。更新頻度の高い記事には必須かと。

strong などのタグを重ねがけする

Markdown文章は対応しているHTMLタグが少ないです。そこで、昔からお馴染みの strong や em を重ねがけしてスタイルを適用するという方法もありかもしれません。少なくとも strong に関しては二重にタグを書いても良さそうでした。

<style>
    strong  {
        font-weight: bold;
        font-size: 100%;
    }
    strong>strong  {
        font-weight: bold;
        font-size: 150%;
    }
    strong>strong>strong  {
        font-weight: bold;
        font-size: 200%;
        color: red;
    }
</style>

<!-- 以下、マークダウン -->

ここは普通の文章です。強調したい文章は**こんな感じで太文字に**なります。

さらに文字を大きくしたいときは****こういう風にすると大きくなります。

**** さらに******赤字にして目立つように！******

滅多に使わないだろうけど、たまに思い出したい

普通のブログじゃ使うことないだろうけど、ジャンルによっては便利なときもある？

mark タグ…ユーザーの操作により目立たせる

mark 要素は、1 つのドキュメントの中にある一連のテキストを表しますが、その部分が別のコンテキストの中で関連を持つ場合に、そこからその部分を指し示すことができるよう、その部分をマークまたはハイライトするものです。
http://www.html5.jp/tag/elements/mark.html

使いみちが難しいので個人的には「strong や em は ページ制作者側が強調したい部分」、markは「ユーザーの操作結果により目立たせる必要がある部分」に利用しようと考えました。例えば Google で「HTML」と検索すると、検索結果で「HTML」の文字が太字で表示されていますが、別にGoogleは「HTML」を強調したいという意思が無い。

強調したいと思ってるのは、Googleではなく「検索したユーザー」だからです。

blockquote 内で利用する mark に関しては特殊で、ユーザー＝実際に引用したユーザー、つまりページ制作者と解釈します。先程のURLから引用になりますが、

<blockquote>
  <p class="bubble">私は信じ<em>たいとは</em>思いませんでした。<mark>もちろん、
  ある程度は私もそれが既知の平文攻撃だったことに気づいていました。</mark>でも私は
  自分で見るまで認められませんでした。</p>
 </blockquote>
 <p>(強調は筆者による。) 私はそれはすごいと思いました。とても杓子定規ですが、
ちゃんとすべてを説明しています。</p>

これは筆者（ページ制作者）が引用文の中で後で明記しようと思ってる場所をハイライトしています。「ページを見てるユーザー」は特に強調したいと思っていない…みたいな。

b タグ…他と区別したいテキスト

b 要素は、特に重要性を伝えることはなく、代替音声や気分という意味合いもなく、実利的な目的で注目を引きたいテキストの範囲を表します。例えば、ドキュメントの概要にあるキーワード、レビュー記事の中の製品名、対話型テキスト駆動ソフトウェアにおけるアクショナブル・ワード、記事リードが相当します。
http://www.html5.jp/tag/elements/b.html

うーん。。。使い道に苦労しそうです。適用するスタイルがイメージできないので。strong が太い赤文字だとしたら、「細い緑文字」みたいな感じになるのでしょうか。「メリット」を strong だとしたら、「デメリット」を b にするとか？

s タグ…既に変更されたテキスト

s 要素は、もう正確ではない、または、もう関連性がないコンテンツを表します。
http://www.html5.jp/tag/elements/s.html

del と異なるのは引用元の例文にもあるとおり、「該当の商品に新たな販売価格が付けられたために、希望小売価格がもう関係が無くなった」のような状況に使うようです。とはいえスタイルを適用するなら同じ打ち消し線だろうから、好んで使う機会は少なそう。

ruby タグ…ルビをふる

「TokunagaKazuya.tk（トクナガカズヤ.ティーケー）」 …これを機会に初めて使ってみました。漫画や小説に。

まとめ

ブログや文章を書くという用途においては、まだまだクラスに頼ることが多そうですね。