マークアップ言語とは？その種類と意味・役割を徹底解説！プログラミング言語との違いやマークアップ言語が必要な理由にも迫る

インターネットを彩っているマークアップ言語

もはや生活には欠かせない存在といっていい「インターネット」。

インターネットには数多くの種類豊富なWebサイトがあり、世界中の人が様々なWebサイトを楽しんでいます。

もちろん楽しむだけでなく、クレジットカードの利用明細をチェックしたり、買い物をしたり…用途も多岐に渡り、もはやインフラの一部となりつつあるといえるでしょう。

そして、Webサイト作成するときに使うのが今回注目していく「マークアップ言語」です。

マークアップ言語について解説

今回の記事では「マークアップ言語」について解説を進めていきます。

IT業界で同じく親しまれるプログラミング言語と区別されている理由・違いや、マークアップ言語の種類や持っている役割なども紹介。

そしてマークアップ言語がどうして必要なのかという理由についても注目していきます。

マークアップ言語の基本的なタグについても幾つかチェックしていきましょう。

マークアップ言語とは文書への意味付け

最初にマークアップ言語がどういうものなのかについて把握しておきましょう。

マークアップ言語は、文書を「タグ」で囲みます。

例えば、見出しを設定する際は「<h1>見出し1</h1>」といった具合に「<タグ名></タグ名>」で文字を囲みます。

するとその囲んだ部分が見出し化されたり、太字を設定したり、文字の色を変えたりといったことが可能です。

タグで囲んで意味をつけるこの作業を「マークアップ」と呼び、Webページの基礎を作成することが可能になります。

マークアップ言語の種類は？

続いて「マークアップ言語の種類」をチェックしていきます。

「Markup Language」と表記されることもあるマークアップ言語は、主に4種類の言語が存在しています。

• HTML
• XML
• XHTML
• SGML

一般的に認知度が高いのはHTMLおよびXMLでしょう。

実際には数多くの種類がありますが、上記4つがベースとなります。

簡単にではありますが解説をしていきますので、まずはマークアップ言語の種類を1つずつチェックしましょう。

最もメジャーなHTML

HTMLは、数多くのWebサイトを制作するのに使われているマークアップ言語です。

データのある場所を示すことができ、Webページ上に画像や動画・音声などを表示させることができます。

また、Webページ上に表示させる文章のレイアウトを整えることもできます。

見出しを適切に設定して見やすい構成にしたり、意図を伝えやすいように文字に色付けや太字を設定することが可能です。

カスタマイズ性の高いXML

XMLもHTMLと共に広く親しまれ、知名度の高いマークアップ言語です。

XMLは「Extensible Markup Language」の略で、その名の通り拡張できるマークアップ言語になります。

ベースは後ほど説明するSGML。

HTMLは先ほど<h1>タグに触れた通り、既にタグが決められています。

しかし、XMLはタグを自由に決めることが可能です。

カスタマイズ性がHTMLよりも高く、より自由にマークアップをしていくことができるでしょう。

そして、ネットワーク上にあるWebアプリを組み合わせて新しいサービスを作り出す際などにも使えます。

自由にタグが設定できること、インターネットを他のアプリケーションとの連携が得意だという特徴を持っているマークアップ言語です。

HTMLとXMLの融合体XHTML

XHTMLは、名前の通り「HTML」と「XML」を融合させたマークアップ言語です。

文法はXMLのように厳格で、HTMLではタグは大文字でも小文字でもいいのに対して、XHTMLは必ず小文字でなければなりません。

HTML同様のタグを用いつつ、XMLのように独自タグを作成することも可能であるため、非常に幅広く自由度の高いWebページ制作ができます。

タグの定義・文法が厳しいために、後から見返した際に可読性が高いというメリットも持っています。

他人が制作したファイルであってもある程度の読みやすさが保証されているともいえるでしょう。

最も歴史のあるSGML

今回紹介してきたHTML・XMLのベースとなったマークアップ言語が「SGML」です。

元々は印刷で使用されるような文書や電子出版物のために定義されたマークアップ言語。

アメリカ国防総省などの公文書規格として採用されたという経歴ももっている由緒あるものといえます。

タグなどを決めている言語であり、HTMLなどの「ベースとなった言語」といえるのがSGMLです。

言い方を変えれば、SGMLをWebに特化させたのが「HTML」や「XML」といえるかもしれません。

マークアップ言語の持つ役割

さて、マークアップ言語の種類についてチェックしてきました。

Webページ（Webサイト）制作に用いたり、Webアプリケーションと連携を取ったりする際に用いられるということが分かったでしょう。

Webページ作りに欠かせない

マークアップ言語を使えば、Webサイトを適切なレイアウトに整え、自分好みなページを制作することができます。

文中などで強調したい箇所に太字を設定したり、文字の色やフォントサイズを変更して読みやすく伝えやすい文章を組めるでしょう。

そして画像や動画・音声などをWebページに組み込むことも可能です。

しかし、マークアップ言語は単にWebページを作るためだけの用途で用いられている訳ではありません。

他にも大きな役割を担っています。

SEO対策に繋がる

昨今、Webサイトを制作する上で非常に重要視されているのが「SEO対策」です。

SEO対策は検索エンジンへ最適化させることで、検索結果の順位がより上位に表示されるようにすること。

マークアップ言語を用いて適切にWebサイトの文章などをタグ付け（マークアップ）すれば、Googleなど検索エンジンへ情報を伝えやすくなります。

SEOは何をすれば確実に検索順位が上がるというのは明確になっていませんが、タグ付けが重要だとされているのも事実です。

