ラック
Home > ブログ > 記事 > 2016年1月 > Bootstrapにおけるciteタグの使用とciteの仕様

Bootstrapにおけるciteタグの使用とciteの仕様

カテゴリ: ホームページ

html5でciteタグの仕様が変更されましたね。

Bootstrapだと

<blockquote>
	引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用
	<small>出典: <cite>引用元</cite></small>
</blockquote>

とマークアップするとBootstrapの方で装飾されるので、これを利用したいと考えました。

特に文章サイトだと引用も結構あるので、自動的に装飾されるのはありがたいです。

しかし、実際は…

<blockquote>
	引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用
	<cite>引用元</cite>
</blockquote>

このように、citeまでは覚えているのですが、smallでciteの外側を囲うのを忘れることが頻発したので、「面倒だから後で全部smallでwrapするようにすれば良いじゃないか」と考えました。

そこで

//citeをsmallで覆う(bootstrapの規則用)
$("cite").each(function() {
	if($(this).closest("small").length == 0) { //citeの親にsmallがいない場合、smallでciteを覆う //lengthは要素の数を返す
		$(this).wrap("<small>出典: </small>");
	}
});

こんなjQueryのコードを作って全体に読み込ませれば解決!

 

ところで、citeをsmallで覆うのは別に仕様的には何の意味もないよね、と気になりました。

そこで、citeの仕様を調てみたところ…

…あれ、サイトによって言っていることが微妙に違いますね…。

こういうときは原典に当たりましょう。

Changes in HTML5
Although previous versions of HTML implied that the cite element can be used to mark up the name of a person, that usage is no longer considered conforming. The cite element now solely represents the cited title of a work; for example, the title of a book, paper, essay, poem, score, song, script, film, TV show, game, sculpture, painting, theater production, play, opera, musical, exhibition, legal case report, or other such work.

出典: cite – cited title of a work (CHANGED) – HTML5

…タイトルにしか使えない…だと…?

しかもblockquoteにはcite属性がある…だと…?

 

いやー…htmlのセマンティクス、セマンティックWebの道は険しいと改めて感じました。

仕様変更されたらその情報で既存の知識を更新していかないと…知識は日々更新を重ね、かつ実践することで活きてくるはずですから。

 

一方、今回の例のようにBootstrap等のテンプレートのルールに従おうとすることで、本来の意図に近づいたセマンティクスでタグを使用することを心掛けるようになる、というBootstrapの新たな側面を見た気がします。

 

ついでにこんな記事を見かけたので貼り付けておきます。

タグ: jQuery, html, bootstrap

 



関連する記事一覧