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

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

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

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

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

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

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

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

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

screenshot

Table of contents

省略前の名前??

HTML はよく使うタグに限ってタグ名が省略されちゃっています. p タグは Paragraph の略だったり, tdTable 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

olul どっちだっけなんてもう迷わない

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

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

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

up

省略系のタグ対応表

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

基本

タグ名 省略前 日本語訳 解説
h1~h6 Heading {n} 見出し 見出しを表す
p Paragraph 段落 段落を表す
hr Horizontal Rule 横線 水平方向に罫線を引きます
pre Preformatted Text 整形済みテキスト スペースや改行含め等幅で表示します. ソースコードなどに使用します
div Division 区分 特に意味はありません. 要素を一塊にまとめる際に使用します

リスト

タグ名 省略前 日本語訳 解説
ol Ordered List 順序付きリスト 順序付きの項目リストを表します
ul Unordered List 順序なしリスト 順序なしの項目リストを表します
li List Item リストの項目 リストの項目を表します
dl Definition List 定義リスト 定義する用語とその説明を一対にしたリストを表します
dt Definition Term 定義語 定義する用語や名前を表します
dd Definition Description 定義説明 dt で定義された用語の説明を表します

テーブル

タグ名 省略前 日本語訳 解説
tr Table Row 表の行 表の行を表します
th Table Header 表の見出しセル 表の見出しとなるセルを表します
td Table Data 表のデータセル 表のデータとなるセルを表します

up

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT