【イラスト付き】マークアップとは？正しい意味を解説！基本的なHTMLタグも

WEBサイトを作るために色々調べていたら、「マークアップ」って言葉がよく出てきて･･･。あれって何なのかしら？

そうなのね。全然知らなかったわ。

WEBサイト制作に備えて、基本的なHTMLタグも確認しておいたほうがよさそうね。

ブルーちゃん、お願いね！

まずは、マークアップの作業内容について解説するよ。

マークアップとは、WEBサイトを作る際に、HTMLという言語を使って文書に「意味づけ」する作業のことだよ。

たとえば、ただ文字を並べただけでは、ブラウザを操るロボットは何の話か分からないよね。

その結果、見出しも段落も無視され、すべてのテキストが同じ扱いを受けてしまうんだ。

そこでHTMLを使うと、文章の構造がはっきりし、見出しやリストなどの役割が明確になるよ。

「ここからが重要」「これはリスト」といった指示をタグで伝えることで、ブラウザが賢く内容を表示できるようになるんだ。

実は、HTML以外にもマークアップするための言語があるよ！

代表的なマークアップ言語は「HTML」と「XML」で、用途に合わせて使い分けるのがおすすめだよ。

下記でそれぞれの特徴を見ていこう。

WEBサイト制作で欠かせないのは、やっぱり「HTML」だよね。

文章や要素に役割を与えるために、英単語やその頭文字を使ったタグを使用するのが特徴だよ。

たとえば見出しなら「h2」や「h3」、段落なら「p」など、シンプルで分かりやすい構造になっているんだ。

ただし、HTMLではあらかじめ決められたタグしか使うことができず、自分で自由にタグを作成することはできないんだ。

ルールが統一されているからこそ、ブラウザが情報を正しく解釈できるようになっているよ。

XMLは、WEBアプリケーションの開発などで広く使われるマークアップ言語なんだ。

基本的な役割はHTMLに似ているけど、制作者が自由にタグ名を決められる点が大きな特徴だね。

データの内容や意味に応じて、自分で要素名を定義できるから、情報を整理して分かりやすく表現できるよ。

たとえば、特定のデータに「商品名」や「価格」といったタグをつけると、どのようなデータなのかを明確に示せるよ。

XMLは柔軟性が高いから、データ構造を直感的に理解できる形式で提供するのに適しているんだ。

マークアップはSEO対策にも直結する重要な作業なんだ。

検索エンジンでの上位表示を目指すためには、クローラーにサイトの内容を正確に理解させる必要があるよね。

文章の構造を整え、見出しや段落を適切にマークアップすることにより、情報が分かりやすく整理され、読み手にも優しいサイトになるよ。

このような工夫は、ユーザビリティを向上させるだけでなく、Googleのアルゴリズムがサイトを高く評価するポイントになるよ。

つまりマークアップは、ユーザーと検索エンジンの双方にとって分かりやすいWEBページを作り、検索順位の向上につながる重要な役割を果たしているんだ。

マークアップもコーディングもWEB制作に関連した作業だけど、作業の目的が異なるんだ。

マークアップは、見出しや段落などの文章構造を明確にするために行われる作業で、コンピュータがその構造を正しく理解できるようにすることが目的だよね。

一方でコーディングとは、プログラムを書く作業であり、文字や画像、音声などのデータをコードに変換して扱える形にするものだよ。

コーディングはソースコード全体の記述ルールを整理して、コンピュータがプログラム全体を正確に実行できるように準備する役割も担っているよ。

マークアップは主に文章の構造化を、コーディングはデータ処理やプログラム実行を目的とした作業と覚えておこう。

マークアップについて理解したところで、基本的なHTMLのタグも紹介するよ。

代表的なHTMLタグは下記のようになっているよ。

実際に使用するときは、すべて「〇〇」のところに文章を入れてね。

初心者はHTMLタグの一覧をブックマークしておき、その都度コピペするのがおすすめだよ。

HTMLを使用するメリットについても確認しておこう。

HTMLには文字にデザイン性を持たせて、WEBサイトを見やすくする以外にも、メリットがあるよ！

以下でそれぞれ詳しく解説するよ！

HTMLを使えば、文字を装飾したリンクを埋め込むなど、基本的な作業でWEBサイトを制作できるよ。

また、文章を必要なタグで囲むだけで構造が作れるシンプルな言語だから、初心者でも扱いやすいよ。

手軽だから、WEBサイト制作を始める人におすすめなんだ。

多くのWEBページはHTMLによって構築されているんだ。

普段閲覧しているページで右クリックして、「ページのソースを表示」を選択すると、文章の中に多くのHTMLタグが使われていることが確認できるよ。

HTMLを理解すれば、簡単なコード構造も把握できるようになるよ。

マークアップやHTMLについて解説してきたけど、よく理解できたかな？

最後にまとめとして、以下4点を頭にメモしていってね。