全てをただ文章で記述しただけのWebページよりも、<h1>や<h2>など見出しタグを利用したり<ul><li>タグでリストを作ることでSEO対策に繋がります。

より効果的なWebサイトを制作できるでしょう。

プログラミング言語との違い

さて、マークアップ言語は大抵パソコンで記述します。

となると、必然的に「プログラミング言語とは違うの？」という疑問が生まれてくるのも当然です。

マークアップ言語とプログラミング言語の役割の違い

マークアップ言語は、今回お伝えしてきている通り「文書に意味を持たせる」言語です。

対して、プログラミング言語は「コンピューターに命令を与える」言語となります。

またプログラミング言語は「計算処理をさせる言語」ともいえるでしょう。

似ているように感じますが、実際は全くの別物であるということが分かります。

プログラマーがマークアップ言語を扱う理由

しかし、実際に仕事でマークアップ言語に触れるのは大抵エンジニア、もっと具体的にいえばWebプログラマーです。

プログラミング言語ではないにも関わらず、なぜプログラマーがマークアップ言語のコーディングを担当するのでしょうか。

その理由は至ってシンプルです。

Webページを作る際に用いるJavaScriptやPHP・Rubyなどのプログラミング言語がHTMLなどマークアップ言語と密接に関わっているからです。

マークアップ言語とWebプログラミング言語は密接に関わり合っている

例えば、JavaScriptやPHPはHTMLファイル上に記述することができます。

もちろん別個にファイルを用意して記述もできますが、同一ファイル内に記述することも少なくありません。

そして何よりも、仮にJavaScriptやPHP、いわゆるWebプログラミング言語といわれる言語はHTMLなどを理解していなければ扱うのが難しいということがいえます。

そのため、確かにマークアップ言語はプログラミング言語ではありませんが、互いに非常に密接に関わり合っている関係にあるということが分かります。

特にHTMLとCSS、JavaScriptの3つはセットで語られることもあることから、やはりその密接な関係性が分かるでしょう。

マークアップ言語が必要な理由

マークアップ言語はなぜ必要なのでしょうか。

明確な理由があります。

インターネットを楽しむために必要不可欠

マークアップ言語はインターネットが普及して誰もが触れ合うようになった現代社会において、非常に重要かつ必要不可欠なものといえるでしょう。

記事の冒頭でも少しだけ触れましたが、誰しもがインターネットで様々なコンテンツ・Webサイトを楽しんでいます。

そのコンテンツやWebサイトを構築しているのは、マークアップ言語と先ほどお伝えしたJavaScriptやPHP・RubyなどのWebプログラミング言語です。

企業（Webサイト運営側）にとっても非常に重要

また、企業側としてもマークアップ言語は非常に重要です。

検索結果の上位に表示されるか否か、1ページ目なのか2ページ目なのかでアクセス数に圧倒的な差が生じてしまいます。

企業がSEO対策を適切に行うためにも、マークアップ言語は必要不可欠なものだということです。

マークダウンとは？

さて、マークアップ言語について解説してきましたが、よく聞くフレーズとして「マークダウン（MarkDown）」というものもあります。

マーク「アップ」と「ダウン」で非常に似ている2つの言葉ですが、一体どのような違いがあるのでしょうか。

マークアップ言語（HTML）は「タグ」で囲むことで文章を強調したり、見出しを設定することができました。

しかし、タグで囲むと文章そのものは非常にごちゃごちゃし、テキストのままではとても読みづらい文書ファイルとなってしまいます。

もちろんHTMLファイルとして見れば非常に読みやすいですが、ある種手間になります。

マークダウンの特徴

対して、マークダウンはタグで囲むことはしません。

記号などで囲ったり、文頭に記載することでテキスト文書をHTMLやXHTMLへ変換できる方式で記述します。

これを「マークダウン記法」と呼んでいます。

文頭に「#」などを記載しておくことで、HTMLの見出しとして設定したり、箇条書きなどを簡単に実装できるほか「<>」がないためテキストのままでも読みやすいという特徴があります。

軽量マークアップ言語とも呼ばれる

また、その手軽さ・シンプルさから「軽量マークアップ言語」と呼ばれることもあります。

既にHTMLなどの基本知識を持っている方であれば、かなり楽に習得することができるでしょう。

マークアップ言語は生活に密着している

今回の記事では、マークアップ言語について注目してきました。

HTMLやXMLなど、普段は直接触れる機会が少ないかもしれませんが、実はインターネットを利用すれば必ず恩恵に与っているのが「マークアップ言語」です。

今や生活に密着しているIT技術ですが、マークアップ言語も非常に重要なものだといえます。

マークアップ言語とプログラミング言語を扱えるエンジニアを目指す

プログラミング言語とは異なるということを違いとともに解説しました。

その際触れた通り、Webプログラミング言語とマークアップ言語は基本的にセットです。

JavaScriptやPHPなどは軽量プログラミング言語と呼ばれ、習得や実行が用意だといわれていますが、HTMLなどへの知識も必要になってきます。

そのため、どちらか片方ではなく「マークアップ言語とプログラミング言語の両方」を習得するよう意識しましょう。

両方を1人で扱うことができれば、魅力的なWebページを作ることができます。

特にJavaScriptなどをHTMLやCSSと連携させることで「動的なWebサイト」を制作できるでしょう。

魅力のあるエンジニアになるためにも、ぜひともマークアップ言語・プログラミング言語両方をしっかり理解し、習得するようにしましょう。

特にWeb業界を目指している方や、Webプログラマーになりたいという方にとっては必須となってくるスキルです。

もちろん、個人の趣味でWebサイトを運営してみたいという方にとっても重要だといえるでしょう。