Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

ドキュメント構造

HTML ドキュメントには、ドキュメント型宣言と <html> ルート要素が含まれます。<html> 要素には、ドキュメントのヘッドとドキュメントのボディがネストされています。ドキュメントの head はコードの外では表示されませんが、サイトが機能するためには不可欠です。検索エンジンやソーシャルメディアの結果に関する情報、ブラウザタブやモバイルホーム画面のショートカットのアイコン、コンテンツの動作や表示など、すべてのメタ情報が含まれています。このセクションでは、ほとんどすべてのウェブページに存在する非表示のコンポーネントについて説明します。

MachineLearningWorkshop.com（MLW）サイトを作成するには、まず、すべてのウェブページに不可欠と見なされるコンポーネント（ドキュメントのタイプ、コンテンツの言語、文字セット、サイトまたはアプリケーションのタイトルや名前など）を含めます。

すべての HTML ドキュメントに追加する

すべてのウェブページに不可欠な要素がいくつかあります。これらの要素がなくてもブラウザはコンテンツをレンダリングしますが、含めるようにしてください。

`<!DOCTYPE html>`

HTML ドキュメントの最初の要素はプリアンブルです。HTML の場合は、<!DOCTYPE html> のみが必要です。これは HTML 要素のように見えますが、実際には doctype と呼ばれる特別なノードです。DOCTYPE は、標準モードを使用するようブラウザに指示します。省略すると、ブラウザは後方互換モードと呼ばれる別のレンダリングモードを使用します。doctype を含めることで、後方互換モードを回避できます。

`<html>`

<html> 要素は、HTML ドキュメントのルート要素です。<head> と <body> の親であり、doctype 以外の HTML ドキュメント内のすべての要素を含んでいます。省略した場合、言語は暗黙的に指定されますが、ドキュメントの言語を宣言するために含める必要があります。

コンテンツの言語

<html> タグの lang 属性は、ドキュメントのメイン言語を定義します。値は ISO 言語コードで、必要に応じて地域が続きます。たとえば、カナダのフランス語は fr-CA、ブルキナファソのフランス語は fr-BF です。この宣言により、スクリーンリーダー、検索エンジン、翻訳サービスはドキュメントの言語を特定できます。

他のタグで lang 属性を使用して、ドキュメントの主要言語の例外を指定できます。head での使用と同様に、body 内の 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 ファイルにスタイルを含める主な方法は 2 つあります。1 つは、rel 属性が stylesheet に設定された <link> 要素を使用して外部リソースを含める方法です。もう 1 つは、開始タグと終了タグ <style> の間に、ドキュメントの head 内に CSS を直接含める方法です。

スタイルシートを含めるには、<link> タグを使用することをおすすめします。1 つまたは少数の外部スタイルシートをリンクすることは、デベロッパーエクスペリエンスとサイトパフォーマンスの両方にとって有益です。CSS をあちこちに散らばらせるのではなく、1 か所で管理できます。また、ブラウザは外部ファイルをキャッシュに保存できるため、ページを移動するたびにダウンロードする必要がなくなります。

構文は <link rel="stylesheet" href="styles.css"> です。ここで、styles.css はスタイルシートのファイル名と相対的な場所です。type="text/css" 属性が表示されることがありますが、必須ではありません。rel 属性はリレーションを定義します。この場合は stylesheet です。rel 属性を省略すると、CSS はリンクされません。

rel の値については、この後いくつか紹介しますが、まずは CSS を含める別の方法について説明します。

外部スタイルシートのスタイルをカスケードレイヤ内に配置したいが、CSS ファイルを編集する権限がない場合は、<style> 内の @import を使用して CSS を含めます。

<style>
  @import "styles.css" layer(firstLayer);
</style>

@import を使用してスタイルシートをドキュメントに（オプションでカスケードレイヤに）インポートする場合、@import ステートメントは、文字セット宣言の外で、<style> またはリンクされたスタイルシートの最初のステートメントでなければなりません。

カスケードレイヤはまだ比較的新しく、ヘッド <style> で @import を見つけることはないかもしれませんが、ヘッドスタイルブロックでカスタムプロパティが宣言されていることはよくあります。

<style>
  :root {
    --theme-color: #226DAA;
  }
</style>

<link>、<style>、またはその両方で追加されたスタイルは、head に配置する必要があります。ドキュメントの本文に含めても機能しますが、パフォーマンス上の理由から、スタイルは head に追加する必要があります。コンテンツを最初に読み込みたいと考えるため、直感に反するかもしれません。ただし、コンテンツが読み込まれたときに、コンテンツをレンダリングする方法をブラウザが知っている方が望ましいです。最初にスタイルを追加すると、要素が最初にレンダリングされた後にスタイルが設定された場合に発生する不要な再描画を防ぐことができます。

