6日でできる 新HTML入門｜HTMLと作成手順

HTMLを知ることは、Webページづくりの入口に立つこと。まずは文字を書き、タグで意味を付け、ブラウザに表示する基本の流れを身につけましょう。

Webページは、ブラウザに表示される画面だけを見ると、文字や画像がきれいに並んだ完成品のように見えます。しかし、その裏側にはHTMLという文書があり、ページの内容や構造をブラウザに伝えています。

HTMLは、Webページを作るための基本となる言語です。見出し、段落、リンク、リストなどをタグで指定することで、ブラウザはページの内容を理解し、人が読みやすい形で表示します。

HTMLの学習では、最初から複雑なページを作る必要はありません。まずはテキストエディタでHTMLファイルを作成し、.htmlという拡張子で保存し、ブラウザで表示する流れを覚えることが大切です。この基本操作が分かると、Webページがどのように作られ、どのように表示されるのかが見えてきます。

ここでは、HTMLとは何か、HTMLの歴史、HTMLが使われている場所、HTMLがブラウザで表示される仕組みを確認しながら、初めてのHTMLファイル作成手順をやさしく解説していきます。

HTMLとは何か

HTMLは、HyperText Markup Languageの略です。Webページの文章に意味を付け、ブラウザに文書の構造を伝えるための言語です。

たとえば、ただ文字を入力しただけでは、それがページの大きな見出しなのか、本文なのか、リンクなのかをブラウザは正しく判断できません。そこでHTMLでは、h1、p、a、ul、liなどのタグを使って、文章や情報に役割を与えます。

h1は大きな見出し、pは段落、aはリンク、ulは順序のないリスト、liはリストの項目を表します。HTMLは、このようなタグを使って、Webページの骨組みを作っていきます。

HTMLで表す内容使用するタグの例役割
ページの大きな見出しh1ページの主題を示す
小さな見出しh2、h3内容のまとまりを示す
文章の段落p本文のまとまりを示す
リンクa別のページやURLへ移動できるようにする
リストul、li項目を一覧として表示する
ブラウザに表示する内容body画面に表示される部分を書く

HTMLは、見た目を細かく装飾するための言語ではありません。HTMLの主な役割は、ページの内容に意味を与え、文書構造を作ることです。文字の色や余白、背景などの見た目については、後のCSSの記事で学習します。

図1：HTMLはWebページの骨組みを作る

この図から分かること

この図では、HTMLがWebページの土台を作る役割を持っていることを表しています。

Webページは、いきなり完成した見た目として作られるのではありません。まずHTMLで、どこが見出しなのか、どこが本文なのか、どこがリンクなのかを決めていきます。つまりHTMLは、ブラウザに対してページの中身と構造を伝えるための設計図のようなものです。

HTMLの学習では、最初に見た目のきれいさを追いかけるよりも、タグの役割を理解することが大切です。タグの意味が分かると、ページの構造を整理して作れるようになります。

HTMLの歴史

HTMLは、Webの誕生とともに発展してきた重要な技術です。もともとは、研究者同士が文書を共有し、関連する情報へすばやく移動できるようにするために考えられました。

HTMLの大きな特徴のひとつが、リンクです。リンクをクリックすると別のページへ移動できる仕組みは、現在のWebサイトでも当たり前のように使われています。このリンクによって、世界中の情報がつながり、Webは大きく広がっていきました。

初期のHTMLは、見出し、段落、リンクなど、文書を分かりやすく構造化することが中心でした。その後、Webが一般に普及するにつれて、画像、表、入力フォームなども扱われるようになりました。

現在よく使われているHTML5では、Webページの構造をより分かりやすく表現できるようになっています。たとえば、header、main、section、article、footerなどのタグを使うことで、ページのどの部分がヘッダーなのか、本文なのか、記事なのか、フッターなのかを明確にできます。

時代HTMLの特徴
初期のHTML文書を共有し、リンクで情報をつなぐことが中心
Web普及期画像、表、フォームなどを含むページが増える
HTML4の時代多くのWebサイトで広く利用される
HTML5の時代ページ構造をより分かりやすく表現できるようになる

HTMLは長い歴史を持っていますが、現在でもWeb制作の基本です。新しい制作ツールやWebサービスを使う場合でも、ブラウザが読み取るページの中心にはHTMLがあります。

HTMLはどのようなところで使われているか

HTMLは、私たちが普段見ている多くのWebページで使われています。企業サイト、ブログ、ニュースサイト、ネットショップ、学校サイト、予約ページ、会員登録ページなど、ブラウザで表示されるページの土台にはHTMLがあります。

企業サイトでは、会社名、サービス内容、お知らせ、お問い合わせ先などをHTMLで構成します。ブログでは、記事タイトル、本文、カテゴリ、関連記事へのリンクなどをHTMLで表します。ネットショップでは、商品名、商品説明、価格、商品画像への説明、購入ページへのリンクなどにHTMLが使われます。

