【HTML】HTMLの基本構造を理解しよう！ページの骨組みを作成する方法

2024年9月2日

はじめに

HTML（HyperText Markup Language）は、ウェブページの基本的な構造を定義するためのマークアップ言語です。HTMLを理解することで、ウェブページの骨組みを作成し、さまざまな要素を組み合わせて情報を表示することができます。この記事では、HTMLの基本構造について学び、ウェブページを作成するための基礎を身につけましょう。

HTMLの基本構造とは？

HTML文書の基本構造は、以下のようなテンプレートに基づいています。各部分の役割を理解することが重要です。

<code><!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本的なHTML構造</title>
</head>
<body>
    <!-- コンテンツがここに入る -->
</body>
</html>
</code>

各要素の説明

<!DOCTYPE html>：
この宣言は、HTML5を使用していることをブラウザに伝えます。これにより、ブラウザは文書を正しく表示するためのモードを設定します。
<html lang="ja">：
<html>タグは、ドキュメントのルート要素であり、lang属性はドキュメントの言語を指定します。ここでは、日本語を指定しています。
<head>：
このセクションには、ページのメタデータが含まれます。メタデータには、文字エンコーディング、ページのタイトル、スタイルシートやスクリプトのリンクなどが含まれます。
<meta charset="UTF-8">：
このタグは、ページの文字エンコーディングを指定します。UTF-8はほとんどの言語をサポートするエンコーディング方式です。
<meta http-equiv="X-UA-Compatible" content="IE=edge">：
このタグは、Internet Explorerに対して最新のレンダリングエンジンを使用するよう指示します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：
このタグは、ページの表示とスケーリングを設定し、モバイルデバイスでのレスポンシブデザインをサポートします。
<title>基本的なHTML構造</title>：
<title>タグは、ブラウザのタブやブックマークに表示されるページのタイトルを定義します。
<body>：
このセクションには、実際に表示されるコンテンツ（テキスト、画像、リンク、など）が含まれます

HTMLの構造を活用する方法

HTMLの基本構造を理解したら、実際にさまざまな要素を追加してウェブページを作成してみましょう。以下は、基本的なHTML要素を使ってウェブページを作成するための例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ホームページ作成・WEB制作｜TakeHawk</title>
</head>
<body>
    <header>
        <h1>ようこそ！</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">ホーム</a></li>
            <li><a href="#about">私について</a></li>
            <li><a href="#contact">お問い合わせ</a></li>
        </ul>
    </nav>
    <main>
        <section id="home">
            <h2>ホームページ</h2>
            <p>ここでは私のウェブサイトの最新情報を紹介します。</p>
        </section>
        <section id="about">
            <h2>私について</h2>
            <p>私はウェブ開発者です。HTMLとCSSが得意です。</p>
        </section>
    </main>
    <footer>
        <p>© 2024 TakeHawk</p>
    </footer>
</body>
</html>

まとめ

HTMLの基本構造を理解することは、ウェブページの作成の第一歩です。<html>, <head>, <body>といった要素の役割を知り、それらを正しく使うことで、ブラウザに対して適切な指示を与えることができます。また、HTMLの基本要素を使いこなすことで、シンプルかつ効果的なウェブページを作成することができます。まずは基本構造をしっかりと理解し、実際に手を動かしてみましょう！

この記事では、HTMLの基本構造の理解と、それを使った簡単なウェブページの作成方法を紹介しました。次回は、CSSを使ってページのスタイリングを学んでいきますので、お楽しみに！