[初心者必読]HTMLでよく使われるタグ一覧

2018年5月18日2022年1月20日

HTMLのタグには多くの種類があり、初心者は何を覚えれば良いかわからないくなります。

この記事を読めばHTMLを書く上で必要なタグを学ぶことが出来ます。

この記事はHTMLを使用してWebページを作成したいIT初心者を対象に書いていますが、

バックエンドエンジニアなどのWebエンジニア以外の人も読んで頂ける内容になります。

なお今回の記事はHTML5を前提に書かれています。

HTMLファイルであることを宣言

ではHTMLを書いてみようと思います。↓が持っても簡単なHTMLになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>初めてのHTML</title>
</head>
<body>
初めてのHTML
</body>
</html>

ではそれぞれのタグの意味を解説していきます。ここで紹介する書き方は

<!DOCTYPE html>：

HTMLで必須のタグになります。文章のタイプを宣言します。

HTML5で記載されているのか？HTML4.1で記載されているのか？を判別するために使用します。

<html&gtタグ：HTMLファイルのルート要素

HTMLで必須のタグになります。「このファイルはHTMLファイルです。」ということを宣言しているタブになります。

これのタブを見つけるとブラウザはHTMLとしてファイルを解析します。

サンプルではタグ内に「lang=ja」と属性を追加しています。

これは日本語でHTMLを解析するようにするための属性になります。

メタデータを記載する

<head>タグ：HTMLのメタ情報全体を記述するフィールド

<head>タグはHTMLで必須のタグになります。

文書のタイトル、参照している情報、スタイルシートなどメタ情報を記述します。

HTML文書の情報全般を記載するため、GoogleなどのSEO対策のためにとても重要要素になります。

<title>タグ：HTMLファイルのタイトル

HTML文書のタイトルを記入します。

文書にタイトルをつける時に使用するため、

一つの文書に一つだけ記入し、必ず<head>~</head>タグ中に配置させます。

<meta>タグ：文書のメタ情報を指定

検索エンジン向けのキーワード・説明・インデックスの指定などメタ情報を記載するためのタグになります。

「name」要素にメタ情報の属性値を指定して記載します。

<meta>タグは<head>タグ内に複数含めることができます。

<style>タグ：HTMLのスタイルを指定

HTML文書のスタイル（見栄え・見え方）を表現するのが<style>タグになります。

一般的には<link>タグ内でCSSファイルを外部ファイルとして参照してHTML文書内でスタイルを読み込みます。

<link>タグ：CSS・RSSファイルなどを読み込む

CSS・RSSファイルなどをURLや外部ファイルとして読み込むのが<link>タグです。

内容・意味を持たせてセクション分け

HTMLタグ内で内容・意味で分けることがHTMLの本来の使い方になります。

内容・意味を持たせて記事や補足情報、見出し名などを分けることでSEO対策にも役立つため正しく使えるようになってください。

<body>タグ：HTML文書の本体を

HTMLで必須のタグになります。

実際にブラウザに表示される文書の内容をここに記入します。

つまり表示されるメインコンテンツはすべて<body>タグに記入させます。

この<body>～</body>タグの中に<h1>~<h6>、<header>、<nav>、<main>、<article>、<aside>、<footer>タグを記載していくことになります。

<h1>~<h6>タグ：見出しを付ける

見出しを付けるのが<h1>~<h6>タグになります。

<h1>タグが最も大きい見出しで、<h6>タグが最も小さい見出しになります。

一般的には<h1>タグはHTML文書内には1つしか入れません。

また見出し階層化もやりすぎると見づらくなるため、

<h2>～<h3>タグまでの階層までにまとまるように意識することをオススメします。

<header>タグ：ヘッダー情報

HTML文書の導入やナビゲーションを記載するのが<header>タグになります。

文書のメタ情報をいれておく<header>タグとは間違いやすいの注意してください。

なお<header>タグの中に、<h1>タグや<nav>タグを入れるのが一般的です。

<nav>タグ：ナビゲーション

ウェブサイト内の他のページへのリンクやページ内リンクを入れておくナビゲーションを記入するのが<nav>タグです。

<main>タグ：メインコンテンツ

ページ内のメインコンテンツであることをいれておくのが<main>タグです。

<nav>、 <header>、<article>、<aside>、<footer>,タグの中には入れることができないので注意してください。

<article>タグ：ブログ・ニュース記事

ブログ・ニュース記事などの記事を書くのが<article>タグです。

<article>タグ内に<article>タグを入れる（入れ子）時にはは、

<article>タグの親子関係に関係を持たせる必要があります。

<aside>タグ：補足情報や広告などのコンテンツ

HTML内の補足情報や広告などのコンテンツを入れるのが<aside>タグになります。

<main>タグや<aside>タグからの補足情報に使うのが一般的にです。

<footer>タグ：フッター情報

フッター情報を入れるのが<footer>タグになります。

フッター情報には関連文書へのリンクや内部リンク、また著作権などの情報が含めるのが一般的です。

<section>タグ：1つのセクション・かたまりを表す

<article>タグや<aside>タグでは表すことができない、1つのセクション・かたまりを表すのが<section>タグになります。

ランディングページでは前述で紹介した<article>タグや<aside>タグなどは使わず、

<section>タグで各要素をまとめるので覚えれておきましょう。

コンテンツを要素ごとに分類する

コンテンツを要素ごとに分類するのが<div>タグと<p>タグになります。

ただし注意がありまして<main>タグや<article>タグとは違い、

<div>タグや<p>タグには意味を持っていません。

