HTML 構造は、Web ページの構築において重要な役割を果たします。 これは、Web ページ上でコンテンツがどのように編成され、表示されるかを定義します。 ここでは、基本的な HTML 構造を紹介します。
1. Doctype
Doctype(文書タイプ宣言) は、Web ページが使用している HTML バージョンを定義します。 これは HTML ファイルの先頭に配置する必要があります。
2.htmlタグ
html タグは、すべての HTML ファイルのルート要素です。 Web ページのコンテンツ全体をカプセル化します。
3. head タグ
head タグには、ブラウザに直接表示されない Web ページに関する情報が含まれています。 ここで、ページのタイトル、メタ タグ、CSS および JavaScript ファイルへのリンク、その他のさまざまな要素が定義されます。
4. body タグ
body タグには、Web ページに表示されるすべてのコンテンツが含まれます。 ここで、テキスト、画像、ビデオ、リンク、その他のユーザー インターフェイス コンポーネントなどの要素が定義されます。
5. ネストされたタグ
HTML は、開始タグと終了タグによる階層構造を使用します。 子タグは親タグの中に配置されます。 たとえば、p タグ(段落) には、span タグ(インライン テキスト)、strong タグ(太字テキスト)、およびその他の多くのタグを含めることができます。
6. 共通タグ
HTML には、コンテンツのフォーマットと表示のためのさまざまなタグが用意されています。 たとえば、h1 ～ h6 タグ(見出し)、p タグ(段落)、img タグ(画像)、a タグ(リンク) などです。
完全な HTML ページ構造の例を次に示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Me</h2>
<p>I am a web developer passionate about creating amazing websites.</p>
</section>
<section>
<h2>My Projects</h2>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2022 My Webpage. All rights reserved.</p>
</footer>
</body>
</html>
doctype 上の例では、、 html tag、 head tag、 tag などの主要要素を含む完全な HTML ページがあります body。 head セクションでは、ページのタイトル、使用する CSS および JavaScript ファイルを定義します。 body セクションには、Web ページのコンテンツを表示するためのヘッダー、メイン、フッターなどの要素が含まれます。
正しい HTML 構造を使用すると、よく整理され、読みやすく、インタラクティブな Web ページを構築できます。