代表的なブロックレベルボックス
ブロック要素（ブロックレベルボックス）は、ページの構造を定義するために使われる要素の一つで、以下のような特徴を持っています。
- 新しい行で始まる
- ブロック要素を使うと、その要素の前後に改行が自動的に挿入され、縦に積み重なって表示されます。
- 親要素の横幅いっぱいに広がる
- ブロック要素は基本的に横幅を可能な限り広げ、親要素の幅いっぱいに伸びます（ただし、CSSで幅を制限することもできます）。
- 他のブロック要素やインライン要素を内包できる
- ブロック要素の中に、さらに別のブロック要素やインライン要素を含めることができます。
- 主にページの構造を作るために使用される
- 見出し、段落、リスト、セクションなど、ページを論理的に構成する際に使われます。
見出しを定義 h1-h6要素(Heading Elements)
見出し要素（Heading Elements）は、ページの構造を階層的に整理するための要素です。見出しは主にページの構造を示し、文書内でテーマやセクションの区別を明確にします。HTMLでは<h1>から<h6>までの見出し要素があり、<h1>が最も高い重要度を示し、<h6>が最も低い重要度を示します。
見出しはCSSを使用してスタイリングを行うため、HTMLの見た目のデザイン上文字の大きさを揃えるため、本来は<h2>要素が意味合い的に適している箇所に<h3>要素を使うことはできません。
<h1>これはH1見出しです</h1> <h2>これはH2見出しです</h2> <!-- ... --> <h6>これはH6見出しです</h6>
段落を定義 p要素 (paragraph element)
<p>要素は、段落（Paragraph）を表現するためのHTML要素です。テキストコンテンツをまとめて一つの段落としてグループ化するために使用されます。
<p>要素内には、他の要素もネスト（入れること）もできますが、他のブロック要素（例: <div>、<h1>など）は通常直接<p>内には配置されません。ブロック要素は配置されませんが、インライン要素は配置します。
<p>これは段落のテキストです。段落は通常、一連の文や文章をまとめるために使用されます。</p> <!--インライン要素はネストできる--> <p>これは段落のテキストで、<strong>強調</strong>されています。</p> <!--<br>で強制的に改行などを入れる場合がある--> <p>これは最初の段落です。</p> <p>これは2番目の段落で、前の段落とは<br>マージンによって分離されます。</p>
汎用的な箇所で定義 div要素(division element)
汎用のコンテナ要素で、他の要素をグループ化してCSSでのスタイリングやレイアウトを適用します。そのため意味合いを持たない汎用要素となります。意味のある場所を<div>で定義するのは極力さけたいものです。
<div class="content">
<!-- 他のブロック要素やインライン要素を含むことができる -->
<p>これは段落です。</p>
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
</div>
ul要素,ol要素,li要素
<ul>（Unordered List）、<ol>（Ordered List）、および <li>（List Item）は、HTMLでリストを作成するための要素です。これらを組み合わせて使用することで、順序のないリスト（アンオーダードリスト）や順序つきリスト（オーダーリスト）を構築します。
<ul>（Unordered List）
- 順序のないリストを表現するための要素です。
- リストアイテムは通常、点（ディスク、円、四角など）でマークされます。
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
<ol>（Ordered List）
- 順序つきリストを表現するための要素です。
- リストアイテムは通常、数値や文字で番号付けされます。
<ol>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ol>
<li>（List Item）
- リスト内の各アイテム（項目）を表現するための要素です。
<ul>または<ol>の直下に配置され、リスト内の項目を定義します。
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
<ol>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ol>
ul、olの子要素はli要素のみ
<ul>および<ol>の子要素は<li>のみとなっており、下記のように他の要素(例では、<h2>要素）を入れたマークアップを行うことは避けましょう。
<ul>
<h2>見出し</h2>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
<dl> 要素、<dt> 要素、<dd> 要素
これらは「説明リスト（Description List）」を作成するための要素です。説明リストは、用語とその説明や関連情報をペアで表示するときに使います。
<dl>: 説明リスト全体を囲む親要素。<dt>: 定義される用語や項目を記述する要素（”Term” を意味する）。<dd>: 用語の説明や関連情報を記述する要素（”Description” を意味する）。
<dl> <dt>HTML</dt> <dd>Webページを作成するためのマークアップ言語。</dd> <dt>CSS</dt> <dd>Webページのデザインやレイアウトを指定するためのスタイルシート言語。</dd> <dt>JavaScript</dt> <dd>Webページに動きをつけたり、動的な機能を実現するプログラミング言語。</dd> </dl>
blockquote要素
<blockquote>要素は、HTML内で引用されたブロックレベルのテキストを示すための要素です。通常、この要素は引用文や外部からのコンテンツ、他の文書からの引用などに使用されます。<blockquote>要素を使用すると、引用された部分が視覚的に際立ち、意味論的な構造が強調されます。
<p>以下は引用です:</p>
<blockquote>
<p>引用されたテキストがここに入ります。</p>
</blockquote>
<blockquote cite="https://example.com/quotation">
<p>引用されたテキストがここに入ります。</p>
</blockquote>
フォーム要素
form要素
<form> 要素は、HTMLでフォームを定義するために使用される重要な要素です。フォームは、ユーザーがテキストを入力したり、ボタンをクリックしたりして情報を送信するためのものです。以下は、<form> 要素の基本的な構造と一般的な属性です。
action属性は フォームのデータが送信される先のURLを指定。この属性の値が空の場合、もしくはaction属性が両略されている場合は、同ページにデータは送信されます。送信先は、サーバー側の処理を担当するPHPなどのURLを指定し、PHPがサーバーで処理を行い返すプログラム宛に送ります。method属性は、フォームデータの送信メソッドを指定。method=”get” や method=”post” と記述し、値は “GET” または “POST”になります。GET送信 はデータをURLに追加して送信し、POST送信 はデータをHTTPリクエストの本体に格納して送信します。重要なデータやパスワードなどの機密情報が含まれる場合は、”POST” を使用することが一般的です。
<form action="サーバーへのデータ送信先" method="送信メソッド"> <!-- フォーム内の入力要素やボタンなどのコンテンツ --> </form>
label要素（インライン要素）
<label> 要素は、HTMLでフォーム要素と連携して、その入力フィールドに対するラベルを提供するために使用されます。<label> を使用することで、ユーザビリティが向上し、アクセシビリティが向上します。（推奨）
<label for="input_id">ラベルテキスト</label> <input type="type" id="input_id" name="input_name">
for属性: ラベルが関連付けられているフォーム要素のid属性と対応しています。これにより、ユーザーがラベルをクリックすると、関連するフォーム要素がフォーカスされます。- ラベルテキスト: フォーム要素に関する説明的なテキストを含みます。このテキストをクリックすることで、関連するフォーム要素にフォーカスが当たります。
input要素 (インライン要素）
<input>要素はインライン要素になりますので、下記のページで解説しています。
テーブル要素
HTMLの <table> 要素は、表を作成するためのコンテナ要素です。表は行と列から構成され、それぞれを <tr>（行）と <td>（データセル）または <th>（見出しセル）要素で表します。HTML5よりレイアウトを作成するための<table>要素を使うことは非推奨になっています。
<table>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
<th>見出しセル3</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
<td>データセル3</td>
</tr>
<!-- 追加の行が続く -->
</table>
<tr> は行（table row）を表し、<th> は見出しセル（table header cell）、<td> はデータセル（table data cell）を表します。
<table>：全体の表を定義します。<tr>：行を定義します。<th>：見出しセルを定義します。通常、表の最初の行や列に使用されます。<td>：データセルを定義します。実際のデータが表示されます。
<thead>や<tbody>について
<tbody>や<thead>は、表を構造化し、セマンティクスを向上させるために使用されるHTML要素ですが、必ずしも必要ではありません。これらの要素がなくても、ブラウザはテーブルの内容を適切に解釈ています。ブラウザのデベロッパーツールでコードを確認すると入力していない場合も<tbody>などは入っています。但、これらの要素を使用することにより、表の構造が明確になり、アクセシビリティが向上し、CSSやJavaScriptなどのスタイリングや操作が簡単になります。
<table>
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
<th>職業</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
<td>エンジニア</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
<td>デザイナー</td>
</tr>
</tbody>
</table>
<thead>要素は表の見出し（ヘッダー）を定義し、<tbody>要素は表の本体（データ）を定義しています。これにより、ブラウザは表の構造を正しく解釈し、スクリーンリーダーやその他の支援技術が正しく理解できるようになります。簡単な表やデザインのみが必要な場合、これらの要素を省略しても構いませんが、大規模な表やセマンティクスが重要な場合は、これらの要素を使用することが推奨されます。
header/footer/mainなどの前ページで紹介しているセマンティクス要素もブロックように入ります。