HTMLとは?できることやタグの種類、勉強方法もわかりやすく解説

HTMLってどんなものなの?
HTMLはプログラミング言語じゃないの?
HTMLを覚えるとどんなことができるんだろう?

「HTML」という言葉はよく聞くものの、その意味や実際に何ができるのかがあいまいな人は多いですよね。

HTMLはブログやLP(ランディングページ)なども含むすべてのWebサイトを作るうえで必要不可欠な言語です。

この記事では、そもそもHTMLとは何なのか、その特徴を役割やできることも交えわかりやすく解説します。HTMLの構成要素やよく使われるタグ(目印)、基本的な書き方なども解説するのでぜひ参考にしてください。

この記事の要約
  • HTMLはWebページの内容や構造を定義する言語
  • 文章が画像など、ブラウザ上のコンテンツ作成に使用する
  • よりきれいかつ見やすくなる点から、HTMLとCCSはセットで使用・表記されている

なお、どのプログラミング言語を学べばいいのか、どう学習を進めればいいのかなどがあいまいな人は「プログラミング学習プラン診断」をお試しください。

かかる時間は1分ほど。4つの質問に答えるだけで、あなたにあう言語や学習プランを診断してもらえます。

これからプログラミングを学ぼうとしている人は、ぜひ一度お試しください。

\ 4つの質問に答えるだけ /

この記事の監修者

フルスタックエンジニア

金田 茂樹


音楽大学卒業後、15年間中高一貫進学校の音楽教師として勤務。40才のときからIT、WEB系の企業に勤務。livedoor(スーパーバイザー)、楽天株式会社(ディレクター)、アスキーソリューションズ(PM)などを経験。50歳の時より、専門学校でWEB・デザイン系の学科長として勤務の傍ら、副業としてフリーランス活動を開始。 2016年、株式会社SAMURAIのインストラクターを始め、その後フリーランスコースを創設。現在までに100名以上の指導を行い、未経験から活躍できるエンジニアを輩出している。また、フリーランスのノウハウを伝えるセミナーにも多数、登壇している。

本記事の解説内容に関する補足事項

本記事はプログラミングやWebデザインなど、100種類以上の教材を制作・提供する「侍テラコヤ」、4万5,000名以上の累計指導実績を持つプログラミングスクール「侍エンジニア」、を運営する株式会社SAMURAIが制作しています。

また、当メディア「侍エンジニアブログ」を運営する株式会社SAMURAIは「DX認定取得事業者」に選定されており、プログラミングを中心としたITに関する正確な情報提供に努めております。

記事制作の詳しい流れは「SAMURAI ENGINEER Blogのコンテンツ制作フロー」をご確認ください。

目次

HTMLとは?

皆さんはWebブラウザを通して、ブログやSNSなどのさまざまなWebサイトを閲覧していますよね。このWebブラウザ上に表示するコンテンツの内容を記述しているのが「HTML(エイチ・ティー・エム・エル)」です。

HTMLとはタグを使用してWebサイトを作成すること
HTMLとは?

HTMLは「HyperText Markup Language」の略称です。それぞれの単語は下記のような意味を持っています。

単語名意味
HyperText図表、画像、音声、動画を含むテキストデータを共有して閲覧できるシステム。単なるテキスト(文字)を超えたテキストデータ。
Markup目印をつける。Webブラウザが読み取れるタグ(目印)をつけること。
Language言語

つまり、HTMLとは「さまざまなデータをWebブラウザが読み取れるようにタグ付けする言語」といえます。

HTMLはマークアップ言語

他のプログラミング言語と一緒に紹介されるケースも多いことから、HTMLを「プログラミング言語」として認識する人は多くいます。

しかし実のところ、HTMLは「マークアップ言語」に分類されるため、プログラミング言語ではありません。

マークアップ言語テキストにタグづけをしてコンピュータに認識させる言語
プログラミング言語コンピュータにデータ処理の命令をするための言語

マークアップ言語は、文章や画像などにタグづけをしてコンピュータに認識させる言語です。コンピュータはテキストだけでは、見出しの位置やデザインなどを把握できません。マークアップ言語を活用することで、ユーザーが見て違和感のないWebサイトを制作できます。

一方プログラミング言語は、コンピュータにデータ処理の命令をするための言語です。数値の計算やデータベースにあるデータの入出力など、コンピュータのわかる言語で指示を出すために使われます。

マークアップ言語の例・HTML
・XML
・XHTML
・SGML など

マークアップ言語はHTML以外にも、上記のとおり複数あります。分類について深く理解する必要はないので、HTMLはプログラミング言語とは役割が異なる点を覚えておきましょう。

HTMLの役割

Webページの内容や構造を定義する

HTMLの役割は、Webページの内容や構造を定義することです。文字や画像、動画、リンクといった要素をどのようにWebページ内に配置するかを記述します。

例えば新しい家を建てるとき、何もないところにいきなり部屋やキッチンを作ることはできませんよね。まずは基礎となる土台や骨組みを作る必要があります。

