HTMLの基本構造について
HTMLの基本構造は、ウェブページを構築するための基本的な要素を含んでいます。
以下がHTML文書の標準的な構造です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<header>
<!-- ヘッダーコンテンツ -->
</header>
<nav>
<!-- ナビゲーションメニュー -->
</nav>
<main>
<!-- メインコンテンツ -->
</main>
<aside>
<!-- サイドバーや補助的なコンテンツ -->
</aside>
<footer>
<!-- フッターコンテンツ -->
</footer>
</body>
</html>
各要素の説明:
<!DOCTYPE html>
- HTML5文書であることをブラウザに伝える宣言です。
<html lang="ja">
- 文書のルート要素であり、
lang
属性で言語を指定します(この例では日本語)。
- 文書のルート要素であり、
<head>
- 文書のメタデータ(文字セット、ビューポート設定、タイトル、CSSやJavaScriptのリンクなど)を含みます。
<meta charset="UTF-8">
- 文書の文字エンコーディングを指定します(UTF-8は一般的です)。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- レスポンシブデザインのためのビューポート設定です。
<title>
- ウェブページのタイトルを定義し、ブラウザのタブに表示されます。
<link rel="stylesheet" href="styles.css">
- 外部CSSファイルのリンクです。
<script src="script.js" defer></script>
- 外部JavaScriptファイルのリンクで、
defer
属性を使ってHTML文書の解析が完了するまでスクリプトの実行を遅延させます。
- 外部JavaScriptファイルのリンクで、
<body>
- 実際にページに表示されるコンテンツを含みます。
<header>
- サイト全体のヘッダー部分(ロゴやサイト名など)です。
<nav>
- ナビゲーションメニューを含みます。
<main>
- ページの主なコンテンツエリアです。
<aside>
- サイドバーや補助的な情報を含む部分です。
<footer>
- ページのフッター部分(著作権情報や連絡先など)です。
この基本構造を元に、具体的な内容やデザインを追加していくことで、ウェブページを作成します。