Help us understand the problem. What is going on with this article?

【初学者向け】HTML~よく使うタグ要素~|使い分けや注意点

website-3374825_1920.jpg
HTMLタグの中には<article><aside>のように使い分けの判断に困るタグが存在します。これらのタグの理解は、SEOを重視する上で非常に重要です。今回は使用頻度の高いタグの使い分けや注意点について解説しました。


header-nav.png

<header>の解説

タグの要素:フロー・コンテンツ/パルパブル・コンテンツ
使用例:ページのヘッダー/導入部分
解説:基本的にヘッダーに使用。<h>タグを必ず入れ子にする必要はない。

<nav>の解説

タグの要素:セクショニング・コンテンツ/フロー・コンテンツ/パルパブル・コンテンツ
使用例:目次/パンくずリスト
解説:基本的に導入関連のリンクのまとまりには<nav>を使いましょう。


figure-figcaption.png

<figure>の解説

タグの要素:セクショニング・ルート/フロー・コンテンツ/パルパブル・コンテンツ
使用例:自己完結するコンテンツ(主に注釈のついた写真や図)
解説:どこのセクションに設置しても問題ないコンテンツに使用します。

<figcaption>の解説

タグの要素:フロー・コンテンツ
使用例:写真のキャプション(注釈)
解説:<figure>の中のみに使用すると考えて問題ありません。


article-aside-section.png

<article>の解説

タグの要素:フロー・コンテンツ/セクショニング・コンテンツ/パルパブル・コンテンツ
使用例:記事の一覧/HP内のブログエリア/ユーザーのコメント欄
解説:内容が完結しているコンテンツに使用します。完結しているのであれば、入れ子も可能。

<aside>の解説

タグの要素:フロー・コンテンツ/セクショニング・コンテンツ/パルパブル・コンテンツ
使用例:脚注や用語解説などの補足情報
解説:厳密な定義がないので使用は感覚次第。サイドバーに使われたり使われなかったり。

<section>の解説

タグの要素:フロー・コンテンツ/セクショニング・コンテンツ/パルパブル・コンテンツ
使用例:大見出しや中見出しごとの、まとまりのあるコンテンツ
解説:理解が非常に難しいタグ。基本的には、テーマがある程度一貫しているコンテンツをまとめる際に使います。以前は<div>でまとめていたコンテンツを、HTML5が導入されてからは<section>でまとめることが増えました。


other.png

<samp>の解説

タグの要素:フロー・コンテンツ/フレージング・コンテンツ/パルパブル・コンテンツ
使用例:「○○でエラーが出ましたと出た場合」のような操作方法の解説に使用(太文字部分が<samp>
解説:フレージング・コンテンツなので、段落や見出し、その他<p>などの中に使用しましょう。

<kbd>の解説

タグの要素:フロー・コンテンツ/フレージング・コンテンツ/パルパブル・コンテンツ
使用例:キーボードの入力を表現する際に使用
解説:<samp>のキーボード入力版と考えるとイメージしやすいかと思います。フレージング・コンテンツなので、見出し等の中に記述しましょう。

<ins>の解説

タグの要素:フロー・コンテンツ/フレージング・コンテンツ/パルパブル・コンテンツ
使用例:後から追加された文章に使用
解説:実はSEOには影響しないので、現状は使わなくてもOKなタグです。


summary.png

今回紹介してきたタグのほとんどが、SEOにおいて非常に重要視されています。<article><section>といったタグはHTML5以降、導入されたタグで上位表示されているサイトでも使用していないことがあります。これらのタグはクローラーがサイトの構造を理解しやすくなるので、新規サイトを立ち上げる際は、必ず導入するようにしましょう。

webdesign_ikeda
WEBデザイナー志望 【保持スキル】HTML/CSS/Photoshop 【習得中スキル】Javascript 【取得希望資格】ウェブデザイン技能検定 3~1級 【習得希望スキル】Javascript/JQuery/PHP/My SQL/Git/SSH/トランザクション管理/API 【開発予定】WPオリジナルテーマ
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした