HTMLから始めるプログラミング。WEBページの基本について学習しよう！

本記事の目次

HTMLとは？
HTMLの基本構文（タグ・属性・要素）
HTMLを学習するメリット
HTMLはプログラミング言語ではない！？
まとめ

HTMLとは？

WEBページの構成を作るマークアップ言語

HTMLとは「Hyper Text Markup Language」略したもので、マークアップ言語に分類されます。

HTMLの役割はWEBページの構成を作ることであり、テキストや画像などの要素とその構造を定義することできます。他にも、別ページに移動するリンクやサイトのナビゲーション、表の形で表現するものなどもHTMLで定義することができます。

ほとんどのWEBページではHTMLが使われており、HTMLはWEBに関わっていく上で欠かせないものとなっています。

HTMLとCSS

HTMLとよくセットで扱われているのがCSSです。

CSSとは「Cascading Styles Sheets」を略したもので、スタイルシート言語に分類されます。

CSSでは、HTMLで定義した要素の見た目やレイアウトを定義します。

文字の色や太さ、画像の大きさ、並びの方向や並び順などを自由自在に操ることができるため、CSSはWEBサイトのデザインしていくために必要な言語であり、HTMLと合わせて使用することが多いことからよくセットとして扱われています。

XMLやXHTMLとの違い

HTMLとよく比較されるのが、同じマークアップ言語である「XML」「XHTML」です。

HTMLを人に対して情報を伝達するためのマークアップ言語とすると、XMLはプログラム寄りのマークアップ言語であり、コンピューターに対して情報を伝達するための言語となっています。データのやり取りを行うような作業によく利用されている、と覚えておけば良いでしょう。

XHTMLはHTMLとXMLの中間のような言語ですが、すでに開発が中止されており今後XHTMLを使用する機会はほとんどないと思うので、もし使う機会があれば調べてみる程度で問題ないです。

【注意】現在の標準はHTML Living Standardである

現在（2022年5月）のHTMLの標準はHTML Living Standardです。

HTML5が最新のHTMLであるという情報をよくみるかと思いますが、その情報はすでに古いものであり、HTML5はすでに廃止されているため注意しましょう。

とはいえ、HTML Living Standardの書き方についてはほとんど変わりがないため、あまり気にする必要はないと言えます。（多くの方が知らない原因でもある。）

”HTML Living StandardとHTML5の違いについては、今後詳しく解説しますので待ちください。”

HTMLの基本構文（タグ・属性・要素）

HTMLの基本構文

まずは簡単なHTMLの基本構文を見ていきましょう。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p class="sample">Hello World!!</p>
</body>
</html>

拡張子が「.index」のファイルを用意することで、HTMLを描き始めることができます。

メモ帳などでも問題ないですが、プログラミングでは便利なテキストエディタが用意されているため、自分の好きなテキストエディタを使用すると良いでしょう。

上記のコードをコピペしたHTMLファイルを、WEBブラウザにドラック＆ドロップすることで画面に『Hello World!!』と表示されるはずです。

HTMLのタグと要素

HTMLのタグとは、『<』と『>』で囲まれた部分を指し、その中に記述する文字列がどのようなタグなのかを表します。開始タグと閉じタグで囲まれたもの（閉じタグなしの場合開始タグの内容）をHTMLの要素と呼びます。

基本的にHTMLタグは開始タグ『<~>』と閉じタグ『</~>』で構成され、開始タグと閉じタグの文字列を同じにする必要があります。

また、一部閉じタグが必要のないHTMLタグも存在し、余計なタグを記述してしまうとテキストとして認識される場合がありますので注意が必要です。

タグは以下のように入れ子形式でも記述でき、HTML要素の中にHTML要素を定義することもできます。また、中身が空のHTML要素を定義することもできます。

<div>
  <p>Hello World!!</p>
  <p></p>
</div>

HTMLタグは種類が多く、すべてのHTMLタグを覚えずともWEBページは作れるようになるため、すべてのHTMLタグを覚える必要はありません。よく使うHTMLタグだけ覚えるようにして、その他のHTMLタグは必要な時に調べて使えるようにしておけば問題ないです。

＜よく使うHTMLタグ一覧＞

HTMLタグ	説明
<p> </p>	パラグラフ（段落）を定義します。
<div> </div>	ブロックレベル要素としてグループ化します。（特に意味を持たないタグです。）
<img src=”画像のURL”>	画像を定義します。
<a> </a>	ハイパーリンクを定義します。
<h1> </h1>	見出しを定義します。 h1~h6まで存在します。
<html> </html>	htmlを定義します。すべてのHTMLタグはこの中に記述します。