HTMLって何？わかりやすく解説

2026年4月23日2026年4月25日

ウェブサイトを見るとき、「これってどうやって作られてるんだろう？」って気になったことない？テキストや画像がきれいに並んでいるページ、リンクをクリックしたら別のページに飛ぶ仕組み、あれ全部HTMLで作られているんだよ。「HTMLって名前は聞いたことあるけど、何なのかよくわからない」って人も多いよね。この記事を読めば、HTMLが何者なのか、なんでWebサイトに必要なのかがスッキリわかるよ！

HTMLって、学校で習わないけどプログラミングの一種なの？

実はHTMLはプログラミング言語じゃないんだよ。「マークアップ言語」っていって、つまりページの「構造」を書くための言語ということ。プログラミングは計算や処理をするものだけど、HTMLは「ここは見出し」「ここは本文」って目印をつける役割なんだ。

じゃあ、HTMLだけでWebサイトは作れるの？

HTMLだけでも基本的なページは作れるよ。でも色をつけたり、レイアウトを整えたりするにはCSSが必要で、動きをつけるにはJavaScriptが必要なんだ。HTMLは家でいう「骨組み」、CSSは「内装・壁紙」、JavaScriptは「家電や自動ドア」みたいなイメージだよ。

タグってよく聞くけど、何のこと？

タグは<>（山括弧）で囲まれたHTMLの命令のことだよ。例えば<h1>って書くと「ここは大見出しです」という意味になるんだ。多くのタグは開始タグと終了タグがセットで、<h1>見出し</h1>みたいに文字を挟んで使うんだよ。

難しそう…自分には無理かも…

全然大丈夫だよ！HTMLはプログラミングより取り組みやすくて、メモ帳さえあれば今日から書き始められるんだ。よく使うタグは20個くらいだから、意外とすぐ慣れるよ。

📝 3行でまとめると

HTMLはWebページの「構造」を作る言語で、計算や処理をするものではなく マークアップ言語 と呼ばれる種類だよ
<タグ> という記号を使って「ここは見出し」「ここはリンク」といった役割をブラウザに伝えるんだ
HTMLだけでは見た目が地味なので、CSS・JavaScript と組み合わせてはじめておしゃれなサイトが完成するよ

もうちょっと詳しく

HTMLはHyperText Markup Languageの略で、1990年代からWebの基本として使われてきた言語だよ。「HyperText」はリンクでほかのページに飛べるテキストのこと、「Markup」は文章に目印をつけること、「Language」はコンピューターに伝えるための言語という意味なんだ。今使われているのはHTML5という最新バージョンで、動画や音声の埋め込みも標準機能で対応できるようになったんだよ。最初は覚えることが多そうに見えるけど、基本のタグは20〜30個程度。毎日少しずつ触れていれば、1ヶ月もあれば簡単なページを自力で作れるようになるよ。

💡 ポイント
HTMLはメモ帳で書いて、ブラウザで保存すれば即確認できる！特別なソフトは不要だよ。

⚠️ よくある勘違い

❌ 「HTMLを覚えれば、ちゃんとしたWebサイトが作れる」
→ HTMLだけだと見た目が地味で、レイアウトも思い通りにならないことが多いんだ。色もフォントも全部デフォルトになっちゃうよ。

⭕ 「HTMLはWebサイトの『骨組み』を作る最初のステップ」
→ まずHTMLで構造を作り、CSSで見た目を整え、JavaScriptで動きをつける。この3つがセットで本物のWebサイトになるんだよ。

なるほど〜、あーそういうことか！

[toc]

HTMLって結局何のこと？基礎からわかりやすく解説

HTMLとは、Webページの「骨格」を作るための言語だよ。正式名称はHyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）で、名前は長いけど意味はシンプルなんだ。

「HyperText」というのは、リンクをクリックすることで別のページへジャンプできるテキストのこと。普通の本だと「詳しくは第3章へ」って書いてあっても自分でページをめくらないといけないけど、Webページはリンクをクリックするだけで一瞬で飛べるよね。あの仕組みを作っているのがHTMLなんだよ。

