HTMLファイルはテキストファイルです。
テキストファイルの編集には「テキストエディタ」を使用します。
既存のHTMLファイルを開いて編集したい際は「メモ帳」などの簡易的なテキストエディタでも良いのですが、本格的にHTMLコーディングやPHPコーディングをする際は入力補助機能の充実したエディタを使用します。
新規でHTMLファイルを作成・保存する場合ですが、通常テキストファイルは拡張子が「.txt」で保存されます。
これをHTML文書としてWebブラウザなどに認識させたい場合は、拡張子を「.html」に変更します。
その反対に既存のHTMLファイルの拡張子を.txtに変更した場合は、Webブラウザで開いてもソースコードしか表示されなくなります。
もちろん、HTML/CSSであればCodePen上でお試しが可能なのでどんどん練習してみましょう。
HTML文書の冒頭には、この文章がHTMLのどのバージョンで書かれているのかを宣言する「DOCTYPE宣言」が必要です。
HTMLは緩やかに進化しており、その過程でいくつものバージョンが存在します。
現在主流のバージョンは「HTML5」ですが、少し古いバージョンの「HTML4」「HTML4.01」などもまだ多く使われています。
同じHTMLタグでもバージョンにより解釈の違いが存在するため、最初にDOCTYPE宣言をするわけです。
以下はHTML5のDOCTYPE宣言です。
<!DOCTYPE html>
DOCTYPE宣言の下からHTML文書を記述していきます。
HTML文書全体はhtmlタグで囲わなければいけません。
<!DOCTYPE html>
<html>
<!-- ここにHTML文書がはいります -->
</html>
HTML文書の中身を大きく分けると「head」と「body」に分かれます。
それぞれ<head>タグと<body>タグで囲います。
head要素内には文書に関する「ヘッダー情報」を記述し、body要素には「本文」を記述します。
ヘッダー情報(head)には閲覧者に表示されない設定やページ情報などを記述し、本文(body)には閲覧者に見てもらうためのWebページを記述します。
ここでいうヘッダー情報とは、Webデザイン上のヘッダー（サイトロゴやグローバルナビゲーションがある箇所）ではありませんので注意しましょう。Webデザイン上のヘッダー部分は閲覧者に表示されるためbody要素内に記述します。
headタグ内に記述するヘッダー情報には、ページタイトル、外部スタイルシートの場所、外部JavaScriptファイルの場所、文字エンコーディング情報、ページの概要、などが含まれます。
ブラウザで表示した際に、これらの内容は（ページタイトルを除き）表示されません。
ソースコードは以下になります。
<!DOCTYPE html>
<html>
<head>
<!-- ヘッダー情報がここにはいります -->
</head>
<body>
<!-- 本文がここにはいります。 -->
</body>
</html>
この形が全てのHTML文書の基本となります。
インデントとは、プログラムの構造を見やすくするために行などを、空白文字によって字下げすることを指します。
HTMLやCSSでは、行頭のスペースやタブといった空白文字を無視することになっているので、インデントをつけることができるのです。
HTML文書を作成する際は、開始タグと終了タグの関係を把握しやすいようにインデントをつけることが一般的です。
上の例のように、各タグごとにインデントをつけることで、開始タグと終了タグが視覚的に把握しやすくなります。
インデントはスペースでもタブ文字でも良いですし、文字数も特に決められてはいませんが、2文字または4文字が推奨されていますので、レッスンでも2文字または4文字が使用されています。
多くのタグは属性と合わせて使用します。
例えば画像を表示するimgタグは画像の場所を指定するsrc属性と、リンクを表示するaタグはリンク先URLを指定するhref属性などと合わせて使用します。
先ほど登場したコードを見てみましょう。
<a href="https://l-works.design/">ライブワークス</a> <img src="img/photo.jpg">
上のaタグにはhref属性が、imgタグにはsrc属性がそれぞれ使われています。
タグによって使用可能な属性は異なりますので、タグとセットで覚えるようにしましょう。
class属性とID属性を理解することは、Web制作を進める上で非常に重要です。
これらの2つの属性は、CSSで特定の要素だけのデザインを変更するときに使用されます。
例えば以下のコードを見てください。
<p>天気をお伝えします</p> <p>「本日は晴れるでしょう」</p>
会話の箇所（2段落目）だけを赤文字にしたい場合、どうすればよいでしょうか？
CSSで「p要素を赤文字にする」と指定した場合、HTML文書内の全てのp要素が赤文字になってしまいます。
そんなときにclass属性を使います。
<p>天気をお伝えします</p> <p class="today">「本日は晴れるでしょう」</p>
このようにclass属性を付加することで、CSSで「class属性がtodayのp要素を赤文字にする」と指定することができます。
id属性も同じように使用できます。
class属性とid属性の違い
「赤文字にする」「文字サイズを大きくする」のように、文書内で繰り返し同じスタイルを使用する際にはclass属性を使い、「ここはサイドバー」「ここはフッター」のように文書内で唯一の要素に対してはidを与えます。
body内で使用する要素の多くは「ブロックレベル要素」と「インライン要素」に分けられます。
ブロックレベル要素はその名の通り「ブロック」として扱われ、前後に改行が入ります。セクション、見出し、段落など、文書を構成するひとかたまりの要素です。
それに対してインライン要素は主にブロックレベル要素の中で使用され、特定の単語にリンクをはったり強調したりする際に使用されます。インライン要素の中にブロックレベル要素や他のインライン要素を含めることはできません。
上の例を見ると、ブロックレベル要素は改行されているのに対して、インライン要素は改行されていません。
言い換えると、ブロックレベル要素は高さ・幅を持ち、インライン要素は高さ・幅を持っていない、ということになります。
ブロックレベル要素とインライン要素の違い、そしてブロックレベル要素が持つ、高さ・幅・マージン（間隔）という概念は、CSSで文書の整形をする際にとても重要です。
ここでは初級者向けに改行や高さによる分類を紹介しましたが、実際はCSSによってブロックレベル要素をインラインとして扱ったり、インライン要素をブロックとして扱うことも可能なため、デザイン制約上の両者に違いはありません（この分類はHTMLの旧バージョン4.01までのもので、最新バージョンHTML5ではこの概念は廃止されています。ただしこの概念はHTML/CSSによるWebデザイン学習に有用なため、本カリキュラムでは引き続きこの概念を元に解説します）。 文章をHTMLでタグ付けする際にはデザインのことを優先的に考慮せず、文章の意味に対して適切なタグを使用するようにしましょう。