今回は、最低限覚えておいたほうが良いHTMLタグを厳選してご紹介します。
HTMLは、WebエンジニアやWebデザイナーでなくとも確実に知っておくといいでしょう。
制作会社や社内エンジニアとのコミュニケーションがスムーズになります。

HTMLタグとは?

HTMLは「Hypertext Markup Language」の略で、テキストを「構造化」するための言語です。

「構造化」は「装飾」と認識しても良いでしょう。
テキストを太字や赤字にしたり、見出しをつけたり、表組みを作成したりなどテキストに関わるあらゆる装飾を表現する役割を持ちます。

HTMLタグの基本的な使い方

実際にHTMLタグを使うときは、基本的には適用範囲を指定する必要があります。(一部例外あり)

例えば見出しにしたいテキストがある場合は、該当テキストの始まりと終わりにHTMLタグを設置します。

以下より、表記例を見ながら覚えておきたいタグを確認していきましょう。

1.hタグ

hタグはHeadingの略で、見出しを付ける場合に使うタグです。

本で言うと、h1タグが中見出し・h2が章・h3が節というイメージです。

例:
<h1>中見出し</h1>
<h2>章</h2>
<h3>節</h3>

ホームページを作る場合、こちらのタグを使用した際に目立つように装飾する場合が多くあります。

2.aタグ

aタグはAnchorタグの略で、リンクを貼るテキストや画像を指定する目的で使用するものです。

また、タグ内にtarget="_blank"をつけることで新しいウィンドウで表示するかどうかを選択することが出来ます。

例:
<a href=”http://hogehoge.com” target="_blank">リンクを設置するテキスト</a>

3.imgタグ

imgタグはimageの略で、画像を表示する際に利用するタグです。なお、現在のところ表示できるのは「GIF」「JPEG」「PNG」の3種類です。これらのタグは状況により使い分けて下さい。

例:
<img src=”http://hogehoge.com/picture.jpg”>

4.brタグ

brタグはBreak(改行)の略です。その名の通り、テキストを改行する際に使用します。

例:
この後に設置したbrタグの箇所で改行されます。<br>
改行したい場所に上記のように設置して下さい。

5.uタグ

uタグは囲まれた箇所に下線(アンダーライン)を引くタグです。

例:
<u>この箇所にアンダーラインを引きます。</u>

6.bタグ・strongタグ

bタグは囲んだテキストを太文字にするタグ・strongタグは囲んだテキストを強調するタグです。

タグとも囲んだテキストを太文字にしますが、強調することが目的の場合はstrongタグを使用することが推奨されています。

例:
<b>囲んだ箇所を太文字にします</b>
<strong>囲んだ箇所を強調します</strong>

7.fontタグ

fontタグテキストの大きさや種類、色を指定するタグです。

大きさはsize属性・種類はface属性・色はcolor属性で指定します。

例:
<font face=”MS ゴシック” size=”11” color=”blue”>fontタグで囲った箇所のみ指定されたテキストになります</font>

8.ulタグ・olタグ・liタグ

ulタグ・olタグ共にリストを作成するためのタグです。liタグは左記のタグ内に使用するタグです。

なお、ulタグは単に箇条書きですがolタグは番号付きのリストを作ることが出来ます。

例:
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

9.blockquoteタグ

blockquoteタグは、タグで囲まれた部分が引用・転載であることを示すタグです。
なお、比較的長めの文章を引用する際にはblockquoteタグを利用しますが、短い文章を引用する際はqタグを利用します。

例:
スティーブ・ジョブズの有名な2005年のスピーチは下記のように始まります。
<blockquote>世界でもっとも優秀な大学の卒業式に同席できて光栄です。私は大学を卒業したことがありません。実のところ、きょうが人生でもっとも大学卒業に近づいた日です。本日は自分が生きてきた経験から、3つの話をさせてください。たいしたことではない。たった3つです。</blockquote>

10.tableタグ

tableタグは表を作成するためのタグです。基本的にはtableの中にtrで横一行を追加し、その行をthやtdで定義して使います。

なお、http://styleme.jp/tool/xls2html/ のようなExcelから変換できるサイトもあるので、最初はこちらを使うことをオススメいたします。

例:
スクリーンショット_2016-09-08_10.40.29.png

11.pタグ

pタグはParagraphの略で、文章中に段落を設置する際に使用するタグです。
なお単に改行することが目的であれば、後に紹介するbrタグがオススメです。

例:
<p>第一段落</p>
<p>第二段落</p>

12.divタグ

divタグ自体は特に意味を持ちませんが、

タグで囲った範囲に対してスタイルシートでデザインを設定したりするために使用します。
例:
<div align=”right”>右寄せで文字を表示させます</div>

まとめ

実際にHTMLタグを扱う職種でない限り、すぐに覚えるのはなかなか難しいでしょう。
一番早いのは、個人のホームページブログを開設して自分で1から書いてみることでしょう。
実践と復習を繰り返しながら身につけていきましょう。