「Markup（マークアップ）」というのは、文章に「これは見出し」「これは箇条書き」みたいな目印をつけることだよ。例えば学校のノートで大事なところに赤ペンで線を引いたり、○で囲んだりするよね。あれと同じで、HTMLは文章のどの部分が何の役割を持つかをブラウザに教えてあげる言語なんだ。

HTMLはいつ生まれたの？

HTMLは1991年にティム・バーナーズ＝リーというイギリスの科学者が作ったんだよ。最初は研究者同士が論文を共有するための仕組みとして作られたんだ。それが今や全世界で何十億人もが毎日使うWebの基盤になっているから、すごいよね。現在はHTML5というバージョンが主流で、動画の埋め込みや位置情報の取得など、昔のHTMLではできなかったことも標準でできるようになったよ。

HTMLはプログラミング言語じゃない

よく誤解されるんだけど、HTMLはプログラミング言語じゃないんだ。プログラミング言語というのは「もし〇〇だったら△△する」みたいな条件分岐や繰り返し処理ができるものを指すよ。HTMLはそういう「計算や処理」をする機能がない。あくまで「この文章は見出しです」「この画像はここに置いてください」と構造を伝えるためのものなんだ。だからプログラミングより取り組みやすいし、完全な初心者でも数日で基本を覚えられるよ。

HTMLタグって何？書き方の基本をマスターしよう

HTMLを学ぶうえで一番最初に覚えることが「タグ」だよ。タグさえわかれば、HTMLの8割は理解できたも同然なんだ。

タグの基本的な形

タグは<（小なり記号）と>（大なり記号）で命令を囲んだものだよ。例えばこんな感じ。

<h1>：大見出しを表すタグ
<p>：段落（文章のかたまり）を表すタグ
<a>：リンクを作るタグ
<img>：画像を表示するタグ

多くのタグには「開始タグ」と「終了タグ」がセットであるんだ。終了タグはスラッシュ（/）をつけて</h1>のように書くよ。例えば「こんにちは」という大見出しを作りたいときは、<h1>こんにちは</h1>と書くんだ。

タグには「属性」をつけられる

タグにはオプションとして「属性（つまり追加情報のこと）」をつけられるんだよ。例えばリンクを作る<a>タグには、どこへ飛ぶかを指定するhref属性をつけるんだ。<a href=”https://example.com”>ここをクリック</a>みたいに書くと、「ここをクリック」という文字がリンクになるよ。画像タグ<img>ならsrc属性で画像ファイルの場所を指定するし、alt属性で「画像が表示できなかったときの説明文」を書けるんだ。

閉じないタグもある

ほとんどのタグは開始と終了のセットだけど、一部のタグは終了タグがないんだよ。<img>（画像）や<br>（改行）がその代表例だよ。「中に挟む内容がない」タグは終了タグなしで使うんだ、と覚えておくといいよ。

よく使うHTMLタグを一気に覚えよう

HTMLタグは100種類以上あるけど、実際によく使うのは限られているんだよ。まずはこれだけ覚えておけば、シンプルなページなら作れるようになるよ。

文章を作るタグ

<h1>〜<h6>：見出しタグ。数字が小さいほど大きな見出し。h1が一番大きくてh6が一番小さいよ。
<p>：段落タグ。本文のひとかたまりを囲うのに使うよ。
<strong>：太字にして強調するタグ。「ここ重要！」って部分に使うよ。
<br>：改行タグ。ここで強制的に改行するよ。

リンクと画像のタグ

<a href=”URL”>：リンクを作るタグ。クリックすると指定したURLへ飛ぶよ。
<img src=”ファイル名” alt=”説明”>：画像を表示するタグ。srcで画像ファイルを、altで代替テキストを指定するよ。

リストを作るタグ

<ul>：箇条書き（順番なし）のリストを作るタグだよ。
<ol>：番号つきリストを作るタグだよ。
<li>：リストの各項目を表すタグ。ulかolの中に入れて使うよ。

レイアウトを作るタグ

