スライドショー スライドショー

HTMLとは?基本のタグやできることを世界一わかりやすく解説!

HTMLとは?プログラミング言語じゃないの?
HTMLだけでブログが書けるってホント?特徴やできることが知りたい!

HTMLとはどのような言語なのか、プログラミング言語とは違うのかを区別できない方が少なくないのではないでしょうか。

HTMLを使えば、ブログやLPのような簡単なWebサイトを作れます。

この記事では、HTMLでよく使うタグや基本の文法を初心者向けにわかりやすく解説します。サンプルコードや図を示しながら説明しますので、最後まで読めば、HTMLをすぐ書けるようになるはずです。

HTMLとは?

HTMLとは

皆さんはWebブラウザを通して、ブログやSNSなどのさまざまなWebサイトを閲覧していますよね。このWebブラウザ上に表示するコンテンツの内容を記述しているのが「HTML(エイチ・ティー・エム・エル)」です。

HTMLは「HyperText Markup Language」の略ですが、それぞれの単語は下記のような意味を持っています。

  • HyperText …図表、画像、音声、動画を含むテキストデータを共有して閲覧できるシステム。単なるテキスト(文字)を超えたテキストデータ。
  • Markup   …目印をつける。コンピュータが読み取れるタグをつけること。
  • Language …言語

つまり、HTMLとは「さまざまなデータをコンピュータが読み取れるようにタグ付けする言語」といえます。

HTMLの仕組み

HTMLはプログラミング言語ではなく、文字にタグ(目印)をつけるためのマークアップ言語です。

では、なぜその「文字にタグをつけただけ」のHTMLファイルが、私たちが普段目にしているWebサイトのようにきれいに整って表示されるのでしょうか。その仕組みを解説します。

HTMLファイルがWebページで表示される仕組み

こちらの図は、HTMLファイルがWebページで表示される仕組みを簡単に表したものです。

私たちがパソコンを利用してあるWebページへアクセスすると、サーバーに対してそのページのHTMLファイルを要求します。するとサーバーはその要求に応え、指定されたHTMLファイルをユーザーのパソコンへ送信します。

ただし前述のとおり、HTMLファイルは「タグのついた文字データ」に過ぎません。これを私たちが普段見ているようなWebページとして表示させる必要があります。

その役割を担っているのが、Webブラウザです。Webブラウザは「HTMLパーサー」や「HTMLレンダリングエンジン」といった機能を利用して、HTMLファイルをWebページとして表示させます。

<HTMLファイルをWebページとして表示させるWebブラウザ>

  • Chrome(Google社)
  • Edge(Microsoft社)
  • Safari(Apple社)
  • Firefox(Mozilla社)

HTMLファイルをスマートフォンで見るには?

パソコンやスマートフォンで、WebページのHTMLファイルを見ることができます。

まずはパソコンで、WebページのHTMLファイルを見てみましょう。例えばChromeの場合、閲覧しているWebページ上で右クリックして、「ページのソースを表示」を選択してください。

「ページのソースを表示」を選択

すると、Webページのソース(元)であるHTMファイルが表示されます。

HTMファイルが表示される

スマートフォンでも、HTMLファイルを確認できます。Androidの場合、確認したいURLの先頭に「view-source:」という文字列を付加し、アクセスします。

「view-source:」という文字列を付加してアクセス

View Sourceを起動後、画面上部に対象のURLを入力するとHTMLファイルが表示されます。

iOSにおけるソースコードの確認方法

なお、iPhone(iOS)の場合は、App Storeから専用のアプリをインストールする必要があります。

HTMLを使ってできること

HTMLを使ってできることとして、主に下記の2つが挙げられます。

  • HTMLメールの作成
  • ホームページ

ひとつずつ、見ていきましょう。

HTMLメールの作成

HTMLを使えば、下図のようなHTMLメール(リッチテキストメール)を作れます。

HTMLメール(リッチテキストメール)

ホームページ

