HTMLってどんなものなの？
HTMLはプログラミング言語じゃないの？
HTMLを覚えるとどんなことができるんだろう？
「HTML」という言葉はよく聞くものの、その意味や実際に何ができるのかがあいまいな人は多いですよね。
HTMLはブログやLP（ランディングページ）なども含むすべてのWebサイトを作るうえで必要不可欠な言語です。
この記事では、そもそもHTMLとは何なのか、その特徴を役割やできることも交えわかりやすく解説します。HTMLの構成要素やよく使われるタグ（目印）、基本的な書き方なども解説するのでぜひ参考にしてください。
- HTMLはWebページの内容や構造を定義する言語
- 文章が画像など、ブラウザ上のコンテンツ作成に使用する
- よりきれいかつ見やすくなる点から、HTMLとCCSはセットで使用・表記されている
なお、1人で学習が進められるか、途中で挫折しないか不安な人は「侍エンジニア」をお試しください。
侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポートするため、挫折しづらい環境で学習が進められます。
受講料が最大70%OFFになる「給付金コース」も提供中。未経験から効率よく学習を進めたい人は、ぜひ一度お試しください。
この記事の監修者
フルスタックエンジニア
音楽大学卒業後、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は「HyperText Markup Language」の略称です。それぞれの単語は下記のような意味を持っています。
| 単語名 | 意味 |
| HyperText | 図表、画像、音声、動画を含むテキストデータを共有して閲覧できるシステム。単なるテキスト（文字）を超えたテキストデータ。 |
| Markup | 目印をつける。Webブラウザが読み取れるタグ（目印）をつけること。 |
| Language | 言語 |
つまり、HTMLとは「さまざまなデータをWebブラウザが読み取れるようにタグ付けする言語」といえます。
HTMLはマークアップ言語
他のプログラミング言語と一緒に紹介されるケースも多いことから、HTMLを「プログラミング言語」として認識する人は多くいます。
しかし実のところ、HTMLは「マークアップ言語」に分類されるため、プログラミング言語ではありません。
| マークアップ言語 | テキストにタグづけをしてコンピュータに認識させる言語 |
| プログラミング言語 | コンピュータにデータ処理の命令をするための言語 |
マークアップ言語は、文章や画像などにタグづけをしてコンピュータに認識させる言語です。コンピュータはテキストだけでは、見出しの位置やデザインなどを把握できません。マークアップ言語を活用することで、ユーザーが見て違和感のないWebサイトを制作できます。
一方プログラミング言語は、コンピュータにデータ処理の命令をするための言語です。数値の計算やデータベースにあるデータの入出力など、コンピュータのわかる言語で指示を出すために使われます。
| マークアップ言語の例 | ・HTML ・XML ・XHTML ・SGML など |
マークアップ言語はHTML以外にも、上記のとおり複数あります。分類について深く理解する必要はないので、HTMLはプログラミング言語とは役割が異なる点を覚えておきましょう。
HTMLの役割
HTMLの役割は、Webページの内容や構造を定義することです。文字や画像、動画、リンクといった要素をどのようにWebページ内に配置するかを記述します。
例えば新しい家を建てるとき、何もないところにいきなり部屋やキッチンを作ることはできませんよね。まずは基礎となる土台や骨組みを作る必要があります。
Webページにおいてこの土台や骨組みにあたるのが、HTMLです。見やすく整理されたWebページを作るためには、HTMLでしっかりと要素の配置を決めておくことが必要不可欠となります。
HTMLの仕組み
HTMLはプログラミング言語ではなく、文字にタグ（目印）をつけるためのマークアップ言語です。
では、なぜその「文字にタグをつけただけ」のHTMLファイルが、普段目にしているWebサイトのようにきれいに整って表示されるのでしょうか。その仕組みを解説します。
こちらの図は、HTMLファイルがWebページで表示される仕組みを簡単に表したものです。
私たちがパソコンを利用して、あるWebページへアクセスすると、サーバーに対してそのページのHTMLファイルを要求します。するとサーバーはその要求に応え、指定されたHTMLファイルをユーザーのパソコンへ送信します。
ただし前述のとおり、HTMLファイルは「タグのついた文字データ」に過ぎません。これを私たちが普段見ているようなWebページとして表示させる必要があります。
その役割を担っているのが、Webブラウザです。Webブラウザは「HTMLパーサー」や「HTMLレンダリングエンジン」といった機能を利用して、HTMLファイルをWebページとして表示させます。
なぜ「HTML/CSS」と表記されることが多いのか
HTMLについてブラウザ検索していると、よく「HTML/CSS」という表記を目にします。これは、HTMLとCSSの両者が密接に関連しており、セットで用いられることが多いからです。
CSS（Cascading Style Sheets）とはWebページのデザインやスタイルを設定するための言語です。具体的には、文字の色やサイズの設定や、レイアウトの調整などに使われます。
HTML単体ではWebページの構造しか指定できないため、非常にシンプルなデザインになります。そこでCSSと組み合わせることで見た目を調整し、きれいで見やすいWebページを実現させるのです。
このような理由で、ほとんどのWebページではHTMLとCSSはセットで用いられています。このようなことから「HTML/CSS」のようにセットで表記されるようになりました。
HTMLの歴史
HTMLは1990年代前半に誕生して以来、さまざまな機能が追加され、改善されてきました。そのなかには、開発されながら途中で終了した種類も存在します。
現在、HTMLファイルとして主に使われている種類は次の4つです。
「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の構成要素を2つにまとめて紹介します。
なお、HTMLにおける要素は開始タグ<>と終了タグ</>に囲まれたテキストを指す言葉です。
タグに囲まれた要素の内容が、Webブラウザに表示されます。例えば上図のようにh1タグで囲まれた要素はh1要素といい、大見出しとして表示されます。
タグ
タグは、HTMLファイルに記述したテキストデータなどに対して、Web上でどのように表現するかを定義します。
上図のように開始タグと終了タグで文字を囲むことで「ここからここまでが見出し」「ここからここまでが段落」
といったことがわかるようにHTMLを記述していきます。なお、改行を示す<br>のように終了タグを必要としないものもあります。
属性
属性とは、HTMLの要素に追加の情報を設定するためのものです。
例えば画像を表示するimg要素では、上図のようにsrc属性を記述して表示したい画像のファイル名を指定します。このように属性を記述することでより詳細な指示ができ、表現の幅が広がります。
HTMLを用いてできること
ここからは、HTMLを用いてできることを2つにまとめて紹介します。
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のバージョンを示すもので、HTMLの最初に配置されます。これにより、ブラウザは文書をどのように解釈・表示すべきかを判断します。
現在の標準であるHTML Living Standardでは、以下のように記述します。
<!DOCTYPE html>
htmlタグ
htmlタグは、囲んだ範囲がHTMLによる記述であることを示します。全てのHTML要素はこのタグの内部に配置します。
lang属性を使用して文書の言語を示すこともでき、日本語を使用する場合は以下のように記述します。
<html lang="ja"> </html>
headタグ
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タグ
headerタグ、mainタグ、footerタグは、Webページの構造を示すために使用します。
headerタグはページやセクションの上部に配置され、サイトのロゴやナビゲーションメニューなどの情報を含むことが一般的です。mainタグはページの中心的なコンテンツを示し、headerとfooterの間に配置されます。footerタグはページの最下部に位置し、著作権情報やサイトのリンク集など、追加的な情報を提供する領域として利用されます。
p（段落）タグ
段落タグは見出しタグの中で使われ、テキストや画像のまとまりを示します。「p」は、paragraph（段落）の頭文字を意味します。
段落タグを使うと、前後一行分が自動的に改行されます。文章の読みやすさを考えて、段落タグを適宜挿入しましょう。
こちらは、 段落タグを使ったサンプルコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの説明</title>
</head>
<body>
<p>段落１のテキストです。段落１のテキストです。段落１のテキストです。</p>
<p>段落２のテキストです。</p>
</body>
</html>
なお、次の記事ではp（段落）タグの特徴や書き方を詳しく解説しているので、あわせて参考にしてください。
→ 【HTML入門】pタグと改行の関係をレイアウトの違いに注目して完全に理解
h（見出し）タグ
見出しタグは、テキスト情報に対して重要なテーマ、あるいはユーザーに伝えたい内容であることを定義します。
見出しタグは、h1からh6まであります。見出しタグを挿入すれば、Googleなどの検索エンジンが「これは見出しである」と認識できるようになります。
こちらは、見出しタグを使ったサンプルコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの説明</title>
</head>
<body>
<h1>見出し１の説明</h1>
<h2>見出し２の説明</h2>
<h3>見出し３の説明</h3>
<h4>見出し４の説明</h4>
<h5>見出し５の説明</h5>
<h6>見出し６の説明</h6>
</body>
</html>
ul/ol/li（リスト）タグ
黒点を付けて箇条書きしたいテキストをulタグ、 liタグで囲むことで、番号なしリストを作ることができます。
こちらはulタグ、 liタグのサンプルコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの説明</title>
</head>
<body>
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
</ul>
</body>
</html>
また、番号付きリストを作りたいときはolタグ、 liタグを使います。
こちらは、番号付きリストタグを使ったサンプルコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの説明</title>
</head>
<body>
<ol>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</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タグがデータを表します。
こちらは、テーブルタグを使ったサンプルコードです。
<!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のサイトにアクセスできます。
こちらはリンクタグを使ったサンプルコードです。
<!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」という画像ファイルを使用しています。
こちらは、画像タグを使ったサンプルコードです。
<!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ページを作成する際に最低限必要なものを、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ファイルを作成・記述し、自身のPC上で表示するための手順を、3つのステップにまとめて解説します。
- STEP1：テキストエディタにHTMLを記述する
- STEP2：HTMLファイルを作成する
- STEP3：WebブラウザにHTMLファイルを表示する
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ファイルを作成できました。
STEP3：WebブラウザにHTMLファイルを表示する
では、Webブラウザで作成したHTMLファイルを表示してみましょう。
保存したHTMLファイルをダブルクリックするか、右クリックして「プログラムから開く」→「Chrome（お使いのWebブラウザ）」を選択します。
Webブラウザに、以下のような画面が表示されるはずです。
なお、下の記事では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ファイルを、わざわざ毎回ツールで確認するのは面倒だ」と感じる方が、多いのではないでしょうか。
そのような方に向けて、コードエディタ「Visual Studio Code」の拡張機能「HTMLHint」を例に、HTMLファイルのエラーを検出する方法を紹介します。
まず、Visual Studio Codeを起動し、画面左下にあるブロックのようなメニューを押します。その後、入力欄が表示されるので「HTMLHint」と入力しましょう。
検索にヒットした拡張機能が画面表示されるので、一番上に表示されるHTMLHintのInstallボタンを押します。
これで「HTMLHint」を使用するための準備が完了です。
HTMLをチェックするために、特別な処理は必要ありません。HTMLファイルを開くと、自動的にHTMLのエラーがないかを検証してくれます。
下図のように、コードエディタのチェック機能を使えば、HTMLファイルを作成中にエラーに気づけます。
HTMLの学習方法
なかには、HTMLをどう学べばいいのかイメージが湧かない人もいますよね。
そこで、ここからはHTMLの学習方法を、3つにまとめて紹介します。
それぞれにメリット、デメリットがあるので、比較しながら自分にあう学習方法を見つけましょう。簡単に各学習方法の特徴が知りたい人は、次の一覧表を参考にしてください。
学習サイト
学習サイトは無料で利用でき、思い立ったらすぐに学習を始められるのが特徴です。HTMLはよく使われる言語なので多くの学習サイトが用意されています。
例えば侍テラコヤの場合、登録無料で40種類以上の教材が学べます。HTMLをはじめWebサイト制作に関する教材も多数そろえているのでおすすめです。
ただし、学習サイトによっては内容に偏りがあったり、誤った情報が含まれていたりと、信憑性に問題がある場合があります。したがって、情報の取捨選択が難しい完全な初心者にはおすすめしづらい学習方法です。
最初の一歩として学習サイトを利用するのは有効ですが、本格的に学習したい場合は本やプログラミングスクールを使うことをおすすめします。
なお、次の記事では活用法も交え、HTMLが学べるおすすめの無料学習サイトを詳しく紹介しているので、あわせて参考にしてください。
→ 【独学向け】HTMLの無料学習サイトおすすめ5選！勉強のコツも紹介
本/書籍
HTMLに関する本/書籍を利用するのもおすすめです。
購入の手間や書籍代は必要になりますが、その分情報の信憑性は上がります。また必要な情報が網羅されており、1から体系的に学習したい人には効果的な手法です。
初心者の人は、「スラスラわかるHTML&CSSのきほん 第3版」といったわかりやすさ重視の入門書がおすすめです。
ただし、本に書いてある内容が理解できなかったり、行き詰ったりした場合に解決するのが難しいというデメリットがあります。独学が得意な人であればよいのですが、そうでない場合、プログラミングスクールなど質問しやすい環境に身を置いたほうがよいでしょう。
なお、下の記事ではHTMLが学べるおすすめの学習本・書籍を詳しく解説しているので、良ければ参考にしてください。
プログラミングスクール
プログラミングスクールは短期間で効率よく学習したい人に最適な学習方法です。本/書籍と同様に体系的に学習を進められる上に、もし行き詰った場合でもすぐに講師に質問できるので、短時間で疑問を解消できます。
ただし、ある程度費用がかかるのがデメリットです。金銭面での負担が気になる人は、政府の給付金対象になっているスクールを選ぶのがおすすめです。
例えばSAMURAI ENGINEERの「Webエンジニア転職保証コース」であれば、給付金の活用で受講料が最大70%OFFになります。さらに、万が一転職活動で内定を獲得できなかった場合は受講料が全額返金されるので、スクールにかけた費用が無駄になることはありません。
もちろん学習内容も充実しており、HTML・CSSを学べる上にWebアプリを動かすプログラミング言語も習得できます。分からない点や解決できないエラーが出た場合などは、自分の専属講師にいつでもチャットで相談可能です。
手厚いサポートを受けられるスクールは、学習途中で挫折したくない人やスムーズに学習を進めたい人におすすめの手段といえます。
なお、次の記事ではHTML/CSSが学べるおすすめのプログラミングスクールを詳しく紹介しているので、あわせて参考にしてください。
→ HTML/CSSが学べるプログラミングスクールおすすめ10選【2023年版】
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を学ぼうと考えている人のなかには、
独学で身につけられるか不安…
という人もいますよね。
事実、弊社の調査では「不明点を聞ける環境になかった」「エラーが解決できなかった」などの理由から、多くの独学者が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。
調査概要：プログラミング学習の挫折に関するアンケート
調査対象：10代〜80代の男女298名
調査期間：2019年8月13日~8月20日
調査方法：インターネット調査
掲載元：PR TIMES
またこうした背景もあってか、弊社がプログラミングに興味がある人100名へ実施した別の調査では
- 確実にスキルを身につけられると思ったから
- 独学では不安がある
などの理由から、6割以上が「プログラミングの勉強を始めるならスクールを選ぶ」と回答しています。
調査概要：プログラミングに興味がある方の意識調査
調査期間：2021/11/19~2021/12/3
対象者：プログラミング学習を検討している10代~50代の男女100名
調査媒体：クラウドワークス
掲載元：PR TIMES
加えて、プログラミングスクールの卒業生に「独学ではなくスクールを活用した理由」を聞いたところ「できるだけ短い期間でITエンジニアへの転職や副業に必要なスキルを身につけたかった」という回答も多く寄せられました。
上記から、1人でプログラミングスキルを習得できるか不安な人や短期間でスキルを習得したい人ほど確実性を求め、現役エンジニアといったプロの講師に質問できるプログラミングスクールを利用する傾向にあるのがわかります。
いざ独学でプログラミングを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「プログラミングスキルを身につけるのって思っていたよりも難しいんだな…」とスキルの習得自体を諦めかねません。
仮にわからないことを飛ばしながら勉強を進めたとしても、ITエンジニアへの転職や副業での収入獲得を実現できる実践的なスキルが身につかなければ、結局後悔することになります。
そこで、おすすめしたいのが「SAMURAI ENGINEER（侍エンジニア）」です。
| 料金 | 月分割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に関して分からなくなったら、いつでもこの記事を読み返してくださいね。
