Articles
HTML入門
ヘッド部で使われるタグ

ヘッド部で使われるタグ

この記事ではヘッド部で使われるタグについて説明します。

<link>, <script>, <style>タグなどのヘッド部で使われるタグについて説明しています。

YouTube Video

ヘッド部で使われるタグ

<title>タグ 

1<title>Document Title</title>
  • <title>タグは、ドキュメントのタイトルを定義します。このタイトルは、ブラウザのタブに表示され、ブックマークや検索結果に使用されます。

<link>タグ

  • <link>タグは、外部リソースを現在のドキュメントに関連付けるために使用されます。一般的には、外部のCSSファイルをリンクする際に使用されますが、アイコンやその他の外部リソースにも利用されます。

<link>タグのrel属性

rel属性は、<link>タグでリンクするリソースと現在のドキュメントとの関係を指定するために使用されます。rel属性の値には多くの種類がありますが、ここでは特に重要でよく使用されるものを解説します。

stylesheet 
1<link rel="stylesheet" href="styles.css">
  • stylesheetは、外部スタイルシートをリンクするために使用します。

icon 

1<link rel="icon" href="favicon.ico" type="image/x-icon">
  • rel="icon"は、ブラウザのタブやブックマークに表示されるアイコンを定義します。正しいファビコン(favicon)を指定することで、サイトのブランディングや視覚的認識が向上します。

preload 

1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  • preloadは、ページのレンダリングが始まる前にリソースを事前に読み込むために使用します。特にフォントや大きな画像など、表示のタイミングが重要なリソースに対して有効です。これにより、パフォーマンスが向上し、ユーザー体験が改善されます。

canonical 

1<link rel="canonical" href="https://example.com/page.html">
  • canonicalは、ページの正規版を検索エンジンに伝えるために使用されます。重複コンテンツが存在する場合、SEOの観点から正規のURLを示すことで、検索エンジンの評価を一元化し、コンテンツが正しくインデックスされるようにします。

alternate 

1<link rel="alternate" hreflang="en" href="https://example.com/en/">
  • alternateは、異なる言語やフォーマットのページを検索エンジンやブラウザに示すために使われます。多言語対応サイトでは、hreflang属性と組み合わせて、各言語バージョンのURLを指定し、適切な言語のページをユーザーに提供することができます。

manifest 

1<link rel="manifest" href="/manifest.json">
  • manifestは、PWA（プログレッシブウェブアプリ）の設定情報を格納したマニフェストファイルをブラウザに提供します。このファイルには、アプリのアイコンやテーマカラー、表示モードなどの情報が含まれており、モバイルデバイスでのPWAのインストールや実行に役立ちます。

dns-prefetch 

1<link rel="dns-prefetch" href="//example.com">
  • 外部リソースを参照する場合、事前にそのドメインのDNS解決を行うことで、ページの読み込み速度を向上させることができます。特に外部リソースが多いページや、高速なユーザー体験が求められる場合に有効です。

<style>タグ 

1<style>
2  body {
3    font-family: Arial, sans-serif;
4  }
5</style>
  • <style>タグは、内部スタイルシートを定義するために使用されます。ページ内の要素に対してCSSスタイルを適用する際に使用され、外部ファイルを使用せずにCSSを記述できます。

<script>タグ 

1<script>
2    console.log('Hello, World!');
3</script>
4<script src="script.js"></script>
  • <script>タグは、JavaScriptコードをHTMLドキュメントに埋め込むために使用されます。外部のJavaScriptファイルをリンクすることもでき、ページの動的な動作を制御します。src属性を使用してスクリプトファイルを指定します。

async属性とdefer属性

<script>タグは、asyncとdeferという2つの属性をサポートしており、これらはスクリプトの読み込みと実行のタイミングに影響を与えます。通常、スクリプトはブラウザによって逐次的に処理されますが、これらの属性を使うことで、ページのパフォーマンスや読み込み体験を向上させることができます。

