HTMLの初心者が最初に覚えるべきタグ

まずは最小限のタグから

HTMLの標準仕様に組み込まれているタグは100種類を超えています。これだけの数があると、学習するのが大変そうに思われますが、実は普通のウェブページを制作する上で必用になるタグは、そう多くありません。

ブラウザはHTMLを解読して画面に表示することを前提としているため、最小限の要素を記述しておけば後は勝手に解釈してくれるのです。そのため、最初から無理して暗記しようとするよりも、実際に必用なタグだけを覚えていった方が効率よく学習できます。

まずは両手で数えられるくらいのタグを覚えてから、必用な分を足していきましょう。

HTML文書の基礎を作るタグ

<html>

言うまでもなく、これはHTMLで書かれた文書の基点（ルート）となる要素です。ここからHTML文法で書き始めます、という宣言をウェブブラウザに伝えるために書きます。全ての要素は、このタグの子要素として書かれます。そのため、HTMLの学習で最初にお目にかかるタグと言えます。

実は、このタグは省略可能です。原則として全てのHTML文書に書かれるべき要素ですが、あまりにも当たり前の存在であるため、ブラウザはこれがなくとも自動的にHTMLを解釈します。ただし、意図せぬ不具合や思わぬ仕様変さらに混乱しないためにも、このタグは必ず書いておいた方が良いでしょう。

<head>

HTML文書のヘッダー情報を格納する要素です。ヘッダーには、画面に映らないメタ情報や外部ファイルを読み込むための指示が書かれます。要するに、コンピューターが文書に書かれた内容を読み始める前に打ち合わせをする場所です。ここで、文書に書かれた文字をどのように解釈し、どのように表示するかの事前情報を渡します。それを了解した上でブラウザが内容を読み進めて、画面に映し出すのです。

<head>の中には、最低限１個の<meta>と<title>を配置します。

<body>

HTML文書の内容を収める要素です。実際にブラウザが画面に映し出すのは、ここに書かれた内容です。普通の文章を記述するだけであれば、何のタグも必用ありません。その文字列に対して「見出し」や「段落」であると意味付けするのがHTMLの役目です。

HTMLのタグは、事前に決められたレイアウトや装飾といった「スタイル」を持ちます。それを決めるのはCSS（スタイルシート）の役目です。スタイルの初期値はブラウザなどのユーザーエージェントによって変わります。

HTML文書の基礎を作るタグのまとめ

HTML文書はヘッダー情報を収める<head>と、内容を収める<body>の二つの領域を持ちます。この構造は、インターネット上に公開されているあらゆるウェブサイトに共通したものです。これが文書に構造を与えるマークアップの基礎となります。


<html>
	<head>
		ヘッダー情報
	</head>
	<body>
		文書の内容
	</body>
</html>

ヘッダーの中に書くタグ

<title>

HTML文書の題名を表すタグです。ウェブページの中で特に重要な情報となります。本や映画のタイトルと同じ要素ですが、その書き方には少しコツがいります。

作品のタイトルは短く簡潔なものが多いですが、ウェブページのタイトルは人に読まれる工夫や利用者への配慮が求められます。短すぎる単語はどんな情報が得られるのか推測が難しくなり、長すぎる文章では何について書かれた文書なのか不明瞭になります。

短すぎず長すぎず、それでいて分かりやすい文面というのが、ウェブページの題名に相応しい内容です。まずは色々なウェブページを参考にして、自分の制作する内容に合った文面を考えましょう。

<meta>

HTMLの文書に対してメタ情報を与えるタグです。<meta>は与える属性によって様々な機能に変化します。少し分かりづらいのですが、最初のうちは必用なものをコピーして使い回せば良いでしょう。よく使うメタ情報は、文字コードとディスクリプション（概要）です。詳細はタグのページで解説しています。

<link>

文書の中には記述されていない外部ファイルを読み込むためのタグです。主にCSS（スタイルシート）やJavaScriptを複数のページで使い回すために用います。

HTMLのヘッダーに書くタグのまとめ

初めて作るウェブページのヘッダーは以下の内容で十分です。これが基本的な構成となります。ここから自分のペースで必用になった要素を書き足していけば問題ありません。


<html>
<head>
	<meta charset="UTF-8">
	<title>ページのタイトル</title>
	<meta name="description" content="ページの概要">
	<link rel="stylesheet" href="スタイルシートのURL">
</head>

ボディーの中で使うタグ

<h1>〜<h6>

文章を構成する基本的な要素は、見出しと段落です。まずはこの二つを覚えましょう。見出しは、文書の表題を表したり章や節で区切った時のセクションの冒頭を表します。これは人間が目で見て判断するために記述するのではなく、機械が文字列の中で重要な内容として扱うことを目的にします。文字に意味付けをするという行為を、ここで学びましょう。

<p>

「p」は英語で「段落」を表す「Paragraph」のイニシャルです。このタグで囲われた文字列は、ひとつのまとまりとして扱われます。小説であれば改行するまでがひとつの段落です。基本的には見出しの後に続く文章が、このタグでマークアップされます。

