HTMLとは？CSSとの違いや代表的なタグも紹介
公開日：2020.09.28
スキルアップ
HTML（HyperText Markup Language）はWebページを作成するための言語で、主にページ内の情報を構造化し、見出し、本文、サイドバーなどを明確化する目的で使用します。HTMLタグで必要な文書を挟み込むだけで使えるため、Web開発に携わる人の多くが、最初に学習する言語でもあります。
今回はこのHTMLについて、一体どういう言語なのか解説しながら基礎的なタグの使用方法に触れていきます。
なお、CSSについてはこちらを参照ください。
HTMLとは
HTMLは、Webページを作成するために開発された言語です。CSS（Cascading Style Sheets）やJavaScript・TypeScriptとともにWebページを構築するために用いられます。HTMLではタグと呼ばれる目印を使い、テキストをどのように表示するか指示します。ブラウザが、このタグにあわせて表示を行うことでWebページが表示されます。
なお、HTMLは、Markup +language の名の通りマークアップ言語（文書にマークをつける言語）であって、プログラミング言語（アルゴリズムを構築可能な言語）ではありません。そのため、HTMLのみでWebページに動きをつけたり、ログイン処理を行うなどの処理ができるわけではありません。
要素と属性
まずは、HTMLの構成要素である、「要素」と「属性」のふたつについて解説します。
要素（element）
見出しや段落、ボックスなどのWebページを区切る部品を指します。<title> といった形で、 < > でくくられて使用され、< >の間に入力されるタグの種類によって、title要素などと呼ばれます。
要素は基本的に開始タグと終了タグをセットで使用します。
内容を持つ要素の例：
<p>開始タグと終了タグの間に内容を入力します</p>（開始タグと終了タグで囲まれることで要素として機能する）しかし中には、要素には内容を持たない「空要素」と呼ぶものもあります。
空要素の例：
<hr>（終了タグが不要）属性（attribute）
要素に付加する情報です。 例えば、src="" などで表現されるもので、要素だけでは不足している情報を属性で付加することで複雑な表示を行うことができます。
例：
<img src="https://****.png">このタグは、img要素（画像を表示させる要素）のsrc（ソース）属性です。src属性は、sourceの略で、データの位置を指定します。この例の場合、img要素で表示する画像はsrc属性に入力されている https://****.png となります。
HTML5とは
インターネットで検索を行うと、HTML4やHTML5などの表記を見かけるかもしれません。実はHTMLはバージョンがいくつかあり、そのバージョンによってHTML4、HTML5など数字がつきます。
HTML5はHTMLの最新バージョンで、以前のバージョンであるHTML4と比較すると動画や音声の再生、グラフィックの描画が容易に可能になりました。さまざまな属性が追加され、今まではJavaScriptで対応していたアニメーション などの処理の一部もHTML5で行えるようになっています。
今後Web開発ではHTML5が主流になるため、これから習得を目指すのであればHTML5を学習するのがよいでしょう。
HTMLとJavaScriptの違い
JavaScriptはオブジェクト指向スクリプト言語で、ブラウザ上で動く数少ない言語の一つです。HTMLと違い、プログラミング言語であることから、フォーム入力値の検証によって正しい内容が入力されているかのチェック、ページを再読み込みせずに新しいコンテンツを読み込む、などのUI/UXの向上に役に立ちます。また、UI/UX以外に、Web解析やWeb広告などの現場でも多く使用されています。
Web開発ではCSSと並んで必須ともいえる言語であるため、まだ触れたことがないという人はHTMLと同時に学習するのをおすすめします。
HTMLとCSSの違い
CSSはHTMLをデザインする言語です。HTMLで文書構造を示し、CSSでそのデザインを指定します。HTMLのタグに組み込まれたスタイル属性の指定をブラウザが読み取り、CSSの指示に沿ってさまざまな装飾を行うことで、Webページをきれいに見せます。
HTMLは単体でWebページを構築することができますが、CSSは単体では使用できません。HTMLとCSSは必ずセットで使用されるため、マークアップエンジニア、フロントエンドエンジニア、Webデザイナーにとって、HTMLとCSSのふたつの習得はとても重要です。
HTMLの種類
現在Webページで使用されているHTMLには、HTML（HTML4）、XHTML、HTML5などのいくつかの種類があります。基本的なタグの属性や要素は共通ですが、それぞれ使用できるタグや記述のルールなどが異なります。
どのような特徴があるのか、一つずつ見ていきましょう。
HTMLの特徴
HTML5と区別するためHTML4と呼ばれることもあります。長らくWebページの制作で使用されてきたため、未だに多くのWebページがHTML4で記述されています。
HTML4は、ブラウザが解釈できれば記述に表記揺れや曖昧さがあっても問題なく表示できます。また、タグに大文字と小文字が混在した状態で記述しても問題ない、<hr> <br>のような空要素も終了させる必要がないなどの特徴があります。
XHTMLやHTML5と比較すると表現できることは限られますが、対応しているブラウザが多く、一部の古いブラウザを使用している環境でも表示が崩れません。
XHTMLの特徴
XHTMLはHTMLとXMLの特徴を組み合わせたWebページを作るために作られた言語です。XMLの「きちんと記述ルールに沿って記述しないと表示できない」という特徴を持つため、タグは全て小文字で統一する必要があります。
また、全てのタグに終了タグが必要となるため、空要素は<hr /> <br />のように末尾を/>で終了させます。
このほか、ページの先頭にXML宣言が必要になります。
XML宣言の例：
<?xml version="1.0" encoding="UTF-8"?>HTML5の特徴
HTML4では実装されていないさまざまなタグが追加されています。一例として<header> <footer>のようなタグを用いることができるようになりました。また、フォーム関係の機能が強化され、よりUXが向上しています。
一方でHTML4の特徴を継承しているため、XHTMLと異なり記述に曖昧さがあっても表示に問題は生じません。また、<hr><br>のような空要素は、XHTMLのように終了させても、HTML4のように終了させなくても使用できます。
代表的なHTMLタグの紹介
HTMLタグはさまざまな目的を持った要素ごとに100以上のタグが存在します。今回はその中から、Webページの制作でよく使用される9つのタグについて、HTMLコードと共に紹介していきます。
aタグ
aはanchor（アンカー）の略で、Webページの画像や文字から、他のWebページやファイルにリンクするためのハイパーリンクを指定するタグです。
リンク先はhref属性で指定します。あわせてtarget属性を指定することで、同一画面で遷移したり別ウィンドウを開くことができます。
例：
<a href="https://****.jp">リンクテキストをここに配置（imgタグで画像配置も可）</a>imgタグ
imgはimageの略で、画像を表示させるタグです。必須属性のsrc属性で画像が置かれている位置を指定する必要があります。
一般的にWebで広く使用されるPNG・GIF・JPEGのほか、SVG、単一ページのPDF、アニメPNG、アニメGIFなどを表示することができます。また、画像の上にリンクを配置するイメージマップを作成することができます。
alt属性を使用することで、画像が利用できない環境向けに代替テキストを設定できます。
例：
<img src="img/logo.png" alt="株式会社〇〇">pタグ
pはparagraphの略で、段落（パラグラフ）を形成するタグです。文字列が一つの段落であることを表すために使用します。どのような文字列にも使用できます。改行タグである<br>でも似たような挙動をしますが、<br>は同じ段落内での改行を示すタグであり、<p>は一つの段落を示すタグという違いがあります。
例：
<p>これはサンプルテキスト（改行前）です。<br/>これはサンプルテキスト（改行後）です。</p>tableタグ
Webページ上に表を作成するタグです。<table>～</table>の中に、表の横一行を定義する<tr>～</tr>を記入し、見出しセルを定義する<th>～</th>やデータセルを定義する<td>～</td>を記入して表を作成します。
テーブルは行（横行）とカラム（縦列）を持っていますが、空の行やカラムは持てません。
HTML4ではframe、rules、border、cellpadding、cellspacing、などの属性がありましたが、HTML5では全て廃止されsummary属性のみになります。
CSSが未発達だったインターネット初期は、レイアウトを整える目的でもtableタグが使用されていました。しかし、CSSが発達した現在は<div>タグでレイアウトを整えるようになっており、表作成以外の目的での仕様は推奨されません。
例：
<table>
<caption>
<strong>表をどのように作成すればよいのか</strong>
<details>
<summary>このテーブルの目的や説明</summary>
<p>以下のテーブルの目的をここに入力することができます。</p>
</details>
</caption>
<thead>
<tr><th>thは見出し要素 </th><th>カラムの数に注意</th><th>縦列に注意</th></tr>
</thead>
<tbody>
<tr><td>tdはデータ要素</td><th>tdとthを同じ<br/>行に格納してもよい </th><td>カラムに注意 </td></tr>
</tbody>
</table>headerタグ
HTML5で導入されたヘッダーを表示するためのタグです。Webページのナビゲーションであることを示す際に使用します。Webページのアウトラインを整え、CSSで装飾しやすくするためのタグで、表記がよく似ていますが文書のヘッダー情報を表す<head>タグとは目的が異なります。
例：
<header>
<h1>ページのタイトル</h1>
</header>navタグ
navはNavigationの略で、HTML5で導入された、ナビゲーションであることを示す際に使用するタグです。この場合のナビゲーションとは、他のページへのリンクを指します。
例：
<nav>
<ul>
<li><a href="a.html">メニュー一覧</a></li>
<li><a href="b.html">コースのご紹介</a></li>
<li><a href="c.html">お部屋のご紹介</a></li>
<li><a href="d.html">アクセス</a></li>
</ul>
</nav>footerタグ
HTML5で導入された、フッター情報を示すためのタグです。Webページの執筆者や関連文書へのリンク、著作権表示、会社名など、フッター情報に含まれる文字列のアウトラインを整えるために使用されます。
Webページの権利者または責任者の連絡先情報は<address>を使用しますが、<footer>の中に格納しても構いません。
例：
<footer>
<nav>
<a href="index.html">トップページへ戻る</a>
<a href="about.html">このサイトについて</a>
<a href="profile.html">会社概要</a>
</nav>
<p>Copyright 2006-2020</p>
</footer>styleタグ
スタイル（CSS)を記述するためのタグです。通常は<head>～</head>の中に配置します。head要素内に直接記述することで、文書単位でCSSを指定することもできます。
例：
<style>
a { color : red; }
</style>scriptタグ
スクリプト（JavaScript）を記述するためのタグです。JavaScriptの処理は外部ファイルにまとめるのが一般的ですが、HTML上に直接scriptタグを使って書き込む場合もあります。なお外部ファイルにまとめた場合と挙動はかわりません。
例：
<script>
document.write("文字列");
</script>HTMLは意外に簡単！まずは気軽に試してみよう！
HTMLは非常にシンプルな構造のマークアップ言語です。テキストベースで記述できるため、テキストエディタとブラウザがあれば特に開発環境を整える必要もありません。要素や属性など、覚えることが多く複雑なように思えますが、修正したものはすぐ画面で確認できるため、簡単に身につけることができます。
Webエンジニアを目指したい人にとっては、とても大切で基礎的な言語です。まずはテストページを作成してHTMLに挑戦してみてはいかがでしょうか。
AKKODiSでは、ここで紹介したHTMLのスキルで活躍するWebデザイナーやWebエンジニアの求人を豊富にご用意しています。これを機会にWeb制作の分野にチャレンジしてみてはいかがでしょうか。
（2020年9月現在）
