HTMLとは?CSS、JavaScriptとの関係性もわかりやすく解説!

最終更新日:2023年11月27日

HTMLとは、Webページを制作するために開発されたマークアップ言語です。ネット上に公開されているWebページのほとんどはHTMLが使用されていますが、殆どの場合HTMLだけでホームページを制作することはありません。テキストに追加して、デザインを作成するCSSや、動的なコンテンツを作成するJavaScriptを使用してWebページを構成します。本記事では、HTMLの概要や、HTMLを扱うエンジニアになるために必要な知識について解説します。

この記事のまとめ

  • HTMLとは、Webページを制作するために開発されたマークアップ言語。常にバージョンアップを行っており、現在の最新版はHTML Living Standardである
  • HTMLは、静的なWebサイトの制作、HTMLメールの作成に加え、Webアプリの基礎部分に使用される。動的な要素を追加するにはJavaScriptの使用が必要である
  • HTMLを扱うフロントエンドエンジニアの需要は短期的に見ると高い。最も使用されているプログラミング言語の1、2位がフロントエンドエンジニアが扱う言語

今もらっている年収は高い?低い?

支援実績10年の登録者データを基にした エンジニア・クリエイター専門 年収診断 無料診断START

HTMLとは

HTMLとは、「Hyper Text Markup Language」の略で、Webページを制作するために開発された言語です。ハイパーテキストとは、ハイパーリンクの埋め込みが可能なテキストを指します。

ハイパーリンクは、Webページで下線のついたテキストをクリックすると別のページへ遷移するリンクのことで、Web上のボタンから別のWebページにリンクを貼ったり、Webページ内に画像や音声、動画などのデータをリンクで埋め込んだりすることが可能です。

マークアップは、文章の構成や文章の役割を示す意味を持ち、文字に印を付与していくことによってそれらを意味付けし、画像や表などを見られるようにします。
例えば、見出しや段落・表・リンクなど、文章が構成されている要素がどのような役割を持っているかを指示します。

また、HTMLによって、検索エンジンがWebページの構造を把握しやすくなります

関連記事:HTMLの勉強法を紹介!無料で利用できる学習サイトやアプリも

HTMLの歴史

HTMLは1980年代に、SGMLから生まれた言語です。SGMLは、Standard Generalized Markup Languageの略で、当時ISOで標準化されていたSGMLは、表現の自由度は高いものの使いこなすのが難しいという問題がありました。そこで、環境問わず多くの人々が利用できるようにするために、SGMLの機能をベースとしたHTMLが誕生しました。

1989年にスイスにあるCERN(欧州原子核研究機構)において、計算機科学者のティム・バーナーズ・リー氏を中心に開発されました。ティム・バーナーズ・リー氏はWWW(ワールド・ワイド・ウェブ)を考案したことでも有名で、他にもURLやHTTPといった概念を設計しました。

HTMLが誕生した翌年には、サーバとブラウザが誕生します。Webページの制作において、HTMLと合わせて使用されるCSSが誕生したのは1996年頃で、CSSの誕生によってHTMLだけでは表現できない高度な装飾が可能となりました。その後、HTMLは年々バージョンアップを繰り返し、2023年現在ではHTML Living Standardが最新バージョンです。

年代 バージョン 備考
1989 HTML CERN、ティム・バーナーズ・リー氏が設計
1993 HTML1.0/HTML+ 最初のバージョンアップ
同年に、上位互換バージョン(HTML+)もリリース
1995 HTML2.0 W3Cが管理することに
1997 HTML3.0/HTML3.2 3.0の規格化がまとまらず3.2が別物としてリリース
1999 HTML4.0/HTML4.01 Visual Studio 2012と共に2012年にリリース
2014 HTML5.0 ブログ向けの「article」要素
マルチメディア向けの「audio」および「video」要素
2016 HTML5.1 マイナーバージョンアップデート
2017 HTML5.2 マイナーバージョンアップデート
2021 HTML Living Standard 2023年時点で最新版

