備忘録的プログラミングリファレンス

ヘッダーエレメント ページ情報

 <head>エレメントの子エレメントについてです
 HTMLページで使用する、言語、作者、使用フォント、スクリプト、CSS、SNS情報などのページ情報は<head>内に入れます。 <title>,<meta>,<base>,<link>,<script>,<style>,<noscript>エレメントで定義します。 webページとしては表示されませんが、商用として作成することや検索ロボットに対応するには重要なエレメントです。

<head>エレメントに包括されるエレメント
  • title... ウィンドウ最上部のタブに表示
  • meta... ページの使用文字コード、作成者、ページ説明、ページでの主要単語、検索ロボットへの対応など
  • base... URLのたどり方を変更。全てのページに共通性を持たせなければならないため使用には注意が必要
  • link... SNS、外部との関連情報、CSSファイルの参照先もこのエレメントに指定
  • style... スタイルシートを直接編集
  • script... JavaScriptなどのスクリプトファイルの参照先、直接記述することもできる

<noscript>エレメントは<body>内に入れます。

 <head>は開始タグ、終了タグが省略可能です。省略されたサイトはあまり見かけません。

 <head> のインターフェイスは、HTMLHeadElement に定義されています。 詳しくは HTMLHeadElement を参照してください。

title タグエレメント

 title タグエレメントは、Window の最上部のタブに表示されるHTMLページのタイトルになります。ページを特徴づける重要な要素で、検索ロボットの検索ワードの対象になります。

</title>

 HTML5から必須ではなくなりましたが、PCブラウザも利用できるようなページならば付けましょう。

JavaScript

 title タグエレメントの定義は HTMLTitleElement を参照してください。

<meta>

 <meta>エレメントに付加情報を記述します。<meta>エレメントの主な属性は"http-equiv"、"name"、"content"、"charset"です。これら以外にはグローバル属性があります。

<meta name="robots" content="">

googleなどの検索サイトにインデックスする/しない、このページから検索ロボットが辿るか/辿らないかを設定します。

<meta name="author" content="">
<meta name="description" content="">

検索ロボット、google search consoleなどの結果に影響します。value値のテキストが検索結果に表示されます。

<meta name="keywords" content="">

検索ロボット、google search consoleなどの結果に影響します。検索単語とその組み合わせが重要です。

<meta charset="">

 HTMLファイル記録した文字コードに合わせます。windows標準shift_jisで記録して、charset属性をutf-8に宣言はできません。

 上記はHTML5からの省略した宣言方法です。HTML4までの<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">という宣言もできます。

<meta http-equiv="Content-Script-Type" content="text/javascript">

詳しくは<script>エレメントを参照してください。

<meta http-equiv="Content-Style-Type" content="text/css">

詳しくは<style>エレメントを参照してください。

 文字コード(符号化方法)といった HTTPヘッダの追加情報や、制作者、検索用の説明、キーワード、検索ロボットへの情報といった付加情報を<meta>で記述します。http-equiv属性はHTTPヘッダへの追加情報を意味します。
 リフレッシュによるページの遷移は以下のように記述します。ブラウザによっては動作しない場合があります。

<meta http-equiv="refresh" content="1;URL=url;" />

JavaScript

 <meta> の定義は HTMLMetaElement を参照してください。

<base>

 URIのroot、基幹URIを定義します。ブラウザは<base>で設定されたURIを暗黙の内に辿ります。URLの辿り方が変化するのに注意が必要です。

">

 定義しないもありです。

<style>

スタイルシート宣言

 スタイルシート、CSSを利用するためには先に<meta>エレメントでstyleのタイプを宣言します。

<meta http-equiv="Content-Style-Type" content="text/">

スタイルシートを直接記述

 <style>によって、スタイルシート宣言を直接記述することができます。

<style type="text/css">
...
</style>

スタイルシートの外部ファイル読み込み

 外部ファイルとして作成したCSSを読み込むには<link>エレメントを使います。

">

JavaScript

 <style>の定義については、HTMLStyleElement を参照してください。

<script>

Script宣言

 スクリプトを利用するためには先に<meta>エレメントでscriptのタイプを宣言します。ここではJavaScriptであることを前提としています。

<meta http-equiv="Content-Script-Type" content="text/">

Scriptを直接記述

 スクリプトを直接書くことができます。

<script type="text/javascript">
...
</script>

JavaScript

 <script> を定義は HTMLScriptElement を参照してください。

Scriptの外部ファイル読み込み

 外部ファイルとして作成したスクリプトファイルを読み込むには<script>エレメントを使います。

">

代替テキスト <noscript>

 スクリプトに対応していないブラウザで代替として<noscript>エレメントを使います。
 <noscript>エレメントは、<body>内に記述します。

</noscript>

Example

 上記の選択肢によって簡単なHTMLページを作成することができます。<body>〜</body>内に何も記述がなければ何も表示されません。