ブログ・お知らせ

ブログ・お知らせ等

  1. HOME
  2. ブログ
  3. blog
  4. HTMLの基本構造について
ホームページ公開

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>

 

各要素の説明:

  1. <!DOCTYPE html>
    • HTML5文書であることをブラウザに伝える宣言です。
  2. <html lang="ja">
    • 文書のルート要素であり、lang属性で言語を指定します(この例では日本語)。
  3. <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文書の解析が完了するまでスクリプトの実行を遅延させます。
  4. <body>
    • 実際にページに表示されるコンテンツを含みます。
    • <header>
      • サイト全体のヘッダー部分(ロゴやサイト名など)です。
    • <nav>
      • ナビゲーションメニューを含みます。
    • <main>
      • ページの主なコンテンツエリアです。
    • <aside>
      • サイドバーや補助的な情報を含む部分です。
    • <footer>
      • ページのフッター部分(著作権情報や連絡先など)です。

この基本構造を元に、具体的な内容やデザインを追加していくことで、ウェブページを作成します。

関連記事