HTMLはマークアップ言語

マークアップ言語とは、Webサイト文章といったテキストに印付けを行い、コンピューターに認識させるための言語です。見出しや段落などの文章の意味合いを、タグと呼ばれる要素で記述して分類し装飾します。コンピューターは文章だけをアップロードされても文章の意味合いを理解できないためです。

マークアップ言語を利用すると、文章装飾が可能で、文字の強調レベルや優先度も調整できるため、何を伝えたいのかを見た目上でもわかりやすく表示できます。
また、Webサイトの各ページは、以下の順序で閲覧されます。

  • 1.検索エンジンのクローラーによってクロールされる

    2.クロールで内容を把握されたあとにインデックスへ保存

    3.ユーザーの検索条件に応じて検索結果一覧へ表示

上記2では、検索エンジンがWebサイトを把握する際に、HTMLのようなマークアップ言語が重要となります。見出しは見出し用のタグで囲むなどの適切なマークアップを行っていないと、クローラーが円滑にWebサイトの内容を利用できないからです。

クロールに時間がかかるだけではなく、検索結果にさえ表示されない危険性もあります。確実なマークアップを行うことにより、クロールのスピードも円滑になり、制作したWebサイトの検索順位にも良い影響を与えます。

HTMLの仕組み

文章にタグを付けただけのHTMLが、どのように普段目にしているWebサイトとして表示されるのか、その仕組みを解説します。

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

ただし、HTMLはタグのついた文字データにすぎません。このHTMLファイルをWebページとして表示させる必要があります。
その役割を持つのがWebブラウザです。Webブラウザは、HTMLパーサーやHTMLレンダリングエンジンなどの機能を利用してHTMLをWebページとして表示させます。

HTMLを扱うフロントエンドエンジニアの需要

HTMLを扱うフロントエンドエンジニアは、Webサイトやアプリなどの画面に表示される部分の設計・構築に携わります。これらは、ユーザーが実際に操作する部分です。Webサイトやアプリの入口となるフロントエンドエンジニアは、あらゆるサービスを作るうえで欠かせない存在です。

2022年時点で、世界のWebサイトの数は約19億であり、2019年から3億も増えています。海外のメディアが調査したWebサイトの増加推移をみると、将来性は短期的には明るいと考えられています。Webサイトは増加傾向にあり、直近では仕事の需要も増えるでしょう。

現在はPCだけではなく、スマートフォンやタブレットなど、さまざまな画面サイズのデバイスでWebサイトが閲覧されています。これらの対応はすべてフロントエンドエンジニアの役割です。

また、HTMLと同様に、現在のWebサイトのほとんどに使用されているJavaScriptに注目してみましょう。JavaScriptは、Webサイトを動的に見せられる言語です。海外のプログラミング言語コミュニティ「stack overflow」の調査において、JavaScriptは最も使用されているプログラミング言語として9年連続1位となっています。

第2位はHTML/CSSで、Webのフロントエンドに関する言語が最も使用されています。よって、JavaScriptとHTML/CSSを主に扱うフロントエンドエンジニアに高い需要があることが推測できます。

HTMLを使用してできること

HTMLはWebサイト以外にも活用されています。HTMLを使用してできることを紹介します。

静的なWebサイトの制作

HTMLでは静的なWebサイトを制作できます。静的なWebサイトとは、誰がいつ表示しても同じように表示されるサイトです。ユーザーがどんな操作をしても、Webサイトの表示に変化がありません。

そのため、個人で使用するサイトや、会社のコーポレートサイトなど、更新頻度が少なめで常に同じ情報を伝えたいサイトの制作に適しています。もし、ショッピングカートの更新などが行える動的サイトを制作したい場合は、HTMLに加えてJavaScriptを使用する必要があります。

HTMLメール

HTMLメールとは、画像やリンクが組み込まれたメールのことです。文字のフォントや色、大きさを変えることができ、テキスト内に画像や動画を入れて自由にレイアウトが可能です。単純な文章だけが並ぶメールよりも可視性が高く、よりユーザーの興味を引くように作られています。

