HTML <head> 要素
<head> 要素は、メタデータ（データに関するデータ）のコンテナーであり、 <html> タグと<body> タグの間に配置されます。
メタデータは通常、ドキュメントのタイトル、文字セット、スタイル、スクリプト、およびその他のメタ情報を定義します。
次のタグは、メタデータを記述します: <title>, <style>,<meta>, <link>, <script>, <base>
HTML <title> 要素
<title> 要素はドキュメントのタイトルを定義し、すべてのHTML文書に必要とされます。
<title> 要素
- ブラウザタブのタイトルを定義します
- ページをお気に入りに追加するときにページのタイトルを提供します
- 検索エンジンの結果にページのタイトルを表示します
簡単なHTMLドキュメント
例文
<!DOCTYPE html>
<html>
<head>
<title>Page
Title</title>
</head>
<body>
The content of the document……
</body>
</html>
HTML <style> 要素
<style> 要素は、単一のHTMLページのスタイル情報を定義するために使用されます。:
例文
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
HTML <link> Element
<link> 要素は、外部スタイルシートにリンクするために使用されます。
例文
<link rel=”stylesheet” href=”mystyle.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=”John Doe”>
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=”John
Doe”>
ビューポートを設定する
HTML5では、<meta> タグを使用してWebデザイナーがビューポートを制御できるようにするメソッドが導入されました 。
ビューポートは、Webページのユーザーの表示領域です。デバイスによって異なり、携帯電話の方がコンピューターの画面よりも小さくなります。
すべてのWebページに次の<meta> ビューポート要素を含める必要があります。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta> ビューポートの要素は、ページの大きさとスケーリングを制御する方法については、ブラウザの指示を与えます。
width = device-width部分は、デバイスの画面幅に追従するようにページの幅を設定します（デバイスによって異なります）
initial-scale = 1.0部分は、ページがブラウザーによって最初にロードされるときの初期ズームレベルを設定します。
ビューポートメタタグのない Webページと、ビューポート<meta> タグのある同じWebページでは表示が変わります
ヒント: 携帯電話またはタブレットでこのページを閲覧している場合は、画像が小さく表示されかなり見ずらくなります。違いを確認してみてください。
HTML <script> 要素
<script> 要素は、クライアント側のJavaScriptを定義するために使用されます。
このJavaScriptは、 “Hello JavaScript!” HTML要素に id=”demo”を持つ
例文
<script>
function myFunction {
document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;
}
</script>
HTML <base> 要素
<base> 要素は、クライアント側のJavaScriptを定義するために使用されます。
例文
<base href=”https://www.berry.com/images/” target=”_blank”>
<html>, <head> <body>を省略?
HTML5標準では <html>, <body>, <head> のタグは省略することができます。
次のコードは、HTML5です。
例文
<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
ノート:タグを省略することをお勧めしません。これらのタグを省略すると、DOMまたはXMLソフトウェアがクラッシュし、古いブラウザー（IE9）でエラーが発生する可能性があります。
ただし、 <head> タグを省略することは、以前から一般的な方法です。
HTMLヘッド要素
| Tag | 説明 |
|---|---|
| <head> | 文書に関する情報を定義します |
| <title> | 文書のタイトルを定義します |
| <base> | ページ上のすべてのリンクのデフォルトアドレスまたはデフォルトターゲットを定義します |
| <link> | 文書と外部リソースとの関係を定義します |
| <meta> | HTMLドキュメントに関するメタデータを定義します |
| <script> | クライアント側スクリプトを定義します |
| <style> | ドキュメントのスタイル情報を定義します |
さらにタグについてもっと知るには HTML Tag 辞典を参照して下さい