HTMLとは？HTML5やCSSとの違い、代表的なタグなどを解説
ITに詳しくなくても、HTMLという言葉を聞いたことがあるのではないでしょうか？HTMLにはHTML5のように数字のあるものや、他にもCSSという言葉も聞いたことがある方もいるかもしれません。この記事では、それらの違いについて解説するとともに、HTMLの代表的なタグについても解説します。
Contents
HTMLとは？
Hyper Text Markup Languageの略で、マークアップ言語の一種です。テキストを構造化することで役割を明確化し、コンピューターが表示形式を理解できるようにします。WEBページやWEBアプリケーションの作成において、タイトルや見出し、段落、フォントなどの指定ができるため、多くのWEBサイトやWEBアプリケーションの作成で利用されています。
HTML5とは
HTML5は、2014年に発表されたHTMLの最新メジャーバージョンのことです。それ以前のHTML4では、できなかったいくつかのことができるようになりました。例えば、それまでは動画や音声はJavaScriptが必須でしたが、videoタグやaudioタグを用いることで扱えるようになりました。2016年にはHTML5.1、2017年にはHTML5.2とマイナーアップグレードされましたが、2021年に廃止され、現在は、HTML Living Standardが標準となっています。
CSSとの違い
CSSは、Cascading Style Sheetsの略で、スタイルシート言語です。HTMLで指定された内容に対して、装飾や動きを付けることができるため、WEBサイトやWEBアプリケーションのデザインにおいて重要な役割を果たします。HTMLとCSSは、デザインのあるWEBサイトやWEBアプリケーションを作成するのに必要、という意味では共通しますが、それぞれの役割が異なり、両方が揃うことで用途を果たします。
代表的なタグ
HTML Living Standardの代表的なタグについて簡単にご紹介します。
htmlタグ
HTMLファイルの全体をhtmlタグで囲います。
例：
<html></html>
headタグ
HTMLファイルの基本構造は、headタグとbodyタグで構成されます。headタグは一番最初に記述するタグです。headタグの中身は、titleタグ、metaタグ、linkタグ、scriptタグなどを記載します。
例：
<html>
<head></head>
</html>
titleタグ
headタグ内に記述します。HTMLファイルのタイトルを表し、1ファイルにつき1つ記述します。
例：
<head>
<title></title>
</head>
bodyタグ
headタグの下に記述するタグです。WEBサイトでは、ここに記述された内容が主に表示されます。
例：
<html>
<head></head>
<body></body>
</html>
pタグ
Paragraph（段落）を表します。標準的なテキストをpタグで囲います。
例：<p>これはテキストです。</p>
hタグ
heading（見出し）を表します。大見出し、小見出しのように見出しの重要度に応じて、h1〜h6まで設定できます。
例：<h1>これは大見出しです。</h1>
ul/ol/liタグ
それぞれUnordered List（順序のないリスト）、ordered list（順序のあるリスト）、list item（リスト項目）を表します。liタグを使用する際は、ulタグかolタグで囲います。順序がある場合は、olタグ、順序がない場合はulタグを使用します。liタグはリスト項目の
例：
<ul>
<li>リスト1です。</li>
<li>リスト2です。</li>
<li>リスト3です。</li>
</ul>
brタグ
Break（改行）を表します。テキストの途中で、改行したい場合に指定します。
例：
<p>これは<br>
テキストです。
</p>
divタグ
division（分割）を表します。divタグに囲われた内容をグループ化する際に指定します。
例：
<div>
<p>これはテキストです。</p>
<ul>
<li>リスト1です。</li>
<li>リスト2です。</li>
<li>リスト3です。</li>
</ul>
</div>
tableタグ
table（表）を表します。表を使用する際にtableタグで閉じます。表は他にも、table row（tr）、table header（th）、table data（td）などから構成され、自由にカスタマイズ可能です。
例：
<table>
<tr>
<th>名称1</th>
<th>名称2</th>
</tr
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>
aタグ
Anchor（アンカー）を表します。サイトやページ内へのリンクを付ける際に使用します。リンク先の指定は、href=””の中に書きます。
例：
<a href=”xxx.html”>xxxへのリンク/<a>
imgタグ
Image（画像）を表します。画像を配置したい場合に使用します。imgタグは閉じタグが不要です。画像はsrc=””で指定します。また、画像にはalt属性を指定します。alt属性は、検索エンジンに画像の内容を伝えたり、音声読み上げの際に必要なものです。
例：
<img src=”img/sample.png” alt=”サンプル画像”>
HTMLのメリット
・デザイン性のあるサイトを作れる
HTMLとCSSを使用することで、簡単にデザイン性のあるサイトが作成できます。
・SEO対策がしやすい
HTMLはSEOとの相性が良く、正しく記述することで、SEO対策ができます。
・環境を選ばない
HTMLで作成されたサイトは、windows、macOS、スマートフォンなどで使用されるほとんどのブラウザで閲覧可能です。
・多くのWEBサイトで使用されている
HTMLとCSSで多くのWEBサイトの作成が可能です。そのため、HTMLとCSSを理解すれば、WEBサイトの作成案件を受注することもできます。
・スキルを身に付けやすい
HTMLは非常にシンプルなマークアップ言語のため、視覚的にも理解しやすく、すぐに身に付けることができます。
HTMLのデメリット
・HTMLだけでは作成できない場合がある
アニメーションなど動きのあるWEBサイトや、ニュースのようにエンドユーザーがデータを更新するようなサイト、在庫管理や決済機能などのあるサイトなどはHTMLだけでは作成できません。
・案件が限られている
HTMLとCSSはスキルを身に付けやすい一方で、同様のスキルを身に付けているエンジニアも多く、案件も低価格な傾向があります。案件の幅を拡大するために、プログラミング言語も身に付けていく必要があるでしょう。
HTMLの将来性
ノーコード、ローコードという言葉が登場し、HTMLの必要性がなくなるという話がありますが、HTML自体がなくなる訳ではありません。実際、ノーコード、ローコードで作成されたWEBサイトもソースを確認すればHTML形式で記述されており、場合によってはHTML出力も可能です。この場合、HTMLやCSSのスキルだけでWEBサイトなどを制作するエンジニアが不要になるか、と言う話なのかもしれませんが、確かに、AIの普及などにより、もしかしたらいずれはそんな時代が来るかもしれません。ですが、近い将来においては、IT業界の需要は拡大しており、しばらくは需要が続くことが予想されます。
また、HTMLはWEB系のスキルとしては、基本的なマークアップ言語のため、プログラミング言語の学習をする際でも、最初に学習した方が良い言語です。
まとめ
この記事では、HTMLについてHTML5やCSSとの違いや、代表的なタグや、メリットとデメリットについて解説してきました。
HTMLはWEB系の道を志す場合は、必ず学習した方が良い言語です。ここで紹介した内容はHTMLのごく一部になります。詳しく知りたい方は、書籍などで学ぶと良いでしょう。
