HTMLコーディングは英語の省略表記の元（由来）で考えれば簡単

HTMLコーディングというと難しそうですが、英語の省略表記だと知れば簡単に感じるはず。初心者の苦手意識をなくす、HTMLタグの由来について紹介します。

リンク関連タグの略語

リンクを貼った時のソースコードと、実際の見た目です。それぞれクリックしてみて、どのような動きをするのか確認してみてください。

<a href="https://miyazakilife.com/blog/8656/">内部リンクです</a>
<a href="#tokutei">特定の位置まで移動</a>

リンクです
特定の位置まで移動

a

aの省略表記の元は、anchor。鎖を表す英語の略で、つまりはリンクです。

href

hrefの省略表記の元は、Hypertext Reference。リンクをたどって、別の情報を呼び出せるようにしてあるのがHypertext。Referenceは参照。つまりは、=の先のURL（リンク）を参照して、別の情報にたどるという意味になります。

id

この見出しは、このように書かれています。

<h3 id="tokutei">id</h3>

idの省略表記の元は、identifier（識別）。リンク先として#（シャープ）をつけてid名を指定すると、idでつけた名前の場所までリンクが移動します。

テーブル関連タグの略語

テーブルタグは表を作る際などに使います。

<table>
<tr><th>見出し1</th><td>箱1-1</td><td>箱1-2</td></tr>
<tr><th>見出し2</th><td>箱2-1</td><td>箱2-2</td></tr>
</table>

見出し1	箱1-1	箱1-2
見出し2	箱2-1	箱2-2

tr

trの省略表記の元は、table row。テーブル（表）の横方向の一行を定義します。つまり一行足すときには、trが増えるというわけです。

th

thの省略表記の元は、table header cell。表の見出しとなるセルを表します。

td

tdの省略表記の元は、table data cell。表のデータとなるセルを表します。

リスト関連タグの略語

リストタグは箇条書きをする際に使います。

li

<li>いちばんめ</li>
<li>にばんめ</li>

リストタグは基本的に、この後に登場する「ul」もしくは「ol」とセットで使われます。liの省略表記の元は、list item。並び項目を表す英語の略です。

ul

<ul>
<li>いちばんめ</li>
<li>にばんめ</li>
</ul>

• いちばんめ
• にばんめ

ulは、項目のはじめに「・」がつきます。ulの省略表記の元は、unorderd list。番号なしリストを表す英語の略です。

ol

<ol>
<li>いちばんめ</li>
<li>にばんめ</li>
</ol>

1. いちばんめ
2. にばんめ

olは、項目のはじめに番号がつきます。olの省略表記の元は、ordered list。番号つきリストを表す英語の略です。

ノンデザイナーにおすすめのHTML&CSS本
「あのデザインはどう作るんだろう?」が目的別に整理されていて、ネットで何度も調べる手間が省ける1冊。真似するだけで、HTML＆CSSコーディングができちゃいます。レスポンシブWebデザインの説明もあり、便利なので重宝してます。