HTML のタグを一度覚えたら一生忘れないようにするためのコツ

IT の世界は, よく省略名が使われます. そもそも IT ってのが Information Tecnorogy の略ですしねw

HTML(HyperText Markup Language) も例外ではありません. HTML で使われるタグは, ほぼ省略形で記述します.

例えばテーブル. テーブル系の要素は tr, th, td ってのがありますね. これらの要素を単純にそのまま覚えてしまうとふとコーディングをするときに最初に書くのって tr だっけ？ td だっけ?? 中に書くのは th だっけ? tr だっけ??

なんてことになります. HTML 学びたてのかたは経験したことがあるのではないでしょうか？

そこで今回は, HTML のタグを一度覚えたら一生忘れないようにするためのコツを紹介します. 紹介するコツをマスターすればそんなことは一切なくなります.

コツといってもやりかたは簡単で, “タグ名と一緒にその省略前の名前をセットで覚えちゃおう!”ということです.

※最近学生さんに HTML を教える機会があり, その時の説明に使ったコツです. 好評だったのでエントリーにしたのですが超初心者向けなので, 期待外れだったらゴメンナサイ.

Table of contents

• 省略前の名前？？
• ol と ul どっちだっけなんてもう迷わない
• 省略系のタグ対応表
  • 基本
  • リスト
  • テーブル

省略前の名前？？

HTML はよく使うタグに限ってタグ名が省略されちゃっています. p タグは Paragraph の略だったり, td は Table Data の略だったり. まぁ記述を楽させるためでしょうけど, それが逆に学習の妨げになっちゃってたりします.

例えば下記の例

<table>
    <tr>
        <th>名前</th>
        <td>phi</td>
    <tr>
    <tr>
        <th>年齢</th>
        <td>24</td>
    <tr>
    <tr>
        <th>血液型</th>
        <td>O</td>
    <tr>
</table>

HTML に慣れている方だったらパッと見て分かるかもしれませんが, 学び始めて間もない方にはどう表示されるのか分かりにくいかもしれません.

そこで, タグ名を省略前の形で覚えてしまい, 頭の中で下記のように置き換えてみましょう.

<table>
    <TableRow>
        <TableHeader>名前</TableHeader>
        <TableData>phi</TableData>
    </TableRow>
    <TableRow>
        <TableHeader>年齢</TableHeader>
        <TableData>24</TableData>
    </TableRow>
    <TableRow>
        <TableHeader>血液型</TableHeader>
        <TableData>O</TableData>
    </TableRow>
</table>

Row は行, Header は見出し, Data はデータという意味です. こうやって見るとどういう構造のテーブルなのか一目瞭然ですね.

up

ol と ul どっちだっけなんてもう迷わない

table 系タグを例に説明してきましたが, ol と ul どっちが順序付きか順序付きじゃないかなんてことも省略前の名前を覚えておけば迷うことはなくなります.

ol は Ordered List, ul は Unordered List の略です. はい一目瞭然ですね. ol はオーダーリスト, つまり順序付きリスト, ul は un がついているのでその否定, 順序なしリストのことです.

こうやって省略前の名前を覚えておけばタグ名とその意味までセットで覚えることができるので 定着率が上がります.

up

省略系のタグ対応表

省略系で使用されるタグをリストアップしてみました. よかったら参考にして下さい.

基本

リスト

テーブル

up