1. 発端
最近、部門でマイクロフロントエンドを推進しており、機能ごとに複数の子アプリケーションに分割する必要がありました。メインアプリケーションの読み込み中に、読み込み失敗が頻繁に発生しました。これは、HTTPSアドレスでHTTPリソースを読み込むと、ブラウザが安全でないリソースとみなしてデフォルトでブロックするためです。後にドキュメントに<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">を追加することで完全に解決しました。
このとき初めて、自分がmetaについてほとんど何も知らないことに気づきました。本稿では主にmetaを紹介し、ついでにhead内の他のタグにも触れます。誤りがあればご指摘ください。最後に「いいね」とストックをお願いします。
2. head タグ
headタグは、htmlタグやbodyタグと同様に、ドキュメントに必須の要素です。
headタグはドキュメントのヘッダー情報を定義するために使用され、すべてのヘッダー要素のコンテナです。head内の要素は、スクリプトの参照、スタイルシートの場所をブラウザに指示、メタ情報の提供などを行います。
ドキュメントのヘッダーは、ドキュメントのタイトル、Web上の位置、他のドキュメントとの関係など、ドキュメントのさまざまな属性と情報を記述します。ほとんどのドキュメントヘッダーに含まれるデータは、実際には読者にコンテンツとして表示されません。
以下のタグはheadセクションで使用できます：base、link、meta、script、style、およびtitle。
注意：headタグはドキュメントの先頭、htmlの直後、bodyタグまたはframesetタグの前に配置する必要があります。
3. title タグ
titleはドキュメントのタイトルを定義し、headセクションで唯一必須の要素です。ブラウザは特別な方法でタイトルを使用し、設定された内容はページに表示されず、通常はブラウザウィンドウのタイトルバーやステータスバーに表示されます。空のタイトルに設定すると、現在のページのアドレス情報が表示されます。
ドキュメントがユーザーのリンクリストやお気に入り、ブックマークリストに追加されると、タイトルがそのドキュメントリンクのデフォルト名になります。
3.1. dir 属性
要素内のコンテンツのテキスト方向（rtl、ltr）を指定します。
3.2. lang 属性
要素内のコンテンツの言語コードを指定します。
4. meta タグ
meta要素は通常ユーザーの注意を引くことはありませんが、metaはWebページ全体に影響を与え、検索エンジンによるページのインデックス可否や検索順位において重要な役割を果たします。
metaには必須属性contentがあり、設定する項目の値を表します。
metaには2つの非必須属性http-equivとnameがあり、設定する項目を表します。
例：<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">は、設定する項目がContent-Security-Policy、設定する値がupgrade-insecure-requestsです。
4.1. http-equiv 属性
http-equivは通常、HTTPリクエストヘッダーに関連する情報を設定します。設定された値はHTTPヘッダーに関連付けられます。つまり、ブラウザがサーバーからHTMLを取得する際、サーバーはHTMLで設定されたmetaをレスポンスヘッダーに含めてブラウザに返します。一般的なタイプとしては、content-type、expires、refresh、set-cookie、window-target、charset、pragmaなどがあります。
4.1.1. content-type
例：<meta http-equiv="content-type" content="text/html charset=utf8">はドキュメントタイプの宣言や文字セットの設定に使用できます。現在、content-typeはHTMLドキュメント内でのみ使用できます。
このように設定すると、ブラウザのヘッダー情報には以下が含まれます：
content-type: text/html charset=utf8
4.1.2. expires
ブラウザの有効期限を設定するために使用されます。実際にはレスポンスヘッダーのexpires属性です。
<meta http-equiv="expires" content="31 Dec 2021" />
expires:31 Dec 2008
4.1.3. refresh
この設定は、5秒後に自動的に更新され、指定されたWebページにリダイレクトすることを示します。urlの値を設定しない場合、ブラウザは現在のページを更新します。
<meta http-equiv="refresh" content="5 url=http://www.zhiqianduan.com" />
4.1.4. window-target
ページを現在のウィンドウで独立したページとして表示するよう強制します。これにより、他の人がフレーム内で自分のページを呼び出すのを防ぐことができます。
<meta http-equiv="window-target" content="_top'>
4.1.5. pragma
ブラウザがローカルコンピュータのキャッシュからページのコンテンツにアクセスするのを禁止します。
<meta http-equiv="pragma" content="no-cache" />
4.2. name 属性
name属性は主にWebページを説明するために使用され、対応するcontentの内容は主に検索エンジンが情報を検索・分類しやすくするためのものです。使い方はhttp-equivと同じで、nameで属性名を設定し、contentで属性値を設定します。
4.2.1. author
authorはWebページの作者を明記するために使用します。
<meta name="author" content="aaa@mail.abc.com" />
4.2.2. description
descriptionは検索エンジンに現在のWebページの主な内容を伝えるために使用します。Webサイトに関する説明情報です。
<meta name="description" content="这是我的HTML" />
4.2.3. keywords
keywordsはWebページのキーワードを設定し、ブラウザにキーワードが何かを伝えます。よく使われる名前です。ドキュメントのキーワードセットを定義します。一部の検索エンジンはこれらのキーワードに遭遇すると、それらを使用してドキュメントを分類します。
<meta name="keywords" content="Hello world" />
4.2.4. generator
現在のHTMLがどのツールで作成・生成されたかを示します。実際の機能はなく、通常はエディタが自動的に作成します。
<meta name="generator" content="vscode" />
4.2.5. revised
ページの最新バージョンを指定します。
<meta name="revised" content="V2，2015/10/1" />
4.2.6. robots
検索エンジンのロボットにどのページをクロールするかを指示します。all / none / index / noindex / follow / nofollow。
<meta name="robots" content="all" />
all：ファイルはインデックスされ、ページ上のリンクは参照可能。none：ファイルはインデックスされず、ページ上のリンクは参照不可。index：ファイルはインデックスされる。follow：ページ上のリンクは参照可能。noindex：ファイルはインデックスされないが、ページ上のリンクは参照可能。nofollow：ファイルはインデックスされず、ページ上のリンクは参照可能。
4.3. scheme 属性
scheme属性は、属性値を変換するために使用するスキームを指定します。このスキームは、headタグのprofile属性で指定されたプロファイルファイル内で定義されている必要があります。HTML5はこの属性をサポートしていません。
5. base タグ
baseタグは、ドキュメントのベースURLアドレスを定義します。ドキュメント内のすべての相対URLアドレスは、ここで定義されたURLを基準とします。ページ上のリンクにデフォルトのアドレスまたはターゲットを指定します。
<base href="http://www.w3school.com.cn/i/" target="_blank" />
baseタグに含まれる属性。
5.1. href
hrefは必須属性で、ドキュメントのベースURLアドレスを指定します。例えば、ドキュメントのベースURLをhttps：//www.abc.comと定義したい場合、次のように記述します：<base href="http://www.abc.com">。ドキュメントのハイパーリンクがwelcom.htmlを指している場合、実際には次のURLアドレスを指します：https://www.abc.com/welocme.html。
5.2. target
ドキュメント内のリンクがクリックされた後の開き方を定義します。_blank、_self、_parrent、_top。
6. link タグ
linkは外部スタイルシートをインポートするために使用します。HTMLのヘッダーには任意の数のlinkを含めることができます。linkタグには以下のような一般的な属性があります。
<link type="text/css" rel="stylesheet" href="github-markdown.css" />
6.1. type
含まれるドキュメントタイプを定義します。例：text/css。
6.2. rel
HTMLドキュメントとインクルードするリソース間のリンク関係を定義します。多くの値が可能ですが、最も一般的なのはstylesheetで、固定された優先スタイルシートを含めるために使用します。
6.3. href
インクルードするリソースのURLアドレスを示します。
7. style タグ
内部スタイルシートを記述するためのタグ。
<style>
body {
background: #f3f5f9;
}
</style>
8. script タグ
JavaScriptスクリプトをロードするためのタグ。ロードされたスクリプトはデフォルトで実行されます。デフォルトでは、ブラウザがscriptタグを解析すると、HTMLの解析を停止し、スクリプトコードのロードと実行を開始します。
<script src="script.js"></script>
8.1. type
スクリプトのMIMEタイプを指定します。
<script type="text/javascript">
8.2. async
スクリプトを非同期で実行することを指定します。src属性でインポートされた外部スクリプトにのみ適用されます。async属性が設定されたscriptのロードは、後続のHTML解析に影響を与えず、ロードはドキュメント解析と同時に行われます。ロードが完了するとすぐに実行されます。実行中はHTMLドキュメントの解析が停止します。
<script async src="script.js"></script>
8.3. charset
外部スクリプトファイルで使用される文字エンコーディングを指定します。
<script type="text/javascript" src="script.js" charset="UTF-8"></script>
8.4. defer
ページがロードされるまでスクリプトの実行を遅延するかどうかを指定します。defer属性が設定されたscriptは、後続のHTML解析をブロックせず、ロードと解析は同時に行われますが、スクリプトの実行はすべての要素の解析が完了した後、DOMContentLoadedイベントが発生する前に行われます。
<script defer src="script.js"></script>
8.5. language
スクリプト言語を指定します。typeと機能が似ていますが、このフィールドの使用は推奨されません。
8.6. src
外部スクリプトのアドレス。
<script src="script.js"></script>
9. bgsound
ウェブサイトの背景音楽。
<bgsound src="music.mp4" autostart="true" loop="5"></bgsound>
9.1. src
背景音楽のURL値を示します。
9.2. autostart
自動再生するかどうか。trueは自動再生、falseは再生しません。デフォルトはfalseです。
9.3. loop
繰り返し再生するかどうか。値は数字またはinfiniteで、指定された回数または無限に繰り返します。
参考資料
著者：隐冬
リンク：https://juejin.cn/post/6987919006468407309
出典：稀土掘金