LoginSignup
0
1

More than 3 years have passed since last update.

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

Posted at

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以降、導入されたタグで上位表示されているサイトでも使用していないことがあります。これらのタグはクローラーがサイトの構造を理解しやすくなるので、新規サイトを立ち上げる際は、必ず導入するようにしましょう。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1