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> | メインコンテンツの補足などを定義する | サイドバーなどに使われることが多い |