【初心者向け】HTMLの書き方の基本/基礎を３分で解説

IT初心者の方にも分かりやすくHTMLの書き方を１からわかりやすく解説します。HTMLを書き始めるための基本的な構造やタグを理解することで、ウェブページの作成ができるようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>

参考　HTMLとは？

このページの内容を理解すれば、リファレンス（参考資料）を参照しながらHTMLを記述できるレベルまで到達することができるようになります。

このページで学べる内容

HTMLの基本構造・基礎的な構文ルール
タグと要素

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

前提①：HTMLとは？

HTML (HyperText Markup Language) は、Web ページを作成するためのマークアップ言語です。

HTMLファイルは、標準テキストエディター (例: Notepad・TextEdit) を使用して作成できます。通常は .html または .htm の拡張子で保存します。

HTMLの意味と役割、その誕生と歴史について詳しく知りたい方は以下の記事をご覧ください。

マークアップ言語とは？

マークアップ言語とは、データや文書に構造を与えるために使われる言語のことを指します。

マークアップ言語では、特殊なタグや記号を使用して、データや文書の中で、見出しや段落、リンクや画像などの構造を記述します。

上記の<h1>とか<p>が、タグと呼ばれるもので、このタグの使い方・意味を学ぶのがHTMLの勉強になります。

そもそもHTMLって？そんな方は、HTMLとは何か？を解説した以下のページをご覧ください。

HTMLの基本構造
HTMLの書き方の基礎：タグと要素
Webエンジニア向け→完全無料のHTML/CSS/JS ロードマップ

HTMLの基本構造

HTMLは決まった形のテンプレート（基本構造・枠組み）が存在します。以下が、HTMLの基本構造です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>

実際にWebページのコンテンツとして表示されるのはbodyタグで囲われた「」の内容だけ。

HTMLはそれ以外にもページ全体の情報を含むheadタグや、このファイルがHTMLファイルであることを示すhtmlタグなども存在します。まずは、HTMLファイル全体の構造がどのようになっているかを１つ１つご説明していきます。

HTMLの基本①：<!DOCTYPE html> ―ドキュメントタイプ宣言

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>

<!DOCTYPE html>は、ドキュメントタイプ宣言と呼ばれるもので、HTML文書の先頭に記述されるべき宣言です。

ドキュメントタイプ宣言は、ウェブブラウザにこの文書がどのバージョンのHTMLで書かれているかを伝えるために使われます。この宣言によって、ブラウザは文書を正しいルールに従って解釈・表示することができます。

ドキュメントタイプ宣言の意味と役割

HTMLファイルであることを示す
HTMLのバージョンを示す

これを省略すると、ブラウザは適切なモードで文書を解釈できず、意図しない表示や動作が起こる可能性があります。

したがって、HTML文書を作成する際には、必ず<!DOCTYPE html>を先頭に記述しましょう。

HTMLの基本①：htmlタグ

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>

<html>タグは、HTML文書のルート要素（最上位の要素）を表します。

HTML文書のすべての要素は、<html>タグの内部に配置される形になります。<html>タグは、文書全体の構造と内容を包含し、ウェブブラウザにこの文書がHTMLであることを示す役割を果たします。

htmlタグはおまじないみたいなものなので、とりあえず１つのHTMLファイルに対して必ず１つのhtmlタグを記載するようにする！と覚えておけばOK。

Tips

<html>タグには、lang属性がよく使われます。

lang属性は、文書の主要言語を指定するために使用され、検索エンジンやスクリーンリーダーに言語情報を提供します。例えば、文書が英語で書かれている場合、<html>タグは次のようになります。

<html lang="en">

このように、<html>タグはHTML文書の基本的な構成を提供し、文書のメタデータと表示されるコンテンツを含む要素を包含します。新しいHTML文書を作成する際には、<html>タグを適切に使用して、文書の構造を明確にしましょう。

<html>タグは、通常、以下の2つの主要な子要素を持ちます。