Webページにおいてこの土台や骨組みにあたるのが、HTMLです。見やすく整理されたWebページを作るためには、HTMLでしっかりと要素の配置を決めておくことが必要不可欠となります。

HTMLの仕組み

HTMLはプログラミング言語ではなく、文字にタグ(目印)をつけるためのマークアップ言語です。

では、なぜその「文字にタグをつけただけ」のHTMLファイルが、普段目にしているWebサイトのようにきれいに整って表示されるのでしょうか。その仕組みを解説します。

HTMLファイルがWebページで表示される仕組み
HTMLファイルがWebページで表示される仕組み

こちらの図は、HTMLファイルがWebページで表示される仕組みを簡単に表したものです。

私たちがパソコンを利用して、あるWebページへアクセスすると、サーバーに対してそのページのHTMLファイルを要求します。するとサーバーはその要求に応え、指定されたHTMLファイルをユーザーのパソコンへ送信します。

ただし前述のとおり、HTMLファイルは「タグのついた文字データ」に過ぎません。これを私たちが普段見ているようなWebページとして表示させる必要があります。

その役割を担っているのが、Webブラウザです。Webブラウザは「HTMLパーサー」や「HTMLレンダリングエンジン」といった機能を利用して、HTMLファイルをWebページとして表示させます。

HTMLファイルをWebページとして表示させるWebブラウザChrome(Google社)
Edge(Microsoft社)
Safari(Apple社)
Firefox(Mozilla社)

なぜ「HTML/CSS」と表記されることが多いのか

HTMLとCSSの役割の違い

HTMLについてブラウザ検索していると、よく「HTML/CSS」という表記を目にします。これは、HTMLとCSSの両者が密接に関連しており、セットで用いられることが多いからです。

CSS(Cascading Style Sheets)とはWebページのデザインやスタイルを設定するための言語です。具体的には、文字の色やサイズの設定や、レイアウトの調整などに使われます。

HTML単体ではWebページの構造しか指定できないため、非常にシンプルなデザインになります。そこでCSSと組み合わせることで見た目を調整し、きれいで見やすいWebページを実現させるのです。

このような理由で、ほとんどのWebページではHTMLとCSSはセットで用いられています。このようなことから「HTML/CSS」のようにセットで表記されるようになりました。

HTMLの歴史

HTMLの歴史

HTMLは1990年代前半に誕生して以来、さまざまな機能が追加され、改善されてきました。そのなかには、開発されながら途中で終了した種類も存在します。

現在、HTMLファイルとして主に使われている種類は次の4つです。

種類発表された年特徴
HTML
4.01
1999年・対応Webブラウザが多い
・スタイルシートに正式対応し、従来使用されてきた装飾用タグが非推奨(廃止勧告)となった
XHTML
1.0
2000年・対応Webブラウザが多い
・現在、広く使われているバージョン
・HTML 4.01から派生したが、文法などがより厳格になった
HTML52014年・Webブラウザによっては、一部機能非対応
・Webサイトの構造を示す要素、HTMLのみで動的な表現を可能とする要素などが追加された
・2021年1月28日に廃止
HTML
Living
Standard
2021年・HTML最新バージョン
・HTML規格が統一された
・HTML5とは一部のタグ要素や属性が異なるものの大幅な変更なし

「HTML5」は2021年1月28日に廃止

HTML5は、W3C(World Wide Web Consortium)という団体によって2014年に正式に推奨されたHTMLのバージョンです。Webサイトの構造を示す要素やビデオ、オーディオのコンテンツを直接埋め込める要素など、それまでのHTMLと比べて多くの機能追加や改善が行われました。

しかし、W3Cはドキュメントを整備してからHTML規格を策定したいという方針のため、HTMLの更新がWeb技術の進歩に追いついていないという批判がありました。そこでWHATWG(Web Hypertext Application Technology Working Group)によって新たに「HTML Living Standard」が策定され、HTML5とHTML Living Standardは徐々に乖離していきます。

その後しばらくはHTML5とHTML Living Standardが並存していましたが、徐々にWeb技術の変化に柔軟に対応できるHTML Living Standardを採用するブラウザが増えていきます。そして2021年1月28日にHTML5が廃止されたことで、完全にHTML Living Standardが標準となりました。

なお、次の記事ではHTML5とは何なのか、その特徴を詳しく解説しているので良ければ参考にしてください。

HTML5とは?初心者向けに特長や使い方を超わかりやすく説明してみた

今後は「HTML Living Standard」が主流に

HTML Living StandardはHTMLの最新の仕様で、技術やブラウザの変化に応じて継続的に更新されていくことを目的として作られた規格です。HTML5を推奨したW3Cとは異なる組織のWHATWG(Web Hypertext Application Technology Working Group)によって定義されました。