Webアプリの基本的なコーディング

Webアプリとは、端末にダウンロードやインストールが不要で、Webブラウザ上で動作するアプリケーションのことです。GmailやYouTubeなどがWebアプリの代表例です。世界的に有名なこれらのWebアプリもHTMLによって制作されています。

HTMLを構成する3つの要素

HTMLは、タグ・要素・属性の3つで構成されています。

タグ

タグとは、下記の例のように、テキストに意味を与える印です。タグの種類を示す文字や記号を「〈」と「〉」で括ります。タグはコンピューターに文章構造を理解させるために必要で、意味ごとに文字や記号を括ってWebサイトを制作します。

例)〈p〉〈/p〉、〈strong〉〈/strong〉など

タグ名 書き方
headタグ 〈head〉〈/head〉
titleタグ 〈title〉〈/title〉
bodyタグ 〈body〉〈/body〉
hタグ 〈h〉〈/h〉
head(ヘッダー)

headタグは、タイトルや説明文などWebページに関する情報を記述する範囲を示します。実際に画面上に表示される領域ではなく、ブラウザや検索エンジンに情報を提供するための領域です。

body

bodyタグは、実際にWebページ上に表示する文章や画像などを記述するための領域です。

〈!DOCTYPE html〉
〈html lang="ja"〉
 〈head〉
  〈meta charset="UTF-8"〉
  〈title〉タイトル〈/title〉
 〈/head〉
 〈body〉
  〈p〉body内に文章や画像を記述する〈/p〉
 〈/body〉
〈/html〉

title(タイトル)

titleタグは、headタグの内部に配置するものです。ブラウザのタブやタイトルバーに表示されるWebページのタイトルを伝えるために使用します。

〈!DOCTYPE html〉
〈html lang="ja"〉
 〈head〉
  〈meta charset="UTF-8"〉
  〈title〉タイトル〈/title〉
 〈/head〉
 〈body〉
  〈p〉body内に文章や画像を記述する〈/p〉
 〈/body〉
〈/html〉

h(見出し)

見出しタグは、テキスト情報に対して重要なテーマ、またはユーザーに伝えたい内容であることを定義します。h1からh6まであり、見出しタグを挿入すれば検索エンジンが見出しであることを認識します。

〈!DOCTYPE html〉
〈html lang="ja"〉
 〈head〉
  〈meta charset="UTF-8"〉
  〈title〉タイトル〈/title〉
 〈/head〉
 〈body〉
  〈h1〉見出し1〈/h1〉
  〈h2〉見出し2〈/h2〉
  〈h3〉見出し3〈/h3〉
  〈h4〉見出し4〈/h4〉
  〈h5〉見出し5〈/h5〉
  〈h6〉見出し6〈/h6〉
 〈/body〉
〈/html〉

要素

要素は、下記の例のように、見出しや段落などマークアップしたい対象の文字列を、タグで囲んだ情報の単位です。要素は基本的に開始タグと終了タグをセットにして「〈」と「〉」で括って使用します。

例)

〈p〉こんにちは〈/p〉

属性

属性とは、HTMLの要素に追加する情報です。Webサイトで複雑な表示をしたい場合に、要素のみでは情報不足なため、属性を追加します。属性はリンク先や動画の自動再生など要素の性質を設定するものです。

属性の指定方法)

〈要素名 属性名=”属性値”〉

HTMLの基本的なタグの書き方

HTMLの具体的なタグを知ることで、タグのルールや記述のイメージがつきます。ここでは、基本的な書き方について解説します。

pタグ

pタグは、段落を表すタグです。pはParagraph(パラグラフ)の略で、文章を表示させる際に使用します。

〈body〉
 〈h2〉大見出し〈/h2〉
  〈p〉ここに文章を記述する〈/p〉
〈/body〉

ul/ol/liタグ

