HTML要素　ブロック要素

代表的なブロック要素

ブロック要素は、ページの構造を定義する中で、新しい行で始まり、水平方向に伸び１行単位での表示となります。

div要素(division element)

汎用のコンテナ要素で、他の要素をグループ化してスタイリングやレイアウトを適用します。

<div>
    <!-- 他のブロック要素やインライン要素を含むことができる -->
    <p>これは段落です。</p>
    <ul>
        <li>項目1</li>
        <li>項目2</li>
    </ul>
</div>

p要素 (paragraph element)

<p>要素は、段落（Paragraph）を表現するためのHTML要素です。テキストコンテンツをまとめて一つの段落としてグループ化するために使用されます。

<p>要素内には、他の要素もネストできますが、他のブロック要素（例: <div>、<h1>など）は通常直接<p>内には配置されません。

<p>これは段落のテキストです。段落は通常、一連の文や文章をまとめるために使用されます。</p>

<!--インライン要素はネストできる-->
<p>これは段落のテキストで、<strong>強調</strong>されています。</p>

<!--<br>で強制的に改行などを入れる場合がある-->
<p>これは最初の段落です。</p>
<p>これは2番目の段落で、前の段落とは<br>マージンによって分離されます。</p>

見出し要素(h1~h6)

見出し要素（Heading Elements）は、ページの構造を階層的に整理するための要素です。見出しは主にページの構造を示し、文書内でテーマやセクションの区別を明確にします。HTMLでは<h1>から<h6>までの見出し要素があり、<h1>が最も高い重要度を示し、<h6>が最も低い重要度を示します。

見出しはCSSを使用してスタイリングを行うため、HTMLの見た目のデザイン上文字の大きさを揃えるため、本来はh2要素が適している場所にh3要素を使うことはできません。

<h1>これはH1見出しです</h1>
<h2>これはH2見出しです</h2>
<!-- ... -->
<h6>これはH6見出しです</h6>

順序のないリストと順序つきリスト(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>

説明リストのための要素(定型型要素)　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>

label要素

<label> 要素は、HTMLでフォーム要素と連携して、その入力フィールドに対するラベルを提供するために使用されます。<label> を使用することで、ユーザビリティが向上し、アクセシビリティが向上します。（推奨）

<label for="input_id">ラベルテキスト</label>
<input type="type" id="input_id" name="input_name">

for 属性: ラベルが関連付けられているフォーム要素の id 属性と対応しています。これにより、ユーザーがラベルをクリックすると、関連するフォーム要素がフォーカスされます。
ラベルテキスト: フォーム要素に関する説明的なテキストを含みます。このテキストをクリックすることで、関連するフォーム要素にフォーカスが当たります。

input要素

<input> 要素は、ユーザーに対してテキスト入力、ボタン、セレクトメニュー、ラジオボタン、チェックボックスなど、さまざまな種類の入力フィールドを提供するために使用される多目的のHTML要素です。

<input> 要素の、基本的な属性と使用法が以下になります。

<input type="text" name="username" value="値" placeholder="例：">

type属性は、入力フィールドのタイプを指定します。例えば、テキストボックス、パスワード、ラジオボタン、チェックボックスなどがあります。一般的な値には、”text”、”email”、”password”、”radio”、”checkbox” などがあります。
name属性は、入力フィールドの名前を指定します。フォームがサーバーに送信される際に、この名前がデータのキーとして使用されます。
value: 入力フィールドの初期値を指定します。value=”送信”
placeholder: 入力フィールドに表示される、うっすらと表示される文字列＝プレースホルダーテキストを指定します。placeholder = “000-0000-0000”

type属性

<input> 要素の type 属性は、その入力フィールドがどのような種類のデータを受け入れるかを指定。

`text` (標準テキスト)

テキストボックスを作成します。一行のテキスト入力を受け入れるための基本的なフィールドです。

<input type="text" name="username">

`password`（パスワード）

パスワードを受け入れるためのフィールドで、入力された文字が黒い点で隠されるようになります。

<input type="password" name="password">

`checkbox`（チェックボックス）

チェックボックスを作成し、ユーザーが選択するかどうかを示します。value 属性でチェックされた場合の値を指定します。

<input type="checkbox" name="subscribe" value="1"> メールの購読

`radio`（ラジオボタン）

ラジオボタンを作成し、同じ name 属性を持つボタン群の中でユーザーは一つだけを選択できます。value 属性で選択された場合の値を指定できます。

<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性

`file`（画像・ファイル）

ファイルのアップロードを許可するためのフィールドです。ユーザーはファイルを選択して送信できます。

<input type="file" name="fileUpload">

`number`（数字）

数値を受け入れるテキストボックスを作成します。min、max、step 属性を使用して数値の範囲とステップを指定できます。

<input type="number" name="quantity" min="1" max="10" step="1" value="1">

`date`（日付）

日付の選択が可能な入力フィールドを作成します。

<input type="date" name="birthdate">

HTML要素 ブロック要素

代表的なブロック要素

div要素(division element)

p要素 (paragraph element)

見出し要素(h1~h6)

順序のないリストと順序つきリスト(ul,ol,li)

<ul>（Unordered List）

<ol>（Ordered List）

<li>（List Item）

説明リストのための要素(定型型要素) dl. dt dd

blockquote要素

フォーム要素

form要素

label要素

input要素

type属性

text (標準テキスト)

password（パスワード）

checkbox（チェックボックス）

radio（ラジオボタン）

file（画像・ファイル）

number（数字）

date（日付）

テーブル要素