HTMLを使えば、簡単なホームページを作成できます。HTMLファイルを作成してWebブラウザで開ければ、Webページをすぐに表示できます。

HTMLは「要素をタグではさむ」というシンプルな文法なので、初心者でも簡単に見出しや段落の作成、画像やリンクの挿入を記述できるでしょう。

なお、レンタルサーバーにHTMLファイルをアップロードすれば、簡単にホームページを公開できます。

HTMLを使ったホームページの作り方についてはこちらの記事で詳しく紹介しているので、併せてご覧ください。

HTMLのホームページは30分で作れる!5つの手順でわかる簡単な作り方
更新日 : 2021年11月17日

HTMLの種類

HTMLの種類

HTMLは1990年代前半に誕生して以来、さまざまな機能が追加され、改善されてきました。そのなかで、開発されながら途中で終了した種類も存在します。

現在、HTMLファイルとして主に使われている種類は次の3つです

HTMLの種類発表された年特徴
HTML 4.011999年・対応Webブラウザが多い。
・スタイルシートに正式対応し、従来使用されてきた装飾用タグが非推奨(廃止勧告)となった。
XHTML 1.02000年・対応Webブラウザが多い。
・現在、広く使われているバージョン。
・HTML 4.01から派生したが、文法などがより厳格になった。
HTML52014年・HTMLの最新バージョン。
・Webブラウザによっては、一部機能非対応。
・Webサイトの構造を示す要素、HTMLのみで動的な表現を可能とする要素などが追加された。

現在の主流は、HTML5です。これから学習するのであれば、特別な理由がない限りHTML5を選択するようにしましょう。

HTML5について詳しく知りたい方は、以下の記事もご覧ください。

HTML5とは?初心者向けに特長や使い方を超わかりやすく説明してみた
更新日 : 2021年10月1日

HTMLの作り方

HTMLの作り方

では早速、HTMLファイルを作ってみましょう。これからご紹介する手順どおりに進めば、誰でも簡単にHTMLファイルを作れます。

メモ帳でもよいですが、HTMLファイル専用エディタを使えば効率的にコーディングできます。HTMLファイルを編集するために便利な機能がたくさん装備されていますので、ぜひ使ってみてください。

HTMLエディタについては、以下の記事で詳しく解説しています。

HTMLエディタで効率アップ!CSSやJavaScriptでも使えるおすすめ6選
更新日 : 2021年5月17日

HTMLファイルを作る

まず、メモ帳などのテキストエディタを起動して、下記のコードをコピー&ペーストします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTMLの作り方</title>
  </head>
  <body>
    <h1>Hello!World!</h1>
  </body>
</html>
メモ帳でHTMLファイルを作成する

コピー&ペーストができたらファイルを保存しましょう。メモ帳をお使いの場合は「ファイル」→「名前を付けて保存」を選択します。

なおHTMLファイルを作る場合、ファイルの拡張子は「.html」にする必要があります。また、文字コードは「UTF-8」を選択してください。

メモ帳の保存画面

これでHTMLファイルを作成できました。

HTMLのDOCTYPE・charsetとは?

<!DOCTYPE html>は、DOCTYPE宣言(ドキュメントタイプ宣言)と呼ばれるもので、HTMLファイルで使用されるHTMLのバージョンを示すために必要で、HTMLファイルの先頭に記述します。

<!DOCTYPE html>と書くことで、「これはHTML5で作成されたファイルです」と宣言しています。

HTMLの基本

<html lang="ja">は、lang属性(言語属性)を表します。HTMLファイルがどのような言語で記述されたかを示すものです。ここでいう言語とは、プログラミング言語のことではなく、日本語や英語などの言語という意味です。

<html lang="ja">の「ja」は、日本語を表します。コンテンツを英語で作成する場合は<html lang="en">、ドイツ語の場合は<html lang="de">というように、言語に合わせた記述をします。

<meta charset="utf-8">は、HTMLファイルの文字エンコーディングを指定します。文字を数字に変換してコンピュータへ伝達するために必要となる変換規則です。HTMLファイルを作成する場合、一般的に、UTF-8を指定します。。

