HTML5のタグを整理してみる

HTML5のタグを整理してみる

今さらですが、HTML5の追加タグについて、解説書やブログ記事など人によって使い方がことなるので、もう一度整理してみることに。

DOCTYPE宣言や文字コード指定、IE旧バージョンやスマホ対応など、<head>タグ内の設定については割愛します。
当方で利用している headタグのテンプレはこちらでご確認を。

まずはややこしいセクショニングのタグについて。

main / article / section / aside

どう組み合わせてもだいたい正常に表示されますが、ブラウザや検索エンジンにページ構成を正しく理解させるためには、正しく使う必要があるらしいです。

Webデザインの進化?2015

このサイトは備忘録サイトなので、昔のデザインも残してます。

例えば当サイトこちらのページのメイン画像。
2010年頃までは、Flashがまだよく使われていたので、こんな感じのデザインになってました。このアニメーションもモバイル端末じゃもう見えないのでしょう。

HTML5+CSS3の時代だからSVGを

SVG形式ならビットマップ画像じゃなく
パスの状態でWEBにアップできるから
拡大しても劣化しない?

かなり昔からイラレのファイル形式にあったSVG形式。
WEBにアップして拡大してもキレイに見えるってことで、一度、挑戦してみたことがあるのですが、ほとんどのブラウザが対応していなっかたのであきらめてました。

しかし、HTML5+CSS3の時代がやってきた今では実用しているサイトを見かけるようになったので、ちょっとサンプルを作ってみました。

作ってみるとかなり奥が深く、メリットもデメリットも多々あります。

まだまだ私も勉強が必要なのですが、参考までにぜひどうぞ。