マークアップ言語とは？プログラミング言語との違いやマークダウン言語も解説

Webサイトの基本構造は「マークアップ言語」によって作られています。
マークアップ言語は「プログラミング言語」とはまた違った言語であり、Webサイト制作にかかわる場合は違いを理解しておく必要があるでしょう。
またマークアップ言語にも種類があり、簡単に記述できるようにした「マークダウン言語」というものもあるので、併せて覚えておくと役立ちます。
今回はWebサイト制作に関与している企業担当者向けに、マークアップ言語とは何か、またその種類や使いこなすコツも紹介していきます。

 

目次

 

 

 

マークアップ言語とはコンピューターに文章の意味を伝える言語

マークアップ言語とは「Webサイト文章といったテキストに目印付けを行い、コンピューターに認識させるための言語」です。文章の意味合いを「タグ」と呼ばれる要素で記述して分類し、装飾を行います。コンピューターは、文章をそのままアップロードされても、各単語や文脈の意味を適切に理解できません。例えば

• 見出しがどこか把握する

• どこからどこまでが本文段落なのか確認する

• 引用した部分はどこなのか理解する

といった、人間であれば当たり前のようにできる判断が、タグなしだとコンピューターはできないのです。近年では「AI（人工知能）」に機械学習させてコンピューターが文章の意味を人間のように理解できるようにする研究が進んでいますが、人間レベルにまで文章を判断できるようになるのはまだ先の話です。タグを付けながら文章を記述すると、

• ここが一番重要な見出しだ

• ここからここまでが本文だ

• ここは引用だ

といった指示を、コンピューターへ渡せるようになります。コンピューターへ適切な文章理解を促すための言語が、マークアップ言語です。またマークアップ言語には他にも次のような特徴があります。

 

●人間にも分かりやすい文章になる

マークアップ言語を利用すると、

• 見出しは大きくなり太字で強調して表示される

• 段落は1段落ごとに改行して表示される

• 引用部分は灰色で背景が塗りつぶされる

といった文章装飾も可能です。強調のレベルや優先度なども調整できるので、何を伝えたいのかをビジュアル上でも分かりやすく表示できます。Webサイト上でスムーズに文章を読んでもらうためには、ユーザーにとってもどこに何が書いてあるのか直感的に理解してもらう必要があります。マークアップ言語を利用すればコンピューターだけでなくユーザーにも分かりやすく文章をWeb上で表示可能です。

 

●SEO対策上理解は必須

Webサイトの各ページは、

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

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

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

といった順序で閲覧されます。ここでいうクローラーとは「Webサイト内を回遊する自動ボット」、クロールとは「クローラーがWebサイトを回遊する行為」を表しています。「インデックス」は、Webサイトの内容を保存しているデータベースです。このうち2の手順において検索エンジンがWebサイトを把握する際、マークアップ言語が重要になってきます。

見出しは見出し用のタグで囲む、というように適切なマークアップを行っていないと、クローラーがスムーズにWebサイトの内容を理解できません。クロールに時間が掛かるだけでなく、検索結果に掲載されない危険もあります。確実なマークアップを行うことでクロールのスピードもスムーズになり、制作したWebサイトの検索順位にも良い影響を与えやすくなります。SEO対策においては他にも対策が必要ですが、マークアップの適切化はその中でも基本的な対策です。

 

●Webサイトだけでなくアプリ制作にも使う

マークアップ言語はWebサイトだけの技術ではありません。

例えば「ハイブリッドアプリ」と呼ばれるネイティブアプリは、「HTML」といったマークアップ言語をメインにして制作されます。既存のWebサイトを流用しながらアプリを制作する場合などに利用されるアプリです。各プログラミング言語を使うよりも手軽にアプリを用意できる、といったメリットがあります。このようにマークアップ言語はアプリ制作にも役立てられているので覚えておきましょう。

 

●プログラミング言語とは役割が違う

Webサイト制作初心者は、マークアップ言語とプログラミング言語を混同するかもしれません。プログラミング言語はアプリやソフトウェアの設計に使われています。

