HTMLの書式

HTMLの書式

HTMLタグとは?

文書を意味付けするために使用する印のことをHTMLタグと呼びます。HTML文書は、タグで意味付けされた要素の集まりで構成されています。サンプルのソースコードを見て、どのように記述されているか確認しましょう。
山かっこで囲われた部分はHTMLタグです。このサンプルでは文章が少ないため、ほとんどがHTMLタグになっています。HTMLドキュメントは、どんなに短い内容であっても、最低限このような書式が必要です。これをHTMLの雛形と呼びます。雛形を書かずに文章のみを書いてブラウザに表示することはできますが、これはHTMLが表示されているというよりも、ただのテキストファイルが表示されているだけです。したがって、HTML文書には雛形が必要であり、その中身は、HTMLタグで意味づけされた要素の集まりなのです。

要素の構造

要素は3つのパーツで構成されています。
  • 開始タグ
    • 要素の意味づけをするアルファベット(今回はh1)を「<」と「>」で囲んだものです。これによって要素の開始を示します。
  • 中身
    • タグで意味付けする対象のことです。
  • 終了タグ
    • 開始タグのアルファベット(今回はh1)の前に「/」(スラッシュ)が入ったもの。要素の終了を示す。
山かっこで囲われたアルファベットh1の部分に意味があります。終了タグのアルファベットはスラッシュで始まります。この間に挟まれた部分が中身になります。タグで意味づけをする対象の文章のことです。開始タグ、中身、終了タグ全体のことを要素またはElementと呼びます。
実は、中身を必要としないタグもあります。例えば、imgタグです。画像を表示するためのタグであり、開始タグと終了タグの間に文章を書く必要はありません。中身がないため、終了タグを書かなくても良いことになっています。

HTMLタグの属性

imgタグを例に、開始タグの中の書式についてもう少し詳しく解説していきたいと思います。
犬の写真を表示したい場合、このように犬の写真のファイル名を記述します。は属性と呼ばれ、ソース属性と読みます。イコールの後ろに指定する部分を値と呼びます。
属性とは、
  • 要素を補足するもの
    • htmlタグだけでは意味が成り立たないような時に使います。開始タグの中のタグ名の後ろに書きます。この場合だとi・m・gの後ろに書きます。スペースをいれてと書いていきます。
  • どんな属性が使えるかはタグによって異なる
  • 複数指定できる
    • 複数の属性を指定する場合は、属性=値、スペース、属性=値のように書きましょう。
  • 値がない属性も存在する
    • 属性のみを指定することに意味があるので、="値"の部分を省略しても構いません(例えば属性を指定した場合は要素が非表示になります)。