【HTMLの文法】HTMLの基本文法についてわかりやすく解説！

どうも！ニシドラ(@nishidorablog)です。

ニシドラ

この記事ではHTMLの基本的な文法について解説します。

具体的な内容は、HTMLは基本的に「タグ」「属性」「値」の3つの構成になっているのですが、それぞれの役割を説明します。
また、コードを書く上で、覚えておかなといけないルールも説明していきます。

HTMLの基本構成

HTMLは「タグ」と呼ばれる「<(小なり)」「>(大なり)」を使って、文字列を挟んで記述していきます。

タグにはたくさんの種類が存在していて、「どのタグで文字列を挟むか」でそのコードでの役割が変わってきます。

記事に見出しを入れたいときは「h1」タグ。記事の下に説明文を入れたいときは「p」タグを使います。

実際に見出しをつけるタグ「h1タグ」を使用して書いてみると

というようになります。最初に「< >」で囲まれている部分を「開始タグ」と呼んで、最後に「</ >」で囲まれている部分を「終了タグ」と呼びます。

開始タグと終了タグは基本的にはセットで使われるのですが、タグによっては終了タグがないものもあります。

画像を挿入するときに使う「img」タグは終了タグは使いません。
<img src=”○○” alt=”××”>

また、開始タグから終了タグまでのかたまりを「要素」と呼びます。

タグによっては要素の中に、そのタグについての付加情報を書くことがあります。この情報の種類のことを「属性」と呼び、タグの後にスペースを空けてから書いきます。

タグ別で使う属性が変わってくるので注意が必要です。

また、属性の内容のことを「値」と呼び、「” “(ダブルクォーテーション)」に挟んで書きます。

タグを書くときも、ファイル名を付けたとき同様に半角英数字で書きます。

理由はWEBサーバーが半角英数字以外に対応しておらず、認識できないからです。

タグを書くときはなるべく小文字で書きます。

基本的に大文字と小文字の区別はありませんが、バージョンによっては小文字で記述する必要がある場合もあるので小文字で統一した方が無難です。

HTMLではタグの中にさらにタグを書く場合があります。

下の〇のような書き方を「入れ子」と呼びます。

✕はpタグとpタグの間にaの開始タグが挟まれています。
このような場合はaタグがうまく認識されません。

なので、ちゃんと入れ子になっていることをしっかり確認しましょう。

今回の内容をまとめると以下のようになります。

タグには多くの種類があります。
タグごとに使う属性が変わってくるので、一つずつ意味と使い方を勉強していきましょう。

次回は、「HTMLでの見出しと文章の表示方法」について解説します。