TECH I.S.

HTML - head要素

HTML<head>要素は、<title>、<style>、<meta>、<link>、<script>、<base>要素のコンテナです。

HTML<head>要素

<head>要素は、メタデータ(データに関するデータ)の入れ物で、<html>タグと<body>タグの間に配置されます。

HTMLメタデータは、HTMLドキュメントに関するデータです。メタデータは表示されません。

メタデータは通常、ドキュメントのタイトル、文字セット、スタイル、スクリプト、およびその他のメタ情報を定義します。

HTML<title>要素

<title>要素は、ドキュメントのタイトルを定義します。タイトルはテキストのみである必要があり、ブラウザのタイトルバーまたはページのタブに表示されます。

HTMLドキュメントでは<title>要素が必要です。

ページタイトルの内容は、検索エンジン最適化(SEO)にとって非常に重要です。ページタイトルは、検索結果にページをリストする際の順序を決定するために、検索エンジンアルゴリズムによって使用されます。

<title>要素
  • ブラウザのツールバーのタイトルを定義します
  • お気に入りに追加されたときにページのタイトルを提供します
  • 検索エンジンの結果にページのタイトルを表示します

そのため、できるだけ正確で意味のあるタイトルにするようにしてください。

簡単なHTMLドキュメント

例

<!DOCTYPE html> <html> <head>  <title>意味のあるページタイトル</title> </head> <body> ドキュメントの内容…… </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サービスによって使用されます。

例

使用する文字セットを定義します。

<div><meta charset="UTF-8"></div>

検索エンジンのキーワードを定義します。

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

Web ページの説明を定義します。

<div><meta name="description" content="無料のWebチュートリアル"></div>

ページの作成者を定義します。

<div><meta name="author" content="ジョン・ドウ"></div>

ドキュメントを30秒ごとに更新します。

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

ビューポートを設定して、Webサイトがすべてのデバイスで適切に表示されるようにします。

<div><meta name="viewport" content="width=device-width, initial-scale=1.0"></div>
<meta>タグの例

例

<meta charset="UTF-8"> <meta name="description" content="無料のWebチュートリアル"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="ジョン・ドウ">

ビューポートの設定

ビューポートは、Webページのユーザーの可視領域です。デバイスによって異なります。携帯電話では、コンピューターの画面よりも小さくなります。

すべてのWebページに次の<meta>要素を含める必要があります。

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

これにより、ページのサイズとスケーリングを制御する方法がブラウザーに指示されます。

width=device-width部分は、ページの幅をデバイスの画面幅(デバイスによって異なります)に従うように設定します。 initial-scale=1.0部分は、ページがブラウザーによって最初に読み込まれたときの初期ズームレベルを設定します。

ビューポートメタタグのないWebページと、ビューポートメタタグのある同じWebページの例を次に示します。


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




ビューポート メタタグなし




ビューポート メタタグあり



HTML<script>要素

<script>要素は、クライアント側のJavaScriptを定義するために使用されます。

次のJavaScriptは「Hello JavaScript!」を書き込みます。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="スティックマン"> <a href="/guide/tags/tag_base">HTML baseタグ</a> </body>

この章のまとめ

  • <head>要素は、メタデータ(データに関するデータ)のコンテナーです。
  • <head>要素は、<html>タグと<body>タグの間に配置されます。
  • <title>要素は必須で、ドキュメントのタイトルを定義します。
  • <style>要素は、単一のドキュメントのスタイル情報を定義するために使用されます。
  • <link>タグは、外部スタイルシートへのリンクに最もよく使用されます。
  • <meta>要素は通常、文字セット、ページの説明、キーワード、ドキュメントの作成者、およびビューポート設定を指定するために使用されます。
  • <script>要素は、クライアント側のJavaScriptを定義するために使用されます。
  • <base>要素は、ページ内のすべての相対URLのベースURLおよび(または)ターゲットを指定します。

HTML head要素
タグ 説明
<head> ドキュメントに関する情報を定義します
<title> ドキュメントのタイトルを定義します
<base> ページ上のすべてのリンクのデフォルトアドレスまたはデフォルトターゲットを定義します
<<link> ドキュメントと外部リソース間の関係を定義します
<meta> HTMLドキュメントに関するメタデータを定義します
<script> クライアント側のスクリプトを定義します
<style> ドキュメントのスタイル情報を定義します

利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスを参照してください。



チュートリアル