ul / ol / liタグは、箇条書きを表示させるためのタグです。〈ul〉と〈li〉 のペアで数字無しの箇条書き、〈ol〉と〈li〉のペアで数字付きの箇条書きとなります。

〈body〉
 〈ul〉
  〈li〉箇条書きの項目を記述〈/li〉
  〈li〉箇条書きの項目を記述〈/li〉
  〈li〉箇条書きの項目を記述〈/li〉
 〈/ul〉
〈/body〉

〈body〉
 〈ol〉
  〈li〉1番目の箇条書きの項目を記述〈/li〉
  〈li〉2番目の箇条書きの項目を記述〈/li〉
  〈li〉3番目の箇条書きの項目を記述〈/li〉
 〈/ol〉
〈/body〉

imgタグ

imgタグは画像を表示させるためのタグで、終了タグは不要です。〈img src=” ” alt=” ” /〉と書き、「src=" "」の中には画像のファイル名とある場所を、「alt=" "」の中には代替テキストを入力します。

〈body〉
 〈img src=”img/photo.png” width=”640” height=”480” alt=”代替テキスト”/〉
〈/body〉

divタグ

divタグは、複数の要素をまとめるためのタグで「division (ディビジョン、仕切り)」の略です。

〈body〉
 〈div class=”クラス名入力”〉
  〈p〉テキスト入力〈/p〉
 〈/div〉
〈/body〉

navタグ

navタグは、文書内の主要なナビゲーションのセクションを表示させるためのタグです。Webサイトの各ページに共通して表示されるグローバルナビゲーションや、サイドバーのカテゴリーリストなどに使用します。

〈body〉
 〈nav〉
  〈h1〉メイン〈/h1〉
   〈ul〉
    〈li〉〈a href=”/”〉ブログ〈/li〉
    〈li〉〈a href=”/menu”〉メニュー〈/li〉
    〈li〉〈a href=”/contact”〉お問合せ〈/li〉
   〈/ul〉
 〈/nav〉
〈/body〉

tableタグ

テーブルタグを使うことで、表を作成できます。
〈table〉~〈/table〉の形で記述し、表内を線で区切るための「border=”XX”」を追加します。
このテーブルタグの間に、以下のタグを追加すれば、表ができます。

〈tr〉〈/tr〉 行を表すタグ。このタグの間に必要なセルのタグを入れる。
〈th〉〈/th〉 テーブルの見出しを追加するタグ。
〈td〉〈/td〉 テーブルにセルを追加するタグ。

以下は、「にんじん:100円、きゅうり:200円、大根:300円」の表を作る例です。

〈table border=”1”〉
〈tr〉
〈th〉野菜〈/th〉
〈th〉にんじん〈/th〉
〈th〉きゅうり〈/th〉
〈th〉大根〈/th〉
〈/tr〉
〈tr〉
〈th〉価格〈/th〉
〈td〉100円〈/td〉
〈td〉200円〈/td〉
〈td〉300円〈/td〉
〈/tr〉
〈/table〉

HTMLの応用的なタグの書き方

HTMLの応用的なタグの書き方について解説します。

styleタグを使用したCSSの書き方

headタグの中にstyleタグを作り、その中にCSSを直接書くことも可能です。終了タグの〈/head〉 の直前に 〈style〉 〈/style〉 と書くと、bodyタグ内全体にスタイルが反映されます。

〈!DOCTYPE html〉
〈html lang="ja"〉
 〈head〉
  〈meta charset="UTF-8"〉
  〈title〉タイトル〈/title〉
   〈style〉
    body {
     color: red:
     }
   〈/style〉
  〈/head〉
 〈body〉〈/body〉
〈/html〉

絶対パスと相対パスの書き方

パスとは、Web上の場所を指定します。書き方には2種類あり、絶対パスと相対パスがあります。

絶対パス

