• マークアップの由来と歴史と役割を解説。HTMLの起源を知ろう。

    歴史ある図書館の写真

    「マークアップ」とは？

    HTMLを勉強していると目にする言葉「マークアップ」。

    このマークアップとは「人が機械に伝えたいこと」を「機械がわかるようにマーキングしていく作業」です。

    人間であれば、例えば「半額セール！」と太字に赤文字で書いてあれば「半額を強調したいんだな」とわかりますよね。

    しかし機械にそれを伝える際は、コンピューターの目の前に「半額セール！」と書いた紙を持っていっても、その情報がどれくらい大事かはコンピューター自身は判断できません。

    そこで、下記のようにわざわざ文章に「指示」を書いて、コンピューターに伝えます。

    <strong><span style="color: #ff0000;">半額セール！</span></strong>」

    上記の記述だと機械は「<strong>だから強調だな」「color: #ff0000だから色は赤ね」と理解できるのです。

    こういった<>で挟まれた指示を記述し、文書を「構造化」するのがマークアップです。

    「マークアップ」の由来

    歴史を感じさせる写真

    マークアップという言葉自体は、実はHTMLが由来になっているわけではありません。

    実はその言葉の歴史は非常に古く、英語圏では書籍出版の際に「この部分はこのフォントで」「この部分は太字で」など印刷の指示出しをする際に使われていました。この作業は「マーキングアップ」と言われています。

    いわゆる印刷用語として数世紀に渡って使用されていた「markup」という言葉が、電子組版・コンピューター上においてもそのまま「markup」と使われるようになったんですね。このあたりのお話はウィキペディアにも記載されています。

    そのような過程を経て、いまやマークアップと言えばその代表格は「HTML（Hyper Text Markup Language）」であり、遥か昔から人々が文書の構造化に取り組む作業としての進化系として認知されています。

    「マークアップ言語」とは？

    ノートパソコンとメモ帳

    よくマークアップ言語とプログラミング言語は混同されることがありますが、厳密には両者は異なり、とはいえ広義では共にプログラミングという枠に収まると言えます。

    「プログラミング」とは「自動化」を目的として成される行為であり、例えば町の信号機やインスタグラムなどのSNSでも「こういうケースにはこういう動きをする」と、プログラミングがされています。まさに自動化、ですね。

    対して「マークアップ」とは冒頭に概略をご説明したように「機械が理解できるように文書を構造化する」ことを主とした行為です。とはいえ、その構造化された文書を「機械がわかるようにマークアップしておくことで機械がいつでも正確に読めるように自動化している」とも言え、広義ではプログラミングとも見ることができます。

    とはいえ、その言葉の由来から鑑みても「マークアップとプログラミングは目的が異なる」という理解を持っておくと良いでしょう。

    マークアップ言語とは、機械に対して「強調」「太字」「色文字」「この範囲がひとつの段落」といった文書構造の定義び必要なコトバということなります。

    マークアップ言語は<strong>や<br>や<div>など、「タグ」で囲まれていることも特長のひとつです。実際にHTMLでタグをいじってみたい方は『「HTML」とは？タグの意味とWEBページの構造を理解しよう。』にて簡易的な演習も交えて体感してみましょう。

    なぜ「マークアップ」が必要なのか？

    マークアップの作業に勤しむエンジニアたち

    マークアップの必要性としては、大きな存在意義は「3つ」あります。

     

    ①機械へ人間の意図を伝える

    ②視覚障害者の方のため

    ③検索エンジンへの訴求

     

    上記3つになります。ひとつづつ、解説します。

     

    ① 機械へ人間の意図を伝える

    人間が、機械にわかるように言葉にタグを付け、構造化することで正確に意味を伝えるために機能します。

    ② 視覚障害者の方のため

    視覚障害の方はインターネットの文書を、コンピューターが読み上げる「声」で理解します。例えば写真においても<alt>タグにて「砂浜で笑っている男の子」といった解説があるからこそ、どのような写真であるかを理解できます。

    ③ 検索エンジンへの訴求

    Googleに代表される検索エンジンは、質の高い情報を備えた記事を上位に表示します。しかし、検索エンジンは単に文章を読んでも、そのページが最も強調したいことや写真・画像に何が描いてるのかは理解ができません。そこでマークアップにて「機械に伝える」ことが必要になります。これはマーケティング視点で見れば「SEOのため」と言い換えることもできます。

     

    以上3つの理由にて、インターネット上においての「マークアップ言語の必要性」は重要かつ不可欠なものなのです。

    マークアップの歴史

    時計の写真

    では、マークアップ誕生の軌跡をたどってみましょう。HTMLに至るまでの道程を解説していきます。

    起源

    Hyper Textという概念自体は1930年代が起源と言われています。もちろんその頃はインターネットの存在など皆無でしたが、仮想コンピューターの概念を提唱したヴァネヴァー・ブッシュというアメリカの研究者が最初という説が有力。しかしこの時はまだ概念のみで、HyperTextなる言葉は生まれてません。

    Hyper Textを定義

    1965年にアメリカの社会学者テッド・ネルソン氏が「ハイパーテキスト」「ハイパーメディア」なる言葉を発表し、定義付けされました。この概念をネルソン氏はサミュエル・テイラー・コールリッジの小説からの引用で「ザナドゥ（Xnadu）」と名付けました。

    端末の進化

    1945年にヴァネヴァー・ブッシュの 『As We May Think』を読んだことからそのキャリアをスタートしているアメリカの発明家ダグラス・エンゲルバートにより、現代のパソコンに近い端末の形態が開発されました。現代のGUI（グラフィカルユーザインタフェース）に通ずる端末では、ハイパーテキストを用いた動作も可能になりました。

    SGMLが誕生

    チャールズ・ゴールドファーブにより現在のHTMLの機能を備えたSGML（Standard Generalized Markup Language）が開発されました。

    XMLの登場

    SGML（Standard Generalized Markup Language）をよりシンプルにした「XML」が登場。その後「XHTML」に進化します。

    HTMLの登場

    ティモシー・バーナーズ＝リーとロバート・カイリューにより「WWW＝World Wide Web」が考案されます。前述のSGMLをベースに「HTML」が開発されるに至りました。

    進化するHTML

    未来感のある会社の内観

    では、HTMLになってからの進化の過程も見ていきましょう。

    1991年頃：開発初期のHTML

    1991年頃、ティモシー・バーナーズ＝リーそしてロバート・カイリューにより開発。扱えるのは文字データのみ。タグは20種ほど。

    1993年頃：HTML1.0

    1993年頃、科学者ダン・コノリーらによって定義され「International Institute of Refrigeration（IIR）Working Group」より提起されたインターネット・ドラフト。世界で始めて公開されたHTMLの仕様書。ここで始めて画像の貼り付けや特殊記号文字の使用が可能に。

    1995年頃：HTML2.0

    W3C（ワールド・ワイド・ウェブ・コンソーシアム）により勧告された正規のHTML。フォーム機能なども使用可能になる。

    1997年頃：HTML3.2

    1995年に廃案となった「HTML3.0」、つづいて「i18n」を経て「HTML3.2」へ。英語圏以外の言語も一部使用可能に。

    1997年12月：HTML4.0

    CSSことスタイルシートを正式に採用。2年後の1999年に改訂版「HTML4.0.1」もリリース。

    2000年頃：XHTML1.0

    HTML5にいかず、W3CによりXHTMLが勧告される。機能や要素は4.0と同じだが、XMLの記述方式で厳密に定義された。

    2001年頃：XHTML1.1

    XHTML1.oの改訂版。

    2014年頃：HTML5

    HTML5のロゴマーク

    XHTMLは1.2以降はW3Cより正式な勧告は出ず、14年ぶりにHTMLが勧告されました。

    2017年頃：HTML5.2

    2016年にHTML5.1、2017年にHTML5.2が勧告された。改訂の主要目的は「人間にも読解可能」「コンピューターにも矛盾なく読解可能」「最新のマルチメディアをサポートできる言語たること」がある。

    2021年5月時点：HTML5.2

    2021年5月時点では「HTML5.2」であり、2017年度のアップデートのままとなっています。そろそろ新しい勧告が出るかもしれませんね。

    マークアップの根源を知る意味

    古い書籍（歴史のイメージ）

    マークアップの歴史や由来を見てきましたが、さまざまな研究者や機関によって少しづつ形づくられていったものであることがわかったと思います。

    どの時代においても共通しているのは「人にやさしく」「コンピューターにもやさしい」言語であること。

    テクノロジーがいかに進化をとげ、新しいプログラミング言語には流行り廃りはあれど「マークアップ」だけはある意味別格の位置づけとも言えます。

    マークアップの仕様は「進化」はすれど退化することはなく、どの時代においても常に最適・最上の質が探究され、W3Cによる厳格な管理下に置かれています。HTMLで制作された文書は時代を超えて閲覧することが可能であり、それはマークアップという技術が普遍的であることの証明に他なりません。

    なおHTMLと並び語られるCSSについては「CSSの歴史。誕生の背景やLevel別の特長を学ぼう。』を併せてチェックしておきましょう。

    また別記事『【初心者向け実践】HTMLとCSSの環境構築「8つの手順」』では演習として、HTMLとCSSの基礎的な使い方をサンプルコードと共に紹介しています。

    実際にテキストエディタを使って、マークアップ言語とスタイルシート言語を扱ってみましょう。

    マークアップは時代を超える基本の技法

    机に置かれたSURFACE

    マークアップはプログラミング学習の基礎であり、時代を問わず活かすことができる技法です。

    当サイト「メンタレ」は「メンターを一時的にレンタル」できるサービス。

    独学途中での活用や、今回のような基礎部分の講座ももちろんOK。ピンポイントで「実践的な講座をしてもらえる」のが特長。

    例えば初心者の方は、本記事のようなHTMLを確実にモノにすることで、プログラミング学習の応用段階においても柔軟に対応できる力が修得できます。

    独学だけど少し行き詰まった方、プログラミング初心者の方や、ITへの苦手意識がある方。

    お気軽に活用ください。

さらに最新記事もチェック！

まずはLINEで
お問合せ