funky9216
WEB担当になって、いろいろなツールベンダーや広告代理店と会って会話を進めていくと
「うちのツールはワンタグ入れるだけで使えるんで！」とか「計測用のタグ入れてもらえれば！」とか”タグ”っていう言葉が出てくると思いますが、これはWEB業界限定の専門用語ですね。
ちょっとした言葉がわからないだけで会話についていけない事があります。
質問したら「知識不足！スキル不足！」って思われたらどうしよう？って思う方もいますが、言葉は知識！一度知ってしまえば問題なし！
タグとは
HTMLにツールや他の要素を埋め込むために使用されるタグは、特定の目的や機能を持った要素を定義するためのマークアップ言語の要素です。
皆さんがブラウザで見ているのは、HTMLに書かれているタグの内容でどのように表示をするかを指示された結果を見ている感じですね。
一般的にブラウザに表示させるタグ
WEBページの内容を見るときに、ソースコードを見るときがありますが、基本のタグをご紹介します。
- コンテンツタグ:
<h1>〜<h6>: 見出しを表すタグ<p>: 段落を表すタグ<a>: リンクを表すタグ<img>: 画像を表示するタグ<ul>と<li>: 順序なしリスト（番号のないリスト）を作成するタグ<ol>と<li>: 順序付きリスト（番号付きリスト）を作成するタグ<table>と関連するタグ: 表を作成するためのタグ
- フォームタグ:
<form>: フォームを作成するタグ<input>: フォームに入力フィールドを追加するタグ<select>と<option>: ドロップダウンメニューを作成するタグ<textarea>: 複数行のテキスト入力フィールドを作成するタグ<button>: ボタンを作成するタグ
- セクションタグ:
<div>: 要素をグループ化するための汎用的なコンテナタグ<header>: ヘッダーセクションを表すタグ<footer>: フッターセクションを表すタグ<nav>: ナビゲーションメニューを表すタグ<section>: セクションを表すタグ<article>: 独立した記事やコンテンツのセクションを表すタグ
- メタデータタグ:
<head>: ドキュメントのメタデータを含むセクションを表すタグ<title>: タイトルを指定するタグ<meta>: メタ情報（文字コードやキーワードなど）を指定するタグ
- テキストフォーマットタグ:
<strong>: 強調表示されたテキストを表すタグ<em>: 強調されたテキストを表すタグ<u>: 下線を引いたテキストを表すタグ<del>: 取り消されたテキストを表すタグ<code>: コードやプログラムの断片を表すタグ
- 埋め込みコンテンツタグ:
<iframe>: 別のウェブページやコンテンツを埋め込むためのタグ<audio>: オーディオコンテンツを埋め込むためのタグ<video>: 動画コンテンツを埋め込むためのタグ
- スタイルとレイアウトタグ:
<style>: ページ内でのスタイルシートを定義するタグ<div>と<span>: スタイルや動作を制御するための汎用的なコンテナタグ<br>: 改行を表すタグ<hr>: 水平線を挿入するタグ
- テーブルタグ（詳細な例）:
<thead>,<tbody>,<tfoot>: 表のヘッダー、本体、フッターをグループ化するタグ<th>: 表の見出しセルを表すタグ<caption>: 表のキャプション（タイトル）を表すタグ<colgroup>と<col>: 列のグループ化とスタイル設定を行うためのタグ
WEBサイトのソースを見ると上記の物がたくさん確認できると思います。
それぞれに要素の見せ方などが定義されていて、組み合わせ書いていくことでWEBブラウザでコンテンツが見えるようになるわけですね。
ツールなどのタグ
さて、冒頭の話に戻ります。ツールベンダーなどが行っているタグは上記のものとは違って、Javascriptとかphpとか他のプログラミング言語の物が多いですね。
GoogleAnalyticsやTagmanagerなどのタグはJavascriptで書かれているスクリプトタグというものですね。
- スクリプトタグ:
<script>: JavaScriptコードを埋め込むためのタグです。
ツールや外部スクリプトをウェブページに追加する場合に使用します。- 外部スクリプト:
<script>タグ内でsrc属性を使用して外部スクリプトファイルを指定します。
外部スクリプトを使用すると、カスタム機能や外部ライブラリをウェブページに追加できます。
- インラインスクリプト:
<script>タグ内に直接JavaScriptコードを記述する方法です。
- タグマネージャー:
- タグマネージャーを使用すると、複数のタグやスクリプトを一元管理できます。代表的なタグマネージャーにはGoogle Tag ManagerやAdobe Experience Platform Launchがあります。
タグマネージャーを導入すると、タグをウェブページに直接追加せずに、タグマネージャーのコンテナに追加することができます。
タグマネージャーのコードをウェブページに追加することで、タグマネージャーがタグやスクリプトのロードと実行を管理します。
タグマネージャーのコンソールを使用して、タグを追加・編集・削除することができます。
- タグマネージャーを使用すると、複数のタグやスクリプトを一元管理できます。代表的なタグマネージャーにはGoogle Tag ManagerやAdobe Experience Platform Launchがあります。
- プラグインや組み込みコード:
- 特定のツールやサービスは、専用のプラグインや組み込みコードを提供しています。
ツールのドキュメントを参照して、適切なコードをウェブページに追加する方法を確認してください。
各ツールやサービスによってタグの導入方法やコードが異なる場合がありますので、公式なドキュメントや提供元のガイドラインを参照することが重要です。
それにより、正確な手順や最新の情報を得ることができます。
- 特定のツールやサービスは、専用のプラグインや組み込みコードを提供しています。
「ワンタグ書くだけで使用できますよ！」ってやつはインラインスクリプトで書き込めるようなものですね。
基本的にはGoogleTagManagerで管理すれば、一発で全ページに反映されるので、タグマネージャーで管理する事になると思います。
まとめ
今回はタグについて説明してみました。
WEBの事がなんとなくわかってれば大丈夫って思っていて躓いていた方も多いと思いますがいかがでしょうか？
という私自身もWEB担当に初めてなった時は知ってるつもりだったけど知らない言葉がたくさんで会話についていけなかったです。
皆が当たり前のように話しているから、「聞いちゃダメ」って思ってましたしね。
言葉は調べれば出てくるので、是非正しい知識を身に着けて、ビジネスに役立ててください！
ではでは！
