HTMLマークアップで学んだことー新人フロントエンドエンジニアの思い
はじめに
こんにちは。ルート・シー フロントエンドエンジニア(※以下FE)アシスタントのpiyopiyoです。
この夏で、私がルート・シーに入社して1年半が経ちました。
入社当初は、HTMLのマークアップにそれほど意識を向けておらず、「見た目さえ整っていればOKでしょ!」と考えていた私ですが、ルート・シーでコードと向き合う中で、HTMLマークアップがweb開発において単なる「見た目」以上に重要な役割を果たしているということを学びました。
今回は、私がHTMLマークアップする上で気を付けているポイントや学んだことをお伝えしていきたいと思います。
(1)アウトライン構造を意識する。
私が特に意識するようになったのが、見出しタグ(<h1> ~ <h6>)の適切な使い方です。
見出しタグを適切に使うことは、HTMLマークアップの中でも特に大切なポイントの1つだと思っています。
なぜなら見出しタグはページ全体のアウトラインを形成し、コンテンツの階層構造を論理的かつ視覚的に整理してくれるからです。
例えば、<h1>はページ内で最も重要な見出しであり、1ページに1つだけ使用するのが理想的です。<h2>はその次に重要なサブ見出しで、その下に<h3>…<h4>…と続きます。
さらに、各見出しを<section>タグで囲み、明示的にセクショニングすることにより、ページの構造が一層明確になります。
2つの例を見てみましょう。
<section>タグで囲まれていない暗黙的なセクションの例
<h1>文鳥のすべて</h1>
<h2>文鳥とは</h2>
<p>インドネシア原産のスズメ目カエデチョウ科に属する小鳥である。懐くと手に乗ります。</p>
<h2>手乗り文鳥の育て方</h2>
<p>では、どのようにして手乗り文鳥に育て上げることができるのでしょうか。大切なポイントをご紹介します。</p>
<h3>声をかける</h3>
<p>毎日愛情を込めて声をかけてください。</p>
<h3>あそぶ</h3>
<p>毎日一時間はケージから出して遊んでください。</p>
<h3>お世話をする</h3>
<p>毎日愛情をもって掃除、ごはんの用意をしてください。</p>
<p>こうすることで飼い主にべったりの手乗り文鳥になる可能性が格段にアップします。</p>
<section>タグで囲まれている、明示的なセクションの例
<h1>文鳥のすべて</h1>
<section>
<h2>文鳥とは</h2>
<p>インドネシア原産のスズメ目カエデチョウ科に属する小鳥である。懐くと手に乗ります。</p>
</section>
<section>
<h2>手乗り文鳥の育て方</h2>
<p>では、どのようにして手乗り文鳥に育て上げることができるのでしょうか。大切なポイントをご紹介します。</p>
<section>
<h3>声をかける</h3>
<p>毎日愛情を込めて声をかけてください。</p>
</section>
<section>
<h3>あそぶ</h3>
<p>毎日一時間はケージから出して遊んでください。</p>
</section>
<section>
<h3>お世話をする</h3>
<p>毎日愛情をもって掃除、ごはんの用意をしてください。</p>
</section>
<p>こうすることで飼い主にべったりの手乗り文鳥になる可能性がアップします。</p>
</section>
暗黙的なセクションだと、最後の一文「こうすることで~」が<h3>お世話をする</h3>の中の文章に見えてしまいます。しかし、文脈を考えると<h2>手乗り文鳥の育て方</h2>の中に書くのが正しいように思います。そのような時に<section>タグを使うことによって、明示的にセクションを区切り、各見出しごとにコンテンツを整理することができます。
<section>タグと見出しタグと一緒に使うことで、ユーザーはコンテンツをより理解しやすくなり、検索エンジンのクローラーにもページの構造を正しく解釈されやすくなります。
このような理由から、私はHTMLマークアップを行う際には見出しタグと<section>タグを正しく使い、コンテンツの構造を明確にすることを心がけています。
※WordPressのクラシックエディタなどWYSIWYGのときは暗黙的を選択するときもあります。
※<section>タグはHTML5で出てきたものなので、古いシステムが組み込まれたサイトなどでは暗黙のセクションのものも多くあります。
(2)セマンティックなマークアップを意識する。
ルート・シーに入社してからは、セマンティックなマークアップを心がけるようになりました。
セマンティックなマークアップとは、各HTMLタグが持つ「意味」を正しく理解して使用することです。つまり、webページの構造やコンテンツを明確に伝えるために、適切なタグを使ってマークアップするという考え方です。
ルート・シーに入社する前は<div>タグや<span>タグを多用していましたが、どちらも非セマンティック(意味をもたない)タグなのです。このようなマークアップでは、検索エンジンのクローラーやアクセシビリティの支援技術がページを正しく解釈できません。
一方で、先ほど説明した<section>タグや<h1>~<h6>タグはセマンティックなタグです。
<section>タグは「節」や「章」の意味を持ち、<h1>~<h6>タグはそれぞれ見出しとして、ページの階層構造を表現します。この2つはセットで使用することが基本です。
なので単にレイアウトを調整したいような場合は<section>タグを使用するべきではありません。この場合はセマンティックな意味を持たない<div>タグなどを使う方が適切です。
セマンティックなマークアップを意識することで、検索エンジンにとってもページの内容が理解しやすくなり、SEO対策にもつながります。また、アクセシビリティの向上にも貢献し、ユーザー全体に優しいwebページを作ることができます。
よく使う・見かける、セマンティックなタグ<header> | ヘッダーを表します。コンテンツの導入部分やナビゲーションが含まれます。 |
---|---|
<footer> | フッターを表します。著作権情報、関連リンク、連絡先、またはその他の補足情報などが含まれることが多いです。 |
<main> | 主要コンテンツ部分を表します。 |
<nav> | ナビゲーションメニューを表します。webサイト内の異なるページやセクションへのリンクが含まれていることもあれば、ページ内のリンクが含まれることもあります。 |
<section> | 内容のまとまりや「章」や「節」を表します。内容をまとめるために使用します。見出しタグ(<h1> ~ <h6>)と組み合わせて使い、コンテンツの区切りを明確にします。 |
<table> | 表形式のデータを表示するために使用されます。 |
<time> | 日時や時間を表します。datetime属性を使うことで機械が時間情報を理解しやすくなります。 |
まだまだ書ききれないほどたくさんありますが、割愛します。
「君は見出しだね。君は段落だね。」と意味を考えながらマークアップをすると、タグに愛着がわいてきますね。ちなみに私が最近好きなタグは重要部分を表す<strong>です。(響きが好き。)
(3)デザインを忠実に再現すること
HTMLマークアップに直接関わることではありませんが、もちろん「見た目」も大事です。
入社当初、「見た目さえちゃんとできていれば大丈夫!」と思っていたのにも関わらず、コードレビューで先輩FEから「デザインと相違があります。」という指摘を多く受けました。具体的には、フォントのサイズや太さ、色の違い、余白の幅といった部分です。細かなところまで厳しくチェックしてくださいます。デザイナーが意図したとおりのデザインを忠実に再現することもFEにとって大切な仕事なんだと日々感じております。
まとめ
HTMLマークアップは、ただ単に見た目を整えるためのものではなく、コンテンツの意味を正確に伝え、ユーザーと検索エンジンにとって分かりやすいwebページを作るための重要な要素です。
見出しタグのアウトライン構造やセマンティックなマークアップの重要性を理解し、さらにデザインを忠実に再現することで、より高品質なwebページを作ることができると考えております。
これからも、HTMLマークアップを深く理解し、より良いweb開発を目指していきたいと思います。