2023年10月現在ではHTML5とHTML Living Standard間で一部のタグ要素や属性が異なるものの、大きな違いはありません。しかし、今後のWeb技術の進化に伴ってHTML Living Standardも継続的に変化していくでしょう。したがって、開発者は常に最新の仕様を確認しながら利用していくことが重要です。

HTMLを構成する要素

HTMLを構成する要素

ここからは、HTMLの構成要素を2つにまとめて紹介します。

タグWebブラウザに直接表示されず、タイトルや大見出しなどの表現形式をWebブラウザに伝達する記号。
属性Webブラウザに表示されない要素の追加情報。

なお、HTMLにおける要素は開始タグ<>と終了タグ</>に囲まれたテキストを指す言葉です。

HTMLにおける要素は開始タグと終了タグに囲まれたテキストを指す言葉

タグに囲まれた要素の内容が、Webブラウザに表示されます。例えば上図のようにh1タグで囲まれた要素はh1要素といい、大見出しとして表示されます。

タグ

タグは、HTMLファイルに記述したテキストデータなどに対して、Web上でどのように表現するかを定義します。

HTMLは開始タグと終了タグで文字を囲む

上図のように開始タグと終了タグで文字を囲むことで「ここからここまでが見出し」「ここからここまでが段落」

といったことがわかるようにHTMLを記述していきます。なお、改行を示す<br>のように終了タグを必要としないものもあります。

属性

属性とは、HTMLの要素に追加の情報を設定するためのものです。

HTMLにおける属性とは、HTMLの要素に追加の情報を設定するためのもの

例えば画像を表示するimg要素では、上図のようにsrc属性を記述して表示したい画像のファイル名を指定します。このように属性を記述することでより詳細な指示ができ、表現の幅が広がります。

HTMLを用いてできること

HTMLを用いてできること

ここからは、HTMLを用いてできることを2つにまとめて紹介します。

HTMLメールの作成

HTMLを使えば、下図のようなHTMLメール(リッチテキストメール)を作れます。

HTMLメールを使うと、画像を埋め込む、文字に色をつける、文字の大きさを変えるなど、通常のプレーンテキストメールではできないような装飾ができるようになります。

HTMLメールの作成

ホームページ作成

簡単なホームページ作成ができる

HTMLを使えば、簡単なホームページを作成できます。HTMLファイルを作成してWebブラウザで開ければ、Webページをすぐに表示できます。

HTMLは「要素をタグではさむ」というシンプルな文法なので、初心者でも簡単に見出しや段落の作成、画像やリンクの挿入を記述できるでしょう。

ただしHTMLはあくまでもWebページの構造を作成するためのものなので、デザインを見やすく工夫したり、Webページに動きをつけたりといったことはできません。それらを実現するには、HTMLに加えてCSSやJavaScriptを組み合わせる必要があります。

次の記事ではHTMLを使ったホームページの作り方を詳しく解説しているので、あわせて参考にしてください。

HTMLのホームページは30分で作れる!5つの手順でわかる簡単な作り方

よく使うHTMLのタグ一覧

HTMLのタグは数多くありますが、なかでもよく使われるものを一覧表にまとめました。

HTMLのタグ名タグの書き方役割/用途
DOCTYPE
宣言
<!DOCTYPE html>Webブラウザに「HTMLファイルである」ことを伝える
html
タグ
<html> </html>HTMLによる記述であることを伝える
head
タグ
<head> </head>タイトルや説明文など、Webページに関する情報を含む部分だと伝える
title
タグ
<title> </title>Webページのタイトルを伝える
meta
タグ
<meta>Webページの説明文や文字コードの設定などを行う
body
タグ
<body> </body>見出しや文章/画像などを表示する
header
タグ
<header> </header>Webページのヘッダー(画面上部)をつくる
main
タグ
<main> </main>Webページメインコンテンツをつくる
footer
タグ
<footer> </footer>Webページのフッター(画面下部)をつくる
p(段落)
タグ
<p> </p>段落をつくる
h(見出し)
タグ
<h1> </h1>,<h2> </h2>,<h3> </h3>
<h4> </h4>,<h5> </h5>,<h6> </h6>
大見出し・小見出しをつくる
ul/ol/li
(リスト)タグ
箇条書き:<ul> <li></li> </ul>
番号付き:<ol> <li></li> </ol>
箇条書きをつくる番号付きの箇条書きをつくる
hrタグ<hr>水平線を表示する
brタグ<br>改行する
divタグ<div> </div>要素をグループ化する
table
(テーブル)タグ
<table>
<tr> <th></th>,<td></td> </tr>
</table>
表をつくる
a(リンク)
タグ
<a> </a>テキストや画像へ特定のWebページへ移動するリンク機能をつける
img
(画像)タグ
<img>画像を表示する

以降では、上記のHTMLタグをそれぞれ詳しく紹介します。

DOCTYPE宣言

DOCTYPE宣言は文書の型やHTMLのバージョンを示すもので、HTMLの最初に配置されます。これにより、ブラウザは文書をどのように解釈・表示すべきかを判断します。