HTMLのheadとbody

HTMLについてもう1つ覚えておきたいのは、headタグとbodyタグです。

headタグは、Webページのタイトルなどを記述します。bodyタグには本文を記述します。

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

では、Webブラウザで作成したHTMLファイルを表示してみましょう。

保存したHTMLファイルをダブルクリックするか、右クリックして「プログラムから開く」→「Chrome(お使いのWebブラウザ)」を選択します。

Webブラウザに、以下ような画面が表示されるはずです。

Webブラウザでの表示結果

これでHTMLファイルの、ブラウザへ表示することができました。

HTMLのタグ・要素・属性

HTMLのタグ・要素・属性

HTMLは、下記の3つによって構成されています。

  • タグ:Webブラウザに直接表示されず、タイトルや大見出しなどの表現形式をコンピューターに伝達する記号。
  • 要素:Webブラウザに表示されるタグに囲まれたテキスト。
  • 属性:Webブラウザに表示されない要素の追加情報。

上記3つのうち、Webブラウザに表示されるのは要素のみです。それぞれ詳しく解説します。

タグ

タグは、HTMLファイルに記述したテキストデータなどに対して、Web上でどのように表現するかを定義します。

開始タグと終了タグ
HTMLタグ Webブラウザでの表示結果

HTMLタグには、テキストデータを開始タグ<>と終了タグ</>で囲む必要があるものや、終了タグを必要としないものもあります。

要素

要素は、開始タグ<>と終了タグ</>に囲まれたテキストです。

HTMLタグの要素
HTMLタグ 要素の表示結果

タグに囲まれた要素の内容が、Webブラウザに表示されます。

1行目の<h1>タグで囲まれた要素は、大見出しとして表示されます。2行目の<a>タグ(リンクタグ)に囲まれた要素は、要素をクリックすることで指定したURLに遷移します。

属性

属性はタグの性質を決め、タグの種類によってさまざまな属性が存在します。

HTMLタグの属性
HTMLタグ 属性の表示結果

リンクタグを使う場合は、href属性で「クリックされた時に遷移させるページのURL」を指定します。

属性を記述する時は、開始タグの直後に半角スペースを空けます。

画像の表示には<img>を使いますが、属性は「src」となります。<img src="url">のように、src属性のurl部分に画像が保存されている場所(ソース)を指定することで、画像が表示されます。

よく使うHTMLタグ一覧

よく使うHTMLタグ一覧

HTMLタグはたくさん存在しますが、そのなかでもよく使われるものを一覧にまとめました。

HTMLタグ一覧

タグ名称HTMLタグ用途
リンクタグ<a></a>リンクを挿入作成する。
見出しタグ<h1>~<h6>タグ見出しを作成する。
画像タグ<img>画像を表示する。
段落タグ<p>段落を作成する。
テーブルタグ<table> / <tr >/  <th> /< td>テーブル(表)を作成する。また、thはテーブルのヘッダ行、tdはテーブルのセルを作成する。
箇条書きリストタグ<ul> / <li>箇条書きリストを作成する。
番号付きリスト<ol >/ <li>番号付きリストを作成する。

リンクタグ(aタグ)

リンクタグ(aタグ)は、コンテンツにリンクを挿入します。

リンクタグ 解説
リンクタグ 表示結果

こちらはリンクタグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <a href="https://www.sejuku.net/">こちらをクリック</a>
    </body>
</html>

リンクタグについては、こちらの記事で詳しく説明しています。

【HTML入門】リンクタグの使い方を4つのステップで理解しよう
更新日 : 2021年11月16日

見出しタグ (h1~h6タグ)

見出しタグは、テキスト情報に対して重要なテーマ、あるいはユーザーに伝えたい内容であることを定義します。

見出しタグは、h1からh6まであります。見出しタグを挿入すれば、Googleなどの検索エンジンが「これは見出しである」と認識できるようになります。

見出しタグ 解説
見出しタグ 表示結果

