HTMLとは？プログラミング言語じゃないの？
HTMLだけでブログが書けるってホント？特徴やできることが知りたい！
HTMLとはどのような言語なのか、プログラミング言語とは違うのかを区別できない方が少なくないのではないでしょうか。
HTMLを使えば、ブログやLPのような簡単なWebサイトを作れます。
この記事では、HTMLでよく使うタグや基本の文法を初心者向けにわかりやすく解説します。サンプルコードや図を示しながら説明しますので、最後まで読めば、HTMLをすぐ書けるようになるはずです。
この記事の目次
HTMLとは？
皆さんはWebブラウザを通して、ブログやSNSなどのさまざまなWebサイトを閲覧していますよね。このWebブラウザ上に表示するコンテンツの内容を記述しているのが「HTML（エイチ・ティー・エム・エル）」です。
HTMLは「HyperText Markup Language」の略称ですが、それぞれの単語は下記のような意味を持っています。
| 単語名 | 意味 |
| Hyper Text | 図表、画像、音声、動画を含むテキストデータを共有して閲覧できるシステム。 単なるテキスト（文字）を超えたテキストデータ。 |
| Markup | 目印をつける。コンピュータが読み取れるタグをつけること。 |
| Language | 言語 |
つまり、HTMLとは「さまざまなデータをコンピュータが読み取れるようにタグ付けする言語」といえます。
HTMLの仕組み
HTMLはプログラミング言語ではなく、文字にタグ（目印）をつけるためのマークアップ言語です。
では、なぜその「文字にタグをつけただけ」の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ファイルをスマートフォンで見るには？
WebページのHTMLファイルは、パソコンやスマートフォンから見ることができます。
まずはパソコンで、WebページのHTMLファイルを見てみましょう。例えばChromeの場合、閲覧しているWebページ上で右クリックして、「ページのソースを表示」を選択してください。
すると、Webページのソース（元）であるHTMファイルが表示されます。
スマートフォンでも、HTMLファイルを確認できます。Androidの場合、確認したいURLの先頭に「view-source:」という文字列を付加し、アクセスします。
View Sourceを起動後、画面上部に対象のURLを入力するとHTMLファイルが表示されます。
なお、iPhone（iOS）の場合は、App Storeから専用のアプリをインストールする必要があります。
HTMLを使ってできること
HTMLを使ってできることとして、主に下記の2つが挙げられます。
- HTMLメールの作成
- ホームページ作成
ひとつずつ、見ていきましょう。
HTMLメールの作成
HTMLを使えば、下図のようなHTMLメール（リッチテキストメール）を作れます。
ホームページ作成
HTMLを使えば、簡単なホームページを作成できます。HTMLファイルを作成してWebブラウザで開ければ、Webページをすぐに表示できます。
HTMLは「要素をタグではさむ」というシンプルな文法なので、初心者でも簡単に見出しや段落の作成、画像やリンクの挿入を記述できるでしょう。
なお、レンタルサーバーにHTMLファイルをアップロードすれば、簡単にホームページを公開できます。
また、次の記事ではHTMLを使ったホームページの作り方を詳しく解説しているので、あわせて参考にしてください。
HTMLの種類
HTMLは1990年代前半に誕生して以来、さまざまな機能が追加され、改善されてきました。そのなかで、開発されながら途中で終了した種類も存在します。
現在、HTMLファイルとして主に使われている種類は次の3つです。
現在の主流は、HTML5です。これから学習するのであれば、特別な理由がない限りHTML5を選択するようにしましょう。
なお、下の記事ではHTML5の特長や使い方を詳しく解説しているので、良ければ参考にしてください。
HTMLを構成する3つの要素
HTMLは、下記の3つによって構成されています。
| 詳細 | |
| タグ | Webブラウザに直接表示されず、タイトルや大見出しなどの表現形式をコンピューターに伝達する記号。 |
| 要素 | Webブラウザに表示されるタグに囲まれたテキスト。 |
| 属性 | Webブラウザに表示されない要素の追加情報。 |
上記3つのうち、Webブラウザに表示されるのは要素のみです。それぞれ詳しく解説します。
タグ
タグは、HTMLファイルに記述したテキストデータなどに対して、Web上でどのように表現するかを定義します。
HTMLタグには、テキストデータを開始タグ<>と終了タグ</>で囲む必要があるものや、終了タグを必要としないものもあります。
要素
要素は、開始タグ<>と終了タグ</>に囲まれたテキストです。
タグに囲まれた要素の内容が、Webブラウザに表示されます。
1行目の<h1>タグで囲まれた要素は、大見出しとして表示されます。2行目の<a>タグ（リンクタグ）に囲まれた要素は、要素をクリックすることで指定したURLに遷移します。
属性
属性はタグの性質を決め、タグの種類によってさまざまな属性が存在します。
リンクタグを使う場合は、href属性で「クリックされた時に遷移させるページのURL」を指定します。
属性を記述する時は、開始タグの直後に半角スペースを空けます。
画像の表示には<img>を使いますが、属性は「src」となります。<img src="url">のように、src属性のurl部分に画像が保存されている場所（ソース）を指定することで、画像が表示されます。
よく使うHTMLタグ一覧
HTMLタグはたくさん存在しますが、そのなかでもよく使われるものを一覧にまとめました。
リンクタグ（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>
リンクタグについては、こちらの記事で詳しく説明しています。
見出しタグ （h1~h6タグ）
見出しタグは、テキスト情報に対して重要なテーマ、あるいはユーザーに伝えたい内容であることを定義します。
見出しタグは、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>
画像タグ（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>
画像タグについては、こちらの記事で詳しく解説していますので、ぜひご覧ください。
段落タグ (pタグ)
段落タグは見出しタグの中で使われ、テキストや画像のまとまりを示します。「p」は、paragraph（段落）の頭文字を意味します。
段落タグを使うと、前後一行分が自動的に改行されます。文章の読みやすさを考えて、段落タグを適宜挿入しましょう。
こちらは、 段落がタグを使ったサンプルコードです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの説明</title> </head> <body> <p>段落１のテキストです。段落１のテキストです。段落１のテキストです。</p> <p>段落２のテキストです。</p> </body> </html>
段落タグについて、こちらの記事で詳しく解説しています。
テーブルタグ（tableタグ / trタグ / thタグ / tdタグ）
テーブルタグは、ページ上に表を挿入します。
<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>
テーブルタグについて、こちらの記事で詳しく解説しています。
番号なしリストタグ（ulタグ / 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タグ）
番号付きリストタグ（olタグ）を使えば、番号が付いた箇条書きのリストを作れます。
こちらは、番号付きリストタグを使ったサンプルコードです。
<!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ファイルの作り方
HTMLの構成要素をおさえたところで、ここからは実際にHTMLファイルを作ってみましょう。これから紹介する手順どおりに進めれば、誰でも簡単にHTMLファイルを作れます。
ちなみに、HTMLファイルを作る際はメモ帳でもよいですが、HTMLファイル専用エディタを使えば効率的にコーディングできます。HTMLファイルを編集するために便利な機能がたくさん装備されていますので、ぜひ使ってみてください。
HTMLエディタについては、下のの記事で詳しく解説しています。
では、ここからHTMLファイルの作成手順を紹介します。まず、メモ帳などのテキストエディタを起動して、下記のコードをコピー&ペーストします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLの作り方</title> </head> <body> <h1>Hello!World!</h1> </body> </html>
コピー&ペーストができたらファイルを保存しましょう。メモ帳をお使いの場合は「ファイル」→「名前を付けて保存」を選択します。
なおHTMLファイルを作る場合、ファイルの拡張子は「.html」にする必要があります。また、文字コードは「UTF-8」を選択してください。
これでHTMLファイルを作成できました。
HTMLのDOCTYPE・charsetとは？
<!DOCTYPE html>は、DOCTYPE宣言（ドキュメントタイプ宣言）と呼ばれるもので、HTMLファイルで使用されるHTMLのバージョンを示すために必要で、HTMLファイルの先頭に記述します。
<!DOCTYPE html>と書くことで、「これはHTML5で作成されたファイルです」と宣言しています。
<html lang="ja">は、lang属性（言語属性）を表します。HTMLファイルがどのような言語で記述されたかを示すものです。ここでいう言語とは、プログラミング言語のことではなく、日本語や英語などの言語という意味です。
<html lang="ja">の「ja」は、日本語を表します。コンテンツを英語で作成する場合は<html lang="en">、ドイツ語の場合は<html lang="de">というように、言語に合わせた記述をします。
<meta charset="utf-8">は、HTMLファイルの文字エンコーディングを指定します。文字を数字に変換してコンピュータへ伝達するために必要となる変換規則です。HTMLファイルを作成する場合、一般的に、UTF-8を指定します。。
HTMLについてもう1つ覚えておきたいのは、headタグとbodyタグです。
headタグは、Webページのタイトルなどを記述します。bodyタグには本文を記述します。
HTMLファイルをブラウザに表示する
では、Webブラウザで作成したHTMLファイルを表示してみましょう。
保存したHTMLファイルをダブルクリックするか、右クリックして「プログラムから開く」→「Chrome（お使いのWebブラウザ）」を選択します。
Webブラウザに、以下ような画面が表示されるはずです。
これでHTMLファイルの、ブラウザへ表示することができました。
なお、次の記事ではHTMLの動かし方を必要なものも交え詳しく解説しているので、あわせて参考にしてください。
HTMLファイルにエラーがないかをチェックする方法
続いて、HTMLファイルにエラーがないかをチェックする下記2つの方法を紹介します。
- W3C提供のツールを使う
- コードエディタのチェック機能を使う
W3C提供のツールを使う
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ファイルを作成中にエラーに気づけます。
＼業界最安級／
登録無料のプログラミングスクール
40種類以上の教材が登録無料で学べるSAMURAI TERAKOYA（侍テラコヤ）。なかでも「HTML/CSSの基礎を学ぼう」では、HTMLの書き方からCSSを使った装飾方法までを網羅的に学習できます。
また、回答率100％の「Q&A掲示板」でわからないことや悩みを解決しながらHTML学習を進められるだけでなく、必要に応じて現役エンジニアとのマンツーマンレッスンも受けられるため、初心者の方でも挫折なくHTMLの習得が可能です。
コスパよく効率的にHTMLの習得を目指すなら侍テラコヤがおすすめです！
入会金不要・いつでも退会OKに加え、利用から1ヵ月の間は「全額返金保証制度」が適用されるので、気軽にお試しください。
HTMLとCSS・JavaScriptとの関係性
実は、私たちが普段目にしているWebサイト上では、HTMLのほかにも、CSSやJavaScriptが使われています。
JavaScriptは、Webサイト上で動的な処理を実現します。たとえば入力項目のチェック、画像の拡大表示、アニメーションなどです。
またCSSは、Webサイトの装飾や画面レイアウト調整に使われます。
HTMLファイルに含まれるテキストや画像といったデータの集まりに対して、JavaScriptファイルやCSSファイルが組み合わさることで、私たちが普段見ているWebサイトが完成しているのです。
CSSやJavaScriptを使うためには、いくつかの方法があります。
今回は、HTMLファイルとは別にファイルを作って（外部ファイルを作成して）、コードを書き込む方法を紹介します。
HTMLファイルにファイルパスを書き込めば、CSSやJavaScriptの外部ファイルを読み込むことができます。これにより、WebブラウザでHTMLファイルにアクセスすると、CSSやJavaScriptの外部ファイルの内容も反映されます。
CSSや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円~ |
| 実績 | ・累計指導実績3万5,000名以上 ・受講生の学習完了率98% ・受講生の転職成功率99% ・転職成功後の平均年収65万円UP ・転職成功後の離職率3% |
侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。
冒頭で述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役エンジニアのようなプロに質問・相談できない状況でHTMLを習得するのは難易度が高いといえます。
しかし、侍エンジニアでは
- 現役エンジニア講師によるマンツーマンレッスン
- 現役エンジニアに質問できるオンラインでのQ&Aサービス
- 不安や悩み・勉強の進み具合を相談できる学習コーチ
といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%」「転職成功率99％」という実績からも、侍エンジニアなら挫折しづらい環境でHTMLの学習を進められるといえます。
侍エンジニアのサポート体制
また、侍エンジニアでは受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でもITエンジニアへの転職や副業での収入獲得に必要なスキルだけを効率的に習得可能です。
侍エンジニアのカリキュラム例
最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。
なぜ侍エンジニアが挫折せずHTMLを習得できるのか気になる人はぜひ公式サイトをご覧ください。
公式サイトで詳細を見るまとめ
HTMLはWeb開発の基本スキルであり、プログラマーやフロントエンドエンジニアになるために、ぜひ覚えておきたい言語です。
HTMLに関して分からなくなったら、いつでもこの記事を読み返してくださいね。
この記事のおさらい
HTMLとは「HyperText Markup Language」の略であり、さまざまなデータをコンピュータが読み取れるようにタグ付けする言語です。
HTMLを構成する要素は、Web上での表現方法を決める「タグ」、Web上で実際に表示される「要素」、タグの性質を決める「属性」の3つです。
HTMLを使えば、HTMLメールや簡単なホームページを作成できます。
