見出しのマークアップについて（日本語と英語）

Question

分からないから質問という感じではなくてみなさんはどうしているのかなと思っての質問です。。。

http://www.shunpanro.com/recruit/

上のページでスクロールしたところにある「VISION ビジョン」「Message メッセージ」のような、『日本語の英語で同じことを書いてる』タイプの見出しのマークアップはどうしていますか。

<h2 class="japanese">日本語</h2>
<h3 class="english">English</h3>

<h2>
  <span class="japanese">日本語</span>
  <span class="english">English</span>
</h2>

<h2 class="japanese">日本語</h2>
<p class="english">English</p>

上記のパターンがおもいつきますがどれも微妙にしっくりこない気がしています。

Answer 1

私もginさんと同じような感じで、

<h2>日本語<span lang="en">English</span></h2>

っていう感じで見出しタグの中に全部突っ込んでました。
でもShoeiTaiさんのtitle属性を疑似要素で出力する、っていう方法はなかなか良い案だと思います。

Answer 2

自分はこんな感じでやりますかね～
<h2>日本語<span class="text-english" lang="en">English</span></h2>
数が2-3個であれば:afterとか使うこともありますが…

Answer 3

CSSの疑似要素で文字を出力することができるので、
h2タグに日本語を入れてCSS側で英語の文字を設定するといいと思います。
CSSの疑似要素

また、属性値を表示することも可能なので、title属性に英語もしくは日本語を入力し、
それを表示するのもよいかと思います。
リンクのtitleをキャプションのように表示する

追記です。以下サンプルコードとなります。

<style>
h2:before {
  content: attr(title) " ";
}
</style>
<h2 title="Vision">ビジョン</h2>

Comments

[machine_machine]

これは盲点でした。ありがとうございます。

ちょっときになる点としては `title` を入れるとマウスオーバーでツールチップが出てしまうのですが
`data-title` のようにカスタムdataでやっても特に問題はないものでしょうか？？

[ShoheiTai]

はい、問題ありません！

[machine_machine]

ありがとうございます！！