絶対パスは、住所を指定するのと同様で、Web上の絶対的な場所を指定します。Web上で絶対的な場所とは、URLです。絶対パスを使用してリンクを指定する場合は、「どのドメインの / どのフォルダの中の / どのファイル」であるかを、「/」(スラッシュ)で区切ってすべて書きます。主に別サイトのファイルを読み込む場合に使用します。

例)https://xxx.jp/content/uploads/img/image.jpg

相対パス

相対パスは、現在いる場所から目的のファイルまでの道順を指定します。「どの階層の / どのファイル」であるかを、「/」と「..」を用いて表します。例えば、表示するページの1つ上の階層にある「imgファイル」の中に、表示させたいファイルが保存されているとします。この場合、「..」が一つ上の階層という意味で、そのあとの「/img」が「imgファイルの中にある」という意味です。主に、同じサーバー内のファイルを読み込む場合に使用します。

例)../img/image.jpg

相対パスは、サイト構成が変更になった場合の修正や管理が困難になるデメリットがあるため、HTMLの保守性を高めるには、絶対パスを使用することをおすすめします。

コメント

HTMLでは、非表示のコメントを挿入できます。コメントとは、コード中に挿入するメモ書きのようなもので、複数人で管理する際などに役立ちます。

〈body〉
 〈h1〉見出し〈/h1〉
 〈!-- ここに記述した文字は表示されない --〉
 〈p〉表示させたいテキストを入力〈/p〉
〈/body〉

実際にHTMLを記述してブラウザで表示させる

実際にテキストエディタでコードを書いて表示させる方法を紹介します。

ブラウザとテキストエディタを用意

テキストエディタは、テキストが入力できれば何でも問題ありません。よく使用されるテキストエディタは、Visual Studio Code・Brackets・Atomなどです。使用しやすいものを選びましょう。
ブラウザも、Google ChromeやMicrosoft Edgeなど普段使用しているもので問題ありません。

コードを記述

テキストエディタを開いてコードを記述します。以下のサンプルコードをテキストエディタに貼り付けて保存してください。保存する際のファイル名の拡張子は「.html」をつけて保存します。

〈!DOCTYPE html〉
〈html〉
〈head〉
 〈title〉ここにタイトルを入力〈/title〉
 〈meta charset="UTF-8"〉
〈/head〉
〈body〉
 〈h1〉HTML入門〈/h1〉
 〈p〉こんにちは〈/p〉
〈/body〉
〈/html〉

ブラウザにHTMLファイルをドラッグして表示する

保存したHTMLファイルをブラウザにドラッグします。ブラウザではHTMLファイルに記述されたコードが自動で変換され、Webページとして認識し、表示されます。自分だけがみられるWebページであれば、サーバーをレンタルしなくても制作できるため、この手順に沿ってHTMLコードの練習ができます。

関連記事:HTML5プロフェッショナル認定試験とは?取得するメリット

CSS・JavaScriptとの関係性

HTMLとCSS・JavaScriptは合わせて使用されることが殆どで、HTMLとセットで必要なスキルと言えます。ここではCSS・JavaScriptとの関係性や、連携方法について解説します。

CSSとは

CSSとは、レイアウトやWebサイトのサイズや色などの装飾を設定するためのプログラミング言語で、HTMLと組み合わせて使用することにより定義ができます。単に、スタイルシートと呼ばれることもあります。
HTMLだけで表現したWebサイトは、文字と画像だけが並んだだけの単調な見た目になってしまいますが、CSSでデザインを加えることにより、レイアウトや視覚的な振る舞いを制御し、ユーザーエクスペリエンスを向上させることができます。

CSSの目的とHTMLとの関係性

HTMLだけでもレイアウトや色、フォント、ページの見え方をある程度は指定できます。しかし、HTMLは本来テキストや画像などを表示することや、文章の持つ情報をコンピューターが認識できるようにするための言語であるため、CSSと目的が異なります。

例えばCSSには下記のような目的や役割、HTMLとの関係性があります。

■内容と表示の分離
HTMLは内容の構造を定義し、CSSはその表示を制御することで、内容とデザインを明確に分離することができます。これは、ウェブサイトのメンテナンスやアクセシビリティの向上に役立ちます。

