HTML見出しのマスター：Webコンテンツの構造化されたアプローチ

はじめに

HTML 見出しは、構造化された Web ページを作成する際に欠かせない要素です。見出しには階層構造があり、読者がウェブサイトを迅速にナビゲートするのに役立ちます。この実験では、<h1> から <h6> のタグを使用して、さまざまなレベルの HTML 見出しを作成する方法を学びます。

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70769{{"様々なレベルのHTML見出し"}} html/head_elems -.-> lab-70769{{"様々なレベルのHTML見出し"}} html/text_head -.-> lab-70769{{"様々なレベルのHTML見出し"}} html/doc_flow -.-> lab-70769{{"様々なレベルのHTML見出し"}} html/inter_elems -.-> lab-70769{{"様々なレベルのHTML見出し"}} end

HTML ボイラープレートの追加

最初のステップは、index.html という名前の HTML ファイルを作成することです。Notepad、TextEdit、Sublime Text などの任意のテキストエディタを使用できます。

index.html ファイルに基本的な HTML 構造を追加するには、最初の行に <!DOCTYPE html> を入力し、2 行目と最後の行にそれぞれ <html></html> タグを入力します。

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

ヘッドセクションの追加

<html> タグの中で、<head> タグを使ってヘッドセクションを作成します。ヘッドセクションの中で、<title> タグを使って Web ページのタイトルを追加します。

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
</html>

ボディセクションの作成

<body></body> タグを使ってボディセクションを作成します。ボディセクションの中で、<h1> から <h6> のタグを使ってさまざまなレベルの見出しを追加します。

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <h2>First Sub-Heading</h2>
    <h3>Second Sub-Heading</h3>
    <h4>Third Sub-Heading</h4>
    <h5>Fourth Sub-Heading</h5>
    <h6>Fifth Sub-Heading</h6>
  </body>
</html>

「Main Heading」とサブ見出しを自分自身の関連するタイトルに置き換えることを忘れないでください。

`<hgroup>` を使った見出しのグループ化

<hgroup> タグを使って、複数の見出しをグループ化することができます。以下の例では、最後の 3 つの見出しを <hgroup> を使ってグループ化しています。

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <h2>First Sub-Heading</h2>
    <h3>Second Sub-Heading</h3>
    <h4>Third Sub-Heading</h4>
    <hgroup>
      <h4>Fourth Sub-Heading Part 1</h4>
      <h5>Fourth Sub-Heading Part 2</h5>
      <h6>Fourth Sub-Heading Part 3</h6>
    </hgroup>
  </body>
</html>

index.html ファイルを保存し、Web ブラウザで開いて作成した見出しを確認しましょう。

まとめ

この実験では、<h1> から <h6> のタグを使って HTML 見出しを作成する方法を学びました。見出しは、構造が整った Web ページを作成するために欠かせない要素であり、検索エンジン最適化にも役立ちます。ページの主要見出しに対しては、各 HTML ファイルに <h1> タグが 1 つだけ含まれるようにしてください。

様々なレベルのHTML見出し