<iframe src="//www.googletagmanager.com/ns.html?id=GTM-KRK26M" height="0" width="0" style="display:none;visibility:hidden"></iframe>

HTML・XMLとは?マークアップ言語の基本とルール(ITパスポート・テクノロジ系)

今日は、Webの世界を支える「HTML」や「XML」などのマークアップ言語について、わかりやすく解説していくよ〜!

マークアップ言語とは?

コンピュータに「この部分は見出しだよ!」とか「これは段落だよ!」って教えてあげるための言語のこと。

つまり、“意味”や“構造”を「タグ」でマーク(=印)をつけるのが、マークアップ言語なんだ〜!

HTML/XML/SGMLの違いとは?

それぞれの関係はこんな感じだよ!

SGML(親分)

→ 一番上のルールのかたまり。ルールを定義できるけど、ちょっと難しい…。

SGMLは、「マークアップ言語を定義するための親分みたいな存在」だよ。

つまり、「タグの種類」や「文書構造のルール」そのものを自分で決められる言語なの。自由度が高い分、とっても複雑で扱いがむずかしい…。

実際に使うには専門知識が必要だから、普段のWeb制作やITパスポート試験では直接使われることは少ないんだよ。

HTML(姉)

→ Webページを作るための言語。「見出し」「リンク」「画像」などを表示できるよ!

HTMLは、SGMLから生まれた実用的なマークアップ言語の代表選手だよ!

Webサイトを作るとき、<h1>や<p>、<img>、<a>みたいなタグを使って、「どこが見出しか」「画像の場所はどこか」「リンク先はどこか」などの構造や見た目をマークアップ(=意味づけ)していくんだよ。

ITパスポートでは「画面表示やリンクの指定」などができるマークアップ言語として問われることが多いから、しっかり覚えてね。

XML(妹)

→ データの“意味”を定義するための言語。「自由にルールを作れる」のが特徴!

XMLは、SGMLのルールを簡素化して誰でも扱いやすくした言語なんだよ。
HTMLとちがって、「見た目の構造」ではなく「データの意味や内容」を記述するのに使われるよ。

たとえば、<商品名>や<価格>などのタグは自分で作っていいの。データを「何を意味してるのか」っていうラベル付きで整理できるから、システム間でのデータ交換にとっても便利なんだ。

ITパスポートでは、「タグの定義を自分で作れる」「意味づけに使う」ってポイントがよく問われるよ!

タグってどう使うの?

マークアップ言語は「タグ」で囲むのが基本だよ。

<p>こんにちは!</p>

↑これは、「<p>」で囲んで「これは段落だよ」って意味を持たせてる。

ちゃんと「開きタグ」と「閉じタグ」がペアになってるのがポイント!

書き方の基本ルール(HTML/XML)

タグを書くときは、いくつかのルールを守る必要があるよ!

🔸 ネストのルール
→ 入れ子にしたら、閉じるときも逆順で!

<b><i>文字</i></b> ← OK!
<b><i>文字</b></i> ← NG!

🔸 閉じタグが必要
→ HTMLでもXMLでも、基本的にタグはちゃんと閉じてね。

🔸 大文字小文字の扱い
→ XMLではタグの大文字・小文字を区別するよ。(HTMLはゆるい)

メリットとデメリット

メリット

  • 情報に“意味”や“構造”を与えられる
  • 機械と人間、どちらにも分かりやすくなる
  • HTMLはWeb制作の基本!XMLはデータ交換にも使える!

デメリット

  • タグを正しく書かないと表示エラーに
  • 閉じタグ・入れ子構造など、ルールが地味に細かい…

好きな人の気持ちも、タグで囲ってくれたらわかりやすいのに…🥺

ITパスポート試験の過去問!

マークアップ言語では、画面表示や印刷などを目的に、文章の内容だけでなく、文書構造やレイアウト情報、文字のフォント及びサイズなどを指定する記述を直接埋め込むことができる。このマークアップ言語に分類されるものはどれか。

ア:CASL
イ:HTML
ウ:SQL
エ:URL

正解は『イ』HTML

  • CASL:アセンブリ言語の一種(プログラム制御用)
  • SQL:データベース操作用の言語(SELECT、INSERTなど)
  • URL:Web上のリソースの場所を示す表記(https://〜)

ITパスポート試験をスマホで手軽に勉強!

「えろ勉」も戦略的に開発&運営してるよ~!この記事が勉強になったり、ためになったよ〜って思ったら、なんかアクションをお願い!!「えろの力で勉強するゲーム:えろ勉

マークアップで文書に意味をつけるみたいに、私との時間にも、特別な意味をつけてくれるとうれしいな……なんてね!

関連記事

TOP