Webサイトの基本「HTML」「タグ」ってなに？

WebサイトはHTMLという言語を用いて作られています。Webサイトでは、文章や画像、リンクや入力欄が表示されますが、これらはHTMLによって実現されています。今回は、HTMLとは何か、ツール導入時に出てくる「タグを貼る」とは何かについてを説明します。

Webサイトの基本！「HTML」ってなに？

*HTMLとは、「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、Webサイトを作るための最も基本的な言語です。*

HTMLによって、画像や他の文書へのリンクを埋め込むことが可能になります。

「タグ」「タグを貼る」ってなに？

タグってなに？

HTMLファイルは、タグというマークを用いて構造を指定します。ページのタイトルを示す titleタグや、リンクを示すa タグなど、内容ごとに特定の文字列で構成されています。

Googleアナリティクスなどの解析ツールやLPO（ランディングページ最適化）ツール、広告分析ツールなどを導入する際には「タグを貼る」「タグを設置する」「タグを置く」といった作業が必要となります。

タグを貼るってどういうこと？

これらの場合のタグとは、JavaScriptや画像のHTMLタグのことです。「タグを貼る」という作業はタグの文字列をHTMLファイルに追記するということです。

同期タグと非同期タグ

JavaScriptのタグは同期タグと非同期タグの2種類があります。

ブラウザはHTMLファイルの上から順に読み込みます。同期タグが設置してある箇所ではJavaScriptの読み込みが終わるまで、それ以降のHTMLファイルを読み込みません。非同期タグでは、JavaScriptの読み込みと同時に、それ以降のHTMLファイルを読み込みます。

解析タグでは、ページの読み込みに対して早く実行された方が正確なデータが取れるため、HTMLファイルの上の方に設置することが望ましいです。しかし、同期タグではページの読み込みを遅延させてしまう可能性があるため、ページの下部に設置した方がユーザビリティにおけるリスクが少ないといえます。

どこにタグを貼るのか？

タグを貼る場所は、同期タグではHTMLファイルの下の方 / body タグの直前、非同期タグではHTMLファイルの上の方 body タグの直下や / head タグの直前という場合が多いです。

しかし、HTMLファイルが読み込まれる前に実行したいJavaScriptが含まれる同期タグの場合にはHTMLファイルの上の方に設置する必要があるなど、ツールやタグによって推奨される場所が異なります。

*ツールの効果を最大化、誤作動を防ぐために、それぞれのツールのドキュメントでタグの貼る場所をしっかりと確認しましょう。*

まとめ

今回はWebサイトの基本である「HTML」と「タグ」について解説しました。

「タグを貼る」ときには、同期タグと非同期タグによって動作が異なることを理解したうえで、ツールのドキュメントを確認してタグを貼りましょう。