<head>タグ
<head>要素は、文書のメタデータや外部リソースへのリンク（CSSやJavaScriptファイルなど）を格納します。メタデータには、文書の文字エンコーディングやタイトル、説明、キーワードなどが含まれます。<head>要素は、ブラウザに情報を提供するだけで、通常、ユーザーに直接表示されることはありません。
<body>タグ
<body>要素は、ウェブページの表示されるコンテンツを含みます。これには、テキスト、画像、リンク、リスト、フォーム、マルチメディアなど、さまざまなHTML要素が含まれます。<body>要素の内容は、ブラウザによってユーザーに表示されます。

headタグ

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>

<head>タグは、HTML文書のメタデータやリンク情報を格納する部分を表します。<head>要素は、HTML文書の<html>タグ内に存在し、通常、<body>タグの前に配置されます。この要素の内容は、通常、ウェブページ上には直接表示されませんが、ブラウザや検索エンジンが文書に関する情報を把握するために利用されます。

例えば、ブラウザのタブに表示される名称の定義などがbodyタグの中に記載される情報の例です。

タブに表示されるページ名称の他にも、文字コードの指定やスタイル（CSS）などを記述したり、そのページの作者情報・検索エンジン向けの情報などを記述したりすることもできます。

headタグ内に含まれる主な要素は以下の通り。

headタグ内の主な要素

<title>タグ
ウェブページのタイトルを表し、ブラウザのタブやウィンドウのタイトルバー、検索エンジンの結果に表示されます。
<meta>タグ
文書に関するメタデータを提供します。文字エンコーディング、ページの説明、キーワード、著者情報、ビューポート設定（レスポンシブデザインに必要）などが含まれます。
<link>タグ
外部リソース（主にCSSファイル）をウェブページにリンクするために使用されます。
<script>タグ
JavaScriptコードや外部JavaScriptファイルへのリンクを記述するために使用されます。ただし、現代のウェブ開発では、パフォーマンス上の理由から、<script>タグは主に<body>タグの終了直前に配置されることが一般的です。
<style>タグ
ウェブページのインラインCSSスタイルを記述するために使用されます。ただし、通常は外部CSSファイルにスタイルを格納し、<link>タグでリンクすることが推奨されています。

参考　styleタグの使い方

これらの要素を使用して、<head>タグ内にウェブページに関する情報を提供し、外部リソースへのリンクを設定することができます。これにより、ブラウザや検索エンジンは、文書を適切に解釈し、表示や検索結果のランキングに適切な情報を利用できるようになります。

headタグについてさらに詳しく知りたい方は以下の記事をご覧ください。

bodyタグ

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>

<body>タグは、HTML文書の表示されるコンテンツを格納する部分を表します。<body>要素は、HTML文書の<html>タグ内に存在し、通常、<head>タグの後に配置されます。この要素の内容は、ウェブページ上に直接表示され、ユーザーが閲覧・操作できる部分です。

<body>タグ内がHTMLファイルのメインとなる部分で、この部分に実際の見出しや段落、画像やリンクなどでマークアップしたテキストを記述していきます。

以下は、一般的に使用される要素のいくつかの例です。

一般的なHTMLタグ

<h1>～<h6>
見出しを表し、<h1>が最も大きく重要で、<h6>が最も小さく軽微です。
<p>
段落を表します。
<a>
ハイパーリンクを表し、他のページやWebサイトへのリンクを提供します。
<img>
画像を表示するために使用されます。
<ul>と<ol>
点や番号付きのリストを作成するために使用されます。リスト項目は<li>タグで表現されます。
<table>
テーブルを表し、<tr>（行）、<th>（見出しセル）、<td>（データセル）などの子要素と共に使用されます。
<form>
入力フォームを作成するために使用され、<input>や<textarea>、<button>などの子要素が含まれます。
<div>と<span>
コンテンツのグループ化やスタイリングの目的で使用される汎用的なコンテナ要素です。

これらの要素を使用して、<body>タグ内にウェブページの表示されるコンテンツを構築します。また、CSSやJavaScriptと組み合わせることで、見た目や動作をカスタマイズし、よりインタラクティブで魅力的なウェブページを作成することができます。

新しいHTML文書を作成する際には、<body>タグを適切に使用して、文書の表示部分の構造を明確にしましょう。これにより、ユーザーにとって使いやすく、情報が伝わりやすいウェブページができあがります。

HTMLの書き方の基礎：タグと要素

HTMLには、タグ、要素という２つの重要なキーワードがあります。

タグ・要素

タグ
タグは、HTML要素の開始と終了を示すために使われます。タグは、<と>で囲まれたキーワードで構成されます。ほとんどのHTML要素には、開始タグ（例: <p>）と終了タグ（例: </p>）のペアが必要ですが、一部の要素は自己閉じタグ（例: <img />）を持ちます。
要素
要素は、HTML文書の構成要素であり、開始タグ、終了タグ、要素の内容、および属性から構成されます。要素は、ウェブページの構造やコンテンツを表現します。例えば、<p>要素は段落を表し、<a>要素はリンクを表します。

HTML：タグの基本的な使い方

タグは以下のように開始タグと終了タグをセットで利用します。

<開始タグ>～</終了タグ>

開始タグと終了タグがないと、どこからどこまでをマークアップすれば良いか？という情報が分からなくなるため、開始タグと終了タグは基本的には２つセットで用います。

はじめのうちは、終了タグの「/」を忘れてしまうことがあるため、注意が必要です。

HTMLタグの使い方―基本ルール

マークアップしたい内容を「開始タグと終了タグで囲む」
終了タグには「/」（スラッシュ）を付けて終了タグであることを明示する

<p>これは、HTMLの例です。</p>

参考　pタグとは？

HTML：タグの書き方（大文字・小文字）

タグは大文字でも小文字でもOKです。もしくは、大小織混ぜてもOKです。

例えば、開始タグだけor終了タグだけを大文字で記述しても問題ありません。

<H1>見出し1</h1>
<h2>見出し2</H2>

全角で書こうが半角で書こうがシステム的には同じ意味で解釈されます。

ただし通常は小文字を用いるので、小文字で記載するようにしておくと良いでしょう。

そのうえで、HTMLではタグに全角を利用することはできないという点には注意が必要です。

<p>これは問題なし</p>

＜p＞かっこが全角なのでNG＜/p＞
<ｐ>Pが全角なのでNG<ｐ>

たまに、HTML初心者の方が間違えるところです。

HTML―コメント行挿入

HTMLではコメントを挿入することができます。コメントとは、コード中に挿入するメモ書きのようなものです。

<h1>見出し1</h1>
<!-- このコメントは表示されない -->
　　<p>段落の開始</p>

↑コメントはブラウザでは表示されません。コメントはあくまでもプログラマーがソースコードをデバッグした際に見るメモ書きです。

コードを見ただけでは何をしているのかわからない部分にコメントを挿入しておくと便利です。

HTML：タグを入れ子にして利用できる

HTMLでは、タグを「入れ子」構造で利用することができます。冒頭で解説したHTMLもよく見ると入れ子構造になっていることがわかるはずです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>

以上がHTMLの基本的な書き方・基礎となるルールのすべてです。このページで解説した内容を基本として応用的なテクニック・スキルを学んでいきましょう。

このページのまとめ

基本構造
HTML文書は、<!DOCTYPE html>宣言から始まり、<html>タグで全体を囲みます。<html>タグ内には、<head>タグと<body>タグが配置されます。
<head>タグ
文書のメタデータや外部リソースへのリンク（CSSやJavaScriptファイルなど）を格納します。主な要素には、<title>、<meta>、<link>、<script>、<style>などがあります。
<body>タグ
ウェブページの表示されるコンテンツを含みます。テキスト、画像、リンク、リスト、フォーム、マルチメディアなどのさまざまなHTML要素が含まれます。
タグと要素
HTMLはタグを使用して要素を表現します。タグは、開始タグ（例: <p>）と終了タグ（例: </p>）のペアで構成されます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>

Webエンジニア向け→完全無料のHTML/CSS/JS ロードマップ

Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の１つがHTML/CSS/JavaScriptです。

以下のページでは、そもそもHTMLって何？何のために学習するの？という疑問に回答しつつ、HTML/CSS/JavaScriptを学習するためのロードマップ（全５０記事）を整理しています。

Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。