「ウェブサイトを作りたいけど、テンプレートを使ったデザインでは芸がない」と考えている人は多いでしょう。ウェブデザインに詳しい人に助言を求めれば、必ずと言っていいほどHTMLの知識を問われるはずです。
洗練されたウェブサイトを公開したい、というのは誰もが思うことで、できれば同業他社のサイトにはない要素やデザインを実現したいもの。ビジネスにとって、サイトの完成度は多くの潜在顧客に与える「第一印象」になります。
これを追求するには、HTMLというマークアップ言語を習得必要があります。HTMLとは、一言で表すなら、訪問者に表示するものをブラウザに伝えるためにサイトが使用する言語です。
今回は、初心者向けにHTMLの概要、歴史、使用方法などをご紹介した後、HTMLの基本情報と学習方法について取り上げます。
HTMLとは
HTMLは、Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略で、ウェブページの作成に使われる比較的シンプルな言語です。変数や関数を使用しないことから、HTMLは「プログラミング言語」ではなく、タグを使って文書内の要素を定義する「マークアップ言語」にあたります。
ウェブデザイナーにHTMLについて聞けば、特にコーディングやサイトをゼロから構築する知識を持たない人にとっては、その複雑な説明に頭を抱えてしまうかもしれません。
「Hyper Text Markup Language」とは何か、少しずつ紐解いていきましょう。
「ハイパーテキスト」とは、通常はリンク（ハイパーリンクとも）を介して、関連する項目をつなぐように順番に配置されたテキスト。「マークアップランゲージ」（マークアップ言語）は、ウェブブラウザに対してページのスタイルと構造を記述する言語です。
つまり、HTMLは、テキストや画像が適切な場所に表示され、ユーザーがウェブサイトを快適にナビゲートできるようにするものです。ブラウザがHTMLで書かれた情報をウェブサーバーから読み込み、ウェブサイトを生成します。
そのままの形で見れば、理解不能なアルファベットや記号の羅列ですが、これによって最終的なサイトが形作られます。
ちなみに、サイトの構造自体はHTMLで作成し、CSSやJavaScriptを使ってサイトを魅力的かつインタラクティブにすることができます（これについては後ほど）。
要するに、HTMLはウェブページの基盤となります。HTMLなしではサイト訪問者にコンテンツを共有できないどころか、サイトを魅力的にする要素を追加することもできません。
HTMLの歴史
HTMLは、Tim Berners-Lee氏によって1991年末に開発され、1993年に一般公開されました。
最初に公開されたのはHTML1で、ウェブブラウザを介してデータを共有する目的でリリースされましたが、当時はウェブサイトを構築する開発者は少なく、HTMLの成長はリリース直後に停滞。
1995年には、機能が強化されたHTML2がリリースされ、1997年まではウェブデザインの標準的なマークアップ言語になりました。
その後、Dave Raggett氏によってHTML3がリリース。HTML3は、ウェブマスターがページをデザインするのに使える高度な機能が組み込まれていました。しかし、その当時のウェブ技術がその機能に追いついておらず、ブラウザの処理速度が低下する要因になりました。
1999年に開発されたHTML4.01では、マルチメディア機能が登場し、スタイルシート、印刷機能、追加のスクリプト言語も組み込まれました。
さらに最近では、2015年にHTML5がリリースされました。HTML5には、メディアストレージのサポートと特定のコンテンツ要素が追加され、DOCTYPE宣言、音声、動画の埋め込みなどが簡素化されました。
コンテンツセキュリティポリシーの向上が重要視され始めた2022年には、HTML5.2がリリース。ECを考慮した決済リクエストAPI、そしてアクセシビリティに優れたインターネットアプリケーションが追加されました。
HTMLの用途
先に触れた通り、HTMLは個人・法人を問わず、世界中でサイトの構築に使用されています。
HTMLは1990年代から今日まで、ウェブベースの文書やウェブサイトに使われるデフォルトの言語です。HTMLはブラウザと連動し、ブラウザがサイトの構造や関連するスタイルを理解するのに役立ちます。
わかりやすく言えば、HTMLはブラウザが訪問者に向けてサイトをどのように組み立てるかを指示する設計図になります。誰かがサイトのURLを入力すると、ブラウザはHTMLコードで確立された構成要素に基づいてページを組み立てます。
HTML文書にレイアウトされた要素をスタイル設定するCSSスタイルシートと組み合わると、意図したとおりにページが表示されます。
HTMLの現在のバージョンでは、動画、音声、スプレッドシートのようなアプリケーションをサイト上で直接実行可能です。また、ハイパーリンクによってサイトのスムーズな内部ナビゲーションが保証されます。
さらに上級者であれば、（他の言語で書かれたファイルでアクションを強化して）HTMLでリードジェネレーションフォームを作成し、メールアドレスや名前を収集することも。
外部プラグインを活用すれば、HTMLでサイト内に予約システムや検索フォームを設置し、予約やナビゲーションを容易にすることもできます。
なお、HTMLはサイトに非動的コンテンツを追加する言語です。動的なコンテンツの追加には、JavaScriptやPHPのような言語を使用する必要があります。
HTMLの仕組み
2022年5月現在、インターネット上には35億6,000万以上のウェブページが存在します（ウェブサイトではなくウェブページ）。これらの多くは単純なHTMLファイルです。
従来であれば、サイトに150ページあれば、150のHTMLファイルが存在していましたが、今日一般的であるコンテンツ管理システム（CMS）を使用しているサイトでは、通常データベースに保存されたデータに基づいて動的にページが生成されます。
これらのファイルはHTML文書とも呼ばれ、ウェブサイトを構成する要素です。各ページには様々なオンページとオフページの要素があり、それらはすべてHTML文書に含まれます。また、metaタグ、titleタグ、altタグなどのバックエンド要素に加えて、動画、画像、テキストブロックなど、ユーザー向け機能のような物理的要素も同様です。
HTMLドキュメントの構成要素
HTML文書の拡張子は、.htmlまたは.htmのいずれかで、ウェブブラウザに静的な情報を提供するすべてのテキストとタグが記述されています。
HTML文書は、先に触れた通り、ウェブブラウザがサイトを構築するために使用する設計図。参照するファイル（CSSスタイルシート、動的要素を動かすJavaScriptファイルなど）はブラウザによって読み取られ、ブラウザはそれに従ってページをレンダリングし、意図された通りに表示できるようにします。レンダリングは、訪問者がページを移動するたびに行われています。
HTML文書やそれに含まれるファイルに問題がある場合、IKEAで買った机を部品や工具なしで組み立てようなもので、サイトが適切にレンダリングできません。
現代のウェブサイトは、タグや属性で構成されたさまざまなHTML要素で構成されています。各要素に関連付けられたタグは要素の始まりと終わりを示します。要素を閉じるタグが抜けていると、ブラウザはその列や行に続くすべてのコンテンツを配置します。
ページ上の各要素に関連する属性は、それらを構成するさまざまな特徴を示します。
HTML文書は、DOCTYPE宣言（<!DOCTYPE>）で始まります。DTDとして知られるこの文書型定義は、XML文書の構造と要素を決定します。
以前は<div>がコンテンツブロックを作成するための主要な要素でしたが、HTML5では、<main>のような特定のブロックもあります。
HTMLの基本
ウェブデザイナーを目指している方、あるいはビジネス用にサイトを作成したい方は、HTMLの学習は避けて通れません。何かを学ぶには、基礎をしっかりと理解することが大切です。
無料のHTMLエディターやSublime Textのようなツールを使うこともできますが、HTMLの仕組みを理解することは、サイトをパーソナライズするのに役立ちます。
このセクションでは、HTMLの基礎知識をご紹介していきます。
HTMLの要素
何を作成するかに関わらず、すべてのHTML要素に共通する3つの要素があります─開始タグ、コンテンツ、終了タグです。
開始タグは、ウェブブラウザにページの要素がどこから始まるかを示します。例えば、動画プレーヤーやテキストの段落がページのどの部分から始まるかを指定できます。開始角括弧（<）と終了角括弧（>）を使用してマークし、例えば、<em>という開始タグは、強調したいテキストの前に置くと、斜体にすることができます。
コンテンツは、その名の通り、ブログ記事の文章のようなユーザーが見る実際の情報です。また、画像や動画の埋め込みコードもこれに当たります。開始タグの後に配置すると、指定した場所からコンテンツが表示されるようになります。
終了タグは開始タグと対になるもので、要素名の前にスラッシュ（/）が付きます。強調したいテキストの最後に</em>を置くと、このタグ以降は標準の書体になります。
例えば、「ウェブサイトの構築」をイタリック体にするには、以下のようになります。
<em>ウェブサイトの構築</em>
訪問者には以下のように表示されます。
ウェブサイトの構築
HTML要素には属性も含まれ、属性名と属性値があります。属性名は追加する内容を示し、値が追加の情報を提供します。
imgタグの場合、どの画像を表示するかを指定する必要があるため、次のようになります。
<img src=”img_girl.jpg”>
Arialフォントを使用してページの段落を赤く表示したい場合は、以下のようにstyle属性を使用します。
<p style=”color:red;font-family:arial”>
上では、段落を指定する開始タグ<p>を使用しており、このタグと終了タグ</p>の間にあるすべてのテキストが赤色になり、Arialフォントが適用されます。
しかし、最近のウェブ開発では、HTMLのstyle属性を使って個々の要素のデザインを調整するのではなく、CSSスタイルシートでページ全体をスタイリングするのが標準的です。
HTMLのidとclassは、「名前を付ける」2つの属性で、後でCSSやJavaScriptでこれらの要素を指定するのに役立ちます。要素のidやclassを使うことで背景色や枠線、フォントの色のような要素にスタイル情報を挿入できるため、開発作業が効率化されます。
例えば、HTML文書で文字を赤にする代わりに、以下のようにすることができます。
<p class=”redtext”>
CSSスタイルシートで、次のようにクラスを指定する
.redtext {
color:red;
font-family:arial;
}>/code>主なHTMLタグとHTML要素
要素を作るHTMLタグは、142種類もあります。これらはブロックレベル要素とインライン要素の両方で構成されています。
ブロックレベル要素はページの幅全体に及び、文書内で新しい行を始めます。
サイトの作成で主に使用されるブロックレベル要素には、以下のようなものがあります。
- <head>：ページタイトルのようなメタ情報を列挙する
- <html>：ルート要素で先頭に表示され、HTML文書を定義する
- <body>：ページの内容を特定する
- <h1>〜<h6> ：6種類あり異なるヘッダーを識別する
- <p>：コンテンツの段落を指定する
- <ol>：順序のあるリストを作成する
- <ul>：順序のないリストを作成する
- <li>：リストの各項目に付き、順序付きリストタグまたは順序なしリストタグで囲まれる
- <div>：コンテンツで埋められる「セクション」を作成する（後でCSSでスタイル化）ほとんどのサイトやテンプレートでコンテンツの構造化に多用されている
- <header>：ヘッダーコンテンツのブロックレベル要素
- <main>：メインコンテンツのブロックレベル要素
- <footer>：フッターコンテンツのブロックレベル要素（コピーライティングやリンク）
インライン要素は、ブロックレベル要素内のコンテンツを表現するもので、太字や斜体のようなテキストの強調などがこれに当たります。また、内部コンテンツや外部コンテンツへのリンクも含まれます。
インラインリンクは、コンテンツの流れを壊すことなくテキストを形成します。
主なインライン要素には、以下のようなものが挙げられます。
- <strong>：テキストを太字にする
- <em>：テキストを強調（斜体）にする
- <a>：ハイパーリンクタグでリンク先を示すhref属性とセットで使用する（imgタグとsrc属性と同様）
HTML、CSS、JavaScript
すでに簡単に触れましたが、CSSとJavaScriptをHTMLと併用することで、個性的で高度なサイトを構築することができます。CSS、JavaScript、そしてHTMLのそれぞれの概要と違いをまとめてみます。
HTMLはサイトの構造を作り、ページに要素を追加するものというのはすでにご存知の通り。本格的なサイトに仕上げるには、CSSとJavaScriptも必要になります。
CSSとは、Cascading Style Sheets（カスケーディングスタイルシート）の略で、サイト上の背景、色、間隔、レイアウト、アニメーションなどをデザインするために、ウェブ開発者が使用する言語とファイルです。基本的にCSSは、ウェブデザイナーがより柔軟にデザインを制御できるよう、HTML文書の表示方法を記述するものと言えます。
また、.cssファイルを通して複数のウェブページに同じ形式を適用することができ、ページごとにゼロから作り上げる必要がなくなります。さらに、.cssファイルをキャッシュすることで、同じフォーマットを共有するページ間の読み込み速度を向上することもできます。
Javascriptは、フォトギャラリー、ポップアップ、スライダーなどの動的機能を作成します。世界中の97%のサイトで使用されている人気のプログラミング言語で、主要なブラウザには専用のJavascriptエンジンが搭載されているため、動的機能を簡単に実装することができます。
Javascript、CSS、HTMLの3つを駆使することで、PCとモバイル版の両方で、完成度の高いインタラクティブなウェブページを作ることができます。
HTMLの学習方法
HTMLとは何か、そしてHTMLに関連する基礎知識を押さえたところで、実際にHTMLを使いこなすための学習方法、そしてHTMLが将来的なキャリア形成に役立つかを見ていきましょう。
HTMLは単なるマークアップ言語ではなく、「インターネットの言語」と言えます。この点については今後も変わることはないでしょう。HTMLはWordPressのような人気サービスとも密接に連携しており、HTMLを使用してWordPressのテンプレートを変更し、独自のデザインに変えることができます。
HTMLを学習する必要性
HTMLの習得は、ウェブ開発者を目指す人にとっては必要不可欠です。企業に就職にしても独立して働くにしても、優れたウェブ開発者の需要が衰えることはなく、HTMLを学ぶことはそのスキルセットの基礎になります。
需要が高いだけでなく、世界的に見てウェブ開発者は高収入を得ることができます。2022年のウェブ開発者の平均年収はおよそ98,565ドル（約1,500万円）と言われています。
そして、企業がウェブ開発者に求めるスキルとして、HTMLへの深い知識は欠かせません。
ちなみに、ウェブ開発者を探している企業の採用担当者は、HTML、CSS、JSの簡単な知識とそれぞれがどのように相互作用するかを押さえておくことで、候補者との面接時にどのような質問をすれば良いかがわかり、候補者を選別しやすくなります。
学習リソース
HTMLの学習に役立つ無料のリソースはいくつか存在します。最後に、おすすめの学習サービスをご紹介します。
Codecademy
Codecademyは、初心者向けの入門コースを無料で提供しています。インタラクティブな解説で、HTMLコーディングの結果を画面分割で表示しながら学ぶことができます。
月額19.99ドル支払うと、プログラム限定のコンテンツにアクセス可能です。
Coursera
Courseraには、実例とともにHTMLを深く掘り下げたコースがあります。月額49ドルで利用で、1週間の無料トライアルもあります。
W3Schools
W3Schoolsは、HTMLの基礎を学べる無料サービス。例題や練習問題など、さまざまなリソースがあります。
また、95ドル支払えば、自分のペースで学習できる公式コースを受講でき、終了時には修了証も発行されます。
General Assembly Dash
General Assembly Dashは、ウェブデザインの世界にこれから飛び込む初心者を支援するHTML教材です。このプログラムはゴールベース（具体的な目標を設定する）のアプローチを採用しており、学習内容を実際に応用するのに役立ちます。モジュールをこなすだけでなく、実際にウェブサイトを構築することができます。
プロジェクトを終えると、修了時に修了証が授与されるオンライン指導コースを受講できます。授業料は3,950ドルですが、柔軟な資金調達オプションや分割払いプランも用意されています。
まとめ
HTMLは、今後も当分はウェブデザインの基幹となる言語です。概念や基礎をしっかり理解することで、HTMLで独自のWordPressサイトを作ることができます。
そしてサイトの構築には、堅牢なホスティングサービスが不可欠。WordPressサイト開発をお考えの方は、ぜひKinstaをお試しください。2万4,000以上のお客様にご利用いただいています。見本紹介セッションのご予約はこちら。
