【HTML入門】超基本！マークアップの意味やタグの書き方などを解説
HTMLを勉強していて、
「HTMLはプログラミング言語じゃないって聞いたけど本当？」
「マークアップするって良く聞くけどういう意味？」
と思ったことはありませんか？
マークアップとは何か理解することで、よりHTMLを理解して使うことができるようになりますよ。
今回は、以下の内容がわかる記事になっています。
- プログラミング言語とマークアップ言語の違い
- プログラミングを学ぶ上で必要な用語
- マークアップの方法
実際にマークアップのやり方も解説していきますので、HTMLを本当の意味で正しく使えるようになりたい！
という方は、ぜひ最後まで見てくださいね。
HTMLはプログラミング言語じゃない！？
まず初めに、HTMLはマークアップ言語であるということを理解しておきましょう。
あれ？プログラミング言語じゃないの？
と思った方もいるでしょう。
プログラミング言語は、以下のようにコンピューターに計算処理などを指示する言語のことで、主にJavaScriptやPHPなどの言語のことを意味しています。
// JavaScript
var test = 5 + 3;
console.log(test);マークアップ言語とは何か？については、他の基礎用語と合わせて、次で詳しく解説します。
HTMLを学ぶ上で覚えておきたい超基礎用語
マークアップとは、人間の言語をコンピューターがわかるようにHTMLを使って翻訳することです。
人間の言葉はコンピューターにとっては理解できないものなので、HTMLのタグによってはじめて意味が付けられるのです。
具体的には、以下のようにHTMLのタグを使ってそれぞれの言語に意味を付けていきます。
<h1>これは大見出しです</h1>
<h2>これは小見出しです</h2>
<p>これはテキストです</p>タグにはそれぞれ意味があるので、「このタグで囲まれた箇所は○○という意味なんだ」とコンピューターが理解できるようになるのです。
マークアップ以外にも、HTMLを学ぶ上でよく使用する基礎用語をがあります。
以下2つの用語も一緒に覚えておきましょう。
マークダウン
マークアップと似ている言葉で「マークダウン」という用語があります。
似ているのは名前だけでなく用途まで同じで、マークダウンもテキストに意味付けをすることを指します。
マークアップと異なる点は、タグではなく「特殊記号」を用いて意味付けを行っていること。
具体的には、以下のように記述します。
#これは大見出しです
##これは小見出しです
これはテキストです 先ほどのマークアップのサンプルコードと、ブラウザ表示は同じになります。
記述が少なくて済むのでマークダウンを好んで使う人もいますが、主流はマークアップなどで初心者の方はマークアップから覚えましょう。
コーディング
「コーディングする」「マークアップする」
などの言葉が使われていますが、両者の違いを分からずに使用している人も多いでしょう。
コーディングはソースコードを記述すること自体を意味するので、テキストに意味づけを行うことであるマークアップとは意味が違ってきます。
JavaScriptやPHPなどのプログラミング言語を記述することも「コーディング」に当てはまります。
つまり、ソースコードを記述するコーディングの中でにマークアップを行う作業があるということです。
HTMLのマークアップをやってみよう！
では、実際にどのようにHTMLタグを使ってマークアップするのか見ていきましょう！
以下のテキストをマークアップしていきます。
Webサイトのタイトル
Webサイトのディスクリプション（要約）
ヘッダー。Webサイトの名前やメニューバーなどを記載します
大見出し
テキスト
小見出し
リスト1
リスト2
sampl.jpg
https://web-camp.io/magazine/
フッター。Webサイトの名前やサイトマップなどを記載します最低限覚えておきたい基礎タグを用いて、マークアップする方法を解説していくので、初心者の方は実際にやってみてくださいね。
1.HTMLの枠組みの基本タグ
まずは、HTMLページを作る枠組みを作っていきます。
<html>
<head>
</head>
<body>
<header>
</header>
<footer>
</footer>
</body>
</html>それぞれのタグには、以下のよな意味があります。
| htmlタグ | HTML文書 |
| head | 文書に関する情報（ヘッダ情報） |
| bodyタグ | 文書の本体 |
| headerタグ | イントロダクションやナビゲーショングループ |
| footerタグ | Webサイトに関する情報（著作権、関連文書へのリンク、誰が書いたのかなどの情報） |
では、それぞれに先ほどのテキストをマークアップしていきましょう。
2.headタグ内をマークアップ
<html>
<head>
<title>Webサイトのタイトル</title>
<meta name="description" content="Webサイトのディスクリプション（要約）">
</head>
・
・
・headタグ内には、Webサイトのタイトルや使用している言語の指定など、文書全体の情報を定義する内容を記述します。
ブラウザ上に表示されませんが、SEO対策で重要なタグです。
bodyタグ内をマークアップ
・
・
・
<body>
<header>ヘッダー。Webサイトの名前やメニューバーなどを記載します</header>
<div>
<h1>大見出し</h1>
<p>テキスト</p>
<h2>小見出し</h2>
<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>
<img src="img/sample.jpg">
<a href="https://web-camp.io/magazine/"></a>
</div>
<footer>フッター。Webサイトの名前やサイトマップなどを記載します</footer>
</body>
</html>bodyタグ内に記述されたコードはブラウザ上に表示されます。
bodyタグ内で使用される要素の代表的な例と、それぞれの意味は以下の通りです。
| divタグ | ひとかたまりの範囲として定義 |
| h1～ｈ6タグ | 見出し。数値が小さいほど高いランクの見出し |
| pタグ | 一つの段落 |
| ulタグ | 順序のないリストを表示する |
| liタグ | リストの項目 |
| imgタグ | 画像を表示する |
| aタグ | ハイパーリンクを指定する |
h1タグの大見出しや、imgタグの画像など用途が決まっている要素以外に、divタグなど特に意味を持たない要素も存在します。
divタグは、いくつかの要素をグループで囲い、CSSでスタイリングしたい場合などに利用されます。
また、headerタグやfooterタグには、上記のような文書ではなく、以下のようなものを記載する意図で使用されます。
【headerタグ】 ・会社のロゴ ・Webサイトの名称 ・ナビゲーションバー ・SNSのリンク
【footerタグ】 ・著作権についての記述（copyright…など） ・関連文書へのリンク ・サイトマップ ・SNSへのリンクなど
マークアップの意味を理解して適切にHTMLのコーディングをしよう！
今回は、マークアップについて詳しく解説しました。
以下は、この記事のまとめです。
- HTMLはプログラミング言語ではなくマークアップ言語
- マークアップすることでコンピューターが理解できる意味が付く
よく耳にする「コーディング」や似ている言葉の「マークダウン」との違いをしっかり理解しておくことが大切です。
正しくマークアップすることは、Webサイトを正確に表示するだけでなく、SEO対策としても重要。
今回ご紹介した以外にも様々なタグが存在しているので、わからない箇所は調べながらマークアップしてみてくださいね。
