マークアップ言語とは?初心者向けのわかりやすいガイド

ざっくりと

  • テキスト文書を構造化する言語
  • ウェブページ作成に使う
  • HTMLとXMLが代表例

マークアップ言語とは、テキストを構造化してウェブページを作る言語です。

概要説明

マークアップ言語とはテキスト文書を構造化するための言語である。なぜならば、情報に「意味」や「構造」を付け加えるため。

例えばHTMLである。そして、ウェブページの作成に欠かせない。つまり、コンテンツの形と機能を定義する役割がある。だから、ウェブの基盤となる技術である。

職業職種

  • ウェブデザイナー
    ウェブデザイナーは、マークアップ言語を使用する。なぜなら、ウェブページの構造とデザインを作成するため。例えば、HTMLとCSSを使ってレイアウトを設計。
  • コンテンツマネージャー
    コンテンツマネージャーは、マークアップ言語を使用する。なぜなら、ウェブサイトのコンテンツを整理し、更新するため。例えば、CMSでHTMLを編集。
  • ソフトウェア開発者
    ソフトウェア開発者は、マークアップ言語を使用する。なぜなら、アプリケーションのユーザーインターフェースを設計するため。例えば、XMLを使ってデータを構造化。

マークアップ言語は、名前の由来は「マーク(印)を付ける」からです。これは、テキストに特定のマーク(タグ)を付けて、そのテキストの構造や意味を明示することから名付けられました。

代表例

  • W3C(World Wide Web Consortium)
    W3Cは、マークアップ言語で有名である。なぜなら、ウェブ標準を策定し、HTMLやXMLの仕様を定める役割を果たしているからだ。例えば、HTML5の仕様を公開。
  • Adobe Systems
    Adobe Systemsは、マークアップ言語で名高い存在である。なぜなら、PDFの開発企業として知られ、PDFも一種のマークアップ言語を使用しているからだ。例えば、Adobe Acrobat。
  • Tim Berners-Lee
    Tim Berners-Leeは、マークアップ言語で世間に知られている。なぜなら、World Wide Web(WWW)の発明者であり、HTMLを開発した人物だからだ。例えば、初のウェブブラウザを開発。

手順例

以下は、HTMLページの作成手順です。
  1. テキストエディタを開く
    テキストエディタは、コードを書くためのツールである。なぜなら、シンプルで使いやすいからだ。例えば、NotepadやVSCode。
  2. HTMLの基本構造を書く
    HTMLの基本構造は、ページの骨組みである。なぜなら、ブラウザが内容を正しく表示するための指示を書く場所だからだ。例えば、<!DOCTYPE html>や<html>タグ。
  3. コンテンツを追加する
    コンテンツは、ウェブページの情報である。なぜなら、訪問者に伝えたい内容を表現する部分だからだ。例えば、<h1>や<p>タグでテキストを追加。
  4. スタイルを適用する
    スタイルは、ページの見た目を整えるものである。なぜなら、訪問者にとって魅力的なページを作るためだからだ。例えば、CSSを使って色やフォントを設定。
  5. ブラウザで確認する
    ブラウザで確認は、作成したページが正しく表示されるかをチェックする行為である。なぜなら、ユーザーがどのようにページを見るかを理解するためだからだ。例えば、ChromeやFirefoxでの表示を確認。

類似語

  • プログラム言語
    プログラム言語は、マークアップ言語の類似語である。なぜなら、コンピュータに指示を出すための言語だからだ。例えば、PythonやJava。
  • スクリプト言語
    スクリプト言語は、マークアップ言語の類似語である。なぜなら、ウェブページに動的な機能を追加するための言語だからだ。例えば、JavaScript。
  • スタイルシート言語
    スタイルシート言語は、マークアップ言語の類似語である。なぜなら、ウェブページの見た目を制御するための言語だからだ。例えば、CSS。

反対語

  • プレーンテキスト
    プレーンテキストは、マークアップ言語の反対語である。なぜなら、構造やスタイルを一切含まず、純粋な文字データだけを表現するからだ。例えば、.txtファイル。
  • バイナリデータ
    バイナリデータは、マークアップ言語の反対語である。なぜなら、人間が直接読むことができない形式でデータを表現するからだ。例えば、画像ファイルや実行ファイル。
  • ハードコーディング
    ハードコーディングは、マークアップ言語の反対語である。なぜなら、データをプログラムの中に直接書き込む手法で、柔軟性が低いからだ。例えば、設定値をソースコード内に直接記述。

会話例

  • ウェブデザイナーとクライアントの打ち合わせ
    「このページのレイアウトはマークアップ言語でどう実現するんだ?」
    「HTMLとCSSを使って、セクションごとに構造化し、スタイルを適用するよ。」
  • プログラマー同士のコードレビュー
    「このマークアップ、セマンティックになってないけど?」
    「確かに、この部分は<div>ではなく<article>や<section>を使うべきだね。」
  • 教育担当者が新入社員に指導
    「マークアップ言語って、どうして重要なの?」
    「ウェブページの構造を明確にし、ブラウザが内容を正しく解釈できるようにするためだよ。」

注意点

マークアップ言語を使用する時の注意点は、正確な構文である。なぜならば、間違った構文だとブラウザがページを正しく表示できなくなるからだ。

例えば、閉じタグを忘れると、その部分のレイアウトが崩れる。そして、セマンティックなマークアップを心がける。だから、コードは常にクリーンに保つ。

マークアップ言語とプログラミング言語は、間違えやすいので注意しましょう。

マークアップ言語は、テキストを構造化して表示の方法を指示するものです。

一方、プログラム言語は、コンピュータに具体的な動作を指示するものです。

記事を書いてる人

ガラケー時代からWEB開発やってる自宅SE です。

「○○を知りたい!!」「○○が分からない!!」などありましたら、Twitterでもブログでもコメントいただければ、ご期待に添えるように頑張ります!

ネット事件簿チャンネルを運営しているので、YouTubeもぜひ覗いてみてください!!

雨おやじのSNSを覗く!!
HTMLIT用語辞典
雨おやじのSNSを覗く!!
ITkagyo

コメント