Webプログラミングを学ぶ上で基本となるのが、｢HTML｣と呼ばれる言語。私たちが普段目にしているWebサイトも、このHTMLによって作られています。

しかし、HTMLという言葉は聞いたことがあっても、具体的にどんなものか知らない人も多いのではないでしょうか。

本記事では、HTMLの基礎知識として構成要素やタグの種類、HTMLを使ったWebサイトの作り方を初心者向けにわかりやすく説明します！

プログラミングやWeb制作に興味のある方は、ぜひ参考にしてみてください。

HTMLとは

HTMLとはマークアップ言語のひとつで、Webサイトに表示させる情報（文章や見出し、画像など）を記述するために使われます。

そもそもなぜそのような言語が必要なのかというと、コンピュータは人の言葉を理解することができません。

そのため、HTMLを使って、表示させたい情報をコンピュータが理解できる言語に翻訳してあげる必要があるのです。

具体的には、テキストの中で「ここはページの見出しです」「ここは文章です」「ここの文字は太字です」といった意味をコンピュータに伝えるために、「タグ＜＞」と言われるマークを入れ込み、コンピュータ用の言語（HTML）に変換していきます。

要するに、HTMLはWebサイトの設計図のようなもので、Webページ内のテキストがどのような役割を持っているか指定する際に使うものだと理解しておきましょう。

ちなみにマークアップ言語とは、人間の言葉をコンピュータが理解できるように変換した言語のことを指し、HTMLの他にはXML、XHTML、SGMLなどがあります。

また、HTMLをプログラミング言語として認識している人も多いかもしれませんが、プログラミング言語はコンピュータに計算処理を行う指示を出すものなので別物です。

CSSとの違い

HTMLとよくセットで見かけるものに「CSS」があります。HTMLとCSSの違いは以下のとおり。

これは、HTMLで記述したサイトの構造に、CSSでどんな見た目にするかのデザインを施すものです。

つまり、Webページの見た目は、HTMLだけでなくCSS組み合わせることで決まるということ。

HTMLのバージョン

HTMLにはいくつかバージョンがあり、文法や表現できることが異なります。

現時点（2025年1月）では「HTML Living Standard」が最新バージョンであり、HTMLの標準規格です。

このHTML Living Standardによってモダンなデザインの実装が可能になり、Webページの読み込み速度もアップしました。

そんなHTML Living Standardは現在もアップデートが継続的に行われているため、今後も変更・追加・廃止される部分が出てくるでしょう。

HTMLを勉強している方は、定期的にHTML Living Standardの仕様書を見直すのがおすすめです。

HTMLを使ってできること

HTMLを使うと以下のことができます。

Web制作

HTMLが最も使われているのがWeb制作です。

上でも説明した通り、HTMLはWebページの構造化に欠かせません。

具体的には、Webページのテキスト・画像・表などの基礎部分をHTMLで作成します。

HTMLを使ったWebサイトの作り方は後ほど詳しく説明するので、そちらもぜひチェックしてみてください。

HTMLメール作成

HTMLメールの作成も可能です。

HTMLメールは一般的なテキストメールと異なり、装飾されたテキスト・画像・動画によるデザイン性豊かなメールのこと。

視覚的効果によりメールの開封率やクリック率が上がるため、主にメルマガの配信などに使われます。

Webアプリ開発

HTMLはWebアプリの開発も可能。

Webアプリとは、ダウンロードやインストールが不要の、ネットを介してWebブラウザ上で動作するアプリのことです。

例としては、ウェブメールサービスの「Gmail」、動画共有サービスの「YouTube」、インターネット電話サービスの「Skype」などが挙げられます。

ただし、HTMLは静的コンテンツ（文字や画像）を追加する言語です。

動的なコンテンツを追加する場合は、PHPやJavaScriptなどのプログラミング言語を組み合わせる必要があります。

HTMLは【タグ・要素・属性】で構成される

HTMLは｢タグ｣｢要素｣｢属性｣で構成されています。

