はじめに

この記事はWebの基礎をおさらいカレンダー Advent Calendar 2022です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

今回はHTMLについて説明します！

HTMLとは

HyperText Markup Languageの略で、Webページの構造を記述するマークアップ言語です。
拡張子は.htmlです。
大枠の構造としては下記のような構造でできています。

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>ハローワールド</p>
  </body>
</html>

一つ一つのこの<h1>のように不等号で囲まれたものをタグと呼びます。
h1タグ、pタグのように呼びます。
タグは開始タグと終了タグがあり、終了タグにはバックスラッシュ(/)をつけることで終了を明示します。
(※中には終了タグを必要としないものもあります。)
開始タグから終了タグまでを要素と呼ぶので、こちらも覚えておきましょう。

また、一番上のDOCTIPEはタグではなくドキュメントタイプの宣言で、HTMLのバージョンを宣言するためのものです。
上記の例はHTML5での例です。

属性と属性値

要素には、属性を持たせることができます。
属性とは、要素の構成内容を追加したり、動作を調整するための追加の値です。

要素によって持たせられる属性が異なるので、HTMLリファレンスを参照して確認するのが良いです。
また、全てのHTML要素に使用できるグローバル属性というのもあり、id, classが有名です。

<p id="tag1">test</p>

上記の例で言うと、p要素に付与されているid属性の属性値にはtag1が入っていると言う表現をします。

インライン要素とブロックレベル要素

タグは、種類によって、インライン要素、ブロックレベル要素どちらかの性質を持っています。

インライン要素は文章の一部として扱われます。
ブロックレベル要素は文章を構成する一つの塊として認識されます。

注意すべきポイントは、
ブロックレベル要素の中にはインライン要素を配置できるが、
インライン要素の中にはブロックラベル要素を配置することはできません。
また、見かけ上、ブロック要素を使うと一般的なブラウザでは自動的に前後に改行が入ります。
 

まとめ

以上、HTMLの基本についてのおさらいでした！

Webの基礎をおさらいカレンダー Advent Calendar 2022でした。
興味をもし持ってくださった方は、購読いただけると嬉しいです！