使われる場所HTMLで表す内容の例
企業サイト会社概要、サービス紹介、お知らせ、問い合わせリンク
ブログ記事タイトル、本文、カテゴリ、関連記事リンク
ニュースサイト見出し、記事本文、日付、関連ニュース
ネットショップ商品名、説明文、価格、購入ページへのリンク
学校サイトお知らせ、授業案内、資料ページへのリンク
予約サイト予約説明、入力ページへの案内、注意事項

また、HTMLはWebページだけでなく、HTMLメールやWebアプリの画面でも使われます。問い合わせフォーム、ログイン画面、管理画面なども、基本的にはHTMLで構造が作られています。

このようにHTMLは、情報を画面に分かりやすく表示するための基本技術です。Web制作を学ぶうえで、最初に身につけておきたい大切な知識といえます。

HTMLの動作の仕組み

HTMLファイルは、文字で書かれたテキストファイルです。メモ帳やVSCodeなどのテキストエディタで作成できます。ファイル名の末尾を.htmlにして保存すると、ブラウザはそのファイルをHTML文書として読み取ります。

ブラウザはHTMLを上から順番に読み込み、タグの意味を解釈します。そして、h1なら見出し、pなら段落、aならリンク、ulとliならリストというように、画面に表示する形へ変換します。

HTMLが表示される流れは、次のように考えると分かりやすいです。

手順内容
HTMLを書くテキストエディタでタグを使って文書を作る
.htmlで保存するブラウザがHTMLファイルとして認識できるようにする
ブラウザで開くChromeやEdgeなどでHTMLファイルを読み込む
ブラウザが解釈するタグや属性を読み取り、文書構造を理解する
画面に表示する見出し、文章、リンク、リストとして表示される

HTMLでは、タグだけでなく属性も使います。属性は、タグに追加情報を与えるものです。

たとえば、htmlタグのlang属性は、ページで使われている言語を示します。metaタグのcharset属性は、文字コードを指定します。aタグのhref属性は、リンク先を指定します。このように属性を使うことで、タグにより詳しい情報を持たせることができます。

図2：HTMLファイルがブラウザに表示される流れ

この図から分かること

この図では、HTMLを書いてからブラウザに表示されるまでの流れを示しています。

HTMLファイルは、最初はただのテキストファイルです。しかし、.htmlという拡張子で保存し、ブラウザで開くことで、ブラウザがタグを読み取り、Webページとして表示します。

HTMLの学習では、この流れを実際に体験することがとても大切です。コードを書き、保存し、ブラウザで確認することで、タグがどのように画面に反映されるのかを理解しやすくなります。

HTMLファイルの基本構造

HTMLファイルには、基本となる形があります。この形を覚えておくと、新しいページを作るときに迷いにくくなります。

要素役割
HTML5で書かれた文書であることを宣言する
htmlHTML文書全体を囲む
headページの設定情報を書く
meta文字コードなどの情報を指定する
titleブラウザのタブなどに表示されるタイトルを指定する
bodyブラウザ画面に表示される内容を書く

headの中には、ページそのものに関する設定を書きます。たとえば、文字コードやページタイトルなどです。headに書いた内容の多くは、ブラウザ画面の本文部分には直接表示されません。

bodyの中には、実際に画面に表示したい内容を書きます。見出し、段落、リンク、リストなど、利用者が読む部分はbodyの中に記述します。

このheadとbodyの役割の違いを理解しておくと、HTMLファイルの全体像がつかみやすくなります。

HTMLファイルを作成する準備

HTMLファイルは、テキストエディタで作成できます。Windowsであれば、メモ帳を使って作成できます。より本格的に学習を進める場合は、VSCodeのようなコードエディタを使うと便利です。

メモ帳はすぐに使えるため、HTMLが普通のテキストファイルで作れることを体験するのに向いています。一方、VSCodeはタグの色分けや入力補助があり、HTMLの記述を見やすく管理しやすい特徴があります。

比較項目メモ帳VSCode
準備のしやすさWindowsに標準で用意されているインストールが必要
文字の色分けなしあり
入力補助なしタグの入力補助がある
ファイル管理単体ファイルの編集に向いているフォルダ単位の管理に向いている
学習初期の使いやすさHTMLの仕組みを体験しやすい実践的な制作に向いている

最初はメモ帳でHTMLを作成しても問題ありません。慣れてきたらVSCodeを使うと、ファイルの管理や編集がしやすくなります。

HTMLファイルを作成してみよう

ここでは、学習メモを表示する簡単なHTMLページを作成します。見出し、段落、リスト、リンクを使い、HTMLの基本的な構造を確認できる内容にしています。

