HTML（HyperText Markup Language）は、ウェブページの構造を定義するための標準的なマークアップ言語です。
HTMLの基本的な要素とその使い方を紹介します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメントタイトル</title>
</head>
<body>
<!-- ここにコンテンツを追加 -->
</body>
</html>
<!DOCTYPE html>: HTML5であることを宣言します。
<html lang="ja">: ドキュメントの言語を日本語に設定します。
<head>: メタデータ（ドキュメント情報）を含むセクションです。
<meta charset="UTF-8">: ドキュメントの文字エンコーディングをUTF-8に設定します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: レスポンシブデザインのためにビューの設定を行います。
<title>: ブラウザタブや検索エンジンに表示されるドキュメントのタイトルを指定します。
<body>: 実際に表示されるコンテンツを含むセクションです。
<h1>これは見出し1</h1>
<h2>これは見出し2</h2>
<h3>これは見出し3</h3>
見出しタグは、ページの構造を定義します。
<h1>が最も重要な見出しで、<h6>が最も低いレベルの見出しです。
<p>これは段落です。</p>
段落は<p>タグで定義されます。
<strong>重要なテキスト</strong>
<em>強調したいテキスト</em>
強調したいテキストには、<strong>（重要なテキスト）や<em>（強調したいテキスト）を使用します。
<ol>
<li>最初の項目</li>
<li>2番目の項目</li>
<li>3番目の項目</li>
</ol>
順序付きリスト（番号付きリスト）
<ol>タグを使用します。
<ul>
<li>最初の項目</li>
<li>2番目の項目</li>
<li>3番目の項目</li>
</ul>
<ul>タグを使用します。
<a href="https://example.com">こちらをクリック</a>
リンクは<a>タグで作成します。
<img src="image.jpg" alt="代替テキスト">
画像を表示するには<img>タグを使用します。alt属性は、画像が表示されない場合の代替テキストです。
<table>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>
テーブルは、データを表形式で表示するために使用されます。
<table>: このタグ内にテーブルの行（<tr>）やセル（<td>, <th>）を配置します。
<form action="/submit" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">
<input type="submit" value="送信">
</form>
フォームは、ユーザーからデータを収集するために使用されます。
<form>: このタグ内にユーザーが入力するためのフィールドやボタンを配置します。
<label>: 入力フィールドのラベルを定義します。ユーザーがどのフィールドに入力すべきかを示すために使います。
<input type="text">: ユーザーがテキストを入力できる単一行の入力フィールドを作成します。
<!-- これはコメントです -->
コメントはコードに説明を追加するために使用され、ブラウザには表示されません。
<form action="/submit" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
<label for="gender">性別:</label>
<select id="gender" name="gender">
<option value="male">男性</option>
<option value="female">女性</option>
<option value="other">その他</option>
</select>
<fieldset>
<legend>興味のある分野:</legend>
<input type="checkbox" id="technology" name="interests" value="technology">
<label for="technology">テクノロジー</label>
<input type="checkbox" id="design" name="interests" value="design">
<label for="design">デザイン</label>
<input type="checkbox" id="marketing" name="interests" value="marketing">
<label for="marketing">マーケティング</label>
</fieldset>
<input type="submit" value="送信">
</form>
<select>: ドロップダウンリストを作成します。
<fieldset>: フォームのセクションをグループ化します。
<legend>: fieldsetのタイトルを指定します。
<input type="checkbox">: 複数選択可能なオプションを提供します。
<!-- 音声 -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
このブラウザはオーディオタグに対応していません。
</audio>
<!-- 動画 -->
<video width="600" controls>
<source src="video.mp4" type="video/mp4">
このブラウザはビデオタグに対応していません。
</video>
<audio>: 音声ファイルを埋め込みます。
<video>: 動画ファイルを埋め込みます。controls属性で再生コントロールを追加します。
<header>
<h1>サイトのタイトル</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>セクションタイトル</h2>
<p>このセクションの内容。</p>
</section>
<article>
<h2>記事タイトル</h2>
<p>記事の内容。</p>
</article>
</main>
<footer>
<p>© 2024 会社名</p>
</footer>
<header>: サイトやセクションのヘッダーを定義します。
<nav>: ナビゲーションリンクをグループ化します。
<main>: ドキュメントの主要なコンテンツを示します。
<section>: ドキュメント内のセクションを示します。
<article>: 独立したコンテンツの塊を示します。
<footer>: サイトやセクションのフッターを定義します。
<aside>
<p>サイドバーや補足情報を含むコンテンツ。</p>
</aside>
<figure>
<img src="figure.jpg" alt="説明文">
<figcaption>画像のキャプション</figcaption>
</figure>
<dialog open>
<p>ダイアログの内容</p>
<button>閉じる</button>
</dialog>
<aside>: サイドバーや補足情報など、主要コンテンツから補助的な情報を提供します。
<figure>: 図や画像を囲むための要素です。でキャプションを追加できます。
<dialog>: ダイアログボックスを作成します。open属性で表示される状態にします。
以上がHTMLの基本的な要素とその使い方です。これらを組み合わせることで、ウェブページを作成することができます。