HTMLを学ぶと、Webページに見出しや文章、画像、リンク、フォームなどを配置し、内容に意味のある構造を付けられるようになります。WebサイトやWebアプリの「土台」を作るために欠かせない技術です。
ただし、HTMLだけでデザインを整えたり、クリックに応じて表示を変えたり、入力内容をデータベースへ保存したりすることはできません。見た目はCSS、ブラウザ上の動きはJavaScript、保存やログインなどはサーバー側の仕組みと組み合わせます。
この記事では、HTMLでできること・できないことを実例で整理します。最後には、初心者が次に何を学べばよいかも分かるようにまとめました。
HTMLとはWebページの内容と構造を表す言語
HTMLは「HyperText Markup Language」の略です。プログラムの処理手順を書く言語ではなく、文章や画像などにタグで目印を付け、Webページの意味と構造をブラウザへ伝えるマークアップ言語です。
たとえば、同じ文字列でも<h1>で囲めばページの主見出し、<p>で囲めば段落、<a>で囲めばリンクとして扱われます。見た目だけでなく「これは何なのか」を伝えられる点がHTMLの大切な役割です。
<h1>はじめてのWebサイト</h1>
<p>HTMLを使ってページの内容を組み立てます。</p>
<a href="about.html">このサイトについて</a>この3行だけでも、見出し・段落・別ページへのリンクがある小さなWebページになります。ここから、HTMLで具体的に何ができるのかを見ていきましょう。
HTMLでできること
見出し・文章・リストで情報を整理する
HTMLでは、見出しをh1〜h6、段落をp、箇条書きをulやolで表せます。長い文章も、内容に合わせて見出しやリストへ分けることで読みやすくなります。
<h2>準備するもの</h2>
<p>HTMLの練習には、次の2つが必要です。</p>
<ul>
<li>テキストエディタ</li>
<li>Webブラウザ</li>
</ul>見出しの順番やリストの意味は、画面を見る人だけでなく、検索エンジンやスクリーンリーダーにも伝わります。そのため、文字を大きくしたいから見出しを選ぶのではなく、内容上の役割に合うタグを選ぶことが大切です。
別のページやページ内の場所へリンクする
a要素を使うと、別のページ、同じページ内の見出し、メールアドレス、電話番号などへのリンクを作れます。複数の文書をつなげられることが、HTMLの「HyperText」という名前の由来です。
<nav aria-label="メインメニュー">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">私たちについて</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>リンク文字には「こちら」だけではなく、「お問い合わせ」など移動先が分かる言葉を使いましょう。キーボード操作や音声読み上げでも目的を判断しやすくなります。
画像・音声・動画を掲載する
img、audio、videoなどの要素を使うと、文章以外のコンテンツをページへ表示できます。YouTubeなど外部サービスのコンテンツは、iframeで埋め込む場合もあります。
<figure>
<img
src="workspace.jpg"
alt="ノートパソコンでHTMLを編集している作業机"
width="1200"
height="800"
>
<figcaption>HTMLを編集している作業環境</figcaption>
</figure>alt属性には、画像が見えない場合にも内容や目的が伝わる説明を入れます。装飾だけの画像ならalt=""とし、画像内の重要な情報は本文にも書くのが基本です。
入力フォームの画面を作る
form、label、input、textarea、buttonを組み合わせると、お問い合わせや申し込みに使う入力画面を作れます。入力必須やメールアドレス形式など、ブラウザが確認できる基本的な条件もHTMLで指定できます。
<form action="/contact/submit" method="post">
<label for="email">メールアドレス</label>
<input
type="email"
id="email"
name="email"
autocomplete="email"
required
>
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">送信する</button>
</form>ただし、このHTMLだけで入力内容をメール送信したり保存したりはできません。actionで指定した送信先に、PHPなどのサーバー側処理やフォームサービスを用意する必要があります。
ページの各領域に意味を持たせる
header、nav、main、article、footerなどを使うと、ページのどこがナビゲーションで、どこが主要な内容なのかを表せます。これをセマンティックHTMLと呼びます。
適切な構造は、コードを後から修正しやすくするだけではありません。支援技術がページ内を移動しやすくなり、検索エンジンにも内容の関係が伝わりやすくなります。
HTMLメールの内容を組み立てる
HTMLは、画像や見出し、ボタン風のリンクを含むメールにも使われます。テキストだけのメールより情報を整理しやすく、商品案内やニュースレターなどで利用されています。
一方、メールソフトごとに対応するHTMLやCSSが異なります。Webページと同じコードをそのまま使えるとは限らないため、テキスト版も用意し、複数のメール環境で表示を確認する必要があります。
Webアプリの画面の土台を作る
予約サービス、チャット、オンラインショップなどのWebアプリでも、ブラウザに表示される見出し・ボタン・入力欄などの土台はHTMLで作られます。
ただし、HTMLだけでアプリ全体を完成させられるわけではありません。操作への反応にはJavaScript、ユーザー情報や注文の保存にはサーバーとデータベースなどが必要です。
HTMLで作れるページの完成例
ここまでの要素を組み合わせ、プロフィールページの構造を作ってみます。次のコードをindex.htmlとして保存し、ブラウザで開いてください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私のプロフィール</title>
</head>
<body>
<header>
<p>My Portfolio</p>
<nav aria-label="メインメニュー">
<ul>
<li><a href="#about">自己紹介</a></li>
<li><a href="#skills">学習中の技術</a></li>
<li><a href="#contact">連絡先</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>はじめまして、山田です</h1>
<section id="about">
<h2>自己紹介</h2>
<figure>
<img
src="profile.jpg"
alt="笑顔でパソコンに向かう山田"
width="640"
height="480"
>
<figcaption>自宅でWeb制作を学習しています。</figcaption>
</figure>
<p>見やすく使いやすいWebサイトを作るため、HTMLを学んでいます。</p>
</section>
<section id="skills">
<h2>学習中の技術</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
<section id="contact">
<h2>連絡先</h2>
<p><a href="mailto:hello@example.com">メールを送る</a></p>
</section>
</article>
</main>
<footer>
<p><small>© 2026 My Portfolio</small></p>
</footer>
</body>
</html>ブラウザには、ページ名、メニュー、自己紹介、画像、学習中の技術、メールリンクが順番に表示されます。CSSを書いていないため見た目は簡素ですが、情報のまとまりと移動先が分かるページとして機能します。
画像ファイルが手元にない場合は、img要素だけ一時的に削除しても構いません。まずHTMLの構造を確認し、その後にCSSを追加して見た目を整えると、それぞれの役割を理解しやすくなります。
HTMLだけではできないこと
HTMLの役割は、あくまで内容と構造を表すことです。「HTMLでWebサイトを作れる」という説明は間違いではありませんが、一般的なWebサイトを完成させるにはほかの技術も組み合わせます。
色・余白・レイアウトを自由に整える
文字色、背景色、余白、横並び、画面幅に応じたレイアウトなど、見た目を整える役割はCSSが担当します。HTMLには一部の見た目に関する古い書き方も残っていますが、現在のWeb制作では内容とデザインを分けるのが基本です。
body {
max-width: 720px;
margin: 0 auto;
padding: 24px;
color: #1f2937;
background: #f8fafc;
font-family: system-ui, sans-serif;
}
img {
max-width: 100%;
height: auto;
}クリックや入力に応じて画面を変える
メニューの開閉、タブの切り替え、入力中の文字数表示、スライドショーなど、利用者の操作に応じた動作には主にJavaScriptを使います。
const button = document.querySelector("button");
const message = document.querySelector("#message");
button.addEventListener("click", () => {
message.textContent = "ボタンがクリックされました";
});HTMLで用意したbuttonやpをJavaScriptから取得し、クリック時に文章を変更しています。先に意味のあるHTMLを作っておくと、JavaScriptからも対象を扱いやすくなります。
データの保存・ログイン・決済を処理する
会員登録、ログイン、注文の保存、在庫の更新、決済、メール送信などは、HTMLだけでは処理できません。サーバー側のプログラム、API、データベース、外部サービスなどが必要です。
HTMLのフォームは情報を入力して送る「入口」です。送られたデータを安全に検証し、保存や送信を行う処理は別に実装します。ブラウザ上の必須チェックだけに頼らず、サーバー側でも検証する必要があります。
Webサイトをインターネットへ公開する
HTMLファイルを作っただけでは、自分のパソコンでしか見られません。一般公開するには、ファイルを置くWebサーバーと、必要に応じてサイトの住所となるドメインを用意します。
GitHub Pagesのような静的サイト向けサービスやレンタルサーバーを使う方法もあります。公開前には、スマートフォン表示、リンク切れ、画像の代替テキスト、フォームの送信先も確認しましょう。
HTML・CSS・JavaScriptの役割の違い
| 技術 | 主な役割 | 具体例 |
|---|---|---|
| HTML | 内容と構造 | 見出し、文章、画像、リンク、フォーム |
| CSS | 見た目とレイアウト | 色、文字サイズ、余白、横並び、レスポンシブ対応 |
| JavaScript | ブラウザ上の動作 | メニュー開閉、入力チェック、表示更新、API通信 |
| サーバー側 | データ処理 | 保存、ログイン、決済、メール送信 |
家にたとえると、HTMLは柱や部屋の構成、CSSは壁紙や家具の配置、JavaScriptは照明のスイッチや自動ドアです。どれか一つが優れているのではなく、役割が違います。
最初から全部を同時に覚えようとすると混乱しやすいため、まずHTMLで意味のある構造を作り、次にCSS、最後にJavaScriptへ進むと理解しやすくなります。
HTMLを学ぶとできるようになる仕事と作業
HTMLの基礎が身に付くと、既存ページの文章やリンクの修正、WordPress記事の構造調整、簡単な静的ページの作成、メールテンプレートの編集などに取り組めます。
また、デザイナーが作った画面をWebページとして組み立てるコーディングや、Webアプリの画面開発にもHTMLの知識が必要です。ブラウザの開発者ツールで既存ページの構造を読めるようになるため、不具合の原因も探しやすくなります。
ただし、HTMLだけで対応できる業務の範囲は限られます。仕事としてWeb制作へ取り組むなら、CSS、レスポンシブ対応、アクセシビリティ、Git、JavaScript、WordPressなどを目的に合わせて学びましょう。
初心者におすすめの学習順序
- テキストエディタとブラウザを用意する
- HTMLの基本構造と、よく使うタグを覚える
- プロフィールや店舗紹介など、小さな1ページを作る
- CSSで色・余白・レイアウトを整える
- スマートフォンでも読みやすくする
- JavaScriptで小さな操作を一つ追加する
- サーバーへアップロードして公開する
タグ名を暗記するだけではなく、実際にファイルを書いてブラウザ表示を確認することが重要です。コードを一か所変え、どこが変わったかを見る作業を繰り返すと、それぞれの役割が定着します。
手順に沿って一つのサイトを完成させたい方は、無料のコーディング教材も利用できます。HTML・CSS・JavaScriptの基礎を、制作しながら順番に確認できます。
HTMLでできることに関するよくある質問
HTMLはプログラミング言語ですか？
一般的にはプログラミング言語ではなく、マークアップ言語に分類されます。条件分岐や繰り返しなどの処理を書くものではなく、コンテンツの意味と構造をタグで表すためです。
HTMLだけでホームページを作れますか？
文章、見出し、画像、リンクがある静的なページならHTMLだけでも作れます。ただし、見た目を整えるCSSや、問い合わせの送信処理、公開用サーバーも必要になることが一般的です。
HTMLだけでスマートフォン対応できますか？
meta name="viewport"で表示幅の基準は設定できますが、画面幅に応じた余白や横並びの変更はCSSで行います。画像の幅指定やHTMLの読み順も含め、HTMLとCSSの両方で確認します。
HTMLを覚えるにはどのくらいかかりますか？
必要な時間は学習目的と使える時間によって変わるため、一律には決められません。まずは見出し、段落、リンク、画像、リスト、フォームを使って1ページを作り、説明を見ずに同じ構造を作れる状態を最初の目標にしましょう。
まとめ
HTMLでできるのは、Webページの文章・見出し・画像・リンク・フォームなどを配置し、それぞれに意味のある構造を与えることです。Webサイト、HTMLメール、Webアプリの画面でも土台として使われます。
一方、デザインはCSS、操作に応じた動きはJavaScript、保存・ログイン・決済などはサーバー側の仕組みが担当します。HTMLの得意分野と限界を分けて理解すれば、次に学ぶ技術も迷いません。
まずは短いHTMLを書いてブラウザで開き、見出し・段落・リンク・画像を一つずつ追加してみてください。小さなページを完成させることが、Web制作への確かな第一歩です。