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

はじめに

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-70765{{"HTML ドキュメントのメタデータ"}} html/head_elems -.-> lab-70765{{"HTML ドキュメントのメタデータ"}} html/charset -.-> lab-70765{{"HTML ドキュメントのメタデータ"}} html/doc_flow -.-> lab-70765{{"HTML ドキュメントのメタデータ"}} end

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>タグを使用できます。