【コードが柔軟に！】HTML5で導入！マークアップを意味づけして分かりやすいコーディングをする方法

2,953 views

読了時間 : 約2分8秒

フロントエンド開発は長い歴史を持ちますが、それに見合う関心を得たのは比較的最近のことです。

マークアップを書くのは面倒な単純作業となるため、あまり気にされてきませんでした。たとえばHTMLのレイアウトを構築する場合、これまでは限られた数のタグを使い回してきました。

・<table>：長年正しくない使われ方をされ、ついには使うのをやめてしまったデザイナーもいます。しかし表形式のデータを扱うには今でも全く問題ありません。
・<div>：何でもできてしまうため、他の適したタグがない時にはこれが選ばれます。
・<span>：divに似ていますがインラインレベル寄りで、特にテキストと相性がいいタグです。

ご存知のように、これらはあまり大きな違いがなく、様々なパーツの用途を正しく差別化できていませんでした。

これでも目的は達成できますが、もっと改善できるはずです。

・HTML5ならもっと便利になる

HTML5で導入された新しいタグのおかげで、各コンテンツをきちんと差別化できるようになり、エレメントごとの関係を意味のあるものにすることが可能となりました。

エレメントは全部で25種類ありますが、特によく使うものをご紹介します。

・<main>：ページのメインコンテンツはこれで囲みます。あまり使われないタグですが、単ページのアプリを作る際に特に活躍します。
・<article>：ブログ記事などのコンテンツに対して使います。
・<section>：章分けや区切りの部分に使います。
・<header>：導入部に使います。ロゴやナビゲーションに使うことが多いですが、小さなものであればコンテンツに使用してもいいでしょう。
・<footer>：コンテンツの情報に対して使います。ブログ記事のメタデータやサイトのフッターに適しています。
・<nav>：ナビゲーションリンクを示します。
・<aside>：メインコンテンツに関連した、おすすめ記事のリンクなどに使います。
・<figure>と<figcaption>：イラストや写真などのメディアに使用します。figcaptionタグはfigureタグの内部で使用し、追加の情報を与えることができます。