HTML ドキュメントには、ドキュメント タイプ宣言と <html> ルート
要素が含まれます。<html> 要素内には、ドキュメントのヘッドとドキュメントの本文がネストされています。
ドキュメントのヘッドはコードの外からは見えませんが、サイトが機能するうえで不可欠です。ヘッドには、検索エンジンやソーシャル メディアの結果の情報、ブラウザタブやモバイル ホーム画面のショートカットのアイコン、コンテンツの動作や表示など、すべてのメタ情報が含まれています。このセクションでは、表示されないものの、ほぼすべてのウェブページに存在するコンポーネントについて説明します。
MachineLearningWorkshop.com（MLW）サイトを作成するには、まずすべてのウェブページに不可欠なコンポーネント（ドキュメントのタイプ、コンテンツの言語、文字セット、サイトまたはアプリケーションのタイトルまたは名前）を含めます。
すべての HTML ドキュメントに追加する
すべてのウェブページに不可欠な要素がいくつかあります。これらの要素がなくてもブラウザはコンテンツをレンダリングしますが、含めることをおすすめします。
<!DOCTYPE html>
HTML ドキュメントの最初の要素はプリアンブルです。HTML の場合、必要なのは
<!DOCTYPE html> のみです。これは HTML 要素のように見えますが、実際には doctype と呼ばれる特別なノードです。 doctype は、標準モードを使用するようにブラウザに指示します。
省略すると、ブラウザは後方互換モードと呼ばれる別のレンダリング モードを使用します。
後方互換モード。
doctype を含めることで、後方互換モードを回避できます。
<html>
<html> 要素は、HTML ドキュメントのルート要素です。<head> と <body> の親であり、doctype 以外の HTML ドキュメント内のすべての要素を含みます。省略すると、言語は暗黙的に指定されますが、ドキュメントの言語を宣言するために含めることをおすすめします。
コンテンツの言語
lang 属性
が <html> タグでドキュメントのメイン
言語を定義します。値は、ISO 言語コードの後に、必要に応じて地域が続きます。
たとえば、カナダのフランス語は fr-CA、ブルキナファソのフランス語は fr-BF です。この宣言により、スクリーン リーダー、検索エンジン、翻訳サービスはドキュメントの言語を識別できます。
他のタグで lang 属性を使用して、ドキュメントのメイン言語の例外を指定できます。ヘッドでの使用と同様に、本文内の lang 属性は視覚的な効果はありません。セマンティクスが追加されるため、支援技術や自動サービスは特定のコンテンツの言語を識別できます。
ドキュメントの言語と基本言語の例外を設定するだけでなく、CSS セレクタで 属性を使用することもできます。
<span lang="fr-fr">Ceci n'est pas une pipe.</span> は、
属性セレクタと言語セレクタ
[lang|="fr"]
と :lang(fr) でターゲットにできます。
<head>
<html> タグの開始タグと終了タグの間にネストされている 2 つの子要素
<head> と <body> があります。
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
<head> にはサイトまたはアプリケーションのメタデータが含まれ、<body>
には表示されるコンテンツが含まれます。このセクションの残りの部分では、コンポーネント
<head>要素内にネストされているについて説明します。
<head> 内の必須コンポーネント
ドキュメントのタイトル、文字セット、ビューポート
の設定、説明、ベース URL、スタイルシートのリンク、アイコンなどのドキュメント メタデータは、
<head>要素にあります。これらの機能がすべて必要になることはありませんが、文字セット、タイトル、ビューポートの設定は必ず含めてください。
文字エンコード
<head> の最初の要素は、charset 文字
エンコード宣言にする必要があります。タイトルよりも前に配置することで、ブラウザはそのタイトルの文字とドキュメントの残りの部分のすべての文字をレンダリングできます。
ほとんどのブラウザのデフォルトのエンコード
は、ロケールに応じてwindows-1252です。ただし、すべての文字を 1 ～ 4 バイトでエンコードできる
UTF-8を使用することをおすすめします。
文字エンコードを UTF-8 に設定するには、次のようにします。
<meta charset="utf-8" />
UTF-8（大文字と小文字を区別しない）を宣言すると、タイトルに絵文字を含めることもできます。
文字エンコードは、ドキュメント内のすべての要素に継承されます。
<style> や <script> など。この宣言により、クラス名と selectorAPI に絵文字を含めることができます。絵文字を使用する場合は、アクセシビリティを損なうことなく、使いやすさを向上させる方法で使用してください。
ドキュメントのタイトル
ホームページとすべての追加ページには、一意のタイトルを付ける必要があります。
ドキュメントのタイトル（開始タグと終了タグ
<title>の間のテキスト）は、ブラウザタブ、開いているウィンドウのリスト、
履歴、検索結果に表示されます。
<meta>タグで再定義しない限り、ソーシャル メディア カードにも表示されます。
<title>Machine Learning Workshop</title>
ビューポート メタデータ
ビューポート メタタグ は、サイトのレスポンシブ対応に不可欠です。ビューポートの幅に関係なく、コンテンツが適切にレンダリングされます。ビューポート メタタグ は 2007 年から存在していましたが、仕様で文書化されたのはごく最近のことです。 ビューポートのサイズとスケールを制御し、コンテンツが縮小して小さな画面に収まるのを防ぎます。
<meta name="viewport" content="width=device-width" />
上記のコードは、「サイトをレスポンシブ対応にする。まず、コンテンツの幅を画面の幅にする」という意味です。width に加えて、ズームとスケーラビリティを設定できますが、どちらもデフォルトでアクセシビリティの高い値に設定されています。明示的に指定する場合は、次のようにします。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
ビューポートは、Lighthouse のアクセシビリティ監査の一部です。サイトがスケーラブルで、最大サイズが設定されていない場合は合格します。
これまでのところ、HTML ファイルの概要は次のようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
その他の <head> コンテンツ
<head> には、他にも多くの要素が含まれています。実際には、すべてのメタデータが含まれています。
<head> に含まれる要素のほとんどは、この
モジュールで説明しますが、詳しくは メタデータ モジュールをご覧ください。
メタ文字セットとドキュメントのタイトルについては説明しましたが、含める必要があるメタデータが
<meta> タグの外にも多数あります。
CSS
<head> には、HTML のスタイルを含めます。スタイルについて学習するための学習パスが CSS に
用意されていますが、HTML ドキュメントにスタイルを含める方法を知っておく必要があります。
CSS を含める方法は、<link>、<style>、style
属性の 3 つです。
HTML ファイルにスタイルを含める主な方法は、
<link> 属性が rel に設定された
stylesheet 要素を使用して外部リソースを含める方法と、
<style> の開始タグと終了タグの間にドキュメントのヘッドに CSS を直接含める方法の 2 つです。
<link> タグは、スタイルシートを含める方法としては、おすすめの方法です。1 つまたは少数の外部スタイルシートをリンクすると、デベロッパー エクスペリエンスとサイトのパフォーマンスの両方にメリットがあります。CSS をさまざまな場所に分散させるのではなく、1 か所で管理できます。また、ブラウザは外部ファイルをキャッシュに保存できるため、ページを移動するたびに再度ダウンロードする必要がありません。
構文は <link rel="stylesheet" href="styles.css"> です。ここで、styles.css はスタイルシートのファイル名と相対パスです。
type="text/css" 属性が表示されることがありますが、必須ではありません。rel 属性は関係を定義します。この場合は stylesheet です。rel 属性を省略すると、CSS はリンクされません。
他の rel 値については後ほど説明しますが、まず CSS を含める他の方法について説明します。
外部スタイルシートのスタイルをカスケード レイヤ内に配置したいが、
CSS ファイルを編集できない場合は、
@import を使用して CSS を
<style>内に含めます。
<style>
@import "styles.css" layer(firstLayer);
</style>
@import を使用してスタイルシートをドキュメントにインポートする場合（必要に応じて
カスケード レイヤにインポートする場合）、@import ステートメントは、文字セット宣言の外側の
<style> またはリンクされたスタイルシートの最初のステートメントにする必要があります。
カスケード レイヤはまだ比較的新しく、ヘッドの
@importに<style>が表示されないこともありますが、
ヘッドのスタイルブロックでカスタム プロパティが宣言されていることがよくあります。
<style>
:root {
--theme-color: #226DAA;
}
</style>
<link>、<style>、またはその両方で追加されたスタイルは、ヘッドに配置する必要があります。ドキュメントの本文に含めても機能しますが、パフォーマンス上の理由から、ヘッドにスタイルを追加することをおすすめします。コンテンツを最初に読み込む必要があると思われるため、直感に反するかもしれません。ただし、ブラウザはコンテンツが読み込まれたときにコンテンツをどのようにレンダリングするかを把握している方が適切です。 最初にスタイルを追加すると、要素が最初にレンダリングされた後にスタイルが適用された場合に発生する不要な再描画を防ぐことができます。
ドキュメントの <head> で使用しないスタイルの含め方が 1 つあります。インライン スタイルです。ユーザー エージェントのスタイルシートではデフォルトでヘッドが非表示になるため、ヘッドでインライン スタイルを使用することはほとんどありません。ただし、JavaScript を使用せずに CSS エディタを作成して、ページのカスタム要素をテストする場合は、display: block を使用してヘッドを表示し、ヘッド内のすべての要素を非表示にしてから、インライン style 属性を使用して、コンテンツ編集可能なスタイルブロックを表示できます。
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
インライン スタイルは <style> 要素に追加できます。
<link> 要素のその他の用途
link 要素は、HTML ドキュメントと外部リソースの関係を作成するために使用されます。これらのリソースには、ダウンロードされるものと情報提供のみのものがあります。関係のタイプは、rel 属性の値で定義されます。`rel` 属性には 25 個の値があり、<link>、<a>、<area>、<form> で使用できます。すべてで使用できる値もあります。relメタ情報に関連するものはヘッドに、パフォーマンスに関連するものは <body> に含めることをおすすめします。
ヘッダーには、icon、alternate、canonical の 3 種類の要素を含めます。次のモジュールでは、4 つ目のタイプ
rel="manifest" を追加します。
ファビコン
rel="icon" を指定した <link> タグを使用して、
ドキュメントのファビコンを指定します。ファビコンは、ブラウザタブに表示される小さなアイコンで、通常はドキュメント タイトルの左側に表示されます。タブが縮小すると、タイトルは表示されなくなることがありますが、アイコンは表示されたままになります。ほとんどのファビコンは、企業またはアプリケーションのロゴです。
ファビコンを宣言しない場合、ブラウザは最上位ディレクトリ（ウェブサイトのルートフォルダ）で favicon.ico という名前のファイルを探します。
<link> を使用すると、別のファイル名と場所を使用できます。
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
上記のコードは、「16 ピクセル、32 ピクセル、48 ピクセルが適切なシナリオでは、mlwicon.png をアイコンとして使用する」という意味です。 sizes 属性には、スケーラブル アイコンの場合は any の値、正方形の widthXheight 値のスペース区切りリストを指定できます。幅と高さの値は、16、32、48 以上で、ピクセル単位は省略され、X は大文字と小文字が区別されません。
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
Safari ブラウザには、標準以外の特別なアイコンが 2 種類あります。iOS デバイス用の apple-touch-icon と、macOS のピン留めされたタブ用の mask-icon です。
apple-touch-icon は、ユーザーがサイトをホーム画面に追加した場合にのみ適用されます。デバイスごとに異なる sizes を指定して、複数のアイコンを指定できます。
mask-icon は、ユーザーがデスクトップ版 Safari でタブをピン留めした場合にのみ使用されます。アイコン自体はモノクロの SVG にする必要があります。color 属性は、必要な色でアイコンを塗りつぶします。
<link> を使用して、ページごと
またはページ読み込みごとに完全に異なる画像を定義できますが、そうすることをおすすめしません。一貫性と優れたユーザー エクスペリエンスを実現するには、1 つの画像を使用します。Google では、アプリケーションごとに異なるファビコンを使用しています。たとえば、メールアイコンやカレンダー アイコンなどがあります。ただし、すべての Google アイコンで同じカラーパターンが使用されています。アイコンから、開いているタブの内容を正確に把握できます。
サイトの代替バージョン
rel 属性の alternate 値を使用して、サイトの翻訳版または代替表現を指定します。
サイトのバージョンがフランス語とブラジルポルトガル語に翻訳されているとします。
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
翻訳に alternate を使用する場合は、hreflang 属性を設定する必要があります。
alternate 値は、翻訳以外にも使用できます。たとえば、type 属性が application/rss+xml または application/atom+xml に設定されている場合、type 属性は RSS フィードの代替 URI を定義できます。
サイトの PDF 版へのリンク（架空）:
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
rel 値が alternate stylesheet の場合、代替スタイルシートが定義され、title 属性を設定して代替スタイルに名前を付ける必要があります。
正規
Machine Learning Workshop の翻訳版またはバージョンを複数作成すると、検索エンジンが信頼できるソースを特定できないことがあります。rel="canonical"
を使用して、サイトまたはアプリケーションの優先 URL を指定します。
翻訳されたすべてのページとホームページに正規 URL を含めて、優先 URL を示します。
<link rel="canonical" href="https://www.machinelearning.com" />
rel="canonical" 正規リンクは、出版物やブログ プラットフォームとの同時投稿で、元のソースにクレジットを表示するために使用されることがよくあります。サイトがコンテンツを配信する場合は、元のソースへの正規リンクを含める必要があります。
スクリプト
<script> タグにはスクリプトが含まれます。デフォルトのタイプは JavaScript です。別のスクリプト言語を使用する場合は、MIME
タイプを指定した type 属性を含めるか、type="module" JavaScript モジュールの場合は を含めます。
解析および実行されるのは、JavaScript と JavaScript モジュールのみです。
<script> タグを使用して、コードをカプセル化したり、
外部ファイルをダウンロードしたりできます。MLW には外部スクリプト ファイルはありません。一般的に考えられていることとは異なり、機能するウェブサイトに JavaScript は必要ないためです。これは
HTML の学習プログラムではなく、JavaScript の学習パスです。
後で イースター エッグを作成するために、少し JavaScript を含めます。
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
このスニペットは、ID が switch の要素のイベント ハンドラを作成します。
JavaScript では、要素が存在する前に参照することは避ける必要があります。switch はまだ存在しないため、イベント ハンドラはまだ含めません。
ライトスイッチ要素を追加する場合は、<head> ではなく <body> の下部に <script> を追加します。その理由は、2 つあります。このスクリプトは
DOMContentLoaded イベントに基づいていないため、スクリプトが参照する要素が検出される前に要素が存在するようにします。
また、JavaScript はレンダリングをブロックするだけでなく、スクリプトがダウンロードされるとブラウザはすべてのアセットのダウンロードを停止し、JavaScript の実行が完了するまで他のアセットのダウンロードを再開しません。そのため、JavaScript リクエストはヘッドではなくドキュメントの末尾に配置されることがよくあります。
JavaScript のダウンロードと実行のブロッキングを軽減できる属性が 2 つあります。defer と async です。defer を使用すると、ダウンロード中に HTML レンダリングがブロックされず、ドキュメントのレンダリングが完了した後にのみ JavaScript が実行されます。async を使用すると、ダウンロード中にレンダリングがブロックされることはありませんが、スクリプトのダウンロードが完了すると、JavaScript の実行中にレンダリングが一時停止します。
MLW の JavaScript を外部ファイルに含めるには、次のように記述します。
<script src="js/switch.js" defer></script>
defer
属性を追加すると、すべてがレンダリングされるまでスクリプトの実行が遅延し、
スクリプトがパフォーマンスに悪影響を及ぼすのを防ぐことができます。async 属性と defer 属性は、外部スクリプトでのみ有効です。
ベース
<head>. にのみ存在する要素がもう 1 つあります。
<base> 要素は、デフォルトのリンク URL とターゲットを設定するために使用されます。href 属性は、すべての相対リンクのベース URL を定義します。
target 属性は、<base>、リンク、フォームで有効で、
リンクを開く場所を設定します。デフォルトの _self では、リンクされたファイルは現在のドキュメントと同じコンテキストで開きます。その他のオプションには、すべてのリンクを新しいウィンドウで開く _blank、現在のコンテンツの _parent（オープナーが iframe でない場合は self と同じ）、同じブラウザタブで開くが、コンテキストからポップアウトしてタブ全体を占有する _top などがあります。
ほとんどのデベロッパーは、<base> を使用するのではなく、リンクまたはフォーム自体で新しいウィンドウで開くリンク（ある場合）に target 属性を追加します。
<base target="_top" href="https://machinelearningworkshop.com" />
ウェブサイトが Yummly などのサイトの iframe 内にネストされている場合、
<base> 要素を含めると、ユーザーがドキュメント内のリンクをクリックしたときに、リンクが iframe からポップアウトしてブラウザ ウィンドウ全体を占有します。
この要素の欠点の 1 つは、アンカーリンクが
<base>で解決されることです。<base> は、リンク <a href="#ref"> を
<a target="_top" href="https://machinelearningworkshop.com#ref"> に変換し、
フラグメントが添付されたベース URL への HTTP リクエストをトリガーします。
<base> についての注意事項:
- ドキュメントに含めることができる
<base>要素は 1 つだけです。 - スクリプトやスタイルシートの参照など、相対 URL を使用する前に配置する必要があります。
コードは次のようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
HTML コメント
スクリプトは山かっこ、ダッシュ、感嘆符で囲まれています。これが HTML をコメントアウトする方法です。<!-- と --> の間の要素は表示されず、
解析もされません。HTML コメントは、スクリプトまたはスタイルブロック内を除く、ページの任意の場所に配置できます。スクリプトまたはスタイルブロック内では、JavaScript コメントと CSS コメントを使用する必要があります。
<head> に含める要素の基本については説明しましたが、基本以上のことを知りたいとお考えでしょう。次のセクションでは、メタタグと、ウェブサイトがソーシャル メディアでリンクされたときに表示される内容を制御する方法について説明します。
理解度をチェックしましょう
ドキュメント構造の知識をテストします。
ドキュメントの言語を識別するにはどうすればよいですか？
language 属性を追加します。lang 属性を追加します。Add the <lang> 要素を <head> に追加します。<head> に含めることができる要素を選択します。
<p><title><meta>