スキルアップ【HTML】9つの重要タグの理解でSEO対策(セマンティック要素)2022年9月16日HTMLのタグっていっぱいあるけど、よく見るやつとそうでないやつがあります。今回はその中でも絶対に抑えておくべき9つのタグを紹介します。・<section>・<article>・<aside>・<nav>・<header>・<footer>・<main>・<figure>・<figcaption>これらの要素はセマンティック要素ともいわれたりもします。Docs用語集ではなぜ「絶対に抑えておくべき」と表現したかというと、この9つのタグを正しく使うことでSEO対策ができるからです。これらを正しく使い分けることでコード自体も整理されて見やすくなります。理解してワンランク上のコーディングができるようになりましょう!では解説していきます。今回の記事で紹介する9つのタグはセマンティック要素ともいわれています。セマンティックとは、「意味の」「語義の」「意味論の」などの意味を持つ英単語です。これらの要素を正しく使い分けてコーディングすることをセマンティックコーディングと言います。セマンティックコーディングについては別の記事で詳しく書いているので興味のある方は下記からチェックしてください。一気に9つ全てを解説すると整理がしにくいので3つに分けて解説します。4つのセクショニングコンテンツまずはセクショニングコンテンツ(以下:セクション要素)に分類される<section>・<nav>・<article>・<aside>の4つを解説します。これらのタグで囲まれた範囲はHTMLでは”セクション”であると定義されます。HTMLのセクションとは、長い文章における「章」や「節」です。1<section>タグ<section>タグは一般的なセクションをあらわす要素です。他の3つのセクション要素は特定の場所で使い、それらに該当しない時にセクションを作りたい時に使用します。ある一つのブロックを作ると思ってもらってOKです。</body>例えばLP(一枚ページ)だと一番上のファーストビューを一つのセクション(ブロック)、コンセプトをもう一つのセクション(ブロック)と区切ると言うことです。このブログで使うなら下図の緑枠ようなところに使います。(※上記のコードは下の画像のレイアウトを表したものではございません)実際はこのブログではここは<aside>タグが使用されているのですが、私が記述するなら<section>タグを使用しています。このように人によってタグの使い方が若干異なっていますので、ガチガチに意識しすぎる必要はありません。2<article>タグairticleは日本語で「記事」の意味します。<article>タグはブログなどの記事はじめとする「それだけで完結している」セクションをあらわす時に使います。逆に何か一部のセクションをマークアップする場合には使用できません。</section></body>NGコードでは<article>タグの下に<p>タグで追加情報が入っており「完結していない」セクションになっているので正しく使えていません。<article>タグを使用する際はセクションを”完結”させましょう。このブログでは赤枠で囲っているところが<article>になります。<section>タグと<article>タグの使い分けは、ひとつのコンテンツの全体を表しているのであれば<article>タグ、全体の中の一部であれば<section>タグを使います。3<aside>タグ<aside>タグは、何かのセクションの中に存在することがほとんどです。<aside>タグの中身は元々のセクションの内容とは関係が薄く、別扱いにしたほうが良さそうなセクションです。広告や補足記事の塊です。</aside></body>このサイトでいえばサイバー全てが<aside>タグでまとめられています。4<nav>タグ<nav>タグはページ内のナビゲーションリンクを含むセクションをあらわす時に使用します。知られていませんが、このタグは視覚障がいの方がページを音声で読み上げるツールを利用することも考慮して用意されたものでもあるので、主要なナビゲーションにだけ使うことが想定されています。稀にページ内に<nav>タグが多くあると音声読み上げツールがうまく動作がしないことがあるようです。<nav>はヘッダーにつけてフッターのナビゲーションはリストで記述するのが良さそうです。</footer></body>以上が4つのセクショニングコンテンツです。最後にセクショニングコンテンツをまとめた画像を貼っておきます。ページの骨格をつくる3つの重要なタグセクショニングコンテンツとは別でページの骨格をつくる3つのタグを詳しく解説します。5<header>タグ<header>タグは最も近いセクションのヘッダーであることをあらわします。<body>タグの直後に設置されていたらページ全体のヘッダーとなります。一般的に<header>タグの中には見出し・ナビゲーション・ロゴ・検索フォーム・目次などが含まれます。</header>.....<header>タグはページ内に必ずしも一つでないといけない訳ではなく他のセクションの中に記述してそのセクションのヘッダーであることあらわします。</section></article>上記のように書けばこの<article>のヘッダーの役割を意味します。このブログで<header>タグが使われているのは下の画像のピンクの枠です。6<footer>タグ<footer>タグは最も近いセクションのフッターであることをあらわします。<body>タグの直後に設置されていたらページ全体のフッターとなります。一般的に<footer>タグの中には著作権情報・問い合わせ先などが含まれます。</ul></footer><footer>タグ<header>タグと同様でページ内に必ずしも一つではなく他のセクションの中に記述してそのセクションのフッターであることあらわします。(例は<header>タグと同様なので省略)このブログでは<footer>タグは下の画像の黒枠部分に使っています。7<main>タグ<main>タグはその範囲がページ全体のメインコンテンツであることをあらわします。したがって<main>タグは各ページに一つだけになります。<main>タグはこれまでに紹介してきた<article><aside><nav><header><footer>の中には入れてはいけません。基本的には下記のような構造になります。</footer></body>このブログでは下画像の紫枠に使われています。最後の2つは図や写真に関するタグ残り2つは<figure>と<figcaption>です。これらは合わせて解説します。8<figure>タグ<figure>タグはメインコンテンツの本文から参照される図版のようなコンテンツであることをあらわします。具体的には、図表・写真・イラストなどで、それ自信がまとまった一つの完結した内容となっているコンテンツを入れます。9<figcaption>タグ<figcaption>タグは<figure>タグとセット使われることが多く、図のキャプションや説明文を記述するときに使われます。必須というわけではないです。<figcaption>大阪の天気</figcaption></figure>このブログでは使用されていないのですが、appleのサイトのフッター部分に<figure>が記述されています。<figucaption>の記述はありませんでした。9つのタグを図でまとめる本日のタグのまとめた図です。今回は使い分けられるようになっておくべき9つの重要なタグについて紹介しました。SEOの観点とコードを見るだけで各要素の意味合いが理解できるので読みやすいコードになります。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。スキルアップ【HTML】アップルのコード見たら優しさが溢れていた。アップルのサイトのソースコードを見てみると、いろんな学びがあったので記事にまとめました。完全初心者からWebチーム内で戦えるようになった方法について書きます。first-child・nth-of-type...兄弟要素で最初の要素、n番目の要素を指定できる頻出擬似クラス6つ<後編>今回はセレクタ解説の後編です。スキルアップ【2023ベストセラー】UdemyおすすめJavaScript講座を徹底解説UdemyのJavaScript学習におすすめのコースを紹介します。3/4】Timelineを使って複数の要素を連動させるアニメーション複数の要素が連動するアニメーションをコントロールする方法を解説します。【HTML】SEOにも効果的なセマンティックコーディングとは?【2023最新】Web制作フロントエンドおすすめ本9選!基礎から応用まで学ぶフロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。