HTMLの表示順を上下反対にし、CSSのレイアウトで上下の要素を入れ替えて逆に配置

Question

 <div class="heading">
   <h2 class="jp">見出し</h2>
   <p class="en">Heading</p>
 </div>

 .heading {
   display: flex;
   flex-direction: column-reverse;
 }

画面上の結果としては「Heading」　→　「見出し」と上から表示されるのですが、

<h2 class="jp">見出し</h2>　→　<p class="en">Heading</p>の順番で記述し、 CSSで反対にさせるという一見すると二度手間のようなことをしている理由を教えてください。 (初めから<p class="en">Heading</p>　　→　　<h2 class="jp">見出し</h2>の順番でHTMLを書けばよいのではと思ってしまいました)

Comments

[m.ts10806]

>一見すると二度手間のようなことをしている理由

自身が書かれたコードなのでは？
そうでないなら出典明示してください。

[m.ts10806]

後、本当にコードこれだけですか？これだけでは推測の推測しか出ないと思いますが

Answer 1

推測ですが、見た目と構造を分離して考えた結果のような気がします。
デザイン上は、最初に英語が来て、その補足みたいな感じで小さな日本語がついているような感じですかね。

ポイントは、マークアップ上どこを見出しにするのかという点です。
日本のサイトなら、英語は雰囲気づくりのためにデザインされていることも多いですし、英語の方が補足的な意味合いだと判断されたのでしょう。

ただし、日本語部分を見出しタグとし、デザインの順序通りにマークアップすると、本文（pタグ）が見出しより前に来てしまいます。
そのセクションの中で見出しを一番最初に持っていくのが、文書的には優しい作りとなるからというのが、この順序でマークアップした理由じゃないでしょうか。

デザイン通りにしつつも、文書構造を意識した結果じゃないかなと思います。

Answer 2

CSSで反対にさせるという一見すると二度手間のようなことをしている理由を教えてください。
(初めから<p class="en">Heading</p>　　→　　<h2 class="jp">見出し</h2>の順番でHTMLを書けばよいのではと思ってしまいました)

推測します。おそらく途中でデザインが変わったのだと思います。

上下を入れ替えるのは、CSSでいうと1行追加するだけで済んだりします。

時間や工数的な問題や、ほかにもっと優先度が高いタスクがあったなどの理由で
すべてのHTMLファイルを開き、順番を並べ替えるのを避けたのではないかと思います。

ソースコードの見た目と、実際の表示が近いほど保守の際のバグは少なくなる、と私は考えます。
「二度手間」と見えた感覚 (違和感) は自然ではないかと思われます。