さようならブロック&インライン-ようこそHTML5

HTML5仕様の革新は数多くあり、それらの多くはすでにブラウザランドスケープの大部分でサポートされています。以下では、要素をネストするためのルールに対する興味深い変更を強調したいと思います。 HTMLは常にブロック要素とインライン要素を区別してきました。 たとえば、HTML4のドキュメントタイプ定義では、ブロック要素としてh1、p、およびdivを指定し、インライン要素としてa、span、imgを指定します。


この概念は現在(正当な理由で)放棄されています。 いくつかの使用例では、多くのWeb設計者は、ブロック要素がインライン要素内に含まれてはならないという前述のネストルールの正確さ、またはdisplay:inline;などのCSSルールを使用した標準的な動作を無視していました。 または表示:ブロック; (これはしばしば無効なコードにつながりました)それ以上の苦労なしに。

HTML5は現在、この区別を緩和し、要素が属することができる9つの異なるカテゴリに名前を付けています。これにより、要素はいくつかのカテゴリに属する​​ことができます。 ブロック要素とインライン要素の古い区別は船外に投げ出され、Web上のタグの多数の意味が考慮されます。 特に、これは次の構成が有効なコードを表すという結果をもたらします:

<a href="#">
   <div>
      <h1>Yeah</h1>
      <p>
         Der ganze Block ist verlinkt.
      </p>
   </div>
</a>

さらなるブロック要素を含むコンテナ全体は、以前はトリックを使用して(たとえば、リンクされたオーバーレイレイヤーの絶対配置によって)のみ(有効なコードで)可能でした。 または、見出しと段落をリンクしました。これにより冗長性が生じ、コンテナをクリックできなくなります。 HTML5への歓迎すべき追加により、これはもはや問題ではありません。

バック