HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎3. HTMLとタグの構造

      2017/07/11

この章について

下記のbase-html01.zipをダウンロードして実際に記述してみましょう。
base-html01.zip

HTMLとは

HTMLとは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略です。
ハイパーテキストとは、複数の文書をハイパーリンクで結びつけるテキストのことです。ハイパーリンクは、最初の章で使ったaタグで実現できます。
マークアップは、テキスト内の文章に意味、目印をつける作業のことです。HTMLでは、タグを使ってテキストに意味や目印を付与しています。

HTMLやCSS内に記述された文字列はソースコードとも言います。

1つめの重要な点は、マークアップの使い方です。
HTMLはテキストを意味づけるもので装飾するためのものではないということです。
一応、HTMLだけで作成しても文字のサイズが変わったり、行間が開いたりしますが、これは本来、HTMLの役割ではありません。HTMLを作成する時に、装飾(ビジュアル)目的でタグを使うと文章の作りがおかしくなってしまう場合があり注意が必要です。
装飾は、CSSで行います。CSSに関しては、CSSの章で解説します。

2つめの重要な点は検索サイトです。
検索サイトは自動巡回プログラムでサイトの情報を収集しています。
プログラムはHTMLのテキストだけを収集してタグの構造でテキストの内容を分析します。
色やレイアウトなどのビジュアルで評価しているわけではありません。

タグの構造

タグの構造

タグは開始タグと終了タグで構成されます。一部、開始タグだけのものもあります。
開始タグの中は要素とそのオプションの属性が設定できます。終了タグの中は要素の前に/(スラッシュ)をつけます。
下記は要素のみで記述した例です。

要素(element)

囲まれた部分の意味付けや目印をつけることができます。要素は省略できません。
要素は、文章の構造を定義付けるものであり、装飾として使用してはいけません。

属性(attribute)

要素ごとに指定できる設定が決まっています。
要素の後に半角スペースで区切って記述します。
要素によっては複数の属性が設定でき、その場合も属性ごとを半角スペースで区切ります。
属性には、必須属性、非推奨属性、使用の選択ができる属性の3つに分かれます。
非推奨属性は、装飾に関するものが多く、それらは、CSSで設定することが推奨されています。
属性の記述は、属性名 = " 値 " と記述します。

タグの入れ子

タグ内にタグを記述することを「入れ子(ネスト)」と言います。
下記は、divタグ内にpタグを入れ子にした例です。

入れ子にはルールがあり全てのタグが入れ子にできるわけではありません。
入れ子に関しては要素ごとに解説していきます。

まとめ

  • HTMLはタグでテキストに意味や目印を付与した文書
  • HTMLの内容は検索サイトに収集され分析される
  • タグは装飾目的で使ってはいけない

 - HTML・CSS