HTML,CSSは所詮補助

HTML CSS

「俺が教えてやろう」という方がおられましたら是非に。

という気概はないですが、しばらく考えた後の私なりの回答を書いて見ます。

高枝かれんさん自身の考え次第だと思います。
単に「ひぐらしのなく頃に」というタイトルを記述するだけならマークアップしません。強調し、その後にその強調の意図が書かれるなら、強調します。色を赤にする事に意味があるならclass="red"を加えます。

私は文章ありきという考えで、以下のような方法でマークアップ,CSSによる装飾を行っています。

  1. 文章を書く
  2. マークアップする
  3. 必要ならCSSで物理的見た目を強化

方法1. <span style="color:red;">は採用しません。２の段階でspan要素が入らないからです。方法3. <span class="red">も同様。だって、spanって単体では意味無いんだもの。(補記後述)

方法2. <em>、その部分に関する文章なら記述します。場合によって方法4. <em class="red">と３の段階でなります。

方法5. <img src="******.png" alt="ひぐらしのなく頃に" />は１の段階で入りませんが、補助的にロゴが必要なら文章とは別枠で２の段階で入れます。つまり、高枝かれんさんの記事と同様ですね。

要するに書いた内容次第って事で。
回答になっているのかなっていなのか...。

追記

「意味がない」ことをマークアップするのに、逆にspanは使い道があるんじゃないかと思って使っているのが現状です。

そうなんですが、spanの濫用は本当に物理マークアップの置き換えになってしまうと思います。<font color="red">と<span class="red">、どちらも物理的に色を付けた以上のものが見えてこない。という事で私個人としては使用を避ける方向にあります。
あと、かなりどうでも良い事だけど、引用されているのを見て始めてミスタイプに気付いたので修正しました。