ドキュメントの <head> に使用しないスタイルを含める方法が 1 つあります。インラインスタイルです。ユーザーエージェントのスタイルシートはデフォルトで head を非表示にするため、head でインラインスタイルを使用することはほとんどありません。ただし、JavaScript を使用せずに CSS エディタを作成して、ページのカスタム要素をテストしたい場合は、display: block を使用して head を表示し、head 内のすべての要素を非表示にしてから、インラインの 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 属性の値で定義されます。 <link>、<a>、<area>、または <form> で使用できる rel 属性の有効な値は 25 個あります。一部の値はすべてで使用できます。メタ情報に関連するものは head に、パフォーマンスに関連するものは <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 px、32 px、48 px が適切なシナリオでは、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 属性を設定する必要があります。

代替値は翻訳以外の目的にも使用されます。たとえば、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 属性を設定して代替スタイルに名前を付ける必要があります。

正規

機械学習ワークショップの翻訳版やバージョンを複数作成すると、検索エンジンが信頼できるソースを特定できない可能性があります。rel="canonical" を使用して、サイトまたはアプリの優先 URL を識別します。

翻訳されたすべてのページとホームページに、優先 URL を示す正規 URL を含めます。

<link rel="canonical" href="https://www.machinelearning.com" />

rel="canonical" 正規リンクは、一般的に、パブリケーションやブログプラットフォームとの同時投稿で元のソースをクレジットするために使用されます。サイトがコンテンツをシンジケート配信する場合は、元のソースへの正規リンクを含める必要があります。

スクリプト

<script> タグにはスクリプトが含まれています。デフォルトのタイプは JavaScript です。別のスクリプト言語を使用する場合は、MIME タイプの type 属性を含めるか、JavaScript モジュールの場合は type="module" を含めます。JavaScript と JavaScript モジュールのみが解析されて実行されます。

<script> タグは、コードをカプセル化したり、外部ファイルをダウンロードしたりするために使用できます。MLW には外部スクリプトファイルはありません。一般的に信じられていることとは異なり、機能的なウェブサイトに JavaScript は必要ないためです。これは JavaScript の学習プログラムではなく、HTML の学習プログラムです。

後でイースターエッグを作成するために、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 のダウンロードと実行のブロック性を軽減できる属性は、defer と async の 2 つです。defer を使用すると、ダウンロード中に HTML のレンダリングがブロックされず、JavaScript はドキュメントのレンダリングが完了した後にのみ実行されます。async を使用すると、ダウンロード中もレンダリングはブロックされませんが、スクリプトのダウンロードが完了すると、JavaScript の実行中にレンダリングが一時停止します。

非同期と遅延を使用する場合の読み込み。 — スクリプトのさまざまな読み込み方法を図で示しています。一部のスクリプトは実行を遅らせることでメリットが得られますが、`async` 属性で読み込まれたスクリプトはすぐに実行できます。注: `<script type="module">` を使用して読み込まれたモジュールスクリプトでは、デフォルトで `defer` が有効になっています。

MLW の JavaScript を外部ファイルに含めるには、次のように記述します。

<script src="js/switch.js" defer></script>

defer 属性を追加すると、すべてのレンダリングが完了するまでスクリプトの実行が延期され、スクリプトがパフォーマンスに影響を与えるのを防ぐことができます。async 属性と defer 属性は、外部スクリプトでのみ有効です。

ベース

<head>. にのみ存在する要素がもう 1 つあります。あまり使用されない <base> 要素を使用すると、デフォルトのリンク URL とターゲットを設定できます。href 属性は、すべての相対リンクのベース URL を定義します。

<base>、リンク、フォームで有効な target 属性は、リンクを開く場所を設定します。_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 属性を HTML タグに追加します。

もう一度お試しください。

lang 属性を HTML タグに追加します。

正解です。

Add the <lang> 要素を <head> に追加します。

もう一度お試しください。

<head> に含めることができる要素を選択します。

<p>

もう一度お試しください。

<title>

正解です。

<meta>

正解です。

HTML の概要

メタデータ

ドキュメント構造 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

すべての HTML ドキュメントに追加する

<!DOCTYPE html>

<html>

コンテンツの言語

<head>

<head> 内の必須コンポーネント

文字エンコード

ドキュメントのタイトル

ビューポート メタデータ

その他の <head> コンテンツ

CSS

<link> 要素のその他の用途

ファビコン

サイトの代替バージョン

正規

スクリプト

ベース

HTML コメント

理解度をチェックしましょう

ドキュメント構造

`<!DOCTYPE html>`

`<html>`

`<head>`

`<head>` 内の必須コンポーネント

ビューポートメタデータ

その他の `<head>` コンテンツ

`<link>` 要素のその他の用途