要素の記述ルール

HTML超入門!押さえておきたいマークアップの基本
JavaScriptでプログラミングの基本的概念を学ぼう!
Webページに動きをつけるプログラミングを学ぼう!
ライン公式アカウント
オンラインレッスンのお得なクーポン配信しています!
 
このチャプターの目次

要素の記述ルール

HTML要素の記述のルールについて詳しく見ていきましょう。HTMLは構造化されたドキュメントを作成するための言語であり、その要素の正しい使用方法を理解することは非常に重要です。これから、HTMLの基本的な構文や、要素の開始タグと終了タグの使い方、属性の追加方法など、HTMLの記述に関する主要なルールを順を追って説明していきます。これらのルールを理解し、適切に適用することで、より意味のある、構造化されたHTMLドキュメントを作成することができるようになります。

HTMLタグの記述ルール

  • 開始タグがなら終了タグはとなる
    • 例えばpタグの場合、で始まりで終わります。
      h1タグの場合、で始まりで終わります。
  • 要素の中に要素を記述することができる
    • ただし、外側の要素が内側の要素を包むようにして書かなければなりません。
      pというタグの要素がdivというタグの要素の中におさまっています。正しい書き方です。
      正しくない例も見てみましょう。
      pの終了タグの前にdivの終了タグがきて、チグハグになってしまっています。 ちなみに、この外側の要素を親、内側の要素を子と呼び、親子関係で表現することがありますので覚えておいてください。
      子要素の前には、インデント(余白)をつけると、左寄せの位置が変わり、子要素であることがわかりやすくなります。また、開始タグと対応している終了タグがどこにあるかがわかりやすくなります。
      このような状態を入れ子と言います。
  • 要素の中には終了タグを省略できるものもある
  • HTMLで記述できる要素は決まっていて、それぞれが意味を持っている
    • 独自のタグを使ってはならない
      • 自分で勝手にタグを作ってはいけません。また、記述ミスがあった際も、ブラウザが正しく解釈できないので気をつけましょう。
    • タグの種類は100種類以上
      • 現在もタグの追加や廃止などが検討されており、言語の仕様も頻繁に変わっています。これだけ数があると全てを覚えるのは難しいでしょう。なので、主要なタグだけを覚えて、それぞれが何をするためのものかを知っておいてください。

属性の記述ルール

  • 開始タグの要素名の後ろに、aaa=“bbb”という形式で指定する。
  • 属性値を記述する際には「"」または「’」を使用する。
  • 値を必要としない属性もある。
    • 「=“値"」の部分を書かなくてもよい属性のことです。
  • 開始タグ内に複数の属性を記述する際には、空白文字(スペース)を区切り文字として使用します。
    • この例のimgタグでは、属性=値の部分が2つ書かれています。これらの間はスペースで区切られています。
  • 複数の値を指定する場合はスペース区切りで指定する
    • 属性によっては複数の値が指定できるものがあります。この例では、classという属性にboldという値とrightという値が複数指定されています。値と値の間にはスペースが入っています。スペース区切りで複数の値を指定することができます。
  • 属性には記載順のルールはない
    • この例では、src属性の次にalt属性が来ていますが、alt属性が前に来てsrc属性が後ろにあっても問題ありません。