見た目を整えるCSSは、ここではまだ使用しません。CSSについては、CSSを学習する記事以降で扱います。まずはHTMLだけで、ページの構造を作ることに集中しましょう。

ファイル名： Lesson1-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML学習メモ</title>
</head>
<body>
  <h1>HTML学習メモ</h1>

  <p>このページは、HTMLの基本を学ぶために作成したサンプルページです。</p>

  <h2>今日学ぶ内容</h2>
  <ul>
    <li>HTMLファイルの基本構造</li>
    <li>見出しと段落の書き方</li>
    <li>リストの作り方</li>
    <li>リンクの作り方</li>
  </ul>

  <h2>参考ページ</h2>
  <p>HTMLの学習を進めるために、次のページも確認してみましょう。</p>
  <p><a href="https://www.infra-linux.com/">Linux学習サイトを見る</a></p>
</body>
</html>

テキストエディタでの編集

ここでは、手軽にHTMLファイルの作成と編集ができるWindowsの「メモ帳」を例に説明します。

「メモ帳」は、スタートメニューから「すべて」→「メモ帳」と選択すると起動できます。
ファイル名は「Lesson1-1.html」で保存します。

ブラウザの表示例

サンプルHTMLで使っているタグの役割

このサンプルでは、HTMLの基本となるタグを使っています。まずは、それぞれのタグがどのような意味を持っているのかを確認しましょう。

タグ役割
HTML5文書であることを宣言する
htmlHTML文書全体を囲む
headページの設定情報を書く
meta文字コードなどの情報を指定する
titleブラウザのタブなどに表示されるタイトルを書く
bodyブラウザ画面に表示される内容を書く
h1ページ全体の大きな見出しを書く
h2内容のまとまりごとの見出しを書く
p段落を書く
ul順序のないリスト全体を表す
liリストの項目を表す
aリンクを作る

htmlタグは、HTML文書全体を囲むタグです。HTMLファイルの大きな入れ物と考えると分かりやすいです。

headタグの中には、ページに関する情報を書きます。今回のサンプルでは、文字コードを指定するmetaタグと、ページタイトルを指定するtitleタグを書いています。

bodyタグの中には、実際にブラウザ画面へ表示される内容を書きます。今回のサンプルでは、h1、p、h2、ul、li、aなどがbodyの中に入っています。

h1タグは、ページ全体の大きな見出しに使います。基本的には、1つのページの主題を表す大切な見出しです。

h2タグは、ページ内の内容を分ける見出しとして使います。今回のサンプルでは、今日学ぶ内容と参考ページというまとまりを作るために使っています。

pタグは、文章の段落を表します。本文を書くときによく使う基本的なタグです。

ulタグとliタグは、箇条書きのリストを作るために使います。ulタグでリスト全体を囲み、その中にliタグで項目を書きます。

aタグは、リンクを作るためのタグです。href属性でリンク先を指定し、タグで囲んだ文字がクリックできるリンクになります。

サンプルHTMLで使っている属性の役割

HTMLでは、タグに属性を追加して、より詳しい情報を指定できます。今回のサンプルでは、lang、charset、hrefという属性を使っています。

属性使われている場所役割
langhtmlタグページの主な言語を指定する
charsetmetaタグ文字コードを指定する
hrefaタグリンク先のURLを指定する

htmlタグにあるlang="ja"は、このページが日本語のページであることを示します。検索エンジンや読み上げソフトなどが、ページの言語を理解しやすくなります。

metaタグにあるcharset="UTF-8"は、文字コードを指定しています。日本語を正しく表示するために重要な指定です。この指定がない場合や、保存時の文字コードと合っていない場合、文字化けが起こることがあります。

aタグにあるhref="https://www.infra-linux.com/"は、リンク先を指定しています。href属性があることで、Linux学習サイトを見るという文字をクリックしたときに、指定されたURLへ移動できるようになります。

ファイルを保存するときのポイント

HTMLファイルを作成したら、正しい形式で保存する必要があります。メモ帳で保存する場合は、ファイル名と文字コードに注意しましょう。

設定項目指定内容
ファイルの種類すべてのファイル
ファイル名Lesson1-1.html
文字コードUTF-8
保存場所分かりやすい作業用フォルダ

ファイル名の末尾は.htmlにします。たとえば、Lesson1-1.htmlのように保存します。

注意したいのは、Lesson1-1.html.txtのように保存されてしまう場合です。これは、テキストファイルとして保存されており、HTMLファイルとして扱いにくくなります。メモ帳で保存するときは、ファイルの種類ですべてのファイルを選び、ファイル名に.htmlを付けるようにしましょう。

文字コードはUTF-8を選びます。HTML内でもを指定しているため、保存時の文字コードもUTF-8にそろえておくと安心です。

HTMLファイルをブラウザで表示する