async属性 
1<script src="script.js" async></script>
  • async属性を使用すると、スクリプトは非同期で読み込まれます。ブラウザはスクリプトの読み込みを他のリソースと並行して行い、読み込みが完了したタイミングで即座に実行します。
  • asyncは主に独立したスクリプトに適しており、スクリプトが他のスクリプトやDOMの読み込みに依存しない場合に使用されます。
defer属性 
1<script src="script.js" defer></script>
  • defer属性を使用すると、スクリプトは非同期で読み込まれますが、HTMLの解析が完了してから実行されます。スクリプトの実行がページの表示を妨げないため、ユーザー体験が向上します。
  • deferは、スクリプトがDOMの完全な読み込み後に実行される必要がある場合に有効です。例えば、ページのレイアウトや要素がすべて読み込まれてからスクリプトを実行したい場合に適しています。

CORSポリシーとcrossorigin属性

外部スクリプトを読み込む際、同一生成元ポリシー (Same-Origin Policy) に基づき、セキュリティ制限が課せられることがあります。このような場合、crossorigin属性を使用して、リソースの共有を許可するよう設定できます。

1<script src="https://example.com/script.js" crossorigin="anonymous"></script>

crossorigin属性には、以下の2つの値が設定可能です。

  • anonymous: 認証情報を含めずにリクエストを送信します。
  • use-credentials: 認証情報を含めてリクエストを送信します。

type属性

<script>タグには、type属性を使用してスクリプトの種類を指定できます。デフォルトでは、JavaScriptが使用されますが、特定の種類のスクリプト（例えば、モジュール型JavaScriptやテンプレート言語）を指定することもできます。

JavaScriptモジュール 
1<script type="module" src="module.js"></script>

  • ECMAScript 2015 (ES6) 以降、JavaScriptモジュールが導入され、モジュール間でコードを分割し、再利用性を高めることが可能になりました。type="module"を指定すると、モジュールとしてスクリプトを扱うことができます。

  • モジュールはimportやexportを使用して、コードを他のモジュールに分割することができます。

非JavaScriptのスクリプト 
1<script type="application/ld+json">
2{
3  "@context": "https://schema.org",
4  "@type": "Organization",
5  "name": "Example Inc.",
6  "url": "https://www.example.com"
7}
8</script>
  • JavaScript以外のスクリプトも<script>タグ内で指定できます。例えば、JSON-LDなどの構造化データを記述する場合に、type="application/ld+json"を使用します。ここで、JSON-LDは、Webページ上のデータを構造化し、検索エンジンやその他のアプリケーションがそのデータをより深く理解できるようにするためのフォーマットです。

<script>タグ使用時の注意点

  • スクリプトの順序: スクリプトが依存するライブラリなどは、依存するスクリプトの前に読み込まれる必要があります。例えば、jQueryを使用するスクリプトは、jQuery自体よりも後に読み込まれなければなりません。
  • パフォーマンスの最適化: ページの表示速度に影響を与えないよう、必要な場合にのみスクリプトを読み込み、不要なスクリプトの実行を避ける工夫が必要です。
  • セキュリティ対策: 外部スクリプトを使用する際は、信頼できるソースからのみ読み込むようにし、不正なスクリプトが埋め込まれないよう注意しましょう。

<base>タグ 

1<base href="https://example.com/">
  • <base>タグは、ドキュメント内の全ての相対URLに対する基準URLを設定します。href属性で指定されたURLが、リンクや画像の相対パスの基準になります。通常、ページ内で1つだけ使用されます。

<noscript>タグ 

1<noscript>Your browser does not support JavaScript!</noscript>
  • <noscript>タグは、ブラウザでJavaScriptが無効になっている場合に表示されるコンテンツを定義します。JavaScriptがサポートされていない環境に対して、代替コンテンツを提供するために使用されます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

フォームバリデーションメタ情報関連のタグ