aタグの中にdiv入れていいんですか!?消えたブロック要素の概念

突然ですが、HTML5ではaタグの中にdivやsection等のブロック要素を入れてもいいということを知っているでしょうか。

HTML5から入った方は、何言ってんだ素人なのかこのおじさんはと思うところでしょう。しかし、HTML4からコーディングをしている世代にとっては革命的なことなのです。おじさんたちはブロック全体をリンクにしたいときにとても困っていました。HTML5が主流になってもう何年も経つのにこの事実を知らなかったし、今でもaタグの中にブロック要素を入れてはいけないという概念をお持ちの方はなかなかに多いんじゃないでしょうか。

そもそも、HTML5には「ブロック要素」「インライン要素」という分類すらないということを最近知りました。これはまずい。我々でいうところのテーブルレイアウト世代のような時代遅れレッテルを貼られる前に、初心に帰ってHTML5の勉強をしようと思いました。

詳しいことはHTML5リファレンス等のサイトを参考にしてもらったほうがいいと思いますが、HTML5はこんなことになっていたのかという事実を軽く何点か紹介します。

HTML5世代も、もしかすると古いサイトの修正とかでHTML4を触ることもあると思うので、HTML4ではできないことがあるということを知っておくためにも、流し読みしていただくといいかもしれないですね。




コンテンツ・モデル

前述したとおり、HTML5には、「ブロック要素」「インライン要素」という分類は廃止されており、その代わりにコンテンツ・モデルと呼ばれるモデルでさらに詳細に分類されるようになった。

セマンティックなコーディングを心掛けるためには、どのタグがどういった役割なのかを抑えておいたほうがいいでしょう。

参考:http://www.htmq.com/html5/007.shtml

API

ドラッグ&ドロップやファイルの操作等が、APIの充実により簡単に実装できる。

ウェブアプリケーションの開発がよりスムーズに行えるようになっているようです。フロントエンドという言葉が流行り出したのも、このAPIが充実してからじゃないでしょうか。

参考:http://www.htmq.com/api/

画像のRetina対応・レスポンシブ対応

pictureタグやimgのsrcset属性により、Retinaやレスポンシブにおける画像の切り替えが簡単に行える。これは便利ですよね。僕もよく使ってます。

ちなみにpictureは画像自体が変わる場合(アートディレクション)に用いるのがお作法のようですね。

参考:
https://reference.hyper-text.org/html5/element/picture/
https://reference.hyper-text.org/html5/attribute/srcset/

他にも便利な変更点が多くありそう。HTML4とCSSで苦労してきた世代は、ぜひ初心に戻ってHTML5とCSS3の仕様をじっくり読んでみるといいでしょう。

きっとコーディングが楽になると思いますよ。

イチオシ!書籍

シェアしてくだちい

フォローしてくだちい