マークアップ言語は文章の構造や文字の大きさ、種類などの体裁を指定する為のプログラミング言語です。Webサイトを作成する際に必要なマークアップ言語には様々な種類があります。HTML以外にも「XML」「XAML」「SGML」などが存在することをご存知でしょうか?この記事ではマークアップ言語を理解するために初心者でも分かる歴史、役割、主要な6選について簡単に解説していきます。
マークアップ言語とは文章の構造や文字の大きさ、種類などの体裁を指定する為のプログラミング言語の一種です。Webサイト制作を行うために使用する「HTML」は代表的なマークアップ言語です。皆さんがWebサイト及び各ページを閲覧する際に目にする「タイトル」「見出し」「本文」などの文章構成から「文字の装飾」「画像の挿入」などをコンピューターへ出力形式を正しく理解させるために使用されます。HTML以外のマークアップ言語の主な種類として「XML」「XAML」「SGML」などが挙げられます。
マークアップ言語の歴史のルーツはIBMの研究家である『チャールズ・ゴールドファーブ』によって1979年に開発されたGMLにあります。チャールズ氏は「マークアップ言語の父」としてその名を知られております。そして現在国際規格として主要に扱われている「HTML」の大元となる「SGML」を開発し、ISOの議長を努めました。
HTMLはスイス・ジュネーブにある欧州原子核研究機構(通称:CERN)においてイギリスの計算機科学者であるティム・バーナーズ・リー氏を中心に1989年に開発されました。ティム・バーナーズ・リー氏はロバート・カイリュー氏と共にWWW(ワールド・ワイド・ウェブ)を考案したことでも有名です。2000年なるとHTML 4.01をXMLにて再定義したものとして「XHTML1.0」が誕生します。
年代 | バージョン | 備考 |
1979年 | GML | IBMの研究家チャールズ氏によって開発 |
1989年 | HTML | ティム・バーナーズ・リー氏を中心に開発 |
1993年 | HTML1.0 / HTML+ | 最初のアップデート 同年に上位互換バージョン(+)もリリース |
1999年 | HTML4.0 / HTML4.01 | Visual Studio 2012 と共に2012年にリリース |
2000年 | XHTML1.0 | HTML 4.01をXMLにて再定義 |
マークアップ言語として主要な6種類について見ていきましょう。
HTMLとはWebページを作成するためのマークアップ言語です。HTMLは1989年にスイスのCERN(欧州原子核研究機構)で誕生しました。その際の中心人物はイギリスの計算機科学者であるティム・バーナーズ・リー氏です。主にWorld Wide Web(ワールド・ワイド・ウェブ)と呼ばれるインターネット上のハイパーテキストシステムにおいてWebページを表現するために活用されております。
HTMLではWebページを構成するにあたって見出しや段落の作成などのドキュメント構造の作成や編集、フォントや文字色の指定などといった見た目の作成や編集といったことを実現できます。またハイパーリンクと呼ばれるURLを参照しテキストや画像に他のWebページへの導線となる役割を与える機能も用意されております。この機能はインターネットという世界規模のネットワークの成長に大きな影響を与えWebページを構成するにあたって無くてはならない存在となっております。
XMLとはWorld Wide Web Consortium (W3C)によって策定されるマークアップ言語仕様の一つです。ドキュメント内のデータ構造や内容を示すために用いられます。正式名称は『Extensible Markup Language』です。HTMLはタグが固定化されているものですが、XMLはタグを自由に決めることができます。技術標準化推進団体のW3Cが提供するもののため世界共通のオープンな規格となっております。XMLの特徴として『タグを自由に決められる』『拡張性が高い』『構造の変換』などが挙げられます。
XHTMLとはHTMLにXMLの要素を掛け合わせたWebページを作成するためのマークアップ言語です。HTML 4.01をXMLにて再定義したものとして2000年に誕生しました。XMLは「拡張可能なマークアップ言語」を意味しております。正式名称は『Extensible HyperText Markup Language(エクステンシブルハイパーテキストランゲージ)』であり、それぞれの頭文字をとって略称した呼び名で親しまれております。特徴として『XML文書の埋め込み』『記述ルールが厳密』などが挙げれます。
XAMLとはMicrosoft社が開発・提供するマークアップ言語仕様の一つです。XMLをベースとしたマークアップ言語であり、アプリケーションのユーザーインターフェースを記述するた
めに使用されます。正式名称は『Extensible Application Markup Language』です。「WPF」「Xamarin」「Visual Studio」といったMicrosoft社が手掛ける様々なツールにて画面を作成する際に利用されます。ツール間で個別のXAML要素の互換性が担保されていない部分はあるものの、様々なフレームワークに渡って基本的に同じ要領で開発できることが大きなメリットです。他にもXAMLの特徴として『学習コストが低い』『C#との相性が良い』『ベクタグラフィックス』などが挙げられます。
SGMLとは1986年にISOによって標準化された文書の構造やデータの意味などを記述するマークアップ言語仕様の一つです。正式名称は『Standard Generalized Markup Language』です。SGMLの構成は「インスタンス」「DTD」「SGML宣言」の3点から成り立っております。SGMLの複雑で難易度が高かった仕組みを簡易化しべく開発されたものがXMLです。
Hamlとは「HTML avstraction markup langage」の略称で直訳すると『HTMLを抽象化したマークアップ言語』となっております。HalmはRubyで実装されており、PHP、ASP、JSPなどの他のWeb言語と同様にプログラム実行時に実行されるコードを埋め込み、動的コンテンツを提供するためにHTMLコードを生成します。特徴として『綺麗に、無駄なく、分かりやすく、効率的』『Rubyで使用できる』『タグ閉じ不要』などが挙げられます。よってHamlはより簡単で綺麗にHTMLを生成できるように作られたテンプレートエンジンとなります。
マークアップ言語の役割についてみていきましょう。
マークアップ言語の最も主要な役割としてWebサイト(ページ)の作成が挙げられます。インターネットの世界で標準規格とされるHTMLを使用することが一般的です。HTMLを使用することで「ドキュメントの作成・編集」「装飾」「ハイパーリンク」などの機能を扱うことができます。近年ではCMSと呼ばれるWebサイトの作成、管理、更新などを誰でも簡単に実現できるツールが急速に発展しておりHTMLやCSSといった専門的な技術を保有せずともWebサイトを作成することができます。
CMSの特徴や機能などの基礎知識を解説している記事はこちら>>
マークアップ言語の重要な役割としてSEO対策が挙げられます。Webサイトに集客を行うために斬っても切り離せない関係にあるのがSEO対策です。検索エンジンにおいてWebサイトが表示される検索順位のアルゴリズムはGoogleが定めております。順位を判断する上で様々な評価軸が設けられていますが基本的なものとしてマークアップ言語による文章構造が大きな影響を与えております。中でもタグと呼ばれる「titleタグ(タイトル)」「hタグ(見出し)」に関してはSEO初期の頃から重要視されており、ユーザーがそのページの内容を理解するために正しいタグ設定がされているのかどうかを検索エンジンは判断しております。
マークアップ言語を用いた職種をみていきましょう。
Webコーダーとは、お客様の要望をWebディレクターやWebデザイナーが仕様にまとめ上げた内容を基に、Webブラウザ上で閲覧出来るようにコーディング(実装)を行う職種を表した名称です。主にHTMLやCSSというマークアップ言語やJavaScriptというプログラミング現を用いてコーディングを行います。またWordPressなどのCMSと呼ばれるWebページ作成の際の補助ツールを活用する機会も多く見られますのでCMSの知識が必要とされます。
Webコーダーの仕事内容やコーディングの流れなどの基礎知識を解説している記事はこちら>>
フロントエンドエンジニアはWebサービスの利用者が目に触れる部分のシステムを開発する職種を表す名称です。システム業界では”見える部分を作る人”と呼ばれております。主な業務内容としてWebブラウザ上で見ることが出来るページや機能の作成など挙げられます。その際に利用される技術要素としてHTML、CSS、JavaScriptなどがあります。フロントエンド側がサーバーにプログラム実行のリクエストをすることで。サーバから必要な情報を受け取りWeb上にリクエストした内容が表示されます。
フロントエンジニアの仕事内容や必要な能力などの基礎知識を解説している記事はこちら>>
Webデザイナーとは、Webサイトのデザイン部分を担当する職種を表した名称です。主にPhotoshopやIllustratorなどのデザインソフトを活用してお客様の要望を実現するためデザインのみならず見やすくて使いやすいといったユーザビリティに優れたWebサイトを制作します。Webデザイナーと言ってもデザイン面を担当するだけでなくコーディングと呼ばれるHTMLやCSSといったWebサイトを構成するための言語を活用し実装を行う場合もあります。
Webデザイナーの仕事内容や市場価値を上げるコツなどの基礎知識を解説している記事はこち>>
マークアップ言語を理解するために初心者でも分かる歴史、役割、主要な6選について簡単に解説させていただきました。マークアップ言語を一言で表すと『文章の構造や文字の大きさ、種類などの体裁を指定する為のプログラミング言語』です。主な役割として「Webサイト(ページ)制作」「SEO対策」などが挙げられます。マークアップ言語についてこの記事に記載されている最低限の内容は理解をしておくようにしましょう。