現在の標準であるHTML Living Standardでは、以下のように記述します。

<!DOCTYPE html>

htmlタグ

htmlタグは、囲んだ範囲がHTMLによる記述であることを示します。全てのHTML要素はこのタグの内部に配置します。

HTMLはコード全体を~で囲む

lang属性を使用して文書の言語を示すこともでき、日本語を使用する場合は以下のように記述します。

<html lang="ja">
</html>

headタグ

HTMLのheadとbodyそれぞれの役割

headタグはタイトルや説明文など、Webページに関する情報を記述する範囲を示します。実際に画面上に表示される領域ではなく、ブラウザや検索エンジンに情報を提供するための領域です。

titleタグ

titleタグはheadタグの内部に配置するもので、ブラウザのタブやタイトルバーに表示されるWebページのタイトルを伝えるために使います。以下のサンプルコードでは、タイトルに「HTMLの説明」と表示されます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>HTMLの説明</title>
    </head>
</html>

metaタグ

metaタグはheadタグの内部に配置するもので、Webページに関する情報や設定を提供するためのものです。文字セットの指定、表示領域の設定、ページの説明やキーワード、作者情報などを指定できます。

以下のサンプルコードでは、文字セットをUTF-8として指定しています。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
</html>

bodyタグ

bodyタグは実際にWebページ上に表示する文章や画像などを記述するための領域を示します。以降で紹介するタグはこのbodyタグ内に配置します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <p>body内に文章や画像を記述します。</p>
    </body>
</html>

header/main/footerタグ

HTMLのbody内で使うheader・main・footerの役割

headerタグ、mainタグ、footerタグは、Webページの構造を示すために使用します。

headerタグはページやセクションの上部に配置され、サイトのロゴやナビゲーションメニューなどの情報を含むことが一般的です。mainタグはページの中心的なコンテンツを示し、headerとfooterの間に配置されます。footerタグはページの最下部に位置し、著作権情報やサイトのリンク集など、追加的な情報を提供する領域として利用されます。

p(段落)タグ

段落タグは見出しタグの中で使われ、テキストや画像のまとまりを示します。「p」は、paragraph(段落)の頭文字を意味します。

段落タグを使うと、前後一行分が自動的に改行されます。文章の読みやすさを考えて、段落タグを適宜挿入しましょう。

p(段落)タグ

こちらは、 段落タグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <p>段落1のテキストです。段落1のテキストです。段落1のテキストです。</p>
        <p>段落2のテキストです。</p>
    </body>
</html>

なお、次の記事ではp(段落)タグの特徴や書き方を詳しく解説しているので、あわせて参考にしてください。

【HTML入門】pタグと改行の関係をレイアウトの違いに注目して完全に理解

h(見出し)タグ

見出しタグは、テキスト情報に対して重要なテーマ、あるいはユーザーに伝えたい内容であることを定義します。

見出しタグは、h1からh6まであります。見出しタグを挿入すれば、Googleなどの検索エンジンが「これは見出しである」と認識できるようになります。

h(見出し)タグ
h(見出し)タグ

こちらは、見出しタグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <h1>見出し1の説明</h1>
        <h2>見出し2の説明</h2>
        <h3>見出し3の説明</h3>
        <h4>見出し4の説明</h4>
        <h5>見出し5の説明</h5>
        <h6>見出し6の説明</h6>
    </body>
</html>

ul/ol/li(リスト)タグ

黒点を付けて箇条書きしたいテキストをulタグ、 liタグで囲むことで、番号なしリストを作ることができます。

ul/ol/li(リスト)タグ
ul/ol/li(リスト)タグ

こちらはulタグ、 liタグのサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <ul>
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
            <li>リスト4</li>
        </ul>
    </body>
</html>

また、番号付きリストを作りたいときはolタグ、 liタグを使います。

番号付きリスト
番号付きリスト

こちらは、番号付きリストタグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <ol>
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
            <li>リスト4</li>
        </ol>
    </body>
</html>

なお、下の記事ではリストタグの特徴や書き方を詳しく解説しているので、良ければ参考にしてください。

【HTML入門】liタグの意味や使い方を理解して箇条書きをマスターしよう!

hrタグ

hrタグはページのセクションや内容を分離するための水平線を挿入する際に使用されます。hrタグを利用することで、文章やコンテンツ間の区切りを視覚的に示すことができます。

hrタグは閉じタグを必要とせず、単体で利用できるのが特徴です。

こちらは、hrタグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <p>内容1</p>
        <hr>
        <p>内容2</p>
    </body>
</html>

brタグ

brタグはテキスト内での改行を行うための要素です。使用頻度の高いタグなので覚えておきましょう。

hrタグと同様に、閉じタグなしで利用可能です。

こちらは、brタグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <span>内容1</span>
        <br>
        <span>内容2</span>
    </body>
</html>

divタグ