こちらは、見出しタグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <h1>見出し1の説明</h1>
        <h2>見出し2の説明</h2>
        <h3>見出し3の説明</h3>
        <h4>見出し4の説明</h4>
        <h5>見出し5の説明</h5>
        <h6>見出し6の説明</h6>
    </body>
</html>

画像タグ(imgタグ)

画像タグはその名前のとおり、Webページ上に画像を表示します。src属性で、表示したい画像ファイルを指定します。

また、width属性やheight属性で、画像の幅や高さを指定できます。

なお、画像の幅と高さを省略すると、対象画像本来のサイズで表示される決まりです。alt属性は代替テキストと呼ばれ、画像が表示できない場合に代わりに表示されるテキストを入れます。

今回は、HTMLファイルと同一のフォルダに保存されている「sample.jpg」という画像ファイルを使用しています。

画像タグ 解説
画像タグ 表示結果

こちらは、画像タグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTMLの説明</title>
  </head>
  <body>
    <img src="./sample.jpg" width="400" height="150" alt="ロゴ">
  </body>
</html>

画像タグについては、こちらの記事で詳しく解説していますので、ぜひご覧ください。

HTML入門者必見!imgタグで画像を表示する方法をパターン別に解説
更新日 : 2020年6月15日

段落タグ (pタグ)

段落タグは見出しタグの中で使われ、テキストや画像のまとまりを示します。「p」は、paragraph(段落)の頭文字を意味します。

段落タグを使うと、前後一行分が自動的に改行されます。文章の読みやすさを考えて、段落タグを適宜挿入しましょう。

段落タグ 解説
段落タグ 表示結果

こちらは、 段落がタグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <p>段落1のテキストです。段落1のテキストです。段落1のテキストです。</p>
        <p>段落2のテキストです。</p>
    </body>
</html>

段落タグについて、こちらの記事で詳しく解説しています。

【HTML入門】pタグと改行の関係をレイアウトの違いに注目して完全に理解
更新日 : 2020年6月19日

テーブルタグ(tableタグ / trタグ / thタグ / tdタグ)

テーブルタグは、ページ上に表を挿入します。

<table>が表全体、trタグが表の1行を表します。また、thタグが表のヘッダ、tdタグがデータを表します。

テーブルタグ 解説
テーブルタグ 表示結果

こちらは、テーブルタグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>名前</th>
                <th>年齢</th>
            </tr>
            <tr>
              <td>侍 太郎</td>
              <td>27</td>
            </tr>
            <tr>
                <td>侍 花子</td>
                <td>25</td>
            </tr>
        </table>
    </body>
</html>

テーブルタグについて、こちらの記事で詳しく解説しています。

【HTML table】表を作成する基本からレイアウトの方法までを解説
更新日 : 2021年11月8日

番号なしリストタグ(ulタグ / liタグ)

黒点を付けて箇条書きしたいテキストをulタグ、 liタグで囲むことで、番号なしリストを作ることができます。

番号なしリストタグ 解説
番号なし箇条書きリストタグ 表示結果

こちらはulタグ、 liタグのサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <ul>
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
            <li>リスト4</li>
        </ul>
    </body>
</html>

番号付きリストタグ(olタグ / liタグ)

番号付きリストタグ(olタグ)を使えば、番号が付いた箇条書きのリストを作れます。

番号付きリストタグ 解説
番号付きリストタグ 表示結果

こちらは、番号付きリストタグを使ったサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの説明</title>
    </head>
    <body>
        <ol>
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
            <li>リスト4</li>
        </ol>
    </body>
</html>

番号なしリストタグと番号付きリストタグについては、こちらの記事でも詳しく解説しています。

【HTML入門】liタグの意味や使い方を理解して箇条書きをマスターしよう!
更新日 : 2020年6月19日

HTMLファイルにエラーがないかをチェックする方法

エラーがないかをチェックする方法

続いて、HTMLファイルにエラーがないかをチェックする方法を紹介します。

