Bold と Italic の使い分け

MarkdownでBold(**で囲うやつ)とItalic(*で囲うやつ)の正しい使い分けに自信無いよねーと思って少し調べてみたら面白かったのでまとめておきます。なんか認識違いがあったら指摘して下さい。

調べる前にぼんやり認識してたこと

  1. ** は strong タグに、* は em タグになる
  2. strongタグとemタグはHTML5で少し意味が変わった
    1. 変わる前は em < strong くらいの強さの違いだった
  3. HTML5 は結局廃止された

で、僕の混乱の元はHTML5が廃止された結果、結局strongタグとemタグの仕様がどうなったかわかっていない。rollbackされたのかそうでは無いのかも知らない。という状況でした。

Markdownの仕様

Daring Fireball: Markdown Syntax Documentation

Markdown treats asterisks (*) and underscores (_) as indicators of emphasis. Text wrapped with one * or _ will be wrapped with an HTML <em> tag; double *’s or _’s will be wrapped with an HTML<strong> tag. 

ということでstrongタグとemタグに変換されるのはあってそう

HTML Spec from MDN

 MDNにはそのものズバリなページがあった

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong#em_vs._strong

Adding to the confusion is the fact that while HTML 4 defined <strong> as indicating a stronger emphasis, HTML 5 defines <strong> as representing "strong importance for its contents." This is an important distinction to make.

While <em> is used to change the meaning of a sentence as spoken emphasis does ("I lovecarrots" vs. "I love carrots"), <strong> is used to give portions of a sentence added importance (e.g., "Warning! This is very dangerous.") Both <strong> and <em> can be nested to increase the relative degree of importance or stress emphasis, respectively.

importance emphasis の違いと書かれている。日本語だと重要強調? なんとなくわかるんだけどやっぱりあんまり上手く理解できないのでもう少し調べてみる。

HTML Spec from WHATWG

strong tag

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-strong-element

こっちにはImportanceに追加でSeriousnessUrgencyがリストされている。日本語だと深刻と緊急かな?なんとなく重要の意味がわかってきた気がする。

さらに

Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.

と書いてある。strong タグは文章の意味を変えない。なるほど

em tag

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-em-element

こっちには

The placement of stress emphasis changes the meaning of the sentence. 

em タグをどこにつけるかで意味が変わるよって書いてある

まとめ

strong
  • 重要
  • 緊急
  • 深刻

文章の意味は変えない

em
  • 強調

文章の意味を変える

 

WHATWGの猫の話の例えがわかりやすいので読んでみるのをお勧めします。猫は可愛い😍