divタグはページの特定のセクションやグループをブロックレベルで区切るための要素として使用されます。divタグで囲まれた範囲は1つのグループとして扱うことができ、その範囲内の文字色やサイズをまとめて変更したい際などに役立ちます。

こちらは、divタグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <div>
            divの説明
        </div>
    </body>
</html>

table(テーブル)タグ

テーブルタグは、ページ上に表を挿入します。

<table>が表全体、trタグが表の1行を表します。また、thタグが表のヘッダ、tdタグがデータを表します。

table(テーブル)タグ
table(テーブル)タグ

こちらは、テーブルタグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>名前</th>
                <th>年齢</th>
            </tr>
            <tr>
              <td>侍 太郎</td>
              <td>27</td>
            </tr>
            <tr>
                <td>侍 花子</td>
                <td>25</td>
            </tr>
        </table>
    </body>
</html>

なお、次の記事ではテーブルタブの特徴や書き方を詳しく解説しているので、あわせて参考にしてください。

【HTML table】表を作成する基本からレイアウトの方法までを解説

a(ハイパーリンク)タグ

リンクタグ(aタグ)は、コンテンツにリンクを挿入します。リンクをクリックすると、href属性に指定したURLのサイトにアクセスできます。

a(ハイパーリンク)タグ
a(ハイパーリンク)タグ

こちらはリンクタグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <a href="https://www.sejuku.net/">こちらをクリック</a>
    </body>
</html>

なお、下の記事ではリンクタグの特徴や書き方を詳しく解説しているので、良ければ参考にしてください。

【HTML入門】リンクタグの使い方を4つのステップで理解しよう

img(画像)タグ

画像タグはその名前のとおり、Webページ上に画像を表示します。src属性で、表示したい画像ファイルを指定します。

また、width属性やheight属性で、画像の幅や高さを指定できます。

なお、画像の幅と高さを省略すると、対象画像本来のサイズで表示される決まりです。alt属性は代替テキストと呼ばれ、画像が表示できない場合に代わりに表示されるテキストを入れます。

今回は、HTMLファイルと同一のフォルダに保存されている「sample.jpg」という画像ファイルを使用しています。

img(画像)タグ
img(画像)タグ

こちらは、画像タグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTMLの説明</title>
  </head>
  <body>
    <img src="./sample.jpg" width="400" height="150" alt="ロゴ">
  </body>
</html>

なお、次の記事では画像タグの特徴や書き方を詳しく解説しているので、あわせて参考にしてください。

HTML入門者必見!imgタグで画像を表示する方法をパターン別に解説

HTMLを用いたWebページ作成に必要なもの

HTMLを用いたWebページ作成に必要なもの

ここでは、HTMLを用いてWebページを作成する際に最低限必要なものを、3つにまとめて紹介します。

なお、今回は自身のPC上のみでWebページの内容を確認するために必要なものを紹介します。実際に作成したWebサイトを公開するには別途、Webサーバーの設定が必要です。

また、下の記事ではHTMLを動かすのに必要なものを詳しく解説しているので、良ければ参考にしてください。

HTMLを動かすために必要なモノと組み合わせで使える言語

Webブラウザ

HTMLで記述されたファイルを読み込みWebページとして表示するためには、Webブラウザが必要です。Webブラウザの種類はGoogle ChromeやEdge、Firefox、Safariなどがありますが、どれを使っても問題ありません

Webブラウザは無料でダウンロードできますし、多くのPCでは標準でインストールされています。好きなブラウザを1つ用意しておきましょう。

HTMLファイル

HTMLファイルには、Webページに表示したい内容を記載します。ここまでで紹介した内容をもとに、HTMLを記述しましょう。

実際にHTMLファイルを作成する手順についてはこの後解説します。

テキストエディタ

テキストエディタ

テキストエディタとは、HTMLファイルなどのテキストファイルを編集するためのソフトウェアです。Windowsであれば「メモ帳」というテキストエディタが標準搭載されています。

どのテキストエディタを使っても問題ありませんが、本格的に開発する場合は自動的にエラーチェックする機能や文字を見やすくハイライトする機能が搭載されたものを使うのが一般的です。

ここでは「Visual Studio Code」というエディタをおすすめします。非常に多くの拡張機能が用意されており、HTMLに関する便利な機能も揃っています。

なお、次の記事ではそもそもHTMLエディタとは何なのか、その特徴をおすすめも交え詳しく解説しているのであわせて参考にしてください。

HTMLエディタとは?初心者向けにおすすめ5選を紹介【無料】

HTMLを書く・動かす基礎手順

HTMLを書く・動かす基礎手順

ここからは、実際にHTMLファイルを作成・記述し、自身のPC上で表示するための手順を、3つのステップにまとめて解説します。

STEP1:テキストエディタにHTMLを記述する

