【HTML入門】25種類に厳選!レベル別よく使うタグ一覧表

HTMLには100個以上のタグが存在しますが、全てを覚えるのは大変です。 なので本当に覚えて欲しいタグだけを25種類にしぼりこみました。

他にも大事なタグはありますが、ここで取り上げているタグを覚えるだけでだいぶ楽になると思います。

では、さっそく実務でよく使われる頻出タグを見ていきましょう!

補足

HTMLタグの入力を手助けするEmmet(エメット)という入力補助ツールがあります。 HTMLタグを打つのがめんどくさい、覚えるのが大変という人にはEmmetがとてもオススメです。

よく使う度★★★★【5種類】

全てのHTMLドキュメントに必須のタグになります。

使用率は100%です。

タグ役割補足
<!DOCTYPE>HTMLドキュメントのタイプ宣言必須
一番はじめに記載する決まり
<html>HTMLドキュメント全体の定義必須
↑の以外の全てを囲むタグ
<head>HTMLドキュメントのヘッダー必須
HTMLの目に見えない情報全体を囲むタグ
<body>HTMLドキュメントのボディ必須
HTMLの目に見える全体を囲むタグ
<title>HTMLドキュメントのタイトルHTMLページ全体のタイトルを定義する

よく使う度★★★☆【6種類】

あらゆるHTMLドキュメントで使うことになるタグです。

使用率は90%です。

タグ役割補足
<div>HTML要素をブロックレベル要素でグループ化する意味付けは出来ないが、汎用性が高くどこでも使える柔軟性が強み
<span>HTML要素をインライン要素でグループ化する意味付けは出来ないが、汎用性が高くどこでも使える柔軟性が強み
<header>サイトヘッダーを定義する<head>と間違えて遣いがち
HTMLドキュメントのヘッダー要素を定義するタグ
<main>サイトメインコンテンツエリアを定義するサイトのコンテンツエリア全体を囲む時に使われることが多いです
<footer>サイトフッターを定義する
<meta>様々なメタ情報を定義するHTMLドキュメントの目に見えないメタ情報を定義するために必要です

よく使う度★★☆☆【7種類】

ほとんどのHTMLドキュメントで使うことになるタグです。

使用率は70%〜80%です。

タグ役割補足
<h1>〜<h3>見出しを定義する
<p>段落を定義する
<br>改行を挿入する
<nav>サイトナビゲーションを定義する
<link>HTMLドキュメントと外部ファイルを連携させる
<img>画像を挿入する
<a>リンクを定義する

よく使う度★☆☆☆【7種類】

何かとよく使うタグです。 このあたりまで覚えておくと調べる回数をグッと減らせるはずです。

使用率は60%です。

タグ役割補足
<style>HTML内でスタイルを定義するスタイルシートをHTML内に記入する時に使われる
<script>HTML内でスクリプトを定義するJavaScirptをHTML内に書き込んだり、外部のJavascriptファイルを読み込む時に使われる
<article>完結した記事を定義するブログなどのウェブメディアの記事部分を囲むタグとして使われることが多い
<section>コンテンツ内での区切りを定義するarticleで囲んだ記事内で区切りを付けるタグとして使われることが多い
<aside>メインコンテンツの補足などを定義するサイドバーなどに使われることが多い