HTML要素　ブロック要素

見出しを定義　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>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ul>

<ol>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</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

<dl>（Description List）、<dt>（Description Term）、および <dd>（Description Details）は、HTML文書内で説明リストを作成するための要素です。これらの要素は、用語（<dt>）とその説明（<dd>）をグループ化し、関連性を示すのに役立ちます。(定型型要素）

<dl>要素は説明リストのコンテナで、<dt>（用語）と<dd>（説明）を下記のように組み合わせます。

<dl>
    <dt>用語1</dt>
    <dd>用語1の説明</dd>

    <dt>用語2</dt>
    <dd>用語2の説明</dd>

    <!-- 他の用語と説明も同様に追加可能 -->
</dl>


<!--新着情報などにも使われる-->
<dl>
    <dt>2024.01.30</dt>
    <dd>新商品追加しました</dd>

    <dt>2023.12.01</dt>
    <dd>年末年始のお知らせ</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>