【入門編】HTMLを学ぼう
Webページ作成に欠かせない言語の1つとして、HTML（HyperText Markup Language）が挙げられます。HTMLの役割は、Webページの内容を構造化させることであり、文字や画像、動画、リンクなどの要素をバランス良くWebページ内に配置します。
HTMLは基本的な構造がシンプルであり、習得難易度は比較的容易ですが、タグの種類やプロパティの書き方など覚えることが多いため、ある程度の勉強時間は必要です。
そこで、この記事では、HTMLの入門編として基礎知識や開発環境、基本構造について解説します。まずはHTMLの基礎知識から確認していきましょう。
HTMLとは
HTMLはハイパーテキスト記述言語です。ハイパーテキストとは、複数の文書を相互参照するためのリンク（ハイパーリンク）機能を有する仕組みを指し、Webを始めとするWeb系システムで標準利用されています。
WebコンテンツのほとんどはHTMLで記述されており、HTTP通信プロトコルを用いて、WebサーバーとWebクライアント間でコンテンツの通信を行います。また、直接PCに格納されたHTML文書をブラウザで表示することも可能です。
HTMLの仕様
HTMLの仕様は、Web Hypertext Application Technology Working Group（WHATWG）が策定し、World Wide Web Consortium（W3C）で勧告されていますが、現在の仕様は、HTML Living Standardです。
【参考】：WHATWG HTML Living Standard
HTMLに必要なもの
HTMLはハイパーテキストを記述する言語なので、テキスト文書を作成する環境があればすぐにでも開始できます。具体的にはHTMLを編集するためのエディタ、およびHTMLを表示するブラウザの準備ができれば問題ありません。動作環境はクライアントPCで作業できれば十分です。
HTMLの開発環境
前述の通り、HTMLの開発環境で必要なものはテキストエディタとブラウザです。ここでは、この2つについて、具体的にどのようなものが必要なのか解説します。
テキストエディタ
テキストエディタとは、テキストの入力や編集を行う際に利用するソフトのことです。文字や記号の入力、編集、保存、プレビューなどが実行でき、テキストファイル以外にも、プログラミングを扱うファイルの編集も行えます。
テキストエディタは100種類以上あるとされており、その中から自分に合うエディタを選択します。PCのOSに対応していたり、日本語に対応していたり、拡張機能の有無やリサーチ情報は豊富かなど、エディタ選びにおける必須項目をピックアップしておきましょう。
ブラウザ
ブラウザとはWebサイトを開くためのソフトウェアであり、Webサイトを開くには、Webサーバーと呼ばれるWebサイトを他者に提供しているサーバーと通信を行う必要があります。
PC単体ではWebサーバーと通信は行えないため、ブラウザが必要です。ブラウザにはいくつか種類があり、代表的なものとしては、Microsoft EdgeやGoogle Chrome、Safari、Firefoxなどが挙げられます。それぞれ機能や性能が異なるため、使いやすいブラウザを選択しましょう。
HTMLの基本構造
HTMLの基本構造は、以下の要素から構成されます。
◼︎文書型宣言 ・タグ：<!DOCTYPE html> ・このテキストが最新HTMLであることを表す（他のバージョンを指定することも可能）
◼︎html要素 ・タグ：<html></html> ・head要素とbody要素から成り立つ
◼︎head要素 ・タグ：<head></head> ・文書ヘッダーの明示（ブラウザに表示されない部分） ・meta要素（文書情報）、link要素（他との関連情報）、title要素（タイトル情報）から成り立つ
◼︎body要素 ・タグ：<body></body> ・文書内容の明示（ブラウザに表示される部分） ・article要素から成り立つ（記事であることを明示）
各要素は<要素>として宣言し、</要素>として括ります。
【使用例】
<!DOCTYPE html>
<html>
<head>
<title>この文章のタイトル</title>
</head>
<body>
ここに必要な文書内容を書きます
</body>
</html>
残る作業は必要な体裁を整えたり見栄えを良くしたりする処理を行うだけです。なお<!-- -->はコメントを表しますので適宜利用します。
HTMLで使う要素とタグ
HTMLの要素とはHTMLの文書を構成するものであり、タグはその要素を認識するための記号（<></>）を意味します。各要素は、「開始タグ（<>）」と「内容」、「終了タグ（</>）」から成り立ちます。
さらに、要素に「属性」を追加指定することも可能です。属性とは要素で用いる各種設定を変更したり、動作を微調整したりするものを指します。
HTMLの基本構造の要素は以上です。あとは必要な要素を組み合わせるだけで、HTML文書が簡単に作成できます。
HTMLの体裁を整える方法
HTML文書の体裁を整えるために、以下の代表的な要素が用意されています。
◼︎段落（ページレイアウト）の構成要素 段落（ページレイアウト）の構成要素は、文書を構成する基本要素を指します。 ・p：段落構成の明示 ・pre：整形済みテキストとする ・hr：水平線を引く（終了タグなし） ・br：明示的な改行を行う（終了タグなし）
【使用例】
<p> <!-- 段落の始め -->
文章を入力します
<pre>整形済み文章です</pre>
文章を入力します<br>ここから次の行に改行されます
<hr><!-- 水平線を引きます -->
</p> <!-- 段落の終了-->
◼︎見出しの構成要素 見出しの構成要素は、見出しの種類を宣言します。 ・h1～h6：見出しの指定、h1が最上位
【使用例】
<p> <!-- 段落の始め -->
<h1>大見出しです</h1>
<h2>2番目の見出しです</h2>
中見出しの文章を入力します
中見出しの文章を入力します
<h3>3番目の見出しです</h3>
小見出しの文章を入力します
小見出しの文章を入力します
</p> <!-- 段落の終了 -->
◼︎リスト（項目表示）の構成要素 リストの構成要素は、リスト化された項目を指定した項目番号あり・なしで表示します。 ・li：リスト項目の指定（終了タグは省略可能） ・ol：順序付きリスト、typeでリスト項目番号（1、A、a、I）を指定可能 ・ul：順序なしリスト、typeでリスト項目マーク（disc、circle、sqare）を指定可能
【使用例】
<p> <!-- 段落の始め →
<h2>リスト表示です</h2>
<ul>
<li>リスト項目の1番目です（項目番号なし）</li>
<li>リスト項目の2番目です（項目番号なし）</li>
<li>リスト項目の3番目です（項目番号なし）</li>
</ul>
<ol>
<li>リスト項目の1番目です（項目番号あり）</li>
<li>リスト項目の2番目です（項目番号あり）</li>
<li>リスト項目の3番目です（項目番号あり）</li>
</ol>
</p> <!-- 段落の終了 -->
◼︎表（テーブル）の構成要素 表の構成要素は、表形式データ等の情報を表示します。本構成要素はHTML Living Standardで非推奨属性や廃止属性があり、CSSで代替可能です。 ・table：表の構成要素を宣言する ・tr：表の行 ・th：ヘッダのセル ・td：データのセル
【使用例】
<p> <!-- 段落の始め -->
<h2>表の表示です</h2>
<table>
<tr>
<th>表の項目</th>
<th>列1の項目</th>
<th>列2の項目</th>
</tr>
<tr>
<td>行1の項目</td>
<td>行1列1の情報を書きます</td>
<td>行1列2の情報を書きます</td>
</tr>
<tr>
<td>行2の項目</td>
<td>行2列1の情報を書きます</td>
<td>行2列2の情報を書きます</td>
</tr>
</table>
</p> <!-- 段落の終了 -->
見栄え調整や関連情報の追加
HTML文書の見栄え調整や情報追加のために、以下の代表的な要素が用意されています。
◼︎フォントの構成要素 フォントの構成要素は、フォントを装飾します。 ・i：斜体（イタリック）を指定 ・b：太字（ボールド）を指定 ・small：文字の縮小
【使用例】
<p> <!-- 段落の始め -->
このフォントは<i>斜体</i>です
このフォントは<b>太字</b>です
このフォントは<small>小文字</small>です
</p> <!-- 段落の終了 -->
◼︎リンク構成要素 リンク構成要素はハイパーリンクを作成します。 ・a：アンカーを指定し、ハイパーリンクを作成する
【使用例】
<p> <!-- 段落の始め -->
<a href="https://sample.sample-domain.com/sample" >Sample URLのリンクで
</a>
</p> <!-- 段落の終了 -->
◼︎画像構成要素 画像構成要素は、画像を文書に埋め込む指示を行います。 ・img：埋め込み画像の表示、終了タグはなし
【使用例】
<p> <!-- 段落の始め -->
<img src="sample_picture.jpg" alt="サンプル画像">
</p> <!-- 段落の終了 -->
見栄えをさらに良くする方法
HTMLの見栄えをさらに良くするために、CSSが用いられています。CSS（Cascading Style Sheets）とは、構造化文書の見た目を記述するための言語であり、HTMLに代表されるマークアップ言語で記述された文書のスタイルを指定します。具体的には、文書のフォントやレイアウト・色等を指定し文書の表現力を高めます。
使用方法は、<style></style>で括ったタグの間をstyle要素として処理する他、style属性やlink要素を用います。ここでは、フォントの指定や文字色・背景色、幅等が詳細に指定できます。
HTML Living Standardでは、文字の大きさや種類・色などの見栄えの指定はCSSが担当し、文書の情報構造はHTMLが担当します。そのため、HTMLとCSSを併用することでデザイン性の高いWebページが作成可能です。
HTMLでよく使用するタグ
ここでは、実際にHTMLで頻繁に使用するタグを3つ紹介します。それぞれ特徴やコード例も紹介するので、ぜひ参考にしてください。
pタグ
タグは、HTMLにおいて段落を意味します。HTMLでは改行の際に使用するタグがいくつか存在し、<p>タグはブロック要素の区切りを表します。文章の一部を区切って表示する、最も基本的なタグの1つです。
書き方としては、<p> で段落の開始を示し、</p> で終了します。実際に使用してみると、以下のようになります。
<p>HTMLはウェブページを作成するための基本的な言語です。</p>
<p>CSSを使ってデザインを加え、JavaScriptを使用して動的なコンテンツを追加します。</p><p>タグの改行方法としては、<br>タグがあります。<p>タグとの違いは、使用目的と動作にあります。<p>タグは段落を区切りたい際に使用し、<br>タグはテキスト内で改行したい際に使用します。
h1～h6タグ
Webサイトでは、文章を読みやすくするために「見出し」を活用して内容ごとに区切りを設けます。この見出しを作成するのが、<h1>〜 <h6> タグです。
<h1>や<h2>などに入る数字は見出しの種類を表し、<h1>は最も重要な見出しで、ページのタイトルや最上位のセクションタイトルに使用されます。
実際に使用してみると、以下のようになります。
<h1>これは最も重要な見出しです</h1>
<p>このページの内容について説明しています。</p>
<h2>これはサブセクションの見出し</h2>
<p>このセクションに関連する内容です。</p>
<h3>さらに細かいサブセクションの見出し</h3>
<p>この部分は更に詳しい情報が書かれています。</p>imgタグ
HTMLで画像を表示させたい場合は、<img>タグを使用します。画像をWebページに埋め込むための方法であり、画像のURLを指定することで、画像を表示させます。
<img>タグは単一のタグであり、終了タグは不要です。実際に使用してみると、以下のようになります。
<img src="image.jpg" alt="画像の説明">また、<img>タグにはいくつか属性があり、画像のファイルパスやURLを指定する「src（source）」、画像の表示サイズを指定する「width」や「height」、画像の遅延読み込みを指定する「loading」などがあります。実際のコードは、「src」を例に挙げると以下のように記述します。
<img src="image.jpg" alt="サンプル画像">HTMLの学習方法
HTMLを習得するには、Webサイトの模写や参考書の活用が有効です。ここでは、Webサイトを模写する手順やおすすめの参考書を紹介します。
サイトを模写する
HTMLは座学で培う知識も重要ですが、実際に手を動かしながら学習する方法が最も効果的です。それには、Webサイトを模写する方法がおすすめです。実際にサイトを模写することで、実践的なHTMLのスキルが身に付くことはもちろん、CSSの理解も深まります。
具体的な手順としては、まず模写したいWebサイトを選び、ブラウザの開発者ツールを使用します。Google Chromeの場合は、右クリックで「検証」を選択して開発者ツールを起動します。
「Elements」タブではページのHTML構造を見て、タグがどのように使用されているかをチェックし、「Styles」タブではCSSスタイルを確認できます。必要な部分のみテキストエディタにコピーし、実際に書き換えて模写を始めましょう。書き終えたらブラウザで表示してチェックし、ミスがあれば都度修正します。
参考書を活用する
HTMLの知識やスキル習得においては、知識を体系的にまとめられた参考書を活用する方法が有効です。ここでは、おすすめの参考書をいくつか紹介します。
「HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門」 本書では、納品レベルのWebサイトを作成するためのノウハウを紹介しています。HTML・CSSの実践的な知識を習得し、現場レベルのコーディングスキルを身に付けられる書籍です。
▪著者：小豆沢健 ▪ページ数：576ページ ▪出版社：技術評論社 ▪発売日：2025/1/14 【参考】：HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門
「デザインの学校 これからはじめる HTML&CSSの本 ［改訂第3版］」 本書はシリーズ58万部を突破した人気の参考書であり、0からHTML・CSSを習得したい人におすすめです。よく使用されるHTMLの要素やCSSのプロパティの意味が丁寧に解説されており、手順通りにコーディングしていくことで、Webページを1から作成できます。
▪著者：（著）千貫 りこ、（監修）ロクナナワークショップ ▪ページ数：192ページ ▪出版社：技術評論社 ▪発売日：2025/2/20 【参考】：デザインの学校 これからはじめる HTML&CSSの本 ［改訂第3版］
HTMLの基本を理解してWebドキュメント作成しよう
HTMLはWebコンテンツに必須の記述言語です。HTMLの基本構造は複雑なものではありません。HTMLに慣れたら、次はコンテンツの見栄えを高めるためにCSSに挑戦しましょう。実際のWebコンテンツ作成には、HTMLとCSSをセットでメンテナンスする必要があるため、さらに理解を深めることをおすすめします。
その他のHTML関連記事
その他、HTMLに関連する内容は、下記の記事でもご紹介しています。ぜひ参考にご覧ください。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
ホーム
カテゴリ
フォロー