まずはメモ帳やVisual Studio Codeなどのテキストエディタを起動します。そして、新規ファイルに以下の内容をコピー&ペーストしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>簡単なウェブページ</title>
    <style>
        body {
            font-family: "Arial", sans-serif;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>ようこそ!</h1>
    <p>これはローカルで動作する簡単なウェブページです。</p>
    <p>下のリンクをクリックして、Helloページに移動してみてください。</p>
    <a href="#hello">Helloページへ</a>

    <section id="hello">
        <h2>Helloページ</h2>
        <p>こちらはHelloページのセクションです!</p>
    </section>
</body>
</html>

STEP2:HTMLファイルを作成する

次に、STEP1で記述した内容をHTMLファイルとして保存します。メモ帳やVisual Studio Codeを使っている場合は「ファイル」→「名前を付けて保存」を選択します。

ファイル名はなんでも構いませんが、ファイルの拡張子は「.html」にする必要があります。また、文字コードは「UTF-8」を選択してください。

HTMLファイルを作成する

これでHTMLファイルを作成できました。

STEP3:WebブラウザにHTMLファイルを表示する

では、Webブラウザで作成したHTMLファイルを表示してみましょう。

保存したHTMLファイルをダブルクリックするか、右クリックして「プログラムから開く」→「Chrome(お使いのWebブラウザ)」を選択します。

Webブラウザに、以下のような画面が表示されるはずです。

WebブラウザにHTMLファイルを表示する

なお、下の記事ではHTMLの書き方をより詳しく解説しているので、良ければ参考にしてください。

HTMLの書き方を初心者向けに徹底解説!ルールや基本を総まとめ

HTMLファイルにエラーがないかをチェックする方法

HTMLファイルにエラーがないかをチェックする方法

ここからは、HTMLファイルにエラーがないかをチェックする方法を2つ紹介します。

HTMLの文法チェッカーツールを使う

W3Cが提供するツールを使えば、HTMLファイルにエラーがないか、Webブラウザ上で正常に表示されるかをチェックできます。W3Cは、Web技術の標準化を推進する団体です。

使い方はとても簡単です。下記の3種類の方法から検証方法を選択し、Checkボタンを押すだけで簡単にHTMLファイルの構文をチェックできます。

  • Validate by URI(URL指定による検証)
  • Validate by File Upload(ファイルアップロードによる検証)
  • Validate by direct input(直接入力による検証)
HTMLの文法チェッカーツールを使う

エラーがない場合は、下の画像のように表示されます。

HTMLの文法チェッカーツールを使う

エラーが存在する場合は、次のように表示されます。

HTMLの文法チェッカーツールを使う

コードエディタのチェック機能を使う

コードエディタを使えば、簡単にHTMLファイルのエラーをチェックできます。

「エラーをチェックできるのは便利だけど、作ったHTMLファイルを、わざわざ毎回ツールで確認するのは面倒だ」と感じる方が、多いのではないでしょうか。

そのような方に向けて、コードエディタ「Visual Studio Code」の拡張機能「HTMLHint」を例に、HTMLファイルのエラーを検出する方法を紹介します。

まず、Visual Studio Codeを起動し、画面左下にあるブロックのようなメニューを押します。その後、入力欄が表示されるので「HTMLHint」と入力しましょう。

検索にヒットした拡張機能が画面表示されるので、一番上に表示されるHTMLHintのInstallボタンを押します。

これで「HTMLHint」を使用するための準備が完了です。

コードエディタのチェック機能を使う

HTMLをチェックするために、特別な処理は必要ありません。HTMLファイルを開くと、自動的にHTMLのエラーがないかを検証してくれます。

下図のように、コードエディタのチェック機能を使えば、HTMLファイルを作成中にエラーに気づけます。

コードエディタのチェック機能を使う

HTMLの学習方法

HTMLの学習方法

なかには、HTMLをどう学べばいいのかイメージが湧かない人もいますよね。

そこで、ここからはHTMLの学習方法を、3つにまとめて紹介します。

それぞれにメリット、デメリットがあるので、比較しながら自分にあう学習方法を見つけましょう。簡単に各学習方法の特徴が知りたい人は、次の一覧表を参考にしてください。

HTMLの学習方法メリットデメリットこんな人におすすめ
学習サイト無料で気軽に始められる情報の信憑性に注意が必要ある程度学習サイトでの勉強に慣れている人
本/書籍多くの情報を体系的に学べる難しい部分を簡単に質問できない独学が得意な人
プログラミング
スクール
1人で学習するよりも挫折しにくい金銭的負担が必要短期間で効率よく学習したい人

学習サイト

学習サイト

学習サイトは無料で利用でき、思い立ったらすぐに学習を始められるのが特徴です。HTMLはよく使われる言語なので多くの学習サイトが用意されています。

例えば侍テラコヤの場合、登録無料で40種類以上の教材が学べます。HTMLをはじめWebサイト制作に関する教材も多数そろえているのでおすすめです。

ただし、学習サイトによっては内容に偏りがあったり、誤った情報が含まれていたりと、信憑性に問題がある場合があります。したがって、情報の取捨選択が難しい完全な初心者にはおすすめしづらい学習方法です。

最初の一歩として学習サイトを利用するのは有効ですが、本格的に学習したい場合は本やプログラミングスクールを使うことをおすすめします。

なお、次の記事では活用法も交え、HTMLが学べるおすすめの無料学習サイトを詳しく紹介しているので、あわせて参考にしてください。

【独学向け】HTMLの無料学習サイトおすすめ5選!勉強のコツも紹介

本/書籍

本/書籍

HTMLに関する本/書籍を利用するのもおすすめです。

購入の手間や書籍代は必要になりますが、その分情報の信憑性は上がります。また必要な情報が網羅されており、1から体系的に学習したい人には効果的な手法です。

初心者の人は、「スラスラわかるHTML&CSSのきほん 第3版」といったわかりやすさ重視の入門書がおすすめです。

ただし、本に書いてある内容が理解できなかったり、行き詰ったりした場合に解決するのが難しいというデメリットがあります。独学が得意な人であればよいのですが、そうでない場合、プログラミングスクールなど質問しやすい環境に身を置いたほうがよいでしょう。

なお、下の記事ではHTMLが学べるおすすめの学習本・書籍を詳しく解説しているので、良ければ参考にしてください。

HTMLが学べる学習本・書籍おすすめ5選

プログラミングスクール

プログラミングスクール

プログラミングスクールは短期間で効率よく学習したい人に最適な学習方法です。本/書籍と同様に体系的に学習を進められる上に、もし行き詰った場合でもすぐに講師に質問できるので、短時間で疑問を解消できます。

ただし、ある程度費用がかかるのがデメリットです。金銭面での負担が気になる人は、政府の給付金対象になっているスクールを選ぶのがおすすめです。

例えばSAMURAI ENGINEERの「Webエンジニア転職保証コース」であれば、給付金の活用で受講料が最大70%OFFになります。さらに、万が一転職活動で内定を獲得できなかった場合は受講料が全額返金されるので、スクールにかけた費用が無駄になることはありません。

もちろん学習内容も充実しており、HTML・CSSを学べる上にWebアプリを動かすプログラミング言語も習得できます。分からない点や解決できないエラーが出た場合などは、自分の専属講師にいつでもチャットで相談可能です。

手厚いサポートを受けられるスクールは、学習途中で挫折したくない人やスムーズに学習を進めたい人におすすめの手段といえます。

なお、次の記事ではHTML/CSSが学べるおすすめのプログラミングスクールを詳しく紹介しているので、あわせて参考にしてください。

HTML/CSSが学べるプログラミングスクールおすすめ10選【2023年版】

HTML学習後に習得したいおすすめのプログラミング言語

HTML学習後に習得したいおすすめのプログラミング言語

ここからは、HTML学習後に習得したいおすすめのプログラミング言語を2つ紹介します。

上記の言語はHTMLと密接に関連しており、それぞれWebページ開発で重要な役割を担っています。1つずつ見ていきましょう。

また、下の記事では独学でプログラミング勉強するおすすめの手順を詳しく解説しているので、良ければ参考にしてください。

プログラミングを独学で習得!おすすめの勉強手順をわかりやすく解説

CSS

CSSは、Webサイトの装飾や画面レイアウト調整に使われる言語です。具体的には、文字の色やサイズを変更する、特定の要素を大きく表示するといったことができます。

前述のとおり、HTMLとCSSはセットで使用されることが多いため「HTML/CSS」のようにまとめて表記されることも多いです。

CSSを学習しておくことで、Webページ制作でできることの幅がぐっと広がります。HTMLとあわせてしっかりマスターしておきましょう。

なお、次の記事ではそもそもCSSとは何なのか、その特徴をできることや書き方も交え詳しく解説しているのであわせて参考にしてください。

CSSとは?できることや書き方を初心者向けにわかりやすく解説

JavaScript

JavaScriptは、主にWebページに動きをつけるために使用される言語です。

HTMLやCSSのみを使ったWebページでは常に同じ画面が表示されます。一方JavaScriptを組み合わせると「特定の場合だけ要素を表示する」「特定の場合だけ文字色を変更する」といった操作が可能になります。

よほど単純なWebページであればHTMLとCSSのみで作れますが、ほとんどのWebページではJavaScriptなどのプログラミング言語が用いられているのが実情です。したがって、JavaScriptを学んでおくと多くのプロジェクトや案件で役に立つでしょう。

ただしHTMLやCSSに比べて難易度が高いので、まずはHTML、CSSをしっかり理解し、余裕ができてからJavaScriptを学習するのがおすすめです。

なお、下の記事ではそもそもJavaScriptとは何なのか、その特徴を用途や使い方も交え詳しく解説しているので良ければ参考にしてください。

JavaScriptとは?特徴や用途・使い方を初心者向けにわかりやすく解説

挫折なくHTMLを学ぶなら

これからHTMLを学ぼうと考えている人のなかには、

独学で身につけられるか不安…

という人もいますよね。

事実、弊社の調査では「不明点を聞ける環境になかった」「エラーが解決できなかった」などの理由から、多くの独学者が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。

プログラミング学習における挫折率の調査
プログラミング学習者の87.5%が挫折を経験したことがある
不明点やエラーが解決できずプログラミングを挫折した人が多数

調査概要:プログラミング学習の挫折に関するアンケート
調査対象:10代〜80代の男女298名
調査期間:2019年8月13日~8月20日
調査方法:インターネット調査
掲載元:PR TIMES

またこうした背景もあってか、弊社がプログラミングに興味がある人100名へ実施した別の調査では

  • 確実にスキルを身につけられると思ったから
  • 独学では不安がある

などの理由から、6割以上が「プログラミングの勉強を始めるならスクールを選ぶ」と回答しています。

61%の人がプログラミングの勉強を始めるならスクールが良いと回答
確実にスキルを身につけられそうという理由でプログラミングスクールを選ぶ人が多い

調査概要:プログラミングに興味がある方の意識調査
調査期間:2021/11/19~2021/12/3
対象者:プログラミング学習を検討している10代~50代の男女100名
調査媒体:クラウドワークス
掲載元:PR TIMES

加えて、プログラミングスクールの卒業生に「独学ではなくスクールを活用した理由」を聞いたところ「できるだけ短い期間でITエンジニアへの転職や副業に必要なスキルを身につけたかった」という回答も多く寄せられました。

上記から、1人でプログラミングスキルを習得できるか不安な人や短期間でスキルを習得したい人ほど確実性を求め、現役エンジニアといったプロの講師に質問できるプログラミングスクールを利用する傾向にあるのがわかります。

いざ独学でプログラミングを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「プログラミングスキルを身につけるのって思っていたよりも難しいんだな…」とスキルの習得自体を諦めかねません。

仮にわからないことを飛ばしながら勉強を進めたとしても、ITエンジニアへの転職や副業での収入獲得を実現できる実践的なスキルが身につかなければ、結局後悔することになります。

そこで、おすすめしたいのが「SAMURAI ENGINEER(侍エンジニア)」です。

300x300-samuraiengineer (1)
6
700x700_01 (1)
700x700_02
700x700_03
700x700_04
700x700_05
700x700_06
700x700_07
700x700_08
300x300-samuraiengineer (1)
6
700x700_01 (1)
700x700_02
700x700_03
700x700_04
700x700_05
700x700_06
700x700_07
700x700_08
previous arrow
next arrow
料金月分割4.098円~
実績・累計指導実績4万5,000名以上
・受講生の学習完了率98%
・受講生の転職成功率99%
・転職成功後の平均年収65万円UP
・転職成功後の離職率3%

侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。

冒頭で述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役エンジニアのようなプロに質問・相談できない状況でHTMLを習得するのは難易度が高いといえます。

しかし、侍エンジニアでは

  • 現役エンジニア講師によるマンツーマンレッスン
  • 現役エンジニアに質問できるオンラインでのQ&Aサービス
  • 不安や悩み・勉強の進み具合を相談できる学習コーチ

といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%「転職成功率99%」という実績からも、侍エンジニアなら挫折しづらい環境でHTMLの学習を進められるといえます。

また、侍エンジニアでは受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でもITエンジニアへの転職や副業での収入獲得に必要なスキルだけを効率的に習得可能です。

最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。

なお、侍エンジニアでは最大70%OFFで受講可能な給付金コースを提供中。金銭面での支援を受けつつ、理想のキャリア実現に向けたスキルの習得から、転職活動・就業後のフォローアップ(※1)までを一貫してサポートしてもらえます。

※1:転職後の1年間、転職先での継続的な就業や転職に伴う賃金上昇などのフォローアップ

学習と金銭面をどちらもサポートしてくれる侍エンジニアなら、未経験からでも安心してITエンジニアへの転職や副業での収入獲得などの目的が実現できますよ。

公式サイトで詳細を見る

まとめ

今回は、そもそもHTMLとは何なのか、その特徴を役割やできることも交えて解説しました。

HTMLはWeb開発の基本スキルであり、プログラマーやフロントエンドエンジニアになるために、ぜひ覚えておきたい言語です。

HTMLに関して分からなくなったら、いつでもこの記事を読み返してくださいね。

この記事を書いた人

中川 大輝のアバター 中川 大輝 メディア編集長

東京都多摩市出身。前職では都内ホテルにて設備機器のメンテナンスを経験。当時から副業として行っていたWebライティングと独学でのプログラミング学習経験を活かし、「プログラミング学習の挫折をなくすためのコンテンツ作成」を心がけています。
プライベートでは双子育児に奮闘中。将来、子どもたちが侍ブログを見て、プログラミングを学びたいと思えるメディアを作ることが目標です。
今更ながら「キングダム」にドハマリ中。

目次