この3つはHTMLの基本用語でもあるので、ここで各特徴を確認していきましょう。

1. タグ

HTMLのタグとは、テキストや記号に意味を与える印<>（開始タグ）と</>（終了タグ）のこと。

タグを使う目的は、「このテキストの意味は○○です」ということをコンピュータに理解させるためです。

基本的には<>と</>をセットで使い、間に表示させたい内容や詳しい指示を挟んで使います。

そして、タグの山括弧の中（<この部分>）にはタグの種類としてh1、p、aなどを記述します。

これにより、見出しタグなのか、段落タグなのか、リンクタグなのかを指定し、ブラウザ上に適した形で表示します。

ここで、タグの記述例を確認しましょう。

<h1>HTMLの説明書</h1>

これは、「HTMLの説明書」という見出しタイトルをWebサイト上に表示する記述です。

構造を分解して詳しく見てみましょう。

まず、「1番大きな見出し」を意味するタグの種類は「h1」なので、このタグ名を「開始タグ<>」と「終了タグ</>」それぞれの山括弧の中に入れます。つまり、<h1>と</h1>になりますね。

そして、実際にWebサイトに表示させたい内容（HTMLの説明書）の冒頭に<h1>を、テキストの末尾に</h1>を記述して挟みます。

これにより、「HTMLの説明書」というテキストが見出しとして表示されるのです。

タグの種類

HTMLタグは100種類以上あると言われています。ここでは、よく使われるタグとその役割・特徴を見てみましょう。

基本的にこれらのタグは、開始タグと終了タグをセットで使います。しかし中には終了タグがなくても範囲を指定できるタグもあり、詳しくは次の「要素」の章で説明します。

2. 要素

要素とは、開始タグ<>と終了タグ</>で括った部分のテキストや記号すべてを指します。

以下、要素の例です。

<h1>HTMLとは？</h1>

上の例であれば、タグで囲まれたすべての部分<h1>HTMLとは？</h1>が要素です。

先述したとおり、タグは基本的に開始タグと終了タグをセットで使うため、要素の基本の書式は「<>要素の内容</>」となります。

ただし、要素の内容を持たない（<>と</>の中に書く情報がない）タグの場合、中身があるわけではないので、終了タグ</>も要りません。

これを「空要素」と呼びます。どんな時に使うのかというと、HTML文書内に改行や区切り線など挿入したり、画像や動画を埋め込んだりする際に使用します。

例えば以下のようなものが挙げられます。

これらは、「改行を入れる」「区切り線を入れる」「画像を表示する」といった目的で使われ、このタグだけで意味が完結するため<>と</>の間に内容を書く必要がありません。

ここで少し悩ましいのが、「<img>タグは、画像データの情報を書く必要があるのでは？」という点です。確かに、HTML文書内に<img>と記述するだけでは任意の画像を表示することができません。

実際に画像を表示させるには、次で説明する「属性（src）」を用いて画像の読み込み先を指定します。以下、例です。

<img src="画像読み込み元のパス" >

つまり、画像タグは、あくまで外部から情報を取得して表示するものなので、画像データ自体の情報をHTML文書内に書くわけではありません。

そのため、要素の内容を持たない（<>と</>の中に書く情報がない）空要素として定義づけられているのです。

また、空要素は一見デザインを調整するものだと思うかもしれません。しかし、もしこれらの見た目をCSSで指定したとしても、あくまで見た目を変えるだけであって、そこに「改行する」や「画像を挿入する」という意味は持ちません。

3. 属性

属性とは要素に追加する情報のこと。要素に対して特定の性質や動作の情報を与えることで、複雑な表示が可能になります。なお、属性の内容もタグと同じくブラウザ上には表示されません。

属性は開始タグの中に記述し、<タグ名 属性名="属性値">が基本的な書式になります。タグ名の後ろに半角スペースを開け、属性値を囲む引用符はダブルクオート"かシングルクオート'を使えばOKです。

また、属性を複数指定することもでき、以下の例のように半角スペースで区切りながら、すべての属性を記述します。

