WEBサイトの構築には欠かせない、骨組み部分の言語である「HTML」。
今回はそのHTMLタグについて初心者の方にもわかりやすく基本の記述方法などを詳しくご紹介していきます。
いざ自分でWEBサイトを作っていく時に、一体何から進めたらいいのかわからないという方や、コーディングについて勉強中の方は是非、最後まで見ていってください！
HTMLタグとは？
「HTML」とは、WEBサイトを作成するために開発されたプログラミング言語です。
私たちが普段何気なく閲覧しているインターネット上のWEBサイトは、すべてHTMLと呼ばれる言語の、「タグ」によって作成されています。
WEBサイトのコーディングを学ぶ際に、まず一番に理解を深めたいのがHTML言語です！
基本のHTMLタグの構成
基本のHTMLタグのマークアップ方法は、以下となります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webサイトのタイトル</title>
<meta name="description" content="ページの説明文">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- サイト内の要素を記述 -->
</body>
</html>それでは、HTMLタグの詳細について以下で詳しく解説していきます。
開始タグ・終了タグについて
HTMLでは、<html>や<head>などの要素を「タグ」と呼びます。
多くのタグは、<html> ~ </html>のように「開始タグ」と「終了タグ」で囲まれます。
開始タグのタグ名の前にスラッシュ（/）をつけたものが終了タグです。
開始タグを記述したら、それに対応する終了タグも必ず記述するのがルールです。
ただし、終了タグを省略できるもの（<li>や<dd>など）や、終了タグのないもの（<br>や<img>など）もあります。
HTMLタグの記述ルール
HTMLタグには、必ず守らなければならない記述ルールが存在します。
ルールについては、以下になります。
- 半角文字で記述する
- 小文字で記述する
- タグ名の前にスペース等を入れない
・記述ルールを守っていないタグの例
- ＜ HTML>
・記述ルールをきちんと守っているタグの例
<html>
記述ルールをきちんと守っていなかった場合、WEBページがうまく表示されなかったり、画面崩れが起きる可能性があるため、普段から意識しましょう。
HTMLの要素とは？
HTMLの要素とは、開始タグから終了タグまでの、属性やテキスト丸ごと囲んだ部分のことを指します。
以下が要素の例となります。
<!-- ここからdiv要素 -->
<div>
<!-- ここからh2要素 --><h2> 見出しです </h2><!-- ここまでh2要素 -->
<!-- ここからp要素 --><p> 本文です </p><!-- ここまでp要素 -->
</div>
<!-- ここまでdiv要素 -->それでは、次にHTML要素の構造の中をさらに詳しくご紹介していきます。
HTMLの入れ子とは？
HTMLの入れ子とは、HTML要素のタグの外からさらにタグで覆う構造のことを指します。
例としては、箱の中にさらに箱がある・・・といったマトリョーシカの構造をイメージしてください。
「ネスト」と呼ばれることもあります。
以下が入れ子の例となります。
<section><!-- section要素 -->
<div><!-- section要素の入れ子であるdiv要素 -->
<h2> section要素の入れ子であるdiv要素の入れ子のh2要素 </h2>
<p> section要素の入れ子であるdiv要素の入れ子のp要素 </p>
</div><!-- ここまでdiv要素 -->
<section><!-- ここまでsection要素 -->HTMLの属性とは？
HTMLの各要素には「属性」を追加して、設定を行うことができます。
HTML属性は、開始タグの要素名の後ろに半角スペースを入れて、「属性名=”属性値”」という形式で記述します。
<要素名 属性名=”属性値”>
↓
「〇〇」の 「〇〇」は 「〇〇」です
属性にもさまざまな種類が存在しますが、今回は例として、「lang属性」という言語の属性値を使ってみましょう。
以下がHTML属性の記述例となります。
<html lang="ja"><!-- このサイトは日本語のサイトです -->
</html>こちらのコードでは 「lang属性」という言語の属性値を使って、html要素内の記述を日本語にしますという記述をしています。
まとめ
今回は、骨組み部分の言語である「HTMLタグ」ついて、基本的な記述方法や構造を解説してきました。
いかがでしたでしょうか？
コーディングを勉強するにあたって、HTMLはまず初めに勉強すべき言語となりますので、きちんと知識を深めた上で記述できるようになりましょう。
別投稿では、HTML/CSSについての基本知識や、コーディングに役立つ知識についてご紹介していきますのでそちらもぜひチェックしてみてください！
コメント