備忘録的リファレンス

ヘッダーエレメント

 HTMLページの、使用言語、作者、使用フォントなどを定義する部分です。<html>,<head>,<title>,<meta>,<base>,<link>,<script>,<style>,<noscript>エレメントで定義します。webページとしては表示されませんが、商用として作成することや検索ロボットに対応するには重要なエレメントです。

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

<!DOCTYPE>

 <!DOCTYPE>は、<html>の前に宣言しておきます。

この宣言によってブラウザはHTMLのタグの解釈を変えます。HTML5から!DOCTYPE htmlのほぼ一択です。

<html>

 <html>で囲まれた範囲が、HTMLテキストであることを定義します。

<HTML lang="">

<html>がルート要素で、以下の<head>、<body>タグを子要素として包括します。
使用している言語を定義しておいた方がよいでしょう。

<title>

 <title>は、HTMLページのタイトルになります。

</title>

ウィンドウの最上部に表示されます。ページを特徴づける最も重要な要素ですので付けるようにしましょう。

<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に宣言はできません。

<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情報です。

<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>エレメントを使います。

">

<script>

Script宣言

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

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

Scriptを直接記述

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

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

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

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

">

代替テキスト <noscript>

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

</noscript>

<body>

 <body>に、ブラウザで表示する内容を編集します。1つのHTML内に1つです。なくても表示されますが、正式なHTMLテキストとしては扱われません。