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>- ページのフッター部分(著作権情報や連絡先など)です。
この基本構造を元に、具体的な内容やデザインを追加していくことで、ウェブページを作成します。