12,964
回編集
「HTML - headタグ」の版間の差分
ナビゲーションに移動
検索に移動
→概要
編集の要約なし |
(→概要) |
||
| 1行目: | 1行目: | ||
== 概要 == | == 概要 == | ||
headタグは、HTMLドキュメントのメタデータを含む重要なセクションである。<br> | |||
このタグはbodyタグとは異なり、ページ上には直接表示されない情報を格納する。<br> | |||
<br> | <br> | ||
headタグの主な役割を以下に示す。<br> | |||
<br> | |||
* 文書のタイトル定義 | |||
*: Webブラウザのタブやブックマークに表示される文字列を指定する。 | |||
* 文字エンコーディング指定 | |||
*: これにより文字化けを防いで、正しい文字表示を実現する。 | |||
* 外部リソースの読み込み | |||
*: スタイルシートやJavaScriptファイルなどの外部リソースを読み込むための記述を行う。 | |||
* 検索エンジン向けの情報提供 | |||
* ビューポート設定 | |||
*: 特に、モバイル端末での表示を制御するための重要な設定である。 | |||
<br> | |||
重要な点としては、headタグ内の記述順序にも一定の推奨がある。<br> | |||
通常、文字エンコーディング指定を最初に行い、次に、タイトル、メタ情報、スタイルシート、スクリプトの順で記述することが一般的である。<br> | |||
<br> | |||
ただし、パフォーマンスの観点から、JavaScriptの読み込みは特別な理由がない限り、body終了タグの直前に配置することが推奨されている。<br> | |||
これにより、ページの読み込み速度を向上させることができる。<br> | |||
<br> | |||
これらの要素を適切に組み合わせることにより、Webページの基本的な設定や挙動を制御することが可能である。<br> | |||
<br><br> | |||
== ブラウザのタブに表示されるタイトル (必須要素) == | |||
SEOとユーザビリティの観点から必須である。<br> | |||
<syntaxhighlight lang="html"> | |||
<title>ページタイトル</title> | |||
</syntaxhighlight> | |||
<br><br> | |||
== 相対URLのベースURLを指定 == | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
< | <base href="https://example.com/"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br><br> | |||
== linkタグ == | |||
他にも、<link>タグの属性には以下に示すものがある。<br> | |||
* media | |||
*: メディアクエリの指定 | |||
* crossorigin | |||
*: クロスオリジンリソースの制御 | |||
* integrity | |||
*: サブリソース完全性チェック | |||
<br> | <br> | ||
==== スタイルシートの読み込みと定義 ==== | |||
CSSの読み込みに必要である。<br> | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
< | <!-- 外部CSSの読み込み --> | ||
<link rel="stylesheet" href="styles.css"> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
< | <!-- 直接CSSを記述 --> | ||
<style> | |||
body { margin: 0; } | |||
</style> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||
==== リソースのリンク ==== | |||
* ファビコンの指定 | |||
<syntaxhighlight lang="html"> | |||
<link rel="icon" href="favicon.ico"> | |||
</syntaxhighlight> | |||
<br> | <br> | ||
* iOS用アイコン | |||
<syntaxhighlight lang="html"> | |||
<link rel="apple-touch-icon" href="icon.png"> | |||
</syntaxhighlight> | |||
<br> | |||
* PWAマニフェスト | |||
<syntaxhighlight lang="html"> | |||
<link rel="manifest" href="manifest.json"> | |||
</syntaxhighlight> | |||
<br> | |||
* 正規URL | |||
<syntaxhighlight lang="html"> | |||
<link rel="canonical" href="https://example.com/page"> | |||
</syntaxhighlight> | |||
<br> | |||
* RSSフィード | |||
<syntaxhighlight lang="html"> | |||
<link rel="alternate" href="rss.xml" type="application/rss+xml"> | |||
</syntaxhighlight> | |||
<br> | |||
* 事前接続 | |||
<syntaxhighlight lang="html"> | |||
<link rel="preconnect" href="https://example.com"> | |||
</syntaxhighlight> | |||
<br> | |||
* リソースの事前読み込み | |||
<syntaxhighlight lang="html"> | |||
<link rel="preload" href="font.woff2" as="font"> | |||
</syntaxhighlight> | |||
<br> | |||
* DNS事前解決 | |||
<syntaxhighlight lang="html"> | |||
<link rel="dns-prefetch" href="https://example.com"> | |||
</syntaxhighlight> | |||
<br><br> | |||
== script == | |||
JavaScriptの読み込みと実行に必要である。<br> | |||
<br> | |||
他にも、<script>タグに指定できる属性を以下に示す。<br> | |||
* defer | |||
*: HTML解析後に実行 | |||
* async | |||
*: 非同期読み込み | |||
* type="module" | |||
*: ESモジュールとして扱う。 | |||
<br> | |||
<syntaxhighlight lang="html"> | |||
<!-- 外部JavaScriptの読み込み --> | |||
<script src="script.js"></script> | |||
</syntaxhighlight> | |||
<br> | |||
<syntaxhighlight lang="html"> | |||
<!-- 直接JavaScriptを記述 --> | |||
<script> | |||
console.log('Hello'); | |||
</script> | |||
</syntaxhighlight> | |||
<br><br> | |||
== noscript == | |||
<syntaxhighlight lang="html"> | |||
<noscript> | |||
<!-- JavaScriptが無効な場合に表示される内容 --> | |||
このサイトはJavaScriptを有効にする必要があります。 | |||
</noscript> | |||
</syntaxhighlight> | |||
<br><br> | <br><br> | ||