HTML4.01やHTML1.0ではセマンティック・マークアップのスタートとして、メタデータを指定するためにidとclass属性が導入されていました。ただし、既存のタグには特有の論理構造を示す役割があるため、セマンティック・マークアップの自由度を高めるための汎用的なタグとして<div>と<span>が用意されることになります。ところが、メタデータにルールが存在しなかったことから、この段階でのセマンティック・マークアップはうまくいきませんでした。
そこで、XHTML2.0ではidやclass属性に加えて、role属性を追加し、ルール付けしたメタデータ指定できるようになり、セマンティックな新しいタグを追加するなど、いろいろなアプローチが検討されています。しかし、ご存じのようにXHTML2.0の策定は道半ばで中止され、HTML5への流れが生まれています。
また、セマンティック・マークアップのために登場してきた<div>や<span>に関しては、当初の目的とは異なり、汎用的なタグとして「特定の意味を持たない」という部分ばかりがクローズアップされ、現在のようなスタイルシートのターゲットとして活用されるものとなっていきます。
<div id="post"> <h1> <span class="post_title"> 森の中にある工房 </span> </h1> <div class="post_body"> <p>森の工房は、木々のあふれる森の中にあります。 森の入り口から細い小道を通り、森の奥に 進んでください</p> … </div> </div>
idとclass属性でメタデータを付加したもの。メタデータの値に共通のルールはなく、任意に指定したものとなっています。
id属性については固有の値を指定するものなため、現在では情報を分類するメタデータの指定に用いるべきではないとされています。
HTML5では、Webアプリケーションにおけるアクセシビリティの確保を目的とした「Accessible Rich Internet Applications（WAI-ARIA）1.0」で策定されたrole属性がサポートされています。