• ユーザーが入力した数字を基に金額計算を行う

• ユーザーデータを企業サーバーへ保存する

• ログイン処理を行う

といった、いわば動的な場面で使われるのが特徴です。プログラミング言語はその場で読み込まれ、条件を基に計算を行って結果を出力していきます。いわば動的な言語です。これに対してマークアップ言語は文章の意味合いの分類、そして文章構造化に使われます。プログラミング言語のような計算処理は行われず、書かれた内容をそのままコンピューターが読み込むのがポイントです。そのため、動きのない静的な言語になっています。

プログラミング言語についてはアプリやソフトウェアに限らず、Webサイト上でもマークアップ言語と合わせて使われます。マークアップ言語だけでも静的なWebサイトは作れますが、モダンなWebサイトを制作するためには動的なプログラミング言語が必要です。そのためECサイトやコーポレートサイトを開発・運営するうえで、マークアップ言語とプログラミング言語は欠かせない知識になっているといえます。

 

マークアップ言語にはどんな種類がある？

マークアップ言語には次のような種類があります。

• HTML

• XML

• XHTML

• SGML

 

●HTML

世界で現在一番利用されているマークアップ言語です。何度もバージョンアップが行われており、そのたびに使いやすくなっています。

最初からタグの各役割が決まっているのが特徴であり、シンプルなマークアップが可能になっています。また画像や動画を外部から貼り付けるといったこともHTML上から可能です。

ちなみにHTMLでは長い間、「W3C」と「WHATWG」という2つの団体が仕様をめぐって対立しており、それぞれの策定した仕様が並走している状態でした。しかし、WHATWGが策定した「HTML Living Standard」を正式なHTMLの仕様として認めたことで、今まで使われてきた「HTML5」という仕様が廃止になっています。

現在のインターネット上では、HTML5に関する文献が多くヒットします。HTML Living StandardとHTML5は共通点が多いのでHTML5を学習しても問題はないのですが、一部タグ仕様に違いがあるなど100％同じ内容ではありません。このため、これからHTML5を学習する場合は、HTML Living Standardについても理解をしながら学習を行う必要があるでしょう。HTMLの詳細については以下の記事もご参考にしてみてください。

■HTML5の構造とメリット

 

●XML

XMLは日本語訳で「拡張性の高いマークアップ言語」となります。その名の通り、HTMLより拡張性が高い点にメリットがあります。最大の特徴はタグを自由に決定できる点であり、例えば「この部分はシャツの名前だから、というタグを作って囲もう」といった作業が可能です。また複数のアプリを連携させてデータをやり取りするといったニーズにも向いている言語になっています。

ただし自由度が高い分タグの意味を分かるように設定する、担当者ごとにタグの書き方が変わって構造が分かりにくくならないようにするといった注意が必要です。

 

●XHTML

HTMLとXMLを掛け合わせた言語です。文法はXMLの仕様に従います。通常はHTMLでタグ付けをしながらも、必要な部分ではXMLで自由なタグ設定を行う、といった作業が可能です。またXML準拠の厳密なルールの元記述を行う必要があるので、その分ソースコードの管理がしやすいメリットもあります。

その代わり、すでに開発が終了しているのもあり文献が少なく、学習が難しいのがデメリットです。XHTMLを使うよほどのメリットがない限りは、HTMLを使ってコンテンツ構築をしたほうが安心できます。

 

●SGML

XMLといったマークアップ言語の基になった言語です。元々はWebサイト用ではなく、印刷物や電子文書などの管理を簡単にするために作られたマークアップ言語になっています。

文書の制作・管理などで課題のあった世界の政府関連機関や企業に普及しました。ただし構造が難しく、Webサイトにそのまま転用するには難点も多かったのでXMLやHTMLなどが派生して策定されています。現在SGMLで制作されたWebサイトというのはまずありません。ですからSGMLの文法については理解する必要はありませんが、各マークアップ言語の基になったことは覚えておいて良いでしょう。

 

マークアップ言語を使いこなすには？