<div>：ブロックをまとめるための箱みたいなタグ。CSSと組み合わせてレイアウトを作るときに大活躍するよ。
<span>：文章の一部だけを囲って色を変えたいときなどに使うタグだよ。

HTMLファイルの基本構造を知ろう

HTMLを書くとき、すべてのページには決まった「お決まりの形」があるんだよ。これを「HTML文書の基本構造」と呼ぶんだ。最初は「呪文みたい」って感じるかもしれないけど、毎回同じものをコピペして使えばいいから安心してね。

DOCTYPE宣言

HTMLファイルの一番上には必ず<!DOCTYPE html>と書くんだよ。これは「このファイルはHTML5で書かれています」とブラウザに教えるための宣言なんだ。英語で言う「Dear …」みたいな挨拶文みたいなものだよ。

<html>・<head>・<body>の役割

基本的なHTMLファイルはこの3つの大きなタグで構成されているよ。

<html>：ページ全体を囲う大きな箱。すべてのHTMLコードはここの中に書くよ。
<head>：ページのタイトルや文字コードなど、ブラウザへの「設定情報」を書く場所だよ。画面には表示されないんだ。
<body>：実際に画面に表示される内容を書く場所。見出し・本文・画像・リンクはすべてここに書くよ。

実際のHTMLファイルはこんな形

テキストエディタ（メモ帳でもOK）に以下を書いて、「index.html」という名前で保存して、ブラウザで開いてみてね。画面に「はじめてのHTML」という見出しと、「こんにちは！」という文章が表示されたら成功だよ。難しいソフトは何もいらないんだ。これがHTMLの手軽さだよね。

HTMLを学ぶと何ができる？その先の世界

HTMLを覚えたら、それだけで世界がぐっと広がるんだよ。「プログラミングって難しそう」と思っていた人も、HTMLから入ると意外とスムーズにステップアップできるんだ。

自分だけのWebページが作れる

HTMLをマスターすれば、自分のポートフォリオサイト（つまり自己紹介や作品をまとめたWebページのこと）を作れるようになるよ。就職活動や副業ふくぎょうのアピールに、自分だけのWebサイトを持っている人はかなり有利なんだ。無料のホスティングサービスを使えば、費用ゼロで公開もできるよ。

CSSとJavaScriptへの足がかりになる

HTMLの次に学ぶのはCSS（見た目を整えるシート）とJavaScript（動きをつける言語）だよ。この3つをまとめて「Web制作の三種の神器」って呼んだりするんだ。HTMLで骨格を作り、CSSで着飾り、JavaScriptで動かす。この流れが身につけば、本格的なWebサイトやWebアプリも作れるようになるよ。

仕事としての需要が高い

Web制作の知識は今の時代、本当に需要が高いんだよ。フリーランスのWeb制作者はもちろん、会社員でもHTMLが書けると社内のWebページ更新を任されたり、マーケティング業務でLPを自分で修正できたりするんだ。副業ふくぎょうとしてWeb制作を受けている人も多くて、HTMLはその入口になる技術なんだよね。難しそうに見えて実は短期間で実用レベルに達しやすいのが、HTMLが初心者におすすめされる理由なんだよ。

まず何から始めればいい？

HTMLを学び始めるには、まずメモ帳（Windowsならメモ帳、Macならテキストエディット）を開いて、簡単なタグを書いてブラウザで確認するところから始めてみてね。慣れてきたらVisual Studio Code（無料のテキストエディタ）を使うと、タグの補完機能があって書きやすいよ。オンラインの学習サービスも充実しているから、動画や演習で楽しく学べる環境がたくさんあるんだ。最初の一歩さえ踏み出せば、あとは書けば書くほどどんどん上達していくよ。

💡 こっちの記事も参考になるよ
MLって何？わかりやすく解説

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

案内人

大人になってから「これ知らなかった…」と恥ずかしい思いをした経験から、このサイトを作りました。お金・仕事・社会のしくみって、学校で教えてくれないのに知らないと損することだらけ。むずかしい言葉を「あーそういうことか！」って思えるまでかみ砕いて説明するのが得意です。主に経済・法律・税金・ライフイベント周りの用語を毎日更新中。