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ドキュメント
例
HTML<style>要素
<style>要素は、単一のHTMLページのスタイル情報を定義するために使用されます。
## HTML<link>要素
<link>要素は、現在のドキュメントと外部リソースとの関係を定義します。
<link>タグは、外部スタイルシートへのリンクに最もよく使用されます。
ヒント：CSSの詳細については、CSSチュートリアルをご覧ください。
HTML<meta>要素
<meta>要素は通常、文字セット、ページの説明、キーワード、ドキュメントの作成者、およびビューポート設定を指定するために使用されます。
メタデータはページに表示されませんが、ブラウザー(コンテンツの表示方法またはページのリロード方法)、検索エンジン(キーワード)、およびその他のWebサービスによって使用されます。
例
使用する文字セットを定義します。
検索エンジンのキーワードを定義します。
Web ページの説明を定義します。
ページの作成者を定義します。
ドキュメントを30秒ごとに更新します。
ビューポートを設定して、Webサイトがすべてのデバイスで適切に表示されるようにします。
<meta>タグの例
例
ビューポートの設定
ビューポートは、Webページのユーザーの可視領域です。デバイスによって異なります。携帯電話では、コンピューターの画面よりも小さくなります。
すべてのWebページに次の<meta>要素を含める必要があります。
これにより、ページのサイズとスケーリングを制御する方法がブラウザーに指示されます。
width=device-width部分は、ページの幅をデバイスの画面幅(デバイスによって異なります)に従うように設定します。
initial-scale=1.0部分は、ページがブラウザーによって最初に読み込まれたときの初期ズームレベルを設定します。
ビューポートメタタグのないWebページと、ビューポートメタタグのある同じWebページの例を次に示します。
ヒント：このページを携帯電話またはタブレットで閲覧している場合は、下の2つのリンクをクリックして違いを確認できます。
HTML<script>要素
<script>要素は、クライアント側のJavaScriptを定義するために使用されます。
次のJavaScriptは「Hello JavaScript!」を書き込みます。id="demo"を使用してHTML要素に変換します。
例
ヒント：JavaScriptの詳細については、JavaScriptチュートリアルをご覧ください。
HTML<base>要素
<base>要素は、ページ内のすべての相対URLのベースURLおよび(または)ターゲットを指定します。
<base>タグには、hrefまたはtarget属性、あるいはその両方が存在する必要があります。
ドキュメント内に存在できる<base>要素は1つだけです!
例
ページ上のすべてのリンクのデフォルトURLとデフォルトターゲットを指定します。
この章のまとめ
<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タグリファレンスを参照してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。