案件評判
HTMLはWebページの作成に使用されるマークアップ言語です。インターネット上にあるWebページのほとんどがこのHTMLで作成されております。よってHTMLを知らずしてWebサイトを作成することはできません。この記事ではHTMLを理解するために初心者でも分かる歴史、できること、基礎知識などを簡単に解説していきます。
HTMLとはWebページを作成するためのマークアップ言語です。正式名称は『HyperText Markup Language（ハイパーテキストランゲージ）』であり、それぞれの頭文字をとって略称した呼び名で親しまれております。HTMLは1989年にスイスのCERN(欧州原子核研究機構)で誕生しました。
その際の中心人物はイギリスの計算機科学者であるティム・バーナーズ・リー氏です。主にWorld Wide Web（ワールド・ワイド・ウェブ）と呼ばれるインターネット上のハイパーテキストシステムにおいてWebページを表現するために活用されております。
2020年現在、インターネット上で公開されているWebページのほとんどがHTMLで作成されております。HTMLではWebページを構成するにあたって見出しや段落の作成などのドキュメント構造の作成や編集、フォントや文字色の指定などといった見た目の作成や編集といったことを実現できます。
またハイパーリンクと呼ばれるURLを参照しテキストや画像に他のWebページへの導線となる役割を与える機能も用意されております。この機能はインターネットという世界規模のネットワークの成長に大きな影響を与えWebページを構成するにあたって無くてはならない存在となっております。
HTMLは誕生から30年が経過し数々のアップデートを重ねて2020年現在『HTML5.2』が最新バージョンとなっております。
HTMLの読み方は『エイチティーエムエル』が一般的となっております。名前の由来は『HyperText Markup Language（ハイパーテキストランゲージ）』からきており、それぞれの頭文字をとって略称した呼び名で親しまれております。インターネット上のハイパーテキストシステムにおいて活用されることから「ハイパーテキストのための記述言語」を意味しております。
HTMLはスイス・ジュネーブにある欧州原子核研究機構（通称：CERN）においてイギリスの計算機科学者であるティム・バーナーズ・リー氏を中心に1989年に開発されました。ティム・バーナーズ・リー氏はロバート・カイリュー氏と共にWWW（ワールド・ワイド・ウェブ）を考案したことでも有名です。他にもURLやHTTPといった概念も彼による設計によって誕生しました。
HTMLの誕生を追うように翌年にはサーバとブラウザが誕生します。Webページを作成するにあたってHTMLと合わせて使用されるCSSが誕生したのは1996年の頃です。CSSの登場によってHTMLでは実現出来ないより高度な装飾が実現出来るようになりました。その後、HTMLも年々バージョンアップを重ねていき、2020年現在はHTML5.2が最新バージョンとなっております。
| 年代 | バージョン | 備考 |
| 1989年 | HTML | 欧州原子核研究機構（通称：CERN） ティム・バーナーズ・リー氏が設計 |
| 1993年 | HTML1.0 / 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 | マイナーバージョンアップデート（2020年時点最新版） |
HTMLでは主にWebサイト（Webページ）を作成するためのマークアップ言語として非常に有名です。具体的にどのようなことができるのか見ていきましょう。
HTMLではWebページを作成するにあたって必要なドキュメントの作成・編集を行うことができます。見出し(hタグ)や段落(pタグ)を指定することによって、自身が表現したいドキュメントの構造を作成することができます。
HTMLではWebページをより見やすくするにあたって必要な装飾機能が用意されております。この装飾機能ではフォントや文字色の指定などといったUI/UXにおいて非常に大切な見た目の編集を行うことができます。より高度にデザイン面を表現するために装飾の編集を行いたい場合には『CSS（カスケーディング・スタイル・シート）』を併用して使用することが一般的です。
HTMLではWebページとWebページの導線となる役割を与えるハイパーリンクという機能が用意されております。ハイパーリンクとはWebページ上のテキスト（文字）に参照情報（URL）が埋め込まれたものを意味します。一般的にハイパーリンクは略称して『リンク』と呼ばれることが多いです。簡単に説明をすると”文字”や”画像”をクリックして別ページに飛ぶ機会がインターネット上で数多く体験すると思いますがこれこそハイパーリンクの機能が使用されております。インターネットという世界規模のネットワークの成長に大きな影響を与えWebページを構成するにあたって無くてはならない機能です。
HTMLを記述するにあたって必ず使用するのが『タグ』です。このタグの役割は作成したWebページに様々な機能をもたらすことができるHTML専用の指示用語です。こちらでは基本的なタグについて紹介をしていきます。
headタグとはWebページのヘッダー情報を記述する場所の役割をしております。ヘッダー情報とは主にWebページの基本的な情報を指しており、ページタイトル、ページ概要などが該当します。head内に記述された情報はWebページ上では出力されないものがほとんどです。
bodyタグとはWebページの本文となる情報をユーザーの目に見える形で出力するためにドキュメントの作成・編集や装飾などを記述する場所の役割をしております。bodyタグ内に記述した情報はブラウザを通じてWebページとして生成されます。
titleタグとはWebページのタイトルを設定するためのタグです。主にhead内に記述をし、表示されるのはWebページ内ではなく検索エンジンにおける対象のWebページの入り口となる検索結果画面に使用されます。このtitleタグはSEOでも重要視されており、検索エンジンにWebページの内容を理解させるにあたって非常に重要な役割を果たしております。また検索ユーザーの興味を惹くために分かりやすく目的に沿ったキャッチーなタイトル設定が大切です。
hタグとはWebページ内の文章構成における見出しを表現するタグです。Webページの本文にあたるためbody内に記述されます。見出しタグは本でいう目次の役割をしており、ユーザーや検索エンジンにページ内に記載された特に重要な内容を適切に伝えることができます。SEOにおいてもテールワードを対策していくにあたって見出しに表示されるキーワードが重要であることから検索エンジンにも正しく評価をしてもらえる傾向にあります。
ユーザにとっても見出し単位で自分の欲しい情報が明確に分かるほうがとても親切であり、結果離脱率低下へと繋がります。本文を作成する際には、上記の意図を理解してまずは見出し構成を決めてから次に進むようにしましょう。
HTMLでは以下のように数多くのタグが存在します。
| タグ | 内容 |
| divタグ（範囲） | 範囲の指定（コンテンツの幅や余白など柔軟に指定できるブロック要素） |
| pタグ（段落） | 段落を指定するためのタグ |
| brタグ（改行） | 改行を指定するためのタグ |
| strongタグ（強調） | 文字の強調を指定するためのタグ |
| imgタグ（画像） | 画像を表示するためのタグ |
| table（表） | テーブル（表）を作成するためのタグ |
| form（入力フォーム） | 入力フォームを作成するためのタグ |
CMSとはWebサイトの作成を行う際にHTMLやCSSといった専門的な技術を保有せずとも、Webサイトの作成、管理、更新などを誰でも簡単に実現できるツールです。CMSというその名は、Contents Management System（コンテンツ・マネジメント・システム）の頭文字をとった略式の名称です。代表的なCMSとして”WordPress”や”EC-CUBE”などが挙げられます。HTML、CMSの良し悪しは以下の表を参考にしてみましょう。
| HTML | CMS | |
| 難易度 | HTMLの仕組みを理解していないと難しい | HTMLの仕組みを理解せずとも容易 |
| 自由度 | 自由度高い | 自由度低い（CMSに依存） |
| プラグイン | プラグイン無し | 豊富なプラグイン |
| 運用面 | HTMLの仕組みを理解していないと難しい | HTMLの仕組みを理解せずとも容易 |
WordPress（ワードプレス）とは世界で最も利用されておるオープンソース型CMSです。日本におけるシェアは2019年現在約80%を超えると言われております。WordPressの特徴はオープンソース型なのでCMSの利用に費用が掛かりません。さらに様々な開発者が機能提供を行っている為、iphoneにアプリを取り込むように無料での機能追加が充実しております。
HTMLの種類について見ていきましょう。
HTMLにおける標準形式。2020年時点で最新規格はHTML5.2となっている。
| バージョン | 備考 |
| HTML | 欧州原子核研究機構（通称：CERN） ティム・バーナーズ・リー氏が設計 |
| HTML1.0 / HTML+ | 最初のアップデート 同年に上位互換バージョン(+)もリリース |
| HTML2.0 | W3Cが管理することになる |
| HTML3.0 / HTML3.2 | 3.0の規格化がまとまらず3.2が別物としてリリース |
| HTML4.0 / HTML4.01 | Visual Studio 2012 と共に2012年にリリース |
| HTML5.0 | ブログや記事向けの「article」要素 マルチメディアのための「audio」および「video」要素 |
| HTML5.1 | マイナーバージョンアップデート（大きな変化無し） |
| HTML5.2 | マイナーバージョンアップデート（2020年時点最新版） |
XHTMLとはHTMLにXMLの要素を掛け合わせたWebページを作成するためのマークアップ言語です。。正式名称は『Extensible HyperText Markup Language（エクステンシブルハイパーテキストランゲージ）』であり、それぞれの頭文字をとって略称した呼び名で親しまれております。XMLは「拡張可能なマークアップ言語」を意味しております。
| バージョン | 備考 |
| XHTML 1.0 | HTML 4.01をXMLにて再定義したもの |
| XHTML Basic | XHTMLにおける主要な機能(画像、フォーム、リストなど)だけをサポート |
| XHTML Modularization | XHTMLのモジュール化 |
| XHTML 2.0 | XHTML Familyの次期バージョン |
| XHTML5 | HTML5をXMLにて再定義したもの |
HTML Living StandardとはWHATWGというApple、Mozilla、Operaの開発者たちによって2004年に結成された団体が独自に策定を進めているHTMLの仕様です。W3CがWeb開発者への配慮が足りないと不満を持ったことから各社が結束し団体が設立されました。2017年にMicrosoftも参加しております。
HTMLを理解するために初心者でも分かる歴史、できること、基礎知識などを簡単に解説させて頂きました。HTMLを一言で表すと『Webページを作成するためのマークアップ言語』です。Webページを作成するために必要な「ドキュメントの作成・編集」「装飾機能」「ハイパーリンク機能」を用意しております。1989年の登場から30年以上の歴史を誇り、現在最新バージョンはHTML5.2まできております。HTMLについてこの記事に記載されている最低限の内容は理解しておくようにしましょう。
Rustを理解する！初心者でも分かる歴史、特徴、基…
テスト工程を理解する！テストの種類や役割、技法につ…
Strapiを理解する！初心者でも分かる特徴、対応…
Windows10/11アカウント作…
精算幅を理解する！超過・控除に関する…
フリーランスのHTMLコーダー（HT…
フリーランスのUnityエンジニア（…
COBOLの種類有名どころをご紹介！…
Db2を理解する！初心者でも分かる歴…
フリーランスのSwiftエンジニアの…
WindowsFormsを理解する！…