HTML 見出し

❮ 前章へ 次章へ ❯

HTML <head> 要素

<head> 要素は、メタデータ（データに関するデータ）のコンテナで、 <html> tag と <body> タグの間に配置します。

HTML メタデータは、HTML 文書に関するデータです。メタデータは表示されません 。

メタデータは、一般に、文書タイトル、スタイル、リンク、スクリプト、および他のメタ 情報を定義します。

次のタグは、メタデータを記述します：<title>、<style>、 <meta>、<link>、<script>、<base>。

HTML <title> 要素

<title> 要素は、文書のタイトルを定義し、全ての HTML/XHTML 文書においては必須です。

<title> 要素：

簡単な HTML 文書：

例

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
The content of the document......
</body>

</html>
Try it Yourself ❯

HTML <style> 要素

<style> 要素は、単一の HTML 文書のスタイル情報を定義するために使用します：

例

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
Try it Yourself ❯

HTML <link> 要素

<link> 要素は、外部スタイルシートとのリンクのために使用します：

例

<link rel="stylesheet" href="mystyle.css">
Try it Yourself ❯

チップ： CSSについての詳細は、CSS チュートリアルをご覧ください。

HTML <meta> 要素

<meta> 要素は、使用する文字セット、ページの説明、キーワード、作者、およびその他のメタデータを指定するために使用します。

メタデータは、ブラウザ（コンテンツの表示方法）、検索エンジン（キーワード）、または他の Web サービスによって使用されます。

使用する文字セットを定義：

<meta charset="UTF-8">

web ページの説明を定義：

<meta name="description" content="Free Web tutorials">

検索エンジン用のキーワードを定義：

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

ページの作者を定義：

<meta name="author" content="Hege Refsnes">

文書を30秒ごとにリフレッシュする：

<meta http-equiv="refresh" content="30">

<meta> タグの例

例

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
Try it Yourself »

ビューポートの設定

HTML5 には、Web デザイナが <meta> タグを通してビューポートを制御できるようにするためのメソッドが導入されました。

ビューポートは、ユーザが Web ページに表示できる領域です。それはデバイスによって異なり、携帯電話はコンピュータ画面より小さくなります。

すべての Web ページに、次の <meta> ビューポート要素を指定する必要があります：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta> viewport 要素は、ページのサイズ（dimension）とスケーリングを制御する方法についてブラウザに指示します。

width=device-width 部分は、ページの幅をデバイスの画面幅（デバイスによって異なります）に合わせるように設定します。

initial-scale=1.0 部分は、ブラウザがページを最初に読み込んだときの初期ズームレベルを設定します。

viewport メタタグのない web ページの例と、viewport メタタグのある同じ web ページの例を次に示します：

チップ： 携帯電話やタブレットでこのページを閲覧している場合は、下の 2 つのリンクをクリックしするとその違いを確認できます。




viewport メタタグがない場合



viewport メタタグがある場合

HTML <script> 要素

<script> 要素は、クライアント・サイド JavaScript を定義するために使用します。

下の JavaScript は、id="demo" を持つ HTML 要素に「Hello JavaScript!」を表示します：

例

<script>
function myFunction {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Try it Yourself ❯

JavaScript に関するすべての情報は、JavaScript チュートリアルをご覧ください！

HTML <base> 要素

<base> 要素は、ページ内のすべての相対 URL のベース URL とベース target を指定します：

例

<base href="http://www.w3schools.com/images/" target="_blank">
Try it Yourself ❯

<html>、<head>、<body> を省略しますか？

HTML5 標準によれば、<html>、<head>、<body> タグは省略することができます。

次のコードは、HTML5 としては妥当なコードです：

例

<!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Try it Yourself »

注：

<html> と <body> タグの省略はお勧めしません。これらのタグを省略すると、DOM や XML ソフトウェアがクラッシュしたり、 古いブラウザ（IE9）ではエラーが発生する可能性があります。

しかし、<head> タグを省略することは、もうだいぶ前から一般的な慣行になっていました。

HTML head 要素

タグ 説明
<head> 文書に関する情報を定義する
<title> 文書のタイトルを定義する
<base> ページの全リンクに対するデフォルトのアドレスとデフォルト target を定義する
<link> 文書と外部リソース間の関係を定義する
<meta> HTML 文書に関するメタデータを定義する
<script> クライアント・サイド・スクリプトを定義する
<style> 文書のスタイル情報を定義する


❮ 前章へ 次章へ ❯