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>- いちばんめ
- にばんめ
olは、項目のはじめに番号がつきます。olの省略表記の元は、ordered list。番号つきリストを表す英語の略です。
ノンデザイナーにおすすめのHTML&CSS本
「あのデザインはどう作るんだろう?」が目的別に整理されていて、ネットで何度も調べる手間が省ける1冊。真似するだけで、HTML＆CSSコーディングができちゃいます。レスポンシブWebデザインの説明もあり、便利なので重宝してます。
コメント