HTMLの基本要素について

はじめに

HTML5の基本要素について、備忘録も兼ねて整理をしてみた。

HTMLの基本構造

要素	意味
DOCTYPE	HTMLのバージョン情報を宣言する。
html	HTML文書のルートを表す。全ての要素はhtml要素の中に記述する。
head	HTML文書自体の情報を表す。html要素の最初の要素として記述する。
meta	文章に関する情報を表す。
title	HTML文書の表題を表す。ブラウザのタイトルバーに要素の内容が表示される。
body	文章の内容を記述する領域を表す。

HTMLの代表的な特殊文字

HTMLの中に半角の<や>を入れるとHTMLタグの一部と認識されてしまい表示されない。
なので表示するために、特殊な書き方をする必要がある。

ブラウザでの表示	コード上の書き方	名前
<	&lt;	小なり
>	&gt;	大なり
&	&amp;	アンパサンド
	&nbsp;	空白
©	&copy;	著作権記号

ページ全体(body)の構造を表現するタグ

HTML5から追加された文書を構造化しやすくするためのタグ。
構造化することで検索エンジン(Google)のクローラーがコンテンツ内容を認識しやすくなり、
クローラビリティがあがり、検索エンジンに評価されやすくなる。

要素	意味
nav	ページのナビゲーションを表示する
header	コンテンツのヘッダー部分に使用
article	独立したコンテンツであることを示す
section	コンテンツの中の一つの区切りを示す
aside	メインコンテンツとは別にサブに表示するタグ
footer	コンテンツのフッター部分に使用
h1〜h6	見出し
p	段落

• headerとfooterはページ内で１つだけしか使えないというわけではなく、一覧ページの１つ１つのコンテンツを囲む際にも使うことができる。
• 内容が異なるものを区別する場合は、articleタグを使う。
• 関連している内容を区別する場合は、sectionタグを使う。
• 厳密にどちらかわからない場合は大人しくdivタグを使う。

構造化データのSEO効果については構造化データとは？マークアップ方法からSEO効果まで解説！に詳しく解説されていたので、こちらをご確認ください。

参考記事

HTML のセクションとアウトラインの使用
HTML5の新規タグ「section、article、header、footer」の使い方