マークアップ言語を習得する際は、プログラミング言語同様、全体の構造や各要素（タグ）の役割や機能、基本的な記述方法といった項目を知っておく必要があります。プログラミング言語と違って複雑な計算処理に関する機能などを覚えて使う必要はないので、習得はプログラミング言語より簡単かもしれません。ただし1から初心者が覚えてマスターするにはそれなりの時間が掛かります。

一方、HTMLをはじめとしたマークアップ言語は広い場面で使われており、Webサイトにかかわらず共通して記述する必要がある部分も少なくありません。そういった理由から現在ではWebサイトを簡単に開発可能な、マークアップを自動で行ってくれるツールが多数出回っているのもポイントになっています。

例えば、世界でもっとも使われているCMSである「WordPress」では、「ビジュアルモード」と呼ばれる文章編集画面から

• 太字にして強調を行う

• 見出しを付ける

• 段落分けを行う

といった、各マークアップ操作を直感的に実現できるようになっています。そのためマークアップ言語に関する知識やスキルがなくても、スムーズに文章の意味付けや装飾が可能です。ただしマークアップ言語について知っていると、コード編集画面から必要なタグ付けを行えるといったように自由度が高まるので便利です。Webページへ多彩なマークアップを行いたい場合はHTMLといったマークアップ言語を習得してみましょう。

なお、デザインについてはHTMLではなく、「CSS」といった「スタイルシート言語」を利用する必要があるのもポイントです。スタイルシート言語には文章へ意味を持たせる機能はありませんが、Webサイトのデザインやレイアウトを整えられるメリットがあります。デザインとして見栄えの良いWebサイトを作るためには、背景を明るくカラーリングする、文章の書く文字に色付けを行う、アニメーションを付けるといった操作のできるスタイルシート言語で記述を行う必要があります。「マークアップ言語とスタイルシート言語は1つのセット」と捉えて学習を行うと良いでしょう。

 

マークダウン言語はマークアップ言語より記述がシンプル

マークアップ言語を調べていると、「マークダウン言語」という単語が一緒に出てくるかもしれません。簡単に説明すると、マークダウン言語はマークアップ言語を簡単にしたものです。

マークアップ言語においては覚えるべきタグの種類が多かったり、記述方法を理解したりと、習得するうえで大変な点が多いです。そこで習得面における簡便さなどを目指して策定されたのがマークダウン言語になっています。マークダウン言語で記載された文章自体はプレーンテキストであり、装飾は反映されません。しかし装飾がなくても理解ができるように記法に工夫が施されています。

• 半角スペースを2個入力で改行

• 最初に#を記述すると見出しになる

• *で文章を囲むと斜体表示になる

といったように、マークアップ言語よりシンプルな記述で文章に意味合いを持たせられるようになっているのがポイントです。マークダウン言語で記載した言語は構文変換されてマークアップ言語へ変換されます。またマークアップ言語との併用も可能で、必要な部分はマークアップ言語を混ぜて記述を行うといった操作も可能です。

 

Webサイトの制作にはマークアップ言語は必須？

マークアップ言語を知らなくても、CMSといったツールを使えばECサイトやコーポレートサイトは制作可能です。ただし習得しておくとツールを使う際にも自由度が広がりますし、スムーズに制作できるようになります。もし「自社でWebサイトを作る知識やスキルがない、あるいはリソースが不足している」といった悩みがある場合は、Webサイト制作のできる企業へ外注してみましょう。システム開発企業がWebサイト制作を行っているケースも少なくありません。

希望に見合った外注先を選べば、「適切なマークアップをゼロから行ってくれる」「デザイン面やSEO面でも安心してお任せできる」といったメリットがあります。そしてECサイトやコーポレートサイトなどのWebサイト制作を検討している場合は、ぜひ「発注ナビ」をお使いください。企業同士の比較・検討がWeb上で簡単にできます。またご相談からご紹介まで完全無料。気になる人はぜひ下記リンクからアクセスしてみてください。

 

 

 

■マークアップ言語に関連した記事

	XMLとは？IT初心者にもわかりやすい基礎知識とHTMLとの違い
	ソフトウェア開発のプログラミング言語の種類や特徴を解説