HTMLとは？HTML5やCSSとの違い、代表的なタグなどを解説
ITに詳しくなくても、HTMLという言葉を聞いたことがあるのではないでしょうか？
HTMLにはHTML5のように数字のあるものや、他にもCSSという言葉も聞いたことがある方もいるかもしれません。この記事では、それらの違いについて解説するとともに、HTMLの代表的なタグについても解説します。
Contents
HTMLとは？
Hyper Text Markup Languageの略で、マークアップ言語の一種です。
テキストを構造化することで役割を明確化し、コンピューターが表示形式を理解できるようにします。
WEBページやWEBアプリケーションの作成において、タイトルや見出し、段落、フォントなどの指定ができるため、多くのWEBサイトやWEBアプリケーションの作成で利用されています。
HTML5とは
HTML5は2014年に登場したHTMLのメジャーバージョンで、videoタグ・audioタグによるメディア埋め込みなど、HTML4ではJavaScript抜きには不可能だった機能が追加されました。
その後マイナーアップデートを経て2021年に廃止され、現在はWHATWGが管理するバージョン番号なしの継続更新型仕様「HTML Living Standard」が標準となりました。
CSSとの違い
CSSは、Cascading Style Sheetsの略で、スタイルシート言語です。
HTMLで指定された内容に対して、装飾や動きを付けることができるため、WEBサイトやWEBアプリケーションのデザインにおいて重要な役割を果たします。
HTMLとCSSは、デザインのあるWEBサイトやWEBアプリケーションを作成するのに必要、という意味では共通しますが、それぞれの役割が異なり、両方が揃うことで用途を果たします。
代表的なタグ
HTML Living Standardの代表的なタグについて簡単にご紹介します。
htmlタグ
HTMLファイルの全体をhtmlタグで囲います。
例：
| <!DOCTYPE html><html lang=”ja”></html> |
headタグ
HTMLファイルの基本構造は、headタグとbodyタグで構成されます。
headタグは一番最初に記述するタグです。headタグの中身は、titleタグ、metaタグ、linkタグ、scriptタグなどを記載します。
スマートフォンなどへのレスポンシブ対応では、headタグ内にviewportのmetaタグを記述します。
例：
| <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>ページタイトル</title> <link rel=”stylesheet” href=”style.css”></head> |
titleタグ
headタグ内に記述します。HTMLファイルのタイトルを表し、1ファイルにつき1つ記述します。
例：
| <title>ページタイトル</title> |
bodyタグ
headタグの下に記述するタグです。WEBサイトでは、ここに記述された内容が主に表示されます。
例：
| <body> <p>ここにコンテンツを記述します。</p></body> |
pタグ
Paragraph（段落）を表します。標準的なテキストをpタグで囲います。
例：
| <p>段落のテキストをここに記述します。</p> |
hタグ
heading（見出し）を表します。大見出し、小見出しのように見出しの重要度に応じて、h1〜h6まで設定できます。
例：
| <h1>大見出し</h1><h2>中見出し</h2><h3>小見出し</h3> |
ul/ol/liタグ
それぞれUnordered List（順序のないリスト）、ordered list（順序のあるリスト）、list item（リスト項目）を表します。
liタグを使用する際は、ulタグかolタグで囲います。順序がある場合は、olタグ、順序がない場合はulタグを使用します。liタグはリスト項目の各要素を表します。
例：
| <!– 順序なしリスト –><ul> <li>項目1</li> <li>項目2</li></ul> <!– 順序ありリスト –><ol> <li>手順1</li> <li>手順2</li></ol> |
brタグ
Break（改行）を表します。テキストの途中で、改行したい場合に指定します。
例：
| <p>1行目のテキスト<br>2行目のテキスト</p> |
divタグ
division（分割）を表します。divタグに囲われた内容をグループ化する際に指定します。
例：
| <div class=”container”> <p>グループ化されたコンテンツ</p></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=”https://example.com”>リンクテキスト</a> |
imgタグ
Image（画像）を表します。画像を配置したい場合に使用します。
imgタグは閉じタグが不要です。画像はsrc=““で指定します。また、画像にはalt属性を指定します。alt属性は、検索エンジンに画像の内容を伝えたり、音声読み上げの際に必要なものです。
例：
| <img src=”image.jpg” alt=”画像の説明”> |
formタグ
フォームを表します。
お問い合わせフォームや検索ボックスなど、ユーザーがデータを入力・送信する機能を作成する際に使用します。formタグの中に、inputタグやbuttonタグを組み合わせて使用します。
例：
| <form action=”/submit” method=”post”> <input type=”text” name=”name” placeholder=”お名前”> <input type=”email” name=”email” placeholder=”メールアドレス”> <button type=”submit”>送信</button></form> |
セマンティックHTML（意味を持つタグ）
HTML Living Standardでは、ページの構造や意味を明確に示すセマンティックタグが定義されています。
divタグでも同じレイアウトは作れますが、セマンティックタグを使用することでコンテンツの役割が明確になり、SEOや音声読み上げソフトによるアクセシビリティの向上に役立ちます。
例：
| <header> <nav>…</nav></header><main> <article> <section> <p>コンテンツ</p> </section> </article></main><footer>…</footer> |
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の将来性
ノーコード・ローコードツールの普及やAIによるコード生成の進化により、「HTMLは不要になるのでは？」と感じる方もいるかもしれません。
しかし、ノーコードツールで制作されたWEBサイトのソースを見ると、出力結果はHTML形式で記述されています。HTMLはWEBの根幹を担う言語であり、技術の自動化が進んでも、その基盤としての役割は変わりません。
IT業界の求人市場は拡大を続けており、WEB系エンジニアの需要は引き続き高い水準が続くと見込まれています。また、HTMLはWEB系スキルの出発点として、プログラミング言語を本格的に学習する前に身につけておくべき言語でもあります。
HTMLの知識は、単独のスキルとしてだけでなく、さまざまな職種へのキャリアパスを広げる起点にもなります。
◆フロントエンドエンジニアへの転身
HTMLとCSSはフロントエンド開発の基礎であり、そこからJavaScriptを習得し、React・Vue.jsといったモダンフレームワークへと段階的にスキルを積み上げることで、フロントエンドエンジニアとして活躍できます。
フロントエンドエンジニアは求人倍率が高く、正社員の年収は450〜550万円が目安とされています（経験・スキルによって異なります）。WEBに関わる職種の中でも将来性が高く、転職市場でも継続的に求人が多いポジションです。
◆WEBデザイナーへの転向
HTMLとCSSのコーディングスキルは、WEBデザイナーにとっても必須の知識です。
デザインツール（PhotoshopやFigmaなど）の操作を並行して習得することで、コーダーからデザイン領域へのキャリアシフトが可能になります。自分でコーディングまでできるWEBデザイナーは制作現場で重宝されることが多く、フリーランスとしての独立も視野に入ります。
◆WEBディレクターへの転向
HTMLの基礎知識を持っていると、エンジニアやデザイナーとの技術的なコミュニケーションがスムーズになります。
WEB制作の実務を経験したのちに、プロジェクト管理や進行管理を担うWEBディレクター・PM職へとキャリアをシフトするパスもあります。技術的なバックグラウンドを持つディレクターは現場での信頼が高く、マネジメント職としての市場価値も期待できます。
HTMLのスキルを活かした求人を探したい方は、こちらからご確認ください。
まとめ
この記事では、HTMLについてHTML5やCSSとの違いや、代表的なタグや、メリットとデメリットについて解説してきました。
HTMLはWEB系の道を志す場合は、必修の言語です。
本記事で紹介した内容はHTMLのごく一部なので、詳しく知りたい方は、書籍のほか、MDN（developer.mozilla.org）やProgate、ドットインストールなどのサイトが参考になります。
まずはHTMLとCSSを習得し、JavaScript、さらにはフレームワークへとスキルを広げていくことで、WEB系エンジニアやデザイナーとしてのキャリアが広がります。
