Webページのソースでクラス名やID名でinner

質問

やouterとつくものがありますが、どういった用途で使われているのでしょうか？

回答No.1

ORUKA1951

どのようなclass名やidを付けようと自由ですから、デザインのためにつけているのでしょう。しかし、本来の付け方ではありません。
　仕様書には、
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』と書かれていますから、本来はその目的で記述するべきでしょうね。
　例えば、その部分がheaderならclass="header"、本文ならclass="section"と言う風に・・
★HTML4.01～XHTML1.1では、文書のブロック的--セマンティックな構造を示す要素がなかったために、class名やidを併用することになっていました。
★それが理解されなかったために、実際には<div class="inner">ここは内側の文書</div>などというclass名が沢山登場しました。main,left-box・・とか。

　その反省から、HTML5では
　⇒文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
　section,article,aside,hgroup,header,footer,nav,figure,figcaption・・・・

　ですから、HTML4的には、本来左のように付けられると期待していたものが、右のように書かれてしまった。と言う事です。

<div class="article">⇒<div class="outer">
　<div class="header"></div>
　<div class="section">
　　<div class="section"></div>⇒<div class="inner">
　</div>
　<div class="footer">
　</div>
</div>

　もちろんHTML5では。
<article>
　<header>
　　<nav>
　　</nav>
　</header>
　<section>
　　<h2>本文見出し</h2>
　　<section>
　　　<h3>項見出し</h3>
　　</section>
　</section>
　<footer>
　</footer>
</article>
　と書かなければなりませんし、DIVは適切な要素がないときの最後の最後の手段でないと使えなくなります。

★Webページのソースでクラス名やID名
　は、文書構造を補完するために利用します。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　HTML5の新しい要素がとっても良い参考になるでしょう。inner,outerは、悪い見本と考えて良いでしょう。

　そうすることで、HTMLは誰(検索エンジンなどの機械も)が見ても、あなたや他人が将来、見直しても分かりやすくなるでしょうし、デザインも自由に変更できます。

お礼

ありがとうございました。そういう使われ方をしていたのですね。仕様書を正しく理解し適切なクラス名・ID名をつけようと思います。