ドキュメント構造

HTML ドキュメントには、ドキュメント タイプの宣言と <html> ルート要素が含まれます。<html> 要素には、ドキュメント ヘッドとドキュメント本文がネストされています。ドキュメントの見出しは目の見えるユーザーには見えませんが、サイトを機能させることが重要です。検索エンジンやソーシャル メディアの検索結果の情報、ブラウザタブやモバイルのホーム画面ショートカットのアイコン、コンテンツの動作と表示方法など、すべてのメタ情報が含まれています。このセクションでは、表示されていませんが、ほぼすべてのウェブページに存在するコンポーネントについて説明します。

MachineLearningWorkshop.com（MLW）サイトを作成するには、まず、ドキュメントの種類、コンテンツの人間の言語、文字セット、そしてもちろんサイトやアプリケーションのタイトルや名前など、すべてのウェブページに不可欠な要素を含めます。

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

すべてのウェブページに不可欠と見なすべき機能がいくつかあります。これらの要素がない場合、ブラウザはコンテンツをレンダリングしますが、含めます。これは常に変わりません。

<!DOCTYPE html>

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

<html>

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

コンテンツの言語

<html> タグに追加される lang 言語属性は、ドキュメントのメイン言語を定義します。lang 属性の値は、2 文字または 3 文字の ISO 言語コードと、それに続く地域です。地域は省略可能ですが、地域によって言語が大きく異なる可能性があるため、指定することをおすすめします。たとえば、フランス語はカナダ（fr-CA）とブルキナファソ（fr-BF）では大きく異なります。この言語宣言により、スクリーン リーダー、検索エンジン、翻訳サービスがドキュメントの言語を認識できるようになります。

lang 属性は、<html> タグに限定されません。ページ内にドキュメントのメインの言語とは異なる言語のテキストがある場合は、lang 属性を使用してドキュメント内のメイン言語の例外を識別する必要があります。head に含める場合と同様に、body の lang 属性は視覚効果を持ちません。セマンティクスを追加するだけで、支援技術や自動化サービスが影響を受けるコンテンツの言語を認識できるようになります。

この属性は、ドキュメントの言語と、その基本言語の例外を設定するだけでなく、CSS セレクタでも使用できます。<span lang="fr-fr">Ceci n'est pas une pipe.</span> は、属性と言語セレクタの [lang|="fr"] と :lang(fr) でターゲットに設定できます。

開始タグと終了タグの間にネストされている 2 つの子（<head> と <body>）があります。<html>

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
  </body>
</html>

<head>（ドキュメント メタデータ ヘッダー）には、サイトまたはアプリケーションのすべてのメタデータが含まれます。本文には表示可能なコンテンツが含まれます。このセクションの残りの部分では、開始時と終了時の <head></head> 内にネストされているコンポーネントに焦点を当てます。

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

ドキュメントのタイトル、文字セット、ビューポートの設定、説明、ベース URL、スタイルシートのリンク、アイコンなどのドキュメントのメタデータは、<head> 要素にあります。これらの機能すべてが必要とは限りませんが、文字セット、タイトル、ビューポートの設定を必ず含めてください。

文字エンコード

<head> の最初の要素は、charset 文字エンコード宣言とする必要があります。タイトルの前に配置することで、ブラウザでそのタイトルの文字とドキュメントの残りの部分のすべての文字をレンダリングできます。

ほとんどのブラウザのデフォルトのエンコードは、ロケールに応じて windows-1252 です。ただし、UTF-8 を使用すると、存在すらしていない文字も含め、すべての文字を 1 ～ 4 バイトでエンコードできます。これは HTML5 で必須のエンコード タイプでもあります。

文字エンコードを UTF-8 に設定するには、以下を含めます。

<meta charset="utf-8" />

UTF-8（大文字と小文字を区別しない）を宣言すると、タイトルに絵文字を含めることもできます（ただし、含めないでください）。

文字エンコードは、ドキュメント内のすべての要素（<style> と <script> を含む）に継承されます。この簡単な宣言により、クラス名と selectorAPI に絵文字を含めることができます（繰り返ししないでください）。絵文字を使用する場合は、ユーザー補助機能を損なわずにユーザビリティが向上する方法で使用してください。

