HTML言語には色々なタグがありますが、全部覚える必要ありません。
実際に現場で使われているタグは数えるほどしかないので、ここではそのタグをご紹介していきます。
目次
よく使うタグ
h1〜h6
ｈはheadingの略で、タイトルを表すタグです。
１〜６まであって１が一番大きいタイトル、６が文章の中で一番小さいタイトルという意味になります。
使い方例：
|
1 2 3 |
<h1>これが大題</h1> <h2>こっちは中題</h2> |
画面での表示：
これが大題
こっちは中題
p
pはparagraphの略で、本文を表すタグです。
使い方例：
|
1 2 3 4 |
<h1>これが大題</h1> <p>これが文章</p> <h2>こっちは中題</h2> <p>これも文章</p> |
画面での表示：
これが大題
これが文章
こっちは中題
これも文章
img
imgタグは画像を表すタグで、画面には画像が表示されます。このタグは終端タグがないものですね。
終端タグがないものは普通に>で閉じてもいいし、例のように/>で閉じても大丈夫です。
使い方例：
|
1 |
<img src="画像のパスを入れる" alt="画像の説明文を入れます。alt属性は省略できるが、この説明文がGoogleの画像検索の際に使われるので入れておいた方がいい" /> |
画面での表示：
a
aタグはリンクを表すタグで、別のページに飛ぶリンクをつけることができます。
文字を囲えば文字を押したら別ページへ、画像などを囲えば画像を押して別ページへ飛べます。
使い方例：
|
1 2 3 |
<a href="リンク先をここに入れる">これがリンクになります</a> <a href="http://google.com"><img src="画像のパス" /></a> <a href="http://google.com" target="_blank">target属性に_blankと入れると別タブでページが表示できます</a> |
画面結果：
ul,li
ulタグとliタグはワンセットで使います。項目のリストに使います。
ul,liタグで囲まれたものは一つのグループ的な意味合いとしてブラウザに理解されます。
使い方例：
|
1 2 3 4 5 |
<ul> <li>今日やること１</li> <li>今日やること２</li> <li>今日やること３</li> </ul> |
画面での表示：
- 今日やること１
- 今日やること２
- 今日やること３
table,thead,tbody,tfoot,tr,td
tableタグ、trタグ、tdタグはセットです。このタグを使うと表が作られます。
theadタグ、tbodyタグ、tfootタグはそれぞれ、表の上部、中部、下部的な意味合いになりますが、使っても使わなくてもいいものになります。
trタグで１行をつくり、その中でtdタグを使って列を区切る形になります。
各行の列は必ずみんな同じ列数じゃないと駄目です。
使い方例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<table> <thead> <tr> <th>見出し1</th> <th>見出し2</th> </tr> </theadv> <tbody> <tr> <td>内容1</td> <td>内容2</td> </tr> <tr> <td colspan="2">colspan属性に指定した数値分横へセルがくっつく</td> </tr> <tr> <td rowspan="2">rowspan属性に指定した数値分下のセルに結合する</td> <td>内容4</td> </tr> <tr> <td>内容6</td> </tr> </tbody> <tfoot> <tr> <td>フッタセル1</td> <td>フッタセル2</td> </tr> </tfoo> </table> |
画面での表示：
| 見出し1 | 見出し2 |
|---|---|
| 内容1 | 内容2 |
| colspan属性に指定した数値分横へセルがくっつく | |
| rowspan属性に指定した数値分下のセルに結合する | 内容4 |
| 内容6 | |
| フッタセル1 | フッタセル2 |
３つともHTML5から使えるようになったタグで、ヘッダー部とフッター部、ナビゲーションを表します。
ヘッダー部はメニューやロゴなどがある上部の部分のことで、フッター部はcopyrightなど最下部の部分ですね。
navタグはメニューなど「ナビゲーション」を表すものになります。
ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。
使い方例：
|
1 2 3 4 5 6 7 8 |
<header> <nav> <ul> <li><a href="">メニュー１</a></li> <li><a href="">メニュー２</a></li> </ul> </nav> </header> |
画面結果：
section、article
２つともHTML5から使えるようになったタグで、セクションとアーティクル（記事）を意味します。
セクションとアーティクルの違いはここらへんのサイトが参考になります。
http://www.hp-stylelink.com/news/2013/07/20130703.php
figure
<figure>タグは、図や表などをグループ化する際に使用します。名前から、図や画像などに使うことは想像しやすいと思いますが、実はソースコードや詩、リストなど何でもコンテンツをグループ化することができるタグです。
詳しくはこちらのサイトが参考になります。
form、input、textarea
ここらへんは入力フォームを作るときに使うものですね。
inputタグはtype属性にcheckboxと指定すればチェックボックスが作られ、radioと指定すればラジオボタンになったりしますね。
HTML５からはtype属性にnumberやdateなども指定できるようになり、スマホで表示した際には日付なら日付入力用のキーボードが出たりします。
詳しくはこちらのサイトが参考になります。
http://www.htmq.com/html5/input.shtml
SEOってなに？
SEO（えすいーおー）というのは、「Search Engine Optimization」の略で、「検索エンジン最適化」という意味です。 つまり、GoogleやYahooなどの検索エンジン（検索サイト）で、特定のキーワードで検索した際に上位に表示されるための対策のことをいいます。
機械からしたら、HPに掲載されている文字は「ただの文字の羅列」にすぎません。
そういったただの文字の羅列に「ここからここまでの文字はタイトルだよ」「これは画像なんだよ」といった「意味」をもたせ、ブラウザ（機械）に理解させているのがHTMLの「タグ」です。
そして、自分たちが作ったHPがGoogleなどで検索した結果の上位に出てくるかどうかも、この「タグ」に左右されてきます。
例えば、h1タグで「これだけ覚えておけば大丈夫！よく使うタグとSEO」という文字を囲っているサイトと
h2タグで「これだけ覚えておけば大丈夫！よく使うタグとSEO」となっている２つのサイトがあったとすれば、
「SEO」という単語で検索した場合にh1タグで囲われているサイトの方が「情報として重要度が高い」と判断されて検索結果の上位にくる。といった具合です。
じゃあ、みんなｈ１タグで囲っちゃえばいいの？というとそういう訳でもなく、
「情報に正しい意味をもたせる」
ということがSEO対策では大事になります。
なので、SEO対策ではタグの意味を理解し、タグを正しく使えているかが１つとして大事になってきます。
（SEO対策にはタグを正しく使う以外にも色々な対策方法があり、何か一つだけやれば上位に表示されるというものではありません）
とはいえ、実際の現場でも厳密にタグを使っている現場はほとんどありませんが、ある程度は意味として知っておきましょう。
初心者から独学で学べるオンラインプログラミング学習サービス「ウェブカツ」
