本講座では、基本的なHTMLタグをいくつか取り上げて解説していきます。

必須タグ

HTMLを書くにあたり、必ず必要になるのが以下のタグです。

  • html
  • head
  • body

これらの必須タグについては、私たちは既に学んできましたね。

不安な場合はHTMLを書こうを確認してみてください。

基本タグ

基本的なHTMLタグをいくつか取り上げてみます。

これから取り上げるタグはすべてbodyタグの中に記述するもの、つまりブラウザに表示されるものになります。

h*

  • hは"heading"の略
  • 見出し

hタグは文章の見出しを表すために使用します。

hタグにはh1からh6までのレベルが存在し、それぞれタグとして使用することができます。
"h*"と表現したのはこのためです。

hタグの見出しレベルはh1が最も強く、h2h3と数値が上がることに見出しレベルは下がっていきます。
文章を書くときには大きい見出しから、中見出し、小見出しという順で書きますよね。
同じように、最も強い(大きい)見出しを表すh1タグから順に設定していくと良いでしょう。

div

  • divは"division"の略
  • 区・部・段など、区切り

divタグは区切りを表します。
この"区切り"に関してはそこまで意識する必要はなく、要素をまとめたり、cssを当てるのに必要だと判断した時に気軽に使ってみてください。

ul

  • ulは"unordered list"の略
  • 順序のないリスト

ulタグはリストを表すために頻繁に使用します。

ulタグの直下には、リスト項目(list item)を表すliタグしか置けません。
liタグの下には好きな要素を置くことができます。

<ul>
  <li>liタグの中には</li>
  <li>単純なテキストや</li>
  <li>
    <div>他の要素を置くことができます</div>
  </li>
</ul>

unordered 、"順序のない"というところが気になりましたか?
そうです、順序のあるリスト(ordered list)を表すolタグも存在します。
手順を紹介するような順序が大事なリストを作る場合はolタグを使うのが良いでしょう。
olタグの直下も、ulタグ同様にliタグしか置けません。

table

  • table

tableタグは表を表すために使用します。

tableタグには関連するタグが複数ありますが、最もよく使われるのは以下の2つです。

  • tr(table row)タグ、表の行一列を表す
  • td(table data cell)タグ、表のデータセルを表す

tableタグの直下にはtrタグを、trタグの直下にはtdタグを置くことができます。

<table>
  <tr>
    <td>2行2列の</td>
    <td>表です</td>
  </tr>
  <tr>
    <td>tdタグの中には</td>
    <td>
      <div>他の要素を置くことができます</div>
    </td>
  </tr>
</table>

a

  • aは"anchor"の略
  • (自身とリンク先を)固定する

aタグは別画面や機能に対してリンクを張るために使用します。

リンク先は以下のように、href=""という文字列の間に指定します。

<a href="./directory/page.html">別ページへのリンク</a>

img

  • imgは"image"の略
  • 画像

imgタグは画像を表示するために使用します。

画像を表示するには以下のように、src=""という文字列の間に画像のパスを指定します。

<img src="./image.jpg">

imgタグは終了タグを書きません。
画像を表示するという目的が自身で完結するためです。

HTMLタグの覚え方

HTMLタグはtableタグのように機能の意味をそのまま表しているものや、ulタグのように機能を表す語の略になっていることがほとんどです。
新しいHTMLタグに出会ったときには、そのタグがどういった語の略になっているかを知ると覚えやすいでしょう。

また、ulタグのように直下に置ける要素が決まっているタグがいくつか存在します。
新しいHTMLタグに出会ったときにはこの点にも注意してみてください。

まとめ

本講座では

  • 基本的なHTMLタグの使い方
  • HTMLタグの覚え方

を学びました。

実はHTMLタグの種類はそんなに多くなく、頻繁に使うタグとなると更に絞られます。

焦らず、必要になったときに覚えていけば大丈夫ですよ。

次の記事

これまでの記事

隠します!
Loading...