HTML文章のバージョンやタイトル情報、CSSによる装飾やJavaScriptのプログラムを埋め込む際に使用するタグを紹介します。なお、これらのタグはheadタグの中に記述するものが多いのですが例外もあります。
タグ一覧
- Doctype
- HTML文章のバージョンを宣言するためのタグです。必ずHTML文章の一行目に記述します。最新バージョンを利用する場合の記述は<!Doctype html>です。
- meta
- 文字コードの指定からSNSに記事をシェアした際に表示するOGP画像や説明文の宣言まで、汎用的に色々と記述できるタグです。headタグの中で使用します。
- link
- 外部ファイルとの関連を宣言するタグです。主にCSS(スタイルシート)をHTML文章にリンクさせるときに使用します。headタグの中で使用します。
- title
- HTML文章のタイトルを表現するタグです。検索サイトの検索結果や引用記事の出展元などでWebページが紹介される際には、概ね、titleタグで表現されたタイトルが使われます。headタグの中で使用します。
- style
- htmlファイルに直接CSSを記述するタグです。なお、CSSはlinkタグで外部ファイルに記述した方が複数のHTML文章で共有ができて便利です。styleタグは基本的にはheadタグの中に記述します。
- script
- 主にJavaScriptのソースコードを記述するためのタグです。なお、JavaScriptを外部ファイルに記述した場合、linkタグではなくscriptタグで参照する必要があります。。
metaタグの活用法
metaタグは属性と応用例が多いため個別に解説します。
文字コードを指定する方法
<meta charset="utf-8">
と記述します。
ページの概要を記述する方法
Webページにはタイトルの他にも概要文を記述できます。
<meta name="description" content="このページはHTMLリファレンスです。">
検索結果一覧などで紹介される際に概要文が使われる場合もあります（必ず使われるとは限りません）。
titleタグの詳細解説と記述例
titleタグはMonacaアプリの作成には殆ど関係ないタグですが、ウェブ制作の場合にはブラウザのタブなどに表示されたり、検索結果として一覧表示されるときのタイトルになる可能性がある重要なタグです。
記述例
<head>
<title>あんこエデュケーション | プログラミング教育のためのサンプルアプリ教材サイト</title>
</head>
表示例
scriptタグの使い方
scriptタグの詳しい使い方はscriptに記載いたしました。
コラム
CSSを何処に記述するべきか？
入門書や入門記事では、「全部linkタグを使って外部ファイルに記述する」パターンを推奨する記事も多いですが、HTMLの仕様的にはstyleタグやstyle属性が非推奨にはなっていないので、どこに書いても大丈夫です。styleタグやstyle属性にも、特定の状況では利用するメリットがあります。他のページとは全くデザイン的な共通性の無いページを一つだけ作りたい場合には共通の外部ファイルを使うよりも直接styleタグで書いた方が便利かもしれませんし、また、ブログの記事の中で一箇所だけ
大きく赤い文字で注意喚起
したいときにはstyle属性で書いた方が楽です。
<span style="color:red;font-size:xx-large;">大きく赤い文字で注意喚起</span>
一箇所でしか使わないような記述を共通のCSSに沢山記述していくと、メンテナンスが大変ですしファイル肥大化により無駄な転送も発生します。
ではプロはどのようにしているかというと、必要に応じて高度な技術を取り入れています。
大規模サイトや高度なHTML5アプリ制作の時には「CSSプリプロセッサ」というツールでCSSをプログラミング的に生成したり、CSSの記述に何らかの設計手法を採用して可読性や保守性を高めようとしていたりする場合があります。一方、典型的な企業サイトやブログサイトを作る場合には既存テンプレートのCSSをちょこっと改造して一丁上がりにする場合もあります。