保存したHTMLファイルは、ダブルクリックするとブラウザで開くことができます。Chrome、Edge、Firefoxなど、普段使っているブラウザで表示できます。

エクスプローラー上で lesson01.html のアイコンをダブルクリックすると、既定のWebブラウザでページが表示されます。

ブラウザでの表示例

ブラウザで開いたら、次の内容が表示されているか確認しましょう。

確認する内容見るポイント
ブラウザのタブHTML学習メモと表示されているか
大きな見出しHTML学習メモが表示されているか
段落説明文が表示されているか
リスト学習内容が箇条書きで表示されているか
リンクHTML学習サイトを見るがクリックできるか
文字化け日本語が正しく表示されているか

HTMLは、書いた内容をブラウザで確認しながら学ぶと理解しやすくなります。コードを書いたら保存し、ブラウザで表示を確認する。この流れを何度も繰り返すことで、タグの働きが自然に身についていきます。

HTMLファイルを再編集する方法

HTMLファイルをダブルクリックすると、通常はブラウザで開きます。表示確認をする場合はそれで問題ありませんが、内容を修正したいときはテキストエディタで開く必要があります。

Windowsでは、HTMLファイルを右クリックし、プログラムから開くを選び、メモ帳やVSCodeを選択します。すると、HTMLのコードを編集できます。

編集したら、上書き保存します。その後、ブラウザに戻って再読み込みを行うと、変更した内容が反映されます。ブラウザの更新ボタンを押すか、F5キーを押すと再読み込みできます。

作業操作
表示するHTMLファイルをダブルクリックする
編集する右クリックしてプログラムから開くを選ぶ
保存するテキストエディタで上書き保存する
反映するブラウザで再読み込みする

HTMLの学習では、少し変更して、保存して、ブラウザで確認する流れがとても大切です。たとえば、h1の文字を変えてみる、liの項目を増やしてみる、リンクの文字を変えてみると、HTMLの働きが分かりやすくなります。

図3：HTML制作は編集と確認のくり返し

この図から分かること

この図では、HTML制作が一度書いて終わる作業ではなく、編集、保存、確認、再編集を繰り返しながら進む作業であることを表しています。

最初から完璧なHTMLを書く必要はありません。少しずつ書いて、ブラウザで表示を確認し、必要に応じて修正していけば大丈夫です。特に学習を始めたばかりのころは、1つタグを書いたら表示を確認するくらいの進め方でも問題ありません。

この繰り返しによって、h1を使うと見出しになる、pを使うと段落になる、ulとliを使うとリストになる、aを使うとリンクになる、という感覚が身についていきます。

ホームページを公開するには

自分のパソコンでHTMLファイルを開くだけでは、まだインターネット上に公開されているわけではありません。他の人にも見てもらうには、HTMLファイルをWebサーバーに置く必要があります。

Webサーバーは、インターネット上でWebページを配信するためのコンピューターです。HTMLファイルをWebサーバーにアップロードすると、URLを通じて他の人がページを見られるようになります。

公開方法には、いくつかの種類があります。

公開方法特徴
FTPソフトを使うFileZillaなどでHTMLファイルをサーバーへ転送する
レンタルサーバーを使う独自ドメインを使った本格的なサイト運営に向いている
CMS型サービスを使うWixやJimdoなどを使い、ブラウザ上でページを作成できる
静的サイト公開サービスを使うHTMLファイルを中心としたシンプルなサイト公開に向いている

FTPソフトを使う場合は、ホスト名、ユーザー名、パスワードなどを設定してサーバーに接続します。そして、HTMLファイルを公開用フォルダへアップロードします。

トップページとして公開するファイルには、index.htmlという名前がよく使われます。会社紹介のページならcompany.html、お問い合わせページならcontact.html、学習メモのページならstudy-note.htmlのように、内容が分かりやすいファイル名にすると管理しやすくなります。

CMS型サービスを使う場合は、FTPの設定をしなくても、ブラウザ上でページを作成して公開できます。ただし、HTMLの基本を理解していると、ページの構造を考えたり、トラブルの原因を見つけたりするときに役立ちます。

HTML学習で大切にしたいこと

HTMLを学ぶときは、タグをただ暗記するよりも、タグの意味を理解することが大切です。h1は文字を大きくするためだけのタグではなく、ページの主題を示す重要な見出しです。pは単に改行するためのタグではなく、文章の段落を表すタグです。

このように、それぞれのタグが何を表しているのかを考えながら書くと、分かりやすく整理されたHTMLを作れるようになります。

また、HTMLはWebページの構造を作るためのものです。見た目の調整は、後でCSSを使って行います。まずはHTMLで、見出し、段落、リスト、リンクなどを正しく書けるようになることを目指しましょう。

短いHTMLファイルを作り、保存し、ブラウザで確認する。この基本操作を繰り返すことで、HTMLの仕組みが少しずつ身についていきます。