HTMLってなに？Webエンジニアが詳しく解説

プログラミングを学習していると、「HTML」というプログラミング言語を目にすることがあると思います。

プログラミングを始めたばかりで「HTMLっていったいなに？」と思う方もいると思います。

今回は、そのようなプログラミング初心者へ「HTML」について解説していこうと思います。

日々目にするウェブサイトやアプリで使われていますので、この機会にぜひみてみてください！

コンテンツ一覧

HTMLって？
HTMLタグとは？
HTMLの基本構造
まとめ

HTMLって？

HTMLとは「Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）」の省略形で、簡単にいうとWeb上にある文章に対してレイアウトや構造をわかりやすく表現するための書式を定義したものになります。

現在ウェブ上で公開されているページのほとんどはこのHTMLを利用して作成されてます。

Hyper Textとはハイパーリンクを埋め込むことができる高機能なテキストのことです。ウェブサイトで下線のついたテキストをクリックすると別ページへ移動するのを経験したことがありますよね。あのテキストのことを指します。

ハイパーテキストでは、ウェブサイトから他のウェブサイトへのリンクを貼ったり、ウェブページ上に動画や画像、音声などのデータファイルをリンクで埋め込むことができます。

Markupとは、文章の各部分がどのような役割を持っているのかを示すことです。文章にはタイトルや見出し、段落や強調など文章の構造を明確にするための仕様がありますが、その文章の各部分に目印をつけることでコンピュータがその文章の構造を理解できるようになります。

これにより、検索エンジンがウェブサイトの構造を解析したりブラウザがウェブサイトの各要素の意味を理解して見易く表示することができるわけですね。

この目印をつけるための記号として使用されるのが「HTMLタグ」です。

HTMLタグとは？

ウェブサイト上で見出しや段落、画像やリンクなどその役割ごとに「HTMLタグ」というものが存在します。

このHTMLタグをその役割に合わせて目印として記述してきます。

HTMLタグには例えば以下のようなものがあります。

<h1>〜<h6>：見出しを作成するタグ（数字が小さいほど大きい見出し）
<p>：段落を指定するタグ
<a>：リンクを埋め込むタグ（他のページへのアクセス先を指定する）
<img>：画像を表示する
<table>：テーブル（表）を作成する
<div>：ひとかたまりの範囲として指定する（ブロック要素）
<span>：ひとかたまりの範囲として指定する（インライン要素）

これらのタグを使って、ウェブページのレイアウトや構造をコンピュータに理解できる形で構築してきます。

例えば次のようにHTMLを記述してみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<h1>HTMLについて解説</h1>

<h2>HTMLとは？</h2>

<p>
HTMLとは「Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）」の省略形で、簡単にいうとWeb上にある文章に対してレイアウトや構造をわかりやすく表現するための書式を定義したものになります。
</p>

<p>
Hyper Textとはハイパーリンクを埋め込むことができる高機能なテキストのことです。ウェブサイトで下線のついたテキストをクリックすると別ページへ移動するのを経験したことがありますよね。あのテキストのことを指します。
</p>

<p>
Markupとは、文章の各部分がどのような役割を持っているのかを示すことです。文章にはタイトルや見出し、段落や強調など文章の構造を明確にするための仕様がありますが、その文章の各部分に目印をつけることでコンピュータがその文章の構造を理解できるようになります。
</p>

<h2>HTMLタグについて</h2>

<p>
HTMLタグには例えば以下のようなものがあります。
</p>

<ul>
<li><h1>〜<h6>：見出しを作成するタグ（数字が小さいほど大きい見出し）</li>
<li><p>：段落を指定するタグ</li>
<li><a>：リンクを埋め込むタグ（他のページへのアクセス先を指定する）</li>
<li><img>：画像を表示する</li>
<li><table>：テーブル（表）を作成する</li>
<li><div>：ひとかたまりの範囲として指定する（ブロック要素）</li>
<li><span>：ひとかたまりの範囲として指定する（インライン要素）</li>
<li><ul>：順序のないリストを表示する</li>
<li><li>：リストの項目を記述する</li>
</ul>

<p>
これらのタグを使って、ウェブページのレイアウトや構造をコンピュータに理解できる形で構築してきます。
</p>

</body>
</html>

このように書くことで、それぞれのHTMLタグにより文章が構造化され、ウェブページ上で次のように表示されます。