0120-900-587
タグとは？～初心者のための基本解説～
タグとは本来商品などの識別に用いられるものですが、WEBサイトやブログページの表示については、文字や画像を表示させたり、装飾したりといった命令に使われます。
ここでは、タグの基礎知識と使用方法を解説します。
ホームページ制作.jpってどんなサービス？
- 運営10年！老舗のホームページ制作無料一括見積サービス。
- 審査済の優良ホームページ制作会社のみに見積もり依頼ができる。
- お見積もり無料。何度でもご相談無料。お断り代行も無料。
- 訪問無しのオンライン相談可能！
- しつこい営業は一切致しません！
全国通話無料
受付：年中無休/24時間電話受付0120-900-587
私たちが全力でサポート致します！
宇野（うの）
田丸（たまる）
真中（まなか）
1.タグとは
タグはHTMLのようなマークアップ言語においては、ページを構成するためにソースに貼りつけるものとなります。
一例として、＜img＞タグ（イメージタグ）がつく部分には画像のリンクを貼りつけ、リンク先にある画像を表示させることが可能になります。
タグとは商品に付けられる札のことを指しますが、WEB上では「ページを表示させるための命令」としての役割を果たしています。
命令を与える際、<>の括弧を含む文字がまとめてタグと呼ばれます。
一例として、と書かれたタグを入れ込んだ場合、これのタグに挟まれた部分は太字で表されます。
部分的に文字を強調したいときには、必ずこの太字タグを使うことになります。
これらのタグは、ページ上のリンクや画像を表示するための「htmlタグ」購入数や申込数を計測する「コンバージョンタグ」Googleアナリティクスなどを使うために埋め込む「ツール用制御タグ」の3種類に分けられます。
TwitterなどのSNSでも「ハッシュタグ」という言葉が使われていますが、ハッシュタグは「#（ハッシュマーク）」を文字の先頭部分に付加して特定のキーワードをタグ化できるという用法で、商品に付けられる札と似たような意味をもちます。
ハッシュタグが付いた言葉は分別しやすくなるので、同じ言葉が入った文章や画像がひとまとめにして見られるという、ユーザー側の利便性向上に役立っています。
2.タグの使用方法
タグの使用方法は、記述の基本を押さえつつ正しく記述し、ページの表示に合わせてタグを入れ込んでいきます。
記述ミスがないようにタグを入れる必要がありますが、タグの入力が補助されるエディタを使えばミスタイプやチェックの手間が省けます。
1.基本構造を押さえる
タグを使うためには、タグの基本的な仕組みとして、<html>の対になる</html>で挟み込まなければなりません。
<html></html>はそのページがhtmlページであることを宣言するという意味で、ページ全体を括るため、</html>はソースの最後に記述します。
htmlタグの中にheadタグが、さらにその中にbodyタグが入れ子のようにして入っていると考えましょう。
また、ソースの最初には<!DOCTYPE html>と記述し、この記述のあとに<html><head><body>と続けて本文を書き込んでいきます。
<html><head>はページの基礎となる部分であり、<body>に続く部分はブラウザに表示される部分、文章や画像、テーブルなどを記述します。
このようにタグの記述にはさまざまな決まりごとがあり、ページの構成もルールにしたがって記述しなければなりません。
構造や構成を間違えてしまうと、正しくページが表示されないため、すぐに間違っているとわかります。
現在のWEB開発に使われているHTMLの最新バージョン「HTML5」は、<head>に加えて<header>という新しいタグが加わりました。
ページ構成やWEBデザインには、タグの意味や配置場所をよく考えて正しく記述するようにしましょう。
2.装飾用のタグを入れ込む
WEBページの表示としては、最低限以下のタグを覚えておきましょう。
- <title>～</title>（titleタグ：タイトル
- <p>～</p>（pタグ）：段落
- ～</br>（brタグ）：改行
- <strong>～</strong>（strongタグ）：強調
- <b>～</b>（bタグ）：太字
- <h2>～</h2>（hタグ）：大見出し
- <h3>～</h3>（hタグ）：中見出し
- <h4>～</h4>（hタグ）：小見出し ※h1からh6まで指定可能
- <div>～</div>（divタグ）：デザイン
- <span>～</span>（spanタグ）：デザイン
- <table>～</table>（tableタグ）：表 ※tableタグの中に1行を示すタグ<tr></tr>や、セル内容を示すタグ<td></td>タグを入れ込むことで表ができる
- <a href=”～”>～</a>（aタグ）：リンク
- <blockquote>～</blockquote>（blockquote）：引用
これらのタグの他にも、装飾や指定に使われるタグは数多くあります。
テキストサイズの指定や打ち消し線、 JAVAアプレットの挿入、効果音・BGMを出す（Internet Explorerのみの仕様）など、目的に合ったタグが使えます。
3.まとめ
タグはページの構成要素であり、ユーザーからの見ためにも直接関わるものです。
ページの正しい位置に埋め込まなければ、狙い通りの表示にならず文字や画像の位置がずれたり、大きく崩れてしまったりする可能性もあります。
しかしタグをうまく活用すれば、理想に近いサイトを作ることができます。
基礎を押さえつつ実際にページに記述しながら、簡単なタグを駆使できるようになっておきましょう。
WEBページをつくる際には「htmlタグ リファレンス」などを活用してどんどん新しいタグを取り入れ、ページに必要な機能を実装しましょう。