ドキュメント タイトル

ホームページとその他のすべてのページには、それぞれ固有のタイトルを付ける必要があります。ドキュメントのタイトルの内容（開始タグと終了タグの間にあるテキスト）は、ブラウザタブ、開いているウィンドウのリスト、履歴、検索結果のほか、ソーシャル メディア カード（<meta> タグで再定義されていない限り）に表示されます。<title>

<title>Machine Learning Workshop</title>

ビューポートのメタデータ

もう 1 つ必須と見なすべきメタタグは viewport メタタグです。これはサイトの応答性を高め、ビューポートの幅に関係なく、デフォルトでコンテンツを適切にレンダリングできるようにします。viewport メタタグは、最初の iPhone が発売された 2007 年 6 月から登場していますが、つい最近仕様としてドキュメント化されたばかりです。ビューポートのサイズとスケーリングを制御でき、サイトのコンテンツが 960 ピクセルのサイトを 320 ピクセルの画面に合わせて縮小するのを防ぐために、このオプションを使用することを強くおすすめします。

<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> オプションを保存しています。

メタ文字セットとドキュメントのタイトルを見てきましたが、<meta> タグ以外にも、含めるべきメタデータがたくさんあります。

CSS

<head> は HTML のスタイルを指定する場所です。スタイルについて知りたい場合は CSS 専用の学習プログラムがありますが、スタイルを HTML ドキュメントに組み込む方法を把握しておく必要があります。

CSS を含めるには、<link> 属性、<style> 属性、style 属性の 3 つの方法があります。

HTML ファイルにスタイルを含める主な 2 つの方法は、rel 属性を stylesheet に設定した <link> 要素を使用して外部リソースを含める方法と、<style> の開始タグと終了タグ内でドキュメントのヘッダーに直接 CSS を含める方法です。

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

構文は <link rel="stylesheet" href="styles.css"> です。styles.css はスタイルシートの URL です。type="text/css" がよく見られます。必要ありません。CSS 以外で記述されたスタイルを含める場合、type が必要ですが、他のタイプはないため、この属性は必要ありません。rel 属性は関係を定義します。この場合は stylesheet です。これを省略すると、CSS はリンクされません。

他の rel 値についてはこの後すぐに見ていきますが、まずは CSS を含めるその他の方法について説明します。

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

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

@import を使用してスタイルシートをドキュメント（必要に応じてカスケード レイヤ）にインポートする場合、@import ステートメントは、<style> またはリンクされたスタイルシート内で、文字セット宣言以外の最初のステートメントにする必要があります。

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

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

スタイルは、<link> か <style> のいずれか、または両方を経由する必要があります。ドキュメントの本文に含めれば問題ありませんが、パフォーマンス上の理由から、先頭にスタイルを指定することをおすすめします。これは直感に反しているように思えるかもしれません。コンテンツを最初に読み込ませたいと思っても、実際には読み込み時にコンテンツをレンダリングする方法をブラウザに知らせておきたいものです。最初にスタイルを追加しておくことで、最初にレンダリングされた要素のスタイル設定時に発生する不要な再ペイントを防ぐことができます。

ドキュメントの <head> には使用しないスタイルを含める 1 つの方法は、インライン スタイルです。ユーザー エージェントのスタイルシートではデフォルトで見出しが非表示になるため、head でインライン スタイルを使用することはないでしょう。しかし、たとえば、ページのカスタム要素をテストするために、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> にインライン スタイルを追加することもできますが、style で <style> のスタイルを設定する方が楽しいでしょう。失礼いたします。

link 要素は、HTML ドキュメントと外部リソースの関係を作成するために使用します。ダウンロード可能なリソースもあれば、情報提供を目的としたリソースもあります。関係のタイプは、rel 属性の値によって定義されます。現在、<link>、<a>、<area>、または <form> で使用できる rel 属性で使用できる値は 25 個ですが、すべてに使用できる値はわずかです。メタ情報に関連するものは、head には含み、パフォーマンスに関連するものは <body> に含めることをおすすめします。

