HTML要素、strong (=重要)、em (=強調)、b (=注目)、i (=イタリックの装飾)の使用方針を整理したので、メモ。

strong要素とem要素は、セマンティック(=意味を持つ)な要素なので、素直に用途に従う。

b要素とi要素は廃れつつある装飾用の記述なので、出来るだけ避ける。

他に注目してほしい部分や、読みやすい様にガイドをつけたいときは、strong要素の太字やem要素のイタリックとは異なる属性(class)で、アンダーラインやハイライトなどの装飾を指定する。

といったところでしょうか。

strongタグには「重要!」の意味が付帯

Gutenbergエディタの「B」ボタンにて太字表記になる「strong要素」は、「重要!」という意味を持っています。

多くのテーマで太字の装飾が施されている他、CSSにて装飾が指定されていなくても、ブラウザーの方で太字にしてくれているようです。

strong要素のtest

一方、「b要素」は、boldという太字装飾用の要素ですが、この要素は重要という意味は持っておらず、しかも廃れてきていて、あまり見かけません。

bold要素のテスト

emタグには「強調」の意味が付帯

「em」要素は、強調を意味する要素。strongの太字に対して、イタリックで示されることが多いです。

em要素のテスト

ん?、(テーマ・Twenty Nineteenでは)、日本語の部分がイタリックになっていませんね。ま、いっか。

一方、「i」要素は、イタリックの装飾用の要素で、これには強調の意味は付与されておりません。

i要素のテスト

その他のインライン装飾

読みやすい様にガイドをつけたい時は、上記二つの要素を避けて、アンダーライン風のハイライト装飾を作成しました。

.highlighter_pink {
background: linear-gradient(transparent 60%, #ffadad 0%);
font-weight: bold;
font-style: normal;
display: inline;
}

ピンク色ハイライトテスト

.highlighter_pale_turquoise{
background: linear-gradient(transparent 60%, #afeeee 0%);
font-weight: bold;
font-style: normal;
display: inline;
}

水色ハイライトテスト

.highlighter_pale_turquoise{
background: linear-gradient(transparent 60%, #afeeee 0%);
font-weight: bold;
font-style: normal;
display: inline;
}

ゴールドハイライトテスト

リライト日、2019年1月1日

テーマ変更、エディタ変更に伴い、パフォーマンスチェックとリライト。

上記をCSSに追加したのはいいけれど、エディタにカスタムアイコンを追加する方法が上手く見つからないので、しばらくはspan要素を使って、マニュアル入力です。

ちょっと消化不良だな。

gutenbergに変わって、ブロック単位の装飾が便利になった一方、インラインの装飾が面倒になってしまった感じ?

参考資料

投稿者: のろのろ

海外赴任中で、社畜で、早期リタイア志望者で、ゲーマーで、トレッキーに片足突っこんでいる、SF好きの、雑記ブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください