Webサイトを作ってみたいと思い、「HTML」を調べてみたものの、タグや属性といった言葉が並び、「初心者には難しそう」と感じてしまうのは、ごく自然なことです。
この記事は、HTMLをこれから学び始める初心者の方、または一度学習したものの理解が曖昧なままになっている方に向けて書いています。プログラミングの知識がまったくなくても、安心して読み進められる内容です。
- HTMLの役割
- 基本構造
- よく使うタグ
- 正しい書き方
これらを順を追って丁寧に解説しています。サンプルコードも交えながら説明するため、「なぜそう書くのか」を理解しやすいのが特徴です。
「HTMLって意外とシンプルかも」と感じてもらえるよう、基礎からしっかり解説していきますので、ぜひ最後まで読み進めてみてください。
- HTMLとは何か、どんな役割を持つ言語なのか
- HTML学習を始めるために最低限必要なもの
- HTML文書の基本構造と正しい書き方
- 見出し・文章・リンク・画像など、よく使うHTMLタグの使い方
- idとclassの違いと、それぞれの正しい使いどころ
HTMLとは？
Webサイトを作るうえで、最初に耳にする言葉が「HTML」です。HTMLはWebページの「土台」を作るための、とても基本的な技術になります。
初心者の方でもイメージしやすいように、HTMLの役割や特徴を噛み砕いて解説していきます。
HTMLとは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、Webページの構造を記述するための言語です。
文章の見出しや段落、リンク、画像など、「この部分は見出し」「ここは文章」といった意味づけを行う役割を持っています。
よく誤解されがちですが、HTMLはプログラミング言語ではありません。
計算や条件分岐を行うのではなく、タグと呼ばれる決まった記号を使って、文章を整理・構造化するための言語です。そのため、初心者でも比較的学びやすく、Web制作の第一歩として最適だと言えます。
また、HTMLだけでは見た目のデザインや動きはほとんど付きません。色やレイアウトはCSS、動きや処理はJavaScriptが担当します。
HTMLを学ぶために最低限必要なもの3つ
HTMLは特別な環境がなくても、すぐに学び始められるのが大きな魅力です。高価なソフトや専門知識は必要なく、普段使っているパソコンがあれば十分にスタートできます。
ここでは、初心者がHTML学習を始めるうえで「これだけは用意しておきたい」という最低限の3つを紹介します。
まずは全体像を把握して、学習のハードルを下げていきましょう。
1.テキストエディタ
HTMLを書くためには、文字を入力できる「テキストエディタ」が必要です。
Windowsなら「メモ帳」、Macなら「テキストエディット」でもHTMLは作成できますが、HTMLを編集する目的で作られていないためHTML編集には不向きです。
学習をスムーズに進めたい場合は、コード専用のテキストエディタを使うのがおすすめです。以下のようなメリットがあります。
- コード補完機能
→開始タグを入力すると自動で終了タグを入力してくれる - ヒント機能
→コードを途中まで入力すると該当コードの候補をメニュー表示してくれる
代表的なものとしては、Visual Studio Code（以下VS Code）があります。無料で使えて、タグの色分け表示や入力補助機能も充実しているため、初心者でも書き間違いに気づきやすくなります。
VS Codeのダウンロードページはこちら。
2.HTMLファイル
HTMLは、専用の「HTMLファイル」を作成して記述します。
ファイル名は自由ですが、拡張子を「.html」にする点が重要です。たとえば「index.html」といった形になります。
この拡張子が付くことで、ブラウザは「これはHTML文書だ」と認識します。
見た目はただのテキストファイルでも、中身にHTMLを書いて保存すれば、それだけでWebページとして表示できるようになります。
3.ブラウザ
作成したHTMLファイルを表示・確認するために、Webブラウザが必要です。Chrome、Edge、Safari、Firefoxなど、普段使っているもので問題ありません。
ブラウザは、HTMLの内容を読み取り、見出しや文章、画像などを画面に表示してくれます。
コードを書いて保存し、ブラウザで開いて確認する。このシンプルな流れを繰り返すことで、HTMLの理解は着実に深まっていきます。
まずはサンプルコードをブラウザに表示してみよう！
百聞は一見にしかず！まずは実際にやって見ましょう！テキストエディタでサンプルコードをコピペして、保存したファイルをブラウザで開いてみましょう。
この記事では以下の作業環境で進めます。
- テキストエディタ：VS Code
- ブラウザ：Google Chrome
かすが私の環境はMacですが、Windowsでもほとんど変わらないので大丈夫ですよ
VS Codeを開いておきます。
①「新しいファイル」をクリックします。
②「テキストファイル」をクリックします。
※Macは「⌘＋N」、Windowsは「ctrl+N」のショートカットキーで、すぐに新しいファイルを作成することもできます。
上の画面でエディタ内のカーソルがアクティブになっていることを確認したら、以下のサンプルコードをすべて選択して、貼り付けます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLの基本の書き方</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>これはHTMLのサンプル文章です。</p>
</body>
</html>
貼り付けた後はこのようになります。
①ファイルメニューの「保存」をクリックします。
※Macは「⌘＋S」、Windowsは「ctrl+S」のショートカットキーで保存することもできます。
①ファイル名は任意で構いませんが今回は「index.html」とします。必ずファイルの拡張子が「.html」になっていることを確認してください。
②「保存」をクリックします。
かすがファイルの保存場所はわかりやすい任意の場所でOKです。
①Chromeの「ファイル」メニューの「ファイルを開く」で先ほど保存した「index.html」を開きます。
もしくは、「index.html」のファイルアイコンをダブルクリックして開くこともできます。
ブラウザに上のように表示されればOKです。
かすがHTMLは自分のパソコンだけでできるのでとても簡単です！次からはHTMLの基本的な内容を確認していきましょう。
HTMLの基本：まず覚えるべき4つの名称
HTMLを書き始めると、専門用語が多くて戸惑うかもしれません。しかし、最初からすべてを覚える必要はなく、頻繁に登場する基本用語を押さえるだけで理解度は大きく変わります
ここでは、HTML学習の土台となる「4つの重要な名称」を紹介します。意味をざっくり理解しながら読み進めていきましょう。
1.要素
要素とは、HTMLを構成するひとまとまりの部品のことです。見出しや段落、リンクなど、Webページ上に存在するパーツは、すべて要素として扱われます。
基本的には「開始タグ」「内容」「終了タグ」をまとめて1つの要素と呼びます。HTMLでは、この要素を組み合わせることでページ全体を作り上げていきます。
2.タグ
タグは、要素の始まりや終わりを示すための記号です。<p> や <h1> のように、山括弧で囲まれた文字がタグにあたります。
開始タグと終了タグはセットで使われることが多く、終了タグにはスラッシュ / が付きます。
かすがimgタグのように終了タグがないタグもありますよ！
3.属性
属性は、要素に追加情報を与えるためのものです。たとえば、リンク先のURLを指定したり、画像の表示内容を補足したりする役割を持ちます。
開始タグの中に書かれ、「属性名＝値」という形で指定します。要素の動きや意味を細かく調整できるため、HTMLでは欠かせない存在です。
かすがclassやidも属性です。めちゃめちゃ頻繁に使いますので重要なポイントです。
4.コンテンツ
コンテンツとは、実際にブラウザに表示される中身の部分を指します。文章や画像、リンクの文字など、ユーザーが目にする情報がコンテンツです。
タグや属性はあくまで構造を示すものなので、Webページの価値を決めるのはこのコンテンツ部分になります。HTMLを書く際は「何を表示したいのか」を常に意識することが重要です。
HTMLの基本の書き方
HTMLの用語を理解できたら、次は実際の書き方を見ていきましょう。HTMLには「必ず書く基本の形」があり、これを覚えることで、どんなWebページでも正しく表示できるようになります。
ここでは、HTML文書の全体構造を上から順番に解説します。難しく考えず、「こういう並びになっているんだ」という感覚で読み進めてください。
1.!DOCTYPE html：HTML文書であることを宣言
HTMLファイルの一番上には、<!DOCTYPE html> を記述します。これは「この文書はHTMLで書かれています」とブラウザに伝えるための宣言です。
この宣言がないと、ブラウザが正しくHTMLを解釈できない場合があります。内容を覚える必要はありませんが、HTMLを書くときは最初に必ず書くものだと認識しておきましょう。
<!DOCTYPE html><!--HTML文書であることを宣言-->
2.htmlタグ：HTML文書の開始と終了
<html> タグは、HTML文書全体を囲むためのタグです。このタグの中に、Webページのすべての情報が入ります。
開始タグ <html> と終了タグ </html> で、文書の範囲を明確にする役割があります。「ここからここまでがHTMLですよ」という目印だと考えると分かりやすくなります。
<!DOCTYPE html>
<html><!--HTML文書の開始-->
<!--↓htmlの中にWebページのすべての情報を書く-->
</html><!--HTML文書の終了-->
3.headタグ：WEBページの情報
<head> タグには、Webページに関する情報を記述します。ページのタイトルや文字コード、検索エンジン向けの設定などがここに含まれます。
この中の内容は、基本的に画面には表示されません。ユーザーには見えないものの、SEOや正しい表示のために重要な役割を担っています。
<!DOCTYPE html>
<html>
<head><!--headの開始-->
<!--↓headの中に文字コードやタイトルなどWebページの情報を書く-->
<meta charset="UTF-8">
<title>HTMLの基本の書き方</title>
</head><!--headの終了-->
</html>
4.bodyタグ：WEBページに表示される部分
<body> タグは、実際にブラウザに表示される内容を書く場所です。見出しや文章、画像、リンクなどはすべてこの中に記述します。
HTML学習では、この body タグ内を触る機会が最も多くなります。「画面に表示したいものは body に書く」と覚えておくと、迷いにくくなるでしょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLの基本の書き方</title>
</head>
<body><!--bodyの開始-->
<!--↓bodyの中に実際にブラウザに表示される内容を書く-->
<h1>はじめてのHTML</h1>
<p>これはHTMLのサンプル文章です。</p>
</body><!--bodyの終了-->
</html>
かすが上のサンプルコードがHTMLの最小の基本構成です！主にbodyの内を編集しながらWebページを作り上げていきます！
HTMLの階層関係
HTMLは、ただ上から順番に書くだけの言語ではありません。要素同士には「親子」や「兄弟」といった関係があり、この構造を理解することで、HTMLが一気に読みやすくなります。
ここでは、HTMLの基本となる階層関係について解説します。最初は少し抽象的に感じるかもしれませんが、コード例と一緒に見ることで自然と理解できるようになります。
1.親要素・子要素
ある要素の中に別の要素が含まれている場合、外側を「親要素」、内側を「子要素」と呼びます。
HTMLでは、この親子関係が基本となり、Webページの構造を形作っています。この関係を意識すると、HTMLの意味が分かりやすくなります。
<div><!--これが親要素-->
<p>これは子要素の文章です。</p><!--親要素の中にある要素が子要素-->
</div>
2.先祖要素・子孫要素
親子関係がさらに深くなった場合、「先祖要素」「子孫要素」という考え方が出てきます。直接の親でなくても、内側に含まれていれば子孫要素として扱われます。
この概念は、CSSでデザインを指定するときにも頻繁に使われます。HTML構造を正しく理解しておくと、後の学習がスムーズになります。
<section><!--これが先祖要素-->
<div>
<p>このpタグはsectionの子孫要素です。</p><!--これが子孫要素-->
</div>
</section>
3.兄弟要素
同じ親要素を持つ要素同士は、「兄弟要素」と呼ばれます。親が同じであれば兄弟関係になります。
兄弟要素の考え方は、レイアウト調整やデザイン指定で重要になります。HTMLを読むときは「この要素の親は何か」を意識してみましょう。
<div>
<h1>はじめてのHTML</h1><!--これが兄弟要素-->
<p>これはHTMLのサンプル文章です。</p><!--これが兄弟要素-->
</div>
かすがタグの種類が違っても同じ親であれば全て兄弟要素です！
HTMLのよく使うタグ10個
HTMLには多くのタグがありますが、初心者のうちは「よく使うタグ」から覚えるのが近道です。
実際のWebページでも頻繁に登場するタグを知っておくことで、HTMLの読み書きが一気に楽になります。
ここでは、基本かつ実用性の高いタグを中心に紹介します。サンプルコードを見ながら、使いどころをイメージしてみてください。
1.h1〜h6タグ：見出し
見出しタグは、文章のタイトルや章見出しを表します。数字が小さいほど重要度が高く、h1が最も大きな見出しです。
See the Pen 「HTML書き方」hタグ by kasuga (@kntkfmgf-the-vuer) on CodePen.
2.pタグ：文章の段落
pタグは、文章の段落を表すためのタグです。Webページ内の通常の文章は、基本的にpタグで囲みます。
See the Pen 「HTML書き方」pタグ by kasuga (@kntkfmgf-the-vuer) on CodePen.
3.strongタグ：文字を強調
strongタグは、文章の中で特に強調したい部分に使います。意味的にも「重要である」ことを示すタグです。
See the Pen 「HTML書き方」pタグ by kasuga (@kntkfmgf-the-vuer) on CodePen.
4.brタグ：文章を改行
brタグは、文章内で改行したいときに使います。終了タグが不要な点も特徴です。
See the Pen 「HTML書き方」brタグ by kasuga (@kntkfmgf-the-vuer) on CodePen.
5.aタグ
aタグは、リンクを作成するためのタグです。他のページや外部サイトへ移動させたいときに使用します。
See the Pen 「HTML書き方」aタグ by kasuga (@kntkfmgf-the-vuer) on CodePen.
6.ul ol liタグ：箇条書き
ulは順不同リスト、olは番号付きリストを表します。リストの中身はliタグで記述します。
See the Pen 「HTML書き方」ul ol liタグ by kasuga (@kntkfmgf-the-vuer) on CodePen.
7.tableタグ：表組み
tableタグは、表形式のデータを表示するときに使います。行や列を使って、情報を整理できます。
See the Pen 「HTML書き方」ul ol liタグ by kasuga (@kntkfmgf-the-vuer) on CodePen.
8.imgタグ：画像
imgタグは、Webページに画像を表示するためのタグです。画像のURLをsrc属性で指定します。
See the Pen 「HTML書き方」imgタグ by kasuga (@kntkfmgf-the-vuer) on CodePen.
9.divタグ：グループ化
divタグは、複数の要素をまとめるためのタグです。レイアウトやデザイン調整でよく使われます。
See the Pen 「HTML書き方」divタグ by kasuga (@kntkfmgf-the-vuer) on CodePen.
10.spanタグ：グループ化
spanタグは、文章の一部分だけを囲むために使います。主にCSSで装飾するときに活躍します。
See the Pen 「HTML書き方」divタグ by kasuga (@kntkfmgf-the-vuer) on CodePen.
idとclassについて
HTMLを書いていると、「id」や「class」という言葉をよく目にするようになります。これらは要素を識別するための重要な属性で、CSSやJavaScriptと組み合わせる際に欠かせません。
ここでは、idとclassの役割や違い、使用時の注意点について解説します。基本を押さえることで、HTMLの理解が一段と深まります。
idとは
idは、HTML内で1つだけに指定する識別子です。同じid名は、1つのHTMLファイル内で重複して使用できません。
主に「特定の1要素だけ」を指定したい場合に使われます。ページ内リンクやJavaScript操作でもよく利用されます。
<h1 id="main-title">HTMLの基礎</h1>
classとは
classは、複数の要素に同じ名前を付けられる識別子です。デザインや装飾をまとめて指定したいときに活躍します。
1つの要素に、複数のclassを指定することも可能です。CSSと組み合わせることで、効率よくスタイルを管理できます。
<p class="text text1">文章その1</p>
<p class="text text2">文章その2</p>
idとclassを書くときの注意点
idとclassは自由に名前を付けられますが、いくつかルールがあります。ルールを守らないと、正しく動作しない原因になります。
idとclassで使えるのは英数字のみ
idやclassには、基本的に英字（a〜z、A〜Z）と数字、ハイフンなどを使用します。日本語は使えないと覚えておくと安心です。
<div class="content-area"></div>
先頭に数字は使えない
idやclassの名前は、数字から始めることができません。必ず英字から始めるようにしましょう。
<!-- OK -->
<p id="section1">セクション1</p>
<!-- NG -->
<p id="1section">エラーになる例</p>
WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ
「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。
しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。
一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。
かすが私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！
- カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
- 現役のプロから実践的なフィードバックを受けられる
- わからないことをすぐに質問・解決できる環境がある
- 制作課題を通じて、ポートフォリオが作成できる
- 学習仲間や講師とのつながりが、モチベーション維持につながる
- カリキュラムが現場で必要とされる技術に対応しているか
- 現役デザイナー・エンジニアが講師として在籍しているか
- ポートフォリオ制作のサポートが充実しているか
- 卒業後の就職・転職支援が用意されているか
- オンライン・通学など、自分の生活スタイルに合った受講形式か
遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。
WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。
HTML書き方まとめ
この記事では、「html 書き方 初心者」をテーマに、HTMLの基礎から実際の書き方までを段階的に解説してきました。最後に、重要なポイントを整理して振り返っておきましょう。
HTMLは、Webページの構造を作るための言語
見出し・文章・画像・リンクなどに意味を持たせ、ブラウザや検索エンジンに正しく伝える役割を持つ。
- 要素：HTMLを構成する部品
- タグ：要素の始まりと終わりを示す記号
- 属性：要素に追加情報を与えるもの
- コンテンツ：実際に表示される中身
- <!DOCTYPE html> でHTML文書を宣言
- <html> タグで全体を囲む
- <head> にページ情報を書く
- <body> に表示内容を書く
見出し、段落、リンク、画像、リスト、表など、基本タグを使いこなすことが重要。
- id：ページ内で1つだけ
- class：複数の要素に指定可能
- 名前の付け方にはルールがある点も忘れない。
HTMLは、完璧に理解してから次へ進む必要はありません。実際に書いて、表示して、間違えて、直す。この繰り返しこそが、HTML上達への一番の近道です。
今回の内容を土台に、次はCSSやJavaScriptへとステップアップしていくことで、Web制作の世界がさらに広がっていきますよ！
