HTML-ヘッド要素
HTML<head>要素は
、、、、、、、、およびの要素
<title>のコンテナです。<style><meta><link><script><base>
HTMLの<head>要素
<head>要素はメタデータ（データに関するデータ）のコンテナーであり、タグとタグの間に配置され<html>ます<body>。
HTMLメタデータは、HTMLドキュメントに関するデータです。メタデータは表示されません。
メタデータは通常、ドキュメントのタイトル、文字セット、スタイル、スクリプト、およびその他のメタ情報を定義します。
HTMLの<title>要素
この<title>要素は、ドキュメントのタイトルを定義します。タイトルはテキストのみである必要があり、ブラウザのタイトルバーまたはページのタブに表示されます。
この<title>要素はHTMLドキュメントに必要です！
ページタイトルの内容は、検索エンジン最適化（SEO）にとって非常に重要です。ページタイトルは、検索エンジンアルゴリズムによって使用され、検索結果にページを一覧表示するときの順序を決定します。
<title>要素：
- ブラウザのツールバーでタイトルを定義します
- お気に入りに追加されたときにページのタイトルを提供します
- 検索エンジンの結果にページのタイトルを表示します
だから、タイトルをできるだけ正確で意味のあるものにするようにしてください！
単純なHTMLドキュメント：
例
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful 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>要素
この<link>要素は、現在のドキュメントと外部リソースの間の関係を定義します。
タグは、<link>
外部スタイルシートにリンクするために最もよく使用されます。
例
<link rel="stylesheet" href="mystyle.css">
ヒント： CSSのすべてを学ぶには、CSSチュートリアルにアクセスしてください。
HTMLの<meta>要素
この<meta>要素は通常、文字セット、ページの説明、キーワード、ドキュメントの作成者、およびビューポート設定を指定するために使用されます。
メタデータはページに表示されませんが、ブラウザー（コンテンツの表示方法またはページの再読み込み方法）、検索エンジン（キーワード）、およびその他のWebサービスによって使用されます。
例
使用する文字セットを定義します。
<meta charset="UTF-8">
検索エンジンのキーワードを定義します。
<meta name="keywords" content="HTML, CSS, JavaScript">
Webページの説明を定義します。
<meta name="description" content="Free Web tutorials">
ページの作成者を定義します。
<meta name="author" content="John Doe">
30秒ごとにドキュメントを更新します。
<meta http-equiv="refresh" content="30">
すべてのデバイスでWebサイトの見栄えを良くするためのビューポートの設定：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta>タグの例：
例
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
ビューポートの設定
ビューポートは、Webページのユーザーの表示領域です。デバイスによって異なります。携帯電話の方がコンピューターの画面よりも小さくなります。
<meta>すべてのWebページに次の要素を含める必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
これにより、ページのサイズと拡大縮小を制御する方法がブラウザに指示されます。
width=device-widthパーツは、デバイスの画面幅（デバイスによって異なります）に従うようにページの幅を設定します。
このinitial-scale=1.0パーツは、ページがブラウザによって最初にロードされたときの初期ズームレベルを設定します。
次に、ビューポートメタタグのないWebページと、ビューポートメタタグのある同じWebページの例を示します。
ヒント：携帯電話またはタブレットでこのページを閲覧している場合は、以下の2つのリンクをクリックして違いを確認できます。
HTMLの<script>要素
この<script>要素は、クライアント側のJavaScriptを定義するために使用されます。
次のJavaScriptは「HelloJavaScript！」と書いています。id = "demo"のHTML要素に：
例
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
ヒント： JavaScriptのすべてを学ぶには、JavaScriptチュートリアルにアクセスしてください。
HTMLの<base>要素
この<base>要素は、ページ内のすべての相対URLのベースURLやターゲットを指定します。
<base>タグには、hrefまたはtarget属性のいずれか、あるいはその両方が存在する必要があります。
<base>
ドキュメントには1つの要素しか存在できません。
例
ページ上のすべてのリンクのデフォルトのURLとデフォルトのターゲットを指定します。
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
章のまとめ
<head>要素はメタデータ（データに関するデータ）のコンテナです<head>要素は<html>タグとタグの<body>間に配置されます- 要素は必須であり、ドキュメントの
<title>タイトルを定義します - この
<style>要素は、単一のドキュメントのスタイル情報を定義するために使用されます - タグは、
<link>外部スタイルシートにリンクするために最もよく使用されます - この
<meta>要素は通常、文字セット、ページの説明、キーワード、ドキュメントの作成者、およびビューポート設定を指定するために使用されます - この
<script>要素は、クライアント側のJavaScriptを定義するために使用されます - この
<base>要素は、ページ内のすべての相対URLのベースURLおよび/またはターゲットを指定します
HTMLヘッド要素
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。