HTML ドキュメントのメタデータをマスターする

はじめに

この実験では、HTML の<head>タグを使って HTML ドキュメントを作成する方法を学びます。<head>タグは、ユーザには表示されない、Web ページに関するメタデータやその他の情報を提供するために使用されます。HTML ドキュメント用の<head>タグを作成するために必要な手順を説明します。

注：index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080タブを更新して Web ページをプレビューできます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この中級レベルの実験の完了率は 78%です。学習者から 100% の好評価を得ています。

HTML ドキュメントを作成する

まず、index.htmlという名前のファイルに HTML ドキュメントを作成しましょう。

<!doctype html>
<html>
  <head> </head>
  <body></body>
</html>

HTML ドキュメントにタイトルを追加する

<title>タグは、Web ページのタイトルを定義するために使用されます。これは<head>タグの中に配置する必要があります。HTML ドキュメントに<title>タグを追加しましょう。

<!doctype html>
<html>
  <head>
    <title>My Awesome Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

HTML ドキュメントのタイトルを変更する

HTML ドキュメントのタイトルを、「My Awesome Webpage」というテキストを別のものに変更することで変更しましょう。「My Awesome Webpage」のテキストを好きなタイトルに置き換えます。

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

文字エンコーディングを追加する

文字エンコーディングは、ブラウザで文字がどのように表示されるかを定義するために使用されます。<meta>タグを使って文字エンコーディングを定義することができます。<head>タグの中に以下の<meta>タグを追加しましょう。

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

HTML ドキュメントに CSS スタイリングを追加する

<head>タグの中に<style>タグを使って、Web ページに CSS スタイリングを与えることができます。<head>タグの中に以下の<style>タグを追加しましょう。

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <style>
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

外部の CSS シートへのリンクを追加する

<link>タグを使って、外部の CSS スタイルシートを HTML ドキュメントにリンクすることもできます。styles.cssという新しいファイルを作成し、以下の CSS スタイルを追加しましょう。

h1 {
  color: red;
}

そして、<head>タグの中に以下の<link>タグを使って、このスタイルシートを HTML ドキュメントにリンクします。

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

ベース URL を追加する

<base>タグは、HTML ドキュメントで使用されるすべての相対 URL に対してベース URL を提供するために使用されます。<head>タグの中に<base>タグを追加しましょう。

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <base href="https://example.com" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

まとめ

この実験では、HTML の<head>タグを使って Web ページに関するメタデータやその他の情報を提供する方法を学びました。HTML ドキュメントのタイトルを定義するには<title>タグを、文字エンコーディングやその他のメタ情報を定義するには<meta>タグを、CSS スタイリングを提供するには<style>タグを、外部の CSS スタイルシートをリンクするには<link>タグを、すべての相対 URL に対するベース URL を提供するには<base>タグを使用できます。