HTML5でWEBページ（ホームページ）を作成する場合の基本的なコードになります。
こういったコードをテンプレートとして準備しておくことで、楽にWEBサイトの作成が進められます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html> <html lang="ja"> <!-- 文書の言語を指定 --> <head> <meta charset="UTF-8"> <!-- 文書の文字エンコーディングを指定 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- ビューポートの設定（モバイル対応） --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- ビューポートの設定（モバイル対応） --> <meta name="description" content="このページの説明"> <!-- ページの説明 --> <meta name="keywords" content="キーワード1, キーワード2, ..."> <!-- ページのキーワード --> <meta name="author" content="著者名"> <!-- ページの著者 --> <link rel="stylesheet" href="styles.css"> <!-- 外部スタイルシートのリンク --> <title>ページのタイトル</title> <!-- ブラウザのタイトルバーやタブに表示されるタイトル --> </head> <body> <header> <h1>サイトのタイトル</h1> <!-- サイトやページの主要見出し --> <nav> <ul> <li><a href="#section1">セクション1</a></li> <li><a href="#section2">セクション2</a></li> </ul> </nav> </header> <main> <section id="section1"> <h2>セクション1の見出し</h2> <p>セクション1の内容がここに入ります。</p> <article> <h3>記事のタイトル</h3> <p>記事の内容がここに入ります。</p> </article> </section> <section id="section2"> <h2>セクション2の見出し</h2> <p>セクション2の内容がここに入ります。</p> <article> <h3>記事のタイトル</h3> <p>記事の内容がここに入ります。</p> </article> </section> </main> <footer> <p>© 2024 サイト名・会社名など. All rights reserved.</p> <!-- コピーライト情報 --> </footer> <script src="script.js"></script> <!-- 外部JavaScriptファイルのリンク --> </body> </html> |
目次
各HTMLタグの説明
| タグ | 説明 |
|---|---|
<!DOCTYPE html> | HTML5の文書型宣言。<br><b>役割</b>: HTML5の文書であることを宣言し、ブラウザに標準モードでのレンダリングを指示します。 |
<html lang="ja"> | 文書のルート要素で、lang属性は文書の言語を指定。<br><b>役割</b>: 文書全体を含むルート要素であり、言語設定を行います。 |
<head> | メタデータを含むセクション。<br><b>役割</b>: 文書に関するメタ情報（スタイル、スクリプト、メタタグなど）を含みます。 |
<meta charset="UTF-8"> | 文字エンコーディングの指定。<br><b>役割</b>: 文書の文字エンコーディングをUTF-8に設定します。 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ビューポートの設定（モバイル対応）。<br><b>役割</b>: ページの表示幅やズーム設定を指定し、モバイル対応を改善します。 |
<meta name="description" content="このページの説明"> | ページの説明。<br><b>役割</b>: 検索エンジン用にページの説明を指定し、検索結果に表示されます。 |
<meta name="keywords" content="キーワード1, キーワード2, ..."> | ページのキーワード。<br><b>役割</b>: ページの内容に関連するキーワードを指定し、検索エンジンのインデックス作成に利用されます。 |
<meta name="author" content="著者名"> | ページの著者。<br><b>役割</b>: ページの作成者または著者の名前を指定します。 |
<link rel="stylesheet" href="styles.css"> | 外部スタイルシートのリンク。<br><b>役割</b>: 外部のCSSファイルをリンクしてスタイルを適用します。 |
<title>ページのタイトル</title> | ページのタイトル。<br><b>役割</b>: ブラウザのタイトルバーやタブに表示されるページのタイトルを指定します。 |
<body> | 文書の本文。<br><b>役割</b>: HTML文書の主要なコンテンツを含みます。 |
<header> | ヘッダーセクション。<br><b>役割</b>: 文書やセクションのヘッダーを定義します。 |
<h1> | サイトやページの主要見出し。<br><b>役割</b>: ページの主な見出しを示します。 |
<nav> | ナビゲーション。<br><b>役割</b>: ナビゲーションリンクのセクションを定義します。 |
<ul> | 順序なしリスト。<br><b>役割</b>: 順序なしのリストを作成します。 |
<li> | リスト項目。<br><b>役割</b>: リストの各項目を定義します。 |
<a> | ハイパーリンク。<br><b>役割</b>: 他のページや場所へのリンクを作成します。 |
<main> | 主要コンテンツ。<br><b>役割</b>: 文書の主要なコンテンツを囲むセクションです。 |
<section> | セクション。<br><b>役割</b>: 文書内のセクションを定義します。 |
<h2> | セクションの見出し。<br><b>役割</b>: セクションのサブ見出しを示します。 |
<p> | 段落。<br><b>役割</b>: テキストの段落を作成します。 |
<article> | 記事や独立したコンテンツ。<br><b>役割</b>: 独立した自立したコンテンツを定義します。 |
<h3> | 記事の見出し。<br><b>役割</b>: 記事のサブ見出しを示します。 |
<footer> | フッターセクション。<br><b>役割</b>: 文書やセクションのフッターを定義します。 |
<script src="script.js"></script> | 外部JavaScriptファイルのリンク。<br><b>役割</b>: 外部のJavaScriptファイルをリンクしてスクリプトを実行します。 |