W3C提供のツールをつかう

W3C提供のツールを使えば、HTMLファイルにエラーがないか、Webブラウザ上で正常に表示されるかをチェックできます。W3Cは、Web技術の標準化を推進する団体です。

使い方はとても簡単です。下記の3種類の方法から検証方法を選択し、Checkボタンを押すだけで簡単にHTMLファイルの構文をチェックできます。

  • Validate by URI(URL指定による検証)
  • Validate by File Upload(ファイルアップロードによる検証)
  • Validate by direct input(直接入力による検証)
validator.w3.org 入力画面

エラーがない場合は、下の画像のように表示されます。

validator.w3.org エラー無し

エラーが存在する場合は、次のように表示されます。

validator.w3.org エラーあり

コードエディタのチェック機能を使う

コードエディタを使えば、簡単にHTMLファイルのエラーをチェックできます。

「エラーをチェックできるのは便利だけど、作ったHTMLファイルを、わざわざ毎回ツールで確認するのは面倒だ」と感じる方が、多いのではないでしょうか。

そのような方に向けて、コードエディタ「Visual Studio Code」の拡張機能「HTMLHint」を例に、HTMLファイルのエラーを検出する方法を紹介します。

まず、Visual Studio Codeを起動し、画面左下にあるブロックのようなメニューを押します。その後、入力欄が表示されるので「HTMLHint」と入力しましょう。

検索にヒットした拡張機能が画面表示されるので、一番上に表示されるHTMLHintのInstallボタンを押します。

これで、「HTMLHint」を使用するための準備が完了です。

Visual Studio Code 拡張機能設定画面

HTMLをチェックするために、特別な処理は必要ありません。HTMLファイルを開くと、自動的にHTMLのエラーがないかを検証してくれます。

下図のように、コードエディタのチェック機能を使えば、HTMLファイルを作成中にエラーに気づけます。

Visual Studio Code HTMLエラー表示

HTMLとCSSやJavaScriptとの関係ー3つのファイルを組み合わせて使う方法

実は、私たちが普段目にしているWebサイト上では、HTMLのほかにも、CSSやJavaScriptが使われています。

Webサイトを構成する技術要素

JavaScriptは、Webサイト上で動的な処理を実現します。たとえば入力項目のチェック、画像の拡大表示、アニメーションなどです。

またCSSは、Webサイトの装飾や画面レイアウト調整に使われます。

HTMLファイルに含まれるテキストや画像といったデータの集まりに対して、JavaScriptファイルやCSSファイルが組み合わさることで、私たちが普段見ているWebサイトが完成しているのです。

CSSやJavaScriptを使うためには、いくつかの方法があります。

今回は、HTMLファイルとは別にファイルを作って(外部ファイルを作成して)、コードを書き込む方法を紹介します。

CSSとJavaScriptを読み込む方法

HTMLファイルにファイルパスを書き込めば、CSSやJavaScriptの外部ファイルを読み込むことができます。これにより、WebブラウザでHTMLファイルにアクセスすると、CSSやJavaScriptの外部ファイルの内容も反映されます。

CSSやJavaScriptについては、以下の記事で詳しく説明しています。ぜひご覧ください。

まとめ

HTMLはWeb開発の基本スキルであり、プログラマーやフロントエンドエンジニアになるために、ぜひ覚えておきたい言語です。

HTMLに関して分からなくなったら、いつでもこの記事を読み返してくださいね。

この記事のおさらい

HTMLとは?

HTMLとは「HyperText Markup Language」の略であり、さまざまなデータをコンピュータが読み取れるようにタグ付けする言語です。

HTMLを構成する3つの要素とは?

HTMLを構成する要素は、Web上での表現方法を決める「タグ」、Web上で実際に表示される「要素」、タグの性質を決める「属性」の3つです。

HTMLでできることは?

HTMLを使えば、HTMLメールや簡単なホームページを作成できます。

Writer

侍エンジニア編集部

株式会社SAMURAI

侍エンジニアは「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら
Close