<タグ名 属性名1="属性値1" 属性名2="属性値2">

属性の種類

属性には、すべての要素に付けられるグローバル属性と、特定の要素にのみ付けられる属性の2種類があります。

よく使われる属性を見てみましょう。

▼すべての要素に付けられるグローバル属性

▼特定の要素にのみ付けられる属性

タグ同様、属性もすべて暗記するのは大変なので、よく使うものから覚えていきましょう。

HTMLを使ったWebサイトの作り方

ここからは、HTMLを使ってWebサイトを作る方法を説明します。

流れは以下のとおりです。

各手順を確認していきましょう。

1.ツールを用意する

まずはツールを用意します。必要なものは以下の通り。

パソコンはネットが使えるスペックであれば十分です。

テキストエディタも、パソコンに標準搭載されているものでOK。Windowsなら「メモ帳」、Macなら「テキストエディット.app」を利用しましょう。

2.HTMLを記述する

テキストエディタを起動したらHTMLを打ち込みましょう。

最初のうちはHTMLテンプレートを検索して、テキストエディタにコピー&ペーストするのがおすすめです。慣れてきたら、自分でタグを組み合わせてコードを書いてみてください。

なお、テキスト部分には好きなことを記述すればOKです。

3.内容を保存する

テキストエディタにHTMLを記述したらファイルに保存しましょう。

保存方法はテキストエディタの種類によって異なるので注意。

メモ帳の場合は、保存すると拡張子が通常テキストファイルの「.txt」になるため、Webページとして表示させるために「.html」へ変更します。

ファイル名を.htmlに変更する方法は以下の通りです。

ファイル名は適当でOKで、後から変更することもできます。

4.ブラウザで確認する

作成したHTMLファイルが、ブラウザ上でちゃんと表示されるかを確認しましょう。

ブラウザとはWebサイトを表示するソフトのことで、「Google Chrome」「Microsoft Edge」「Safari」「Firefox」などが挙げられます。

保存の手順を踏むと、デスクトップにGoogle chromeまたはInternet Exploreのアイコンが表示され、アイコンには保存時に設定したファイル名「○○.html」が付いているはずです。

そしてアイコンをダブルクリックすると自動でWebページが開き、記述したHTMLが実行されます。

HTMLの指示通りにテキストや記号が表示されているかチェックしてみてください。コンテンツの表示崩れなどがある場合は、コードを見直してみましょう。

また、可能であればブラウザ・デバイス・バージョンなどを変えて、コンテンツがうまく表示されるか確認してみるのがおすすめです。

5.Webサイトを公開する

ブラウザで確認して問題がなければ、Webサイトをネット上に公開しましょう。

公開の手順は以下の通りです。

ドメインはドメイン販売サービスを利用して取得します。また、自社サーバーを構築すると費用がかかりメンテナンスも大変なので、レンタルサーバーを利用するのが一般的です。

ドメインとサーバーをつなぐにはサーバーにドメインを登録し、ネームサーバーを設定します。ネームサーバーの設定は、ドメインを取得したドメイン販売サービスの管理画面から行ってください。

最後にFTPソフトを使って取得したドメインのホストアドレスにアクセスして、Webサイトのデータをサーバーにアップロードすれば公開できます。

HTMLをマスターするなら実際に書いてみよう

HTMLを使いこなすには、実際にコーディングを行って経験を積むことが大切です。タグや属性の使い方がある程度理解できたら、実践的なプロジェクトに取り組んでみましょう。

練習であれば、参考サイトや書籍などに載っているサンプルコードやテンプレートをそのまま書き写すのもおすすめ。手本を真似ることで、基本的な書き方や正しいコードが頭に入りやすいでしょう。

なお、I-SEEDでは現在Webデザイナーを募集しております。

「これからプロのコーダーとして成長したい！」「HTMLの勉強をしたことがあるから仕事として活かしたい」という方がいらしゃいましたら、挑戦をお待ちしています！

求人の詳細はこちら