HTMLのタグ・要素・属性について

HTMLのタグと要素について

今回はHTMLの記述について、覚えておかないといけないタグ要素属性についての備忘録です。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>奮闘記┃アラフォー未経験のおっさんがWEBサイト作成やプログラムに挑戦</title>
    <mata name="description" content="アラフォー未経験のおっさんがWEBサイトの作成やプログラミングに挑戦します。その時に得た情報や必要なことを書き記す備忘録でもあります。">
  </head>

  <body>
    <h1>まずは自己紹介</h1>
    <p>今年38歳になるアラフォーのおっさんです。</p>
  <body>
</html>

タグについて

HTMLはタグという専用の記号を入力して記述を行います。タグとは上記サンプルコードにも記載しております<html></html>や<p></p>など、「<しょうなり」「>大なり」「/スラッシュ」と英数字で構成されています。

タグには開始タグと終了タグがあり、基本的にはこれらをセットで使用しますが、一部のタグ(例えば改行を意味する<br>など)では終了タグを必要としないものもあります。

終了タグ

終了タグは開始タグに「/」を加えた記述になります。

要素について

HTMLは開始タグと終了タグの中に表示させたい内容(コンテンツ)を記載し書き進めていきます。その開始タグから終了タグまでのひとかたまりを要素と呼び、タグの英数字部分を要素名と呼びます。

分かりにくいのでタグと要素について画像でまとめます。

細かく説明すると長くなるので、取り合えずは「タグ」「要素」という言葉だけ覚えておくことにします。

タグを記述する時の注意点

開始タグ・終了タグを含め全てのタグは半角英数字で記述します。またHTML5では大文字と小文字の区別はありませんが、私は全て小文字に統一して記述していきます。

属性について

タグによっては<要素名>に情報を加えて記述を行うことも可能です。この情報のことを属性と呼びます。サンプルコードに記載している日本語を意味する下記のコードのlangも属性(lang属性)になります。

<html lang="ja">

上記の場合だとlangが「属性」です。なお属性を記述する場合は「属性の値」も必要であり、上記の場合だと「ja」がそれに該当します。

属性には要素名固有のものやどの要素にも指定可能なグローバル属性の2種類があります。これらについてはまた改めて説明しますので、今のところは名称の意味と名前だけ覚えておきます。

属性を記述する時の注意店

属性を記述する時はいくつかのルールがあります。古いバージョンのブラウザなどでは属性を記述しても反映されないことがあります。

  1. 要素名に半角スペースをあける
  2. 属性の後ろに=を付ける
  3. 属性の値は「”」ダブルクォーテーションで囲む

属性は複数指定することも可能です。その場合は<要素名 属性A="属性A値" 属性B="属性B値">となります。

コメント

タイトルとURLをコピーしました