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タグで囲います。

例：

headタグ

HTMLファイルの基本構造は、headタグとbodyタグで構成されます。headタグは一番最初に記述するタグです。headタグの中身は、titleタグ、metaタグ、linkタグ、scriptタグなどを記載します。

例：

<html>

</html>

titleタグ

headタグ内に記述します。HTMLファイルのタイトルを表し、1ファイルにつき1つ記述します。

例：

<head>

</head>

bodyタグ

headタグの下に記述するタグです。WEBサイトでは、ここに記述された内容が主に表示されます。

例：

<html>

</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>

</ul>

brタグ

Break（改行）を表します。テキストの途中で、改行したい場合に指定します。

例：

テキストです。

</p>

divタグ

division（分割）を表します。divタグに囲われた内容をグループ化する際に指定します。

例：

<div>

<p>これはテキストです。</p>

<ul>

</ul>

</div>

tableタグ

table（表）を表します。表を使用する際にtableタグで閉じます。表は他にも、table row（tr）、table header（th）、table data（td）などから構成され、自由にカスタマイズ可能です。

例：

<table>

<tr>

</tr

<tr>

</tr>

</table>

aタグ

Anchor（アンカー）を表します。サイトやページ内へのリンクを付ける際に使用します。リンク先の指定は、href=””の中に書きます。

例：

<a href=”xxx.html”>xxxへのリンク/<a>

imgタグ

Image（画像）を表します。画像を配置したい場合に使用します。imgタグは閉じタグが不要です。画像はsrc=””で指定します。また、画像にはalt属性を指定します。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系のスキルとしては、基本的なマークアップ言語のため、プログラミング言語の学習をする際でも、最初に学習した方が良い言語です。