最もよく使われるのが<div>タグと<p>タグになります。

<div>タグ：コンテンツやレイアウトのまとめる

コンテンツやレイアウトをまとめるために利用する、何も意味を持っていないタグが<div>タグになります。

<main>タグや<article>タグを内に<div>タグを入れてレイアウトを作成する目的で使われます。

<p>タグ：1つの段落を記入する

1つの段落を表し実際の文書をいれるのが<p>タグになります。

ただ文章＝<p>タグではない点に注意してください。

ナビゲーションなどは<p>タグで作成することもできますが、この場合は<nav>タグが適切なタグになります。

リストを作成する

リストとは

サンプル1
サンプル2
サンプル3

や

サンプル1
サンプル2
サンプル3

になります。リスト化させることで箇条書き形式にして、文章を読みやすくする効果があります。

最近ではスタイルを変えてメニューバーやサイドバーの作成に利用されています。

<ul>タグ：番号無しのリストを作成

番号無しのリストを作成するのが<ul>タグになります。

<ul>タグで作成するデフォルトのリストは黒ポチ（中ぐろ）でリストになります。

もちろんリスト前の黒ポチは変更することが可能です。

<ol>タグ：番号付きのリストを作成

番号付きのリストを作成するのが<ol>タグになります。

デフォルトでは、<ol>タグで作成するリストは１，２，３，，，，という形のリストになります。

もちろんリスト前の番号は、アルファベット順などに変更することが可能です。

<li>タグ：リストの1つの要素を作成

<ul>タグ、<ol>タグに入れる各行を<li>タグで指定します。

特に数の指定などはせず、<ul>～</ul>または<ol>～</ul>内で囲ってください。

tableタグでテーブル（表）を作成する

要素を見やすく分けたり、配置させたりするのに便利なのはテーブル（表）になります。

<table>タグ：テーブルを作成

テーブルを作成するのが<table>タグになります。

summary属性を利用することで表の説明や内容を設定することが出来ます。

<thead>タグ：ヘッターの行を定義

テーブル（表）のヘッダ行を定義するときに使用するのが<thead>タグになります。

<tbody>タグ：テーブル（表）のボディ部分を定義

テーブル（表）のボディ部分を定義するのが<tbody>タグになります。

<tbody>はテーブルの本体となる行グループを表す要素でデータセルなどで構成されます。

<tfoot>タグ：フッターの行を定義

テーブル（表）のフッター部分を定義するのが<tfoot>タグになります。

<tfoot>はテーブルのフッタとなる行グループを表す要素でカラムの要約で構成されます。

<tr>タグ：テーブル（表）の一行を作成

テーブル（表）の横一行を定義するときに利用するのが<tr>タグになります。

<tr>～</tr>で記載した中に<th>タグや<td>でセル情報を入れていきます。

<th>タグ：テーブル（表）の見出しセルを作成

テーブル（表）のヘッダー見出しセルを作成するときに利用するのが<th>タグになります。

<tr>～</tr>で一行を定義した中に<th>～</th>で見出しセルを記載していきます。

<td>タグ：テーブル（表）のデータセルを作成

テーブル（表）のデータセルを作成するのが<td>タグになります。

<tr>～</tr>で一行を定義した中に<td>～</td>でデータセルを記載していきます。

リンクを張る

HTMLといえばページをまとめることが必要になります。

<a>タグ：リンクを張る

URLの外部リンク、内部リンクを指定するのが<a>タグ：リンクを張るタグになります。 href属性を利用してURLを指定します。

画像や動画のコンテンツを埋め込む

画像や動画などのコンテンツを埋め込むためのタグも必須で覚えるべきです。

<img>タグ：画像を表示タグ：画像を表示

画像を表示するのは<img>タグになります。

src属性に画像ファイルのURLを指定することで画像ファイルを表示することができます。

<iframe>タグ：動画などのコンテンツ埋め込む

YoutubeやGoogleMAPなどを埋め込むことが出来るのが<iframe>タグになります。

基本的には埋め込みたいコンテンツは各サービスで<iframe>タグをコピペできるようになっています

ユーザからの入力を受け取るフォーム

メールフォームや情報登録などでユーザからの情報を入力させるのがフォームになります。

ではフォームを構成するのタグを紹介していきます。

form：入力・送信フォーム

入力・送信フォームを作成するのが<form>タグになります。

<form>～</form>のなかに<input>タグ、<label>タグや<button>タグなどを設定させてフォームを作成します。

input：フォームを構成する様々な入力部品

様々な入力部品を作成することができるのがタグになります。 HTML5からはtype属性で、「email」や「password」などを利用することができ、HTMLタグでテキストを判別することが出来るようになっています。

label：フォーム部品とラベル（項目名）

フォーム部品とラベル（項目名）を関連付ける時に利用するのが<label>タグになります。

id属性を利用することでフォーム部品とラベルを関連付ける必要があります。

textarea：テキスト領域を作成

複数行のテキスト入力欄を作成するのが<textarea>タグになります。

maxlength属性を利用することで、HTMLのタグだけJavaScriptを利用しなくても最大文字数を制御することができます。

botton：ボタンを設定

送信や確定などのボタンを作成するのが<button>タグになります。

type属性を指定することで、「送信」や「リセット」など様々な動作を制御することができます。

HTMLを書き始める時のオススメテンプレート

上でよく使われる必須のタグを一覧で紹介してきました。一から書くのが面倒な人のためにHTMLを書き始める時のオススメテンプレートを↓の記事に載せてあります。合わせて読んでみてください。