例えば、ページに書かれた内容の本筋に関係ないフレーズや、ウェブサイトの機能的なナビゲーションを表す文字列に対しては使いません。これは汎用的なまとまりを作るためのものではなく、「段落」というれっきとした格付けを行うものなのです。

<a>

ウェブページの特徴はハイパーリンクを設置して他の文書に移動できることです。これが物理的な紙とは一番違う点でもあります。まずは、自分のお気に入りのサイトにリンクを貼ってみましょう。公開されているURLであれば、誰もが自由にリンクできます。これがインターネットです。

<div>

<div>は汎用的な箱を作るためのタグです。意味論的には何の役目も持ちませんが、意味を持たない点が最大の特徴です。とりあえずレイアウトや装飾を行いたい箇所に適しています。HTMLでブロックレベルの概念を把握するには、最も都合のいい教材となってくれます。

慣れないうちは、無理に使うタグの種類を増やそうとせずに、<div>を組み合わせてHTMLの基本的な振る舞いを覚えていきましょう。

<span>

<span>は汎用的な範囲を指定するためのタグです。<div>がブロックレベルの要素を扱うのに対して、その中身の階層であるインライン要素を扱うのに向いています。例えば、段落の中に書かれた特定のフレーズの文字色を変えたい時、あるいはリストやテーブルなどの区分けされた領域の中で一定範囲にだけCSSの効果を与えたい時に有効です。

HTMLを学んでいく上で、ブロックレベルとインラインの特徴は、いつか把握しなければなりません。この要素を教材にして、色々な記述を試してみましょう。

<br>

改行を行うタグです。最もお手軽に使えるタグですが、ここで「空要素」というものを学びましょう。多くのHTMLタグは開始タグと終了タグのセットで運用しますが、空要素には終了タグがありません。そのため改行させたい箇所に設置したら、それで目的は達成されます。<br>を文章の途中に置いてみて、ブラウザで表示を確認してみましょう。

HTMLのボディーを構成する最小限の要素

通常のウェブページを公開する場合、以下の要素で事足ります。これがHTML文書の基本的な書き方です。<div>や<span>は必用に応じて足したり無くしたりできます。この書き方が理解できたら、文章に階層構造を与えるアウトラインを学んでいきましょう。


<body>

	<h1>文書の見出し</h1>
	<p>内容を表すテキスト。内容を表すテキスト。</p>
	<p>内容を表すテキスト。内容を表すテキスト。</p>
	<p>内容を表すテキスト。内容を表すテキスト。</p>

	<h2>章や項目の見出し</h2>
	<p>内容を表すテキスト。内容を表すテキスト。</p>
	<p>内容を表すテキスト。内容を表すテキスト。</p>

	<h2>章や項目の見出し</h2>
	<p>
		改行を挟むテキスト。改行を挟むテキスト。<br>
		改行を挟むテキスト。改行を挟むテキスト。<br>
	</p>

	<div id="id_name">
		<a href="url">リンクする文字列</a>
		<span class="class_name">文字の装飾</span>
	</div>

</body>

最初に覚えるHTMLタグのまとめ

HTMLを学び始めた頃は、数が多すぎて何を覚えればいいのか迷うことがあると思います。基本的には機能に応じて準備されたタグを使い分ければいだけで、文章を書いて公開するだけであれば複雑な機能は必用ありません。

最初はハードルを上げずに必用最小限のものを覚えていきましょう。ここで説明したタグを使えるようになれば、問題なくウェブページを作成できます。あとは応用の問題です。気長に学んでいきましょう。


<html>
<head>
	<meta charset="UTF-8">
	<title>ページのタイトル</title>
	<meta name="description" content="ページの概要">
	<link rel="stylesheet" href="スタイルシートのURL">
</head>
<body>

	<h1>文書の見出し</h1>
	<p>内容を表すテキスト。内容を表すテキスト。</p>
	<p>内容を表すテキスト。内容を表すテキスト。</p>
	<p>内容を表すテキスト。内容を表すテキスト。</p>

	<h2>章や項目の見出し</h2>
	<p>内容を表すテキスト。内容を表すテキスト。</p>
	<p>内容を表すテキスト。内容を表すテキスト。</p>

	<h2>章や項目の見出し</h2>
	<p>
		改行を挟むテキスト。改行を挟むテキスト。<br>
		改行を挟むテキスト。改行を挟むテキスト。<br>
	</p>

	<div id="id_name">
		<a href="url">リンクする文字列</a>
		<span class="class_name">文字の装飾</span>
	</div>

</body>
</html>

HTMLって何？初心者が最初に学ぶべき基礎知識

HTMLの書き方をわかりやすく解説

HTMLファイルの作り方

最初に覚えるべきHTMLタグ

ヘッダー情報について

ハイパーリンクについて理解する

改行や半角スペースを連続で表示させる方法

グローバル属性の一覧

コンテンツ・モデルとコンテンツ・カテゴリ

文書のアウトライン

ディレクトリの意味と使い方を詳しく解説

HTMLとXHTMLの違い