HTMLとは、Webページの文章や画像に役割をつけるための書き方です。
かんたんに言うと、Webページの骨組みを作るものです。
Webページとは、インターネットで見る1枚のページのことです。
たとえば、ニュース記事、ブログ、会社のホームページ、ネットショップの商品ページなどがWebページです。
身近な例でいうと、HTMLは学校のプリントに「タイトル」「見出し」「本文」「写真」を分けて書く作業に近いです。
ただ文字を並べるのではなく、「ここは見出し」「ここは文章」「ここは画像」と分かるようにします。
IT用語としてのHTMLは、Webページの中身に役割をつけるための書き方です。
この記事では、HTMLとは何か、タグとは何か、CSSやJavaScriptとの違いを初心者向けにわかりやすく解説します。
ここだけ読めばOK
HTMLとは、Webページの文章や画像に役割をつけるための書き方です。
Webページの骨組みを作るもの、と考えると分かりやすいです。
ほかのIT用語も知りたい方は、初心者向けのIT用語辞典もあわせてご覧ください。
HTMLとは？簡単に言うとWebページの骨組みを作る書き方
HTMLとは、Webページを作るときに使う基本の書き方です。
Webページにある見出し、文章、画像、リンクなどを、パソコンやスマホが分かる形で書きます。
HTMLは「HyperText Markup Language」の略です。
ただし、初心者のうちは英語の正式名を覚えなくても大丈夫です。
まずは「HTMLはWebページの中身を作るもの」と考えましょう。
そこが分かると、CSSやJavaScriptとの違いも理解しやすくなります。
HTMLはWebページの中身を表すもの
HTMLでは、Webページの中にあるものの役割を決めます。
たとえば、ページの大きなタイトルは「見出し」、説明文は「本文」、別のページへ進む文字は「リンク」として書きます。
HTMLがあることで、ブラウザはWebページの中身を正しく表示できます。
ブラウザとは、Webページを見るためのアプリです。
代表的なブラウザには、Edge、Chrome、Safariなどがあります。
身近な例でいうと、文章に見出しや段落をつけること
たとえば、作文を書くとき、タイトルと本文を分けると読みやすくなります。
長い文章も、段落に分けると内容を追いやすくなります。
HTMLもそれに似ています。
Webページの中で「ここは見出し」「ここは本文」と役割をつけます。
IT用語としてのHTMLは、Webページの文章や画像に役割をつけるための書き方です。
HTMLはどこで使われている？
HTMLは、私たちがふだん見ている多くのWebページで使われています。
検索して開くページ、ブログ、ニュース記事、会社のホームページなどに使われています。
Webページ
HTMLがよく使われる場所は、Webページです。
Webページとは、インターネットで見る1枚のページのことです。
この記事のようなページにもHTMLが使われています。
見出し、本文、画像、リンクなどを並べるためにHTMLが必要です。
ブログやニュース記事
ブログやニュース記事でもHTMLは使われています。
記事タイトル、本文、画像、関連記事へのリンクなどを整理するためです。
WordPressのようなブログ作成ツールを使うと、HTMLを直接書かなくても記事を作れます。
ただし、画面の裏側ではHTMLが作られています。
HTMLメール
HTMLは、メールにも使われることがあります。
HTMLメールとは、画像やボタンなどを入れて見た目を整えたメールのことです。
お店から届くお知らせメールや、ネット通販の案内メールでよく見かけます。
HTMLは、Webページだけでなくメールにも使われることがあります。
HTMLタグとは？文章や画像に役割をつける目印
HTMLタグとは、文章や画像に役割をつけるための目印です。
タグは、山かっこと呼ばれる記号で囲んで書きます。
山かっことは、< と > のような記号です。
たとえば、次のように書きます。
<h1>HTMLとは？</h1>
<p>HTMLはWebページの骨組みを作る書き方です。</p>この例では、<h1> が大きな見出しを表します。
<p> は、文章のまとまりを表します。
見出しを表すタグ
見出しを表すタグには、<h1> や <h2> などがあります。
<h1> は、ページの大きなタイトルに使います。
<h2> は、記事の大きな区切りに使います。
この記事の中にある「HTMLタグとは？」のような見出しも、HTMLでは見出しタグで表します。
段落を表すタグ
文章のまとまりには、<p> タグを使います。
pは、段落を意味する英語から来ています。
段落とは、文章のまとまりのことです。
1つの話題ごとに段落を分けると、読みやすくなります。
リンクや画像を入れるタグ
別のページへ移動する文字には、リンク用のタグを使います。
リンクとは、クリックすると別のページや場所へ移動できる文字や画像のことです。
画像を入れるときも、画像用のタグを使います。
なお、画像用の <img> タグのように、文字をはさまずに単体で使うタグもあります。
このように、HTMLタグにはそれぞれ役割があります。
HTMLの基本的な書き方
HTMLの書き方は、タグで文章をはさむ形が基本です。
ただし、画像を入れる <img> タグのように、はさむ文字がないタグもあります。
はじめからすべてのタグを覚える必要はありません。
まずは、見出し、文章、リンク、画像など、よく使うタグから見ていきましょう。
HTMLコードのかんたんな例
HTMLコードとは、HTMLの決まりにそって書いた文字のことです。
コードという言葉が難しく見えますが、ここでは「決まった書き方で書いた文字」と考えれば大丈夫です。
たとえば、次のように書きます。
<h1>はじめてのHTML</h1>
<p>これはHTMLの練習です。</p>
<a href="https://example.com">リンクを見る</a>
<img src="sample.png" alt="サンプル画像">このHTMLを書くと、ブラウザでは見出し、文章、リンク、画像として表示されます。
画面に見える形と、裏側にあるHTMLの書き方は少し違います。
ブラウザで表示されるまでの流れ
HTMLは、ブラウザで開くとWebページとして表示されます。
流れは次のようなイメージです。
- HTMLを書く
- HTMLファイルとして保存する
- ブラウザで開く
- Webページとして表示される
つまり、HTMLはWebページを表示するための元になる情報です。
HTMLファイルとは？拡張子「.html」のファイル
HTMLファイルとは、HTMLを書いて保存したファイルです。
ファイルとは、パソコンやスマホの中に保存されたデータのまとまりです。
HTMLファイルの名前の最後には、「.html」がつくことが多いです。
たとえば、次のようなファイル名です。
index.htmlこの「.html」の部分を拡張子といいます。
拡張子とは、ファイルの種類を表す、名前の最後の文字です。
HTMLファイルを開くとWebページとして表示される
HTMLファイルをブラウザで開くと、Webページのように表示されます。
そのため、HTMLはホームページ作成の基本として学ばれます。
インターネット上に公開していないHTMLファイルでも、自分のパソコンで開いて確認できます。
まずは小さなHTMLを書いて、ブラウザで開いてみると理解しやすいです。
メモ帳でもHTMLは書ける
HTMLは、特別なソフトがなくても書けます。
Windowsのメモ帳のような、文字を入力できるソフトでも作れます。
学習を進めるなら、HTMLを書きやすいエディタを使うと便利です。
エディタとは、文章やHTMLなどを書きやすくするためのソフトです。
HTMLとCSSの違い
HTMLとCSSは、どちらもWebページ作りでよく使われます。
ただし、役割は違います。
HTMLは中身を作ります。
CSSは見た目を整えます。
HTMLは中身を作る
HTMLは、Webページの中に何を置くかを決めます。
見出し、本文、画像、リンクなどを用意する役割です。
家でたとえるなら、HTMLは柱や部屋の配置のようなものです。
IT用語としては、Webページの中身と流れを表すための書き方です。
CSSは見た目を整える
CSSは、Webページの見た目を整えるための書き方です。
文字の色、大きさ、余白、背景色などを指定できます。
家でたとえるなら、CSSは壁紙や家具の色のようなものです。
IT用語としては、HTMLで作った中身を見やすく整えるために使います。
HTMLとJavaScriptの違い
HTMLとJavaScriptも、役割が違います。
JavaScriptは、Webページに動きをつけるための書き方です。
たとえば、ボタンを押したときにメニューを開く動きなどに使われます。
画面の一部を切り替えるときにも使われます。
JavaScriptは動きをつけるもの
HTMLだけでも、文章や画像を表示できます。
しかし、ボタンを押して画面を変えるような動きには、JavaScriptが使われることがあります。
HTMLはページの中身です。
JavaScriptは、そのページに動きを加えるものです。
HTML、CSS、JavaScriptの役割を比べる
| 種類 | 主な役割 | 身近なイメージ |
|---|---|---|
| HTML | 中身を作る | 家の骨組み |
| CSS | 見た目を整える | 壁紙や色 |
| JavaScript | 動きをつける | 照明のスイッチ |
この3つは、Webページを作るときによく一緒に使われます。
初心者は、まずHTMLの役割から理解すると分かりやすいです。
HTML5やLiving Standardとは？HTMLのバージョン
HTMLには、時代に合わせていくつかのバージョンがあります。
バージョンとは、改良されてきた版のことです。
その中で、2010年代に広く知られるようになったのが「HTML5」です。
HTML5には、動画や音声などをWebページで扱いやすくする考え方が含まれていました。
現在はHTML Living Standardが基本
現在のHTMLは、「HTML Living Standard」というルールをもとに更新されています。
Living Standardは、必要に応じて少しずつ見直されていく標準ルールのことです。
ただし、初心者のうちは名前を細かく覚えなくても大丈夫です。
まずは「今のWebページで使われているHTMLの基本ルール」と考えれば十分です。
初心者は細かい違いを最初から覚えなくてよい
HTML5やHTML Living Standardという言葉は、学習教材や資格の説明で出てくることがあります。
しかし、最初に大事なのは、HTMLの基本の役割です。
HTMLは、Webページの文章や画像に役割をつけるための書き方です。
見出し、段落、リンク、画像など、よく使うものから覚えていきましょう。
HTMLメールとは？WebページのHTMLとの違い
HTMLメールとは、HTMLを使って作られたメールのことです。
文字だけのメールよりも、見た目を整えやすいのが特徴です。
画像、ボタン、色つきの文字などを入れられます。
企業のお知らせやネットショップの案内でよく使われます。
文字だけでなく画像やボタンを入れられるメール
HTMLメールでは、画像やボタンを入れた見やすいメールを作れます。
たとえば、商品の写真や「くわしく見る」ボタンが入ったメールです。
文章だけのメールより、内容を分かりやすく見せやすい場合があります。
HTMLメールはWebページとは使い方が少し違う
HTMLメールもHTMLを使います。
しかし、Webページと同じように表示されるとは限りません。
メールを見るアプリによって、見え方が少し変わることがあります。
初心者のうちは「HTMLを使った見た目のあるメール」と覚えておけば十分です。
初心者が間違えやすいポイント
HTMLは学びやすいものです。
ただし、似た言葉や役割の違いで迷うことがあります。
HTMLだけでは見た目を細かく整えにくい
HTMLだけでも、Webページの中身は作れます。
しかし、文字色や余白などの見た目を細かく整えるにはCSSを使います。
HTMLは中身、CSSは見た目と分けて考えると分かりやすいです。
タグを丸暗記しようとしなくてよい
HTMLタグはたくさんあります。
しかし、最初からすべてを覚える必要はありません。
よく使うタグから少しずつ覚えれば大丈夫です。
分からないタグは、その都度調べながら使えば問題ありません。
すべてのタグが文字をはさむわけではない
多くのHTMLタグは、文字をはさんで使います。
たとえば、<p>文章</p> のような形です。
一方で、画像を入れる <img> タグのように、文字をはさまないタグもあります。
初心者のうちは「基本ははさむ。ただし、はさまないタグもある」と覚えておきましょう。
HTMLとHTTPは別のもの
HTMLとHTTPは名前が似ていますが、別のものです。
HTMLは、Webページの中身を作るための書き方です。
HTTPは、Webページをやり取りするためのルールです。
HTTPについては、HTTPとは？HTTPSとの違いの記事でくわしく解説しています。
「HTML形式」はHTMLで書かれた形式のこと
HTML形式とは、HTMLの書き方を使った形式のことです。
メールや文章データの説明で出てくることがあります。
たとえば、HTML形式のメールは、画像やボタンなどを入れた見た目のあるメールを指すことがあります。
一方で、文字だけのメールはテキスト形式と呼ばれることがあります。
HTMLとは何かについてよくある質問
HTMLはプログラミング言語ですか？
HTMLは、一般的な意味ではプログラミング言語とは少し違います。
プログラミング言語は、計算や条件分けなどの処理を書くために使われます。
HTMLは、Webページの中身に役割をつけるための書き方です。
初心者には「Webページを作るための基本の書き方」と考えると分かりやすいです。
HTMLとCSSはどちらから学べばいいですか？
まずはHTMLから学ぶのがおすすめです。
HTMLで中身を作り、そのあとCSSで見た目を整える流れが分かりやすいからです。
ただし、HTMLを完璧に覚えてからCSSに進む必要はありません。
基本を学んだら、HTMLとCSSを少しずつ一緒に使うと理解しやすくなります。
HTMLはスマホでも使われていますか？
はい。スマホで見るWebページにもHTMLは使われています。
スマホの画面に合わせて見やすくするために、HTMLとCSSなどが使われます。
スマホで見てもパソコンで見ても、Webページの土台としてHTMLは重要です。
HTMLを覚えるとホームページを作れますか？
HTMLを覚えると、ホームページ作りの基本が分かります。
ただし、見た目を整えるにはCSSも使います。
さらに動きをつけたい場合は、JavaScriptを使うこともあります。
まずはHTMLで、見出しや文章を表示するところから始めるとよいです。
HTML5とHTML Living Standardは別物ですか？
HTML5は、2010年代に広く知られるようになったHTMLのバージョンです。
現在は、HTML Living Standardという形でHTMLのルールが更新されています。
ただし、初心者のうちは細かく分けて覚えなくても大丈夫です。
まずは「今使われているHTMLの基本」と考えると分かりやすいです。
HTMLメールとは何ですか？
HTMLメールとは、HTMLを使って作られたメールです。
画像やボタン、色つきの文字を入れられるため、見た目を整えやすいです。
一方で、メールを見るアプリによって表示が少し違うことがあります。
WebページのHTMLとは使い方が少し違うと覚えておきましょう。
まとめ：HTMLとはWebページの土台を作るための書き方
HTMLとは、Webページの文章や画像に役割をつけるための書き方です。
かんたんに言うと、Webページの骨組みを作るものです。
HTMLでは、見出し、段落、リンク、画像などをタグで表します。
多くのタグは文字をはさんで使いますが、<img> タグのように単体で使うタグもあります。
HTMLで中身を作り、CSSで見た目を整え、JavaScriptで動きをつけると考えると分かりやすいです。
また、HTML5という言葉を見かけることもありますが、現在はHTML Living StandardというルールをもとにHTMLが更新されています。
初心者は、最初からすべてのタグや規格名を覚える必要はありません。
まずは、見出し、段落、リンク、画像など、よく使うものから学んでいきましょう。