宮崎暮らしの視点から、徒然なるままに。

Miyazaki Life

Web制作・サーバー

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

更新日:

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




リンク関連タグの略語

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

<a href="https://miyazakilife.com/job/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デザインの説明もあり、便利なので重宝してます。

さかぽん
初心者のHTMLの苦手意識をなくすのが目的だけの、簡単なタグの説明。意味を調べながらコーディングすると覚えやすいはず。

-Web制作・サーバー

Copyright© Miyazaki Life , 2018 All Rights Reserved.