ヘッダーには、他の 3 つのタイプ（icon、alternate、canonical）を含めます。（4 つ目のタイプである rel="manifest" は次のモジュールで追加します）。

ファビコン

ドキュメントで使用するファビコンを指定するには、<link> タグと rel="icon" 属性と値のペアを使用します。ファビコンはブラウザタブに表示される非常に小さなアイコンで、通常はドキュメント タイトルの左側に表示されます。開いているタブの数が多すぎると、タブが縮小されてタイトルが消えますが、アイコンは常に表示されたままになります。ほとんどのファビコンは、企業またはアプリケーションのロゴです。

ファビコンを宣言しない場合、ブラウザは最上位ディレクトリ（ウェブサイトのルートフォルダ）で favicon.ico という名前のファイルを探します。<link> では、別のファイル名と場所を使用できます。

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />

上記のコードでは、「16px、32px、または 48px が理にかなっているシナリオのアイコンとして mlwicon.png を使用する」と書かれています。サイズ属性には、スケーラブルなアイコンの 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 枚の画像を使用します。Twitter では青い鳥が使われています。ブラウザタブに青い鳥が表示されている場合、そのタブはクリックせずに Twitter ページが開くことがわかります。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 属性を設定して、その代替スタイルに名前を付ける必要があります。

正規

ML ワークショップの翻訳やバージョンを複数作成すると、どのバージョンが信頼できるソースであるか検索エンジンが混乱する可能性があります。この場合、rel="canonical" を使用して、サイトまたはアプリケーションの優先 URL を指定します。

翻訳するすべてのページとホームページに、正規 URL を含めて、Google が推奨する URL を記載します。

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

rel="canonical" 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 では、要素が存在する前は参照したくないため、現時点では存在しないため、追加しません。照明のスイッチ要素を追加するときは、<head> ではなく <body> の下部に <script> を追加します。その理由は、理由は 2 つあります。このスクリプトは DOMContentLoaded イベントに基づいていないため、要素を参照するスクリプトが検出される前に要素が存在するようにする必要があります。主に JavaScript はレンダリングをブロックするだけでなく、スクリプトがダウンロードされるとブラウザはすべてのアセットのダウンロードを停止し、JavaScript の実行が完了するまで他のアセットのダウンロードを再開しません。このため、JavaScript リクエストは、ドキュメントの見出しではなく末尾に記述されることがよくあります。

JavaScript のダウンロードと実行のブロックの性質を減らすには、defer と async の 2 つの属性があります。defer を使用すると、ダウンロード中に HTML レンダリングがブロックされず、JavaScript はドキュメントのレンダリングが完了した後にのみ実行されます。async でも、ダウンロード中にレンダリングはブロックされませんが、スクリプトのダウンロードが完了すると、JavaScript の実行中にレンダリングが一時停止されます。

async と defer を使用すると読み込みに失敗します。

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

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

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

ベース

<head>. にのみ表示される別の要素があります。あまり使用されませんが、<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 の外にポップアウトされ、ブラウザ ウィンドウ全体を占有します）。

この要素の欠点の一つは、アンカーリンクが <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" src="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 コメントは、head や body など、ページ上のどこにでも配置できます。ただし、スクリプトやスタイル ブロックには JavaScript と CSS コメントを使用する必要があります。

<head> の基本的な内容についてはすでに説明しましたが、さらに知識を深めたいと思っています。以降のセクションでは、メタタグと、ウェブサイトがソーシャル メディア上でリンクされたときに表示される内容を制御する方法について説明します。

理解度をチェックする

ドキュメント構造に関する知識をテストします。

ドキュメントの言語はどのように特定していますか？

language 属性を HTML タグに追加します。
もう一度お試しください。
lang 属性を HTML タグに追加します。
正解です。
Add the <lang> 要素を <head> に追加します。
もう一度お試しください。

<head> に含める要素を選択します。

<p>
もう一度お試しください。
<title>
正解です。
<meta>
正解です。