HTMLは、Webページの構造をつくるための基本言語です。本記事ではHTMLの基本概念から、CSSとの関係・ファイルの作成・表示方法・タグの使い方までを初心者向けに丁寧に解説します。
さらに自己紹介ページや会社紹介、お問い合わせフォームなど、実践で役立つサンプルコードも紹介します。タグの選び方や記述ルール、学習ツールの活用法まで網羅しており、これからWeb制作を始めたい方に最適な入門ガイドです。
目次
1.HTMLとは？
HTMLはWebページの土台をつくるための言語です。この章では、「HTMLとは何か？」を初心者にもわかりやすく解説し、CSSやJavaScriptとの違いも紹介します。
HTMLとは何か？簡単に解説
HTMLとは、Webページの骨組みや構造を作るための言語です。
HTMLは「HyperText Markup Language」の略称で、テキストに意味や構造を与えるための「マークアップ言語」です。見出し・段落・リンク・画像など、ページに表示される要素を定義する役割を持っています。
例えば、見出しには<h1>タグ・段落には<p>タグ・リンクには<a>タグを使用します。これらのタグを組み合わせることで、ユーザーが閲覧できるWebページが構築されます。
このように、HTMLはWebページの基本構造を記述するための言語であり、Web制作の出発点となる重要な技術です。
Webページが表示される仕組みとHTMLの関係
Webページは、HTMLファイルをもとにブラウザが内容を読み取り、視覚的に表示しています。
Webサーバーに置かれたHTMLファイルは、ユーザーのリクエストに応じてブラウザに送られます。ブラウザはHTMLの構文を解析し、タグに応じた要素（見出し・画像など）を画面上に描画します。
例えば、HTMLファイル内に「<h1>こんにちは</h1>」と書かれていれば、ブラウザはそれを大きな見出しとして表示します。CSSやJavaScriptはこの構造に装飾や動きを追加する役割を担います。
つまり、HTMLはWebページの表示に欠かせない「設計図」のような役割を果たしているのです。
HTMLとCSS・JavaScriptとの違い
HTML・CSS・JavaScriptはそれぞれ異なる役割を持ち、Webページを構成するために連携して使われます。
HTMLは構造、CSSは見た目の装飾、JavaScriptは動きを制御するスクリプトです。それぞれ独立した言語ですが、組み合わせることで高機能なWebサイトが完成します。
例えばHTMLでボタンを設置し（<button>）、CSSでそのボタンの色やサイズを調整し、JavaScriptでクリック時にメッセージを表示させるような実装が可能です。
このように、HTMLはWebページの基礎を支え、CSSとJavaScriptがその上に機能やデザインを加えるという関係性にあります。
2.HTMLとCSSの関係性
WebページはHTMLだけでなく、CSSと組み合わせることで視覚的に魅力的なものになります。この章では、CSSの役割や使い方、HTMLとの連携方法を初心者向けに解説します。
CSSの役割
CSSは、HTMLで作成したWebページに「装飾やデザイン」を加えるための言語です。
HTMLはWebページの「構造（骨組み）」を記述する言語ですが、CSSはその構造に色やレイアウトなどの「見た目」を加えるために使われます。両者の役割は明確に分かれており、役割分担することで保守性や再利用性が高まります。
例えば、HTMLで<h1>見出し</h1>と記述すれば文字は表示されますが、装飾はされていません。ここにCSSでh1 { color: red; }と書けば、「赤色の見出し」が表示されるようになります。
このように、HTMLとCSSはそれぞれ役割が異なるものの、連携させることで視覚的に優れたWebページを実現できます。
HTMLにCSSを適用する方法
CSSは「内部CSS」「外部CSS」「インラインCSS」の3つの方法でHTMLに適用できます。
それぞれの方法には特徴があり、目的や規模によって使い分けることが推奨されます。学習段階では扱いやすい内部CSSから始め、実務では外部CSSで管理するのが一般的です。
内部CSS：HTMLファイルの<head>内に<style>タグを使って記述
外部CSS：別ファイルにCSSを記述し、HTML内で<link rel="stylesheet">で読み込み
インラインCSS：HTMLタグ内に直接書く方法（例：<p style="color:blue;">青い文字</p>）
<!-- 内部CSSの例 --> <head> <style> h1 { color: blue; } </style> </head> |
基本的には、管理しやすく再利用性の高い「外部CSS」が推奨されますが、学習初期や小規模なページでは内部CSSでも十分対応可能です。
関連記事
JavaScriptとは？初心者にもわかりやすく何ができるかや歴史、基本的な文法を解説
【HTML】フォントサイズの基本｜px・em・remの違いやサイズが変わらない場合の対処法を解説
3.HTMLファイルの作り方と開き方
HTMLは誰でも簡単に始められる言語です。この章では、HTMLファイルの作成方法から保存形式、ブラウザでの表示方法まで、Web制作の基本操作をわかりやすく紹介します。
HTMLファイルの作成手順
HTMLファイルは、テキストエディタで記述し、「.html」拡張子で保存するだけで作成できます。
HTMLは構文がシンプルで、特別なソフトは不要です。エディタでコードを書いて保存すれば、それだけでブラウザに表示できる形式になります。
Windowsでは「メモ帳」、Macでは「TextEdit」、または「Visual Studio Code」のようなエディタを開き、以下のように記述します。
<!DOCTYPE html> <html> <head> <title>サンプルページ</title> </head> <body> <h1>Hello, HTML!</h1> </body> </html> |
これを「sample.html」という名前で保存すれば、HTMLファイルの完成です。
拡張子と文字コードの設定方法
HTMLファイルは「.html」拡張子で保存し、文字コードは「UTF-8」を推奨します。
ファイルの拡張子が間違っていたり、文字コードが適切でないと、正しく表示されない原因になります。とくに日本語を扱う場合はUTF-8が安全です。
メモ帳で保存する場合「ファイルの種類」を「すべてのファイル」に変更し「sample.html」と入力、エンコードを「UTF-8」に設定します。VS Codeでは、ステータスバーから文字コードを変更可能です。
正しい拡張子と文字コードで保存することが、HTMLファイル作成の基本中の基本です。
HTMLファイルをブラウザで開く方法
作成したHTMLファイルは、ブラウザで開くだけで内容を確認できます。
HTMLはローカル環境でもブラウザで動作するため、即座に表示をチェックしながら学習できます。
ファイルを保存した場所で「sample.html」をダブルクリックすれば、標準のブラウザで開きます。あるいは、ブラウザを起動してファイルをドラッグ＆ドロップする方法も有効です。
この手軽さがHTML学習の魅力のひとつです。いつでも修正・更新しながら学習を進められます。
関連記事
JavaとJavascriptの違いは？文法の特徴から関係性・学習方法まで徹底解説！
4.HTML入門｜基本のタグ一覧と使い方
HTMLには多くのタグが用意されており、目的に応じて使い分ける必要があります。この章では、文書構造・テキスト・リンク・画像・表・フォームなど、代表的なHTMLタグの使い方を解説します。
HTML文書の基本構造
HTML文書には、決まった基本構造があります。
Webブラウザが正しくHTMLを解釈し表示するには、文書の構造を明確に記述する必要があります。そのためには、文書の冒頭に<!DOCTYPE html>を宣言し、<html>要素内にページ全体を記述する必要があります。
以下は最も基本的なHTMLの構造です。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <h1>こんにちは、HTML！</h1> </body> </html> |
<head>内にはページの情報やスタイル、<body>内には表示する内容を書きます。
テキスト関連のタグ（見出し・段落・改行・強調）
テキストに意味づけをするために、HTMLではさまざまなタグを使用します。
意味のあるマークアップを行うことで、ページの構造が明確になり、SEOやアクセシビリティにも効果的です。
見出し：<h1>〜<h6>（重要度に応じて使い分け）
段落：<p>
改行：<br>
強調：<strong>（意味の強調）、<em>（感情の強調）
<h1>サイトのタイトル</h1> <p>これは段落です。</p> <p>改行したいときは<br>このように書きます。</p> <p><strong>重要な語句</strong>を目立たせることもできます。</p> |
タグの意味に応じた適切な使い分けが、読みやすく構造的なHTMLの第一歩です。
リスト・リンク・画像タグの使い方
HTMLでは、リスト・リンク・画像などもタグで簡単に表示できます。
情報を視覚的に整理したり、別のページや外部コンテンツに誘導するために、これらのタグは非常に頻繁に使われます。
順序なしリスト：<ul><li>項目</li></ul>
順序ありリスト：<ol><li>手順1</li></ol>
リンク：<a href="https://example.com">リンク</a>
画像：<img src="image.jpg" alt="説明文">
<h2>おすすめリンク</h2> <ul> <li><a href="https://example.com">公式サイト</a></li> <li><a href="https://example.org">サポートページ</a></li> </ul>
|
これらのタグはHTMLでの情報表現の基本です。正しく使い分けることで、内容がより伝わりやすくなります。
表・フォーム・ボタンなどの構造的タグ
HTMLには、情報の整理やユーザー入力を扱うための構造的なタグも用意されています。
表やフォームは、情報の一覧表示や問い合わせフォームなどに活用され、実践的なWeb制作に欠かせません。
表：<table>, <tr>, <td>, <th>
フォーム：<form>, <input>, <textarea>, <select>
ボタン：<button>
<table border="1"> <tr> <th>氏名</th><th>年齢</th> </tr> <tr> <td>山田太郎</td><td>30</td> </tr> </table>
<label>お名前：<input type="text" name="name"></label> <button type="submit">送信</button> </form> |
表やフォームのタグは少し複雑に見えますが、使い方を覚えれば実務でも大きな力になります。
コメントや特殊文字（エスケープシーケンス）の書き方
HTMLではコメントを記述したり、特別な意味を持つ文字をエスケープする必要があります。コメントはメモや注釈として使え、特殊文字のエスケープは誤動作を防ぐために重要です。
コメント：<!-- これはコメントです -->
特殊文字の例：< → <
<!-- この部分はHTMLとしては表示されません --> <p>3 < 5 は「3は5より小さい」という意味です。</p> |
こうした基本的な記述ルールを覚えておくことで、HTMLをより安全かつ正確に扱うことができます。
5.サンプル付｜HTMLで簡単にWebページを作成する
HTMLの基本を身につけたら、実際にWebページを作ってみましょう。この章では自己紹介ページや企業紹介ページ、お問い合わせフォームなど、具体的なコード例を用いて紹介します。
自己紹介ページのコード例
まずは、HTMLだけで作成するシンプルな自己紹介ページから始めてみましょう。
自己紹介ページは構造が単純で、見出し・段落・リスト・リンクなど基本タグの使い方を一通り学ぶことができます。
以下はHTMLで作成した自己紹介ページの例です。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>私のプロフィール</title> </head> <body> <h1>山田 太郎</h1> <p>Web制作を勉強中の初心者です。</p> <h2>趣味</h2> <ul> <li>読書</li> <li>旅行</li> <li>プログラミング</li> </ul> <p><a href="https://example.com">ポートフォリオを見る</a></p> </body> </html> |
簡単な会社紹介ページのコード例
次に、会社概要ページをイメージしたサンプルを作ってみましょう。
Webサイトでは会社紹介ページがよく使われ、実務でも頻出します。構成や情報の整理の練習にもなります。以下は架空の企業紹介ページのサンプルコードです。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>株式会社サンプル</title> </head> <body> <h1>株式会社サンプル</h1> <p>私たちはWeb制作とシステム開発を行う会社です。</p> <h2>事業内容</h2> <ul> <li>ホームページ制作</li> <li>システム開発</li> <li>ITコンサルティング</li> </ul> <h2>会社情報</h2> <table border="1"> <tr><th>会社名</th><td>株式会社サンプル</td></tr> <tr><th>所在地</th><td>東京都新宿区1-1-1</td></tr> <tr><th>設立</th><td>2020年4月</td></tr> </table> </body> </html> |
表やリストなどの構造的なタグも使いながら、実際の企業ページに近い形に仕上げることができます。
お問い合わせフォームのコード例
ユーザーから情報を集めるために必要なお問い合わせフォームも、HTMLだけで作成可能です。
フォームの作り方を覚えることで、実務的なページ制作に一歩近づけます。JavaScriptやバックエンドとの連携は別として、基本の構文を理解することが重要です。
以下はシンプルなお問い合わせフォームの例です。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>お問い合わせ</title> </head> <body> <h1>お問い合わせフォーム</h1> <form action="#" method="post"> <p>お名前：<input type="text" name="name"></p> <p>メールアドレス：<input type="email" name="email"></p> <p>お問い合わせ内容：<br> <textarea name="message" rows="5" cols="40"></textarea></p> <p><button type="submit">送信</button></p> </form> </body> </html> |
フォームタグの使い方を覚えることで、実践的なWebページへの応用力が一気に高まります。
関連記事
JavaScriptでできること17選！Webサイトやゲームのサンプルも紹介
6.まとめ
本記事では、HTMLとは何かをはじめCSSとの役割の違いや連携方法、ファイル作成・表示の手順、主要タグの使い方など、初心者が押さえるべき要素を体系的に紹介しました。
自己紹介ページや会社概要、お問い合わせフォームといった実践的なサンプルを通じて、学んだ知識を即座に活かしましょう。
本記事が皆様にとって少しでもお役に立てますと幸いです。
「フリーランスボード」は、数多くのフリーランスエージェントが掲載するITフリーランスエンジニア・ITフリーランス向けの案件・求人を一括検索できるサイトです。
開発環境、職種、単価、稼働形態、稼働日数など様々な条件から、あなたに最適なフリーランス案件・求人を簡単に見つけることができます。
単価アップを目指す方や、自分の得意なスキルを活かせる案件に参画したい方は、ぜひ「フリーランスボード」をご利用ください。
自身に最適なフリーランスエージェントを探したい方はこちらよりご確認いただけます。