■CSSでレスポンシブデザインを実現する
メディアクエリを使用して、異なるデバイスや画面サイズに応じてウェブページの表示を調整できます。

■再利用性
スタイルをCSSに外部化することで、同じスタイルを都度HTMLに記載する必要がなく、複数のページに要素に簡単に適用することができ、効率的なコードの管理と再利用性を実現できます

JavaScriptとは

JavaScriptは、ブラウザを動的なものにするためのプログラミング言語です。HTMLとCSSで表現されたWebサイトは静的なもので、ポップアップ画面やカルーセルのようにアニメーションが動くものを表現できません。
そのため、動的な部分は、JavaScriptで指示します。JavaScriptを取り入れることによって視認性や利便性が向上し、ユーザーにとって使用しやすいサイトを実現できます。

JavaScriptの目的とHTML・CSSとの関係性

JavaScriptは、HTMLをコントロールする目的で使用されます。よりリッチなデザインとWebサイトを作成するためには、HTMLとCSSだけではなく、JavaScriptの知識も必須になります。

例えばCSSには下記のような目的や役割があります。下記は一例です。

■アニメーションやエフェクト
JavaScriptを使用して、ウェブページに動的なアニメーションやエフェクトを追加することができます。

■ウェブアプリケーション開発
JavaScriptフレームワーク(例:React, Vue.js, Angularなど)を使用して、高度なアプリケーションを開発することができます。

■非同期通信
AJAX (Asynchronous JavaScript And XML) を使用して、ページ全体をリロードすることなくサーバーとデータを非同期的に交換できます。これは、ユーザーエクスペリエンスを向上させるために広く活用されています。

JavaScriptの連携方法

HTMLからJavaScriptを呼び出す方法には、2つあります。


  • ・HTMLにコードを埋め込む

    ・外部ファイルとして読み込む


一般的には外部ファイルとして読み込むことが多いでしょう。外部ファイルでJavaScriptのファイルを用意しておき、HTMLには以下のように記述します。

〈!-- 外部ファイルとしてJavaScriptを読み込む --〉
 〈script src="js/sample.js"〉〈/script〉

scriptタグを記述してsrc属性に実際のJavaScriptファイルの場所とファイル名を指定しています。上記の場合、jsフォルダ内にあるsample.jsファイルを読み込むということになります。

ITエンジニアの転職ならレバテックキャリア

レバテックキャリアはIT・Web業界のエンジニア職を専門とする転職エージェントです。最新の技術情報や業界動向に精通しており、現状は転職のご意思がない場合でも、ご相談いただければ客観的な市場価値や市場動向をお伝えし、あなたの「選択肢」を広げるお手伝いをいたします。

「将来に向けた漠然とした不安がある」「特定のエンジニア職に興味がある」など、ご自身のキャリアに何らかの悩みを抱えている方は、ぜひ無料のオンライン個別相談会にお申し込みください。業界知識が豊富なキャリアアドバイザーが、一対一でさまざまなご質問に対応させていただきます。

「個別相談会」に申し込む

転職支援サービスに申し込む
※転職活動を強制することはございません。

レバテックキャリアのサービスについて

この記事の監修

レバテックキャリア編集部

レバテックキャリアは、IT/Web業界のエンジニア・クリエイター向けに特化した転職エージェントです。当メディアでは、エンジニア・クリエイターの転職に役立つノウハウから、日々のスキルアップや業務に活かせる情報まで、幅広いコンテンツを発信しています。

プロのアドバイザーがあなたのお悩みや疑問にお答えします

- 転職個別相談会開催中 -

相談内容を選択してください

※転職活動や求人への応募を強制することはありません

関連する記事

人気の求人特集

内定率が高い

HTMLの求人・転職一覧

今もらっている年収は高い?低い?

簡単60秒 エンジニア・クリエイター専門 年収診断 無料診断START ×