HTMLファイルの骨組み

引き続き書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座で学習です。

HTML のタグの中からいくつかをピックアップ。

metaタグ

文書のメタ情報をを記述し、ブラウザや検索エンジンに情報を知らせるタグ。

<meta name="description" content="hogehoge"> (P55) 説明文を書く。どのようなサイトなのか判断できるように、キーワードを含めて短文を記述する。VSCode で　Emmet を使っているとこのタグは初期状態では入力されない。

colspanとrowspan

表のセルを結合するのに用いる用いる属性。 (P71)

colspan="n" 表のセルを横につなげる。

rowspan="n" 表のセルを縦につなげる。

    <table border="1">
        <tr>
            <th colspan="2">A+B</th>
        </tr>
        <tr>
            <td>Cell C</td>
            <td rowspan="2">D+F</td>
        </tr>
        <tr>
            <td>Cell E</td>
        </tr>
    </table>

プランの比較などで見かけることの多いテーブルですが、table の扱いは難しい。Table Tag Generatorを見つけた。

フォーム

利用登録や問い合などに用いる from タグ。 (P73)

label タブを使うと、フォームのパーツとラベルが関連付けられる。これによりラベルをクリックしてパーツが選択できるようになる。 (P81)

label

    <form action="" method="" name="">
        <!-- フォームの部 -->
        <label for="">Name :</label>
        <input type="text" name="" id="">
    </form>

グルーピング

上手にグループ分けを行うためのタグ。 (P82)

Webサイトは、いくつかの構成要素に分けることができる。ナビゲーション、本文、フッターなどなど。これらをタグで囲み、グループ化する。見た目の変化はないが、CSSで設定するとグループ毎に色を付けたり、レイアウトを変更できる。

Webサイトを作成する際に常に悩むのが、このグループ化！思い通りのデザインを実現する上で大切なタグだと思う。

header タグ
nav タグ
article タグ
section タグ
main タグ
aside タグ
footer タグ
div タグ

header、nav、main、footer は必須ではないだろうか?そして div これが存在しないサイトはあるのかというほど大量に使われている。

HTMLタグ に関するその他のタグは MDN HTML 要素リファレンスを参照のこと。