HTML は、主に 2 種類の要素があります。

## ブロック要素

- 段落 `<p>`
- リスト：箇条書き付き `<ul>` 順序付きリスト `<ol>`
- 見出し：第 1 レベル`<h1>`から第 6 レベルの見出し`<h6>`
- 記事 `<article>`
- セクション `<section>`
- 長い引用符 `<blockquote>`

## インライン要素

- リンク `<a>`
- 強調された言葉 `<em>`
- 重要な言葉 `<strong>`
- 短い引用符 `<q>`
- 略語 `<abbr>`

ブロック要素は、コンテンツを一貫性のあるブロックに分割することにより、ページの主要部分を構造化することを目的としています。

インライン要素は、テキストの一部を区別して、特定の機能や意味を与えることを目的としています。インライン要素は通常、1 つまたはいくつかの要素で構成されます。

```html
<p>Youtubeで<a href="https://www.youtube.com">HTMLチュートリアル</a>を見る</p>
```

# タグの開閉
すべてのブロック要素には、開始タグと終了タグがあります。

そのため、自己完結型要素はインライン要素になります。これは、構文で他の HTML 要素を含めることができないためです。

||開始タグと終了タグの有無|自己完結型|
|---|---|---|
|ブロック要素|`<p></p>` `<ul></ul>` `<ol></ol>`|×|
|インライン要素|`<a></a>` `<strong></strong>` `<em></em>` |`<input>` `<br>` `<img>`|

# 他の種類のHTML要素
ブロック/インライン要素にはいくつかの例外がありますが、最も頻繁に遭遇するものは次のとおりです。

- リスト項目 `<li>`
- テーブル `<table>`,`<tr>`,`<td>`

HTML

blockとinlineについて

Web サイトのほとんどは、テキストのコンテンツがほとんどです。

音楽や動画が人気になってきた今でも、それは変わりません。

## Paragraph
パラグラフ `<p>`は、デフォルトのブロックレベルの要素として機能し、素早く記述できるため、最も使用されている HTML 要素です。

```html
<p>
  「兵は国の大事にして、死生の地、存亡の地なり。察せざるべからず」
  戦争は国家の大事であって、国民の生死、国家の存亡がかかっている。よく考えねばならない
</p>
```

<div class="html">
  <p>
    「兵は国の大事にして、死生の地、存亡の地なり。察せざるべからず」
    戦争は国家の大事であって、国民の生死、国家の存亡がかかっている。よく考えねばならない
  </p>
</div>

## Lists
リストは 3 種類あります。

- `<ul>` 箇条書きリスト
- `<ol>` 順序付きリスト
- `<dl>` 定義リスト

HTML のリストは特定の構造を必要とします。

`<ul>` と `<ol>` は、リストの項目を表す `<li>` の直接の親でなければなりません。

したがって、`<li>` 要素は単独では使用できず、`<ul>` または `<ol>` の直接の子でなければなりません。

### 箇条書きリスト
最も一般的に使われているリストです。個々のアイテムを順不同に並べることを目的としたリストです。

```html
<p>学習リスト</p>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>ReactJS</li>
</ul>
```

リストの項目は、箇条書きで表示されます。

<div class="html">
  <p>学習リスト</p>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>ReactJS</li>
  </ul>
</div>

### 順序付きリスト
順序付きリストは、項目の順序が重要な場合に使用されます。

```html
<p>学習ステップ</p>
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>ReactJS</li>
</ol>
```

順序付きリストは、ブラウザによって自動的に番号が付けられます。HTML の中に番号を入れる必要はありません。

<div class="html">
  <p>学習ステップ</p>
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>ReactJS</li>
  </ol>
</div>

### 定義リスト

定義リストは、対になっている項目のためのリストです。定義リストは、`<dt>` 定義用語と `<dd>` 定義説明のペアを直接の子として含む必要があります。

```html
<dl>
  <dt>HTML</dt>
  <dd>マークアップ言語</dd>
  <dt>CSS</dt>
  <dd>HTMLを装飾する言語</dd>
  <dt>JavaScript</dt>
  <dd>HTML DOMの操作などを行う言語</dd>
  <dt>Facebook製のJSフレームワーク</dt>
  <dd></dd>
</dl>　
```

<div class="html">
  <dl>
    <dt>HTML</dt>
    <dd>マークアップ言語</dd>
    <dt>CSS</dt>
    <dd>HTMLを装飾する言語</dd>
    <dt>JavaScript</dt>
    <dd>HTML DOMの操作などを行う言語</dd>
    <dt>ReactJS</dt>
    <dd>Facebook製のJSフレームワーク</dd>
  </dl>
</div>

## Blockquotes
ブロッククォートは、引用を識別するために使用されます。

```html
<p>荀子は言います。</p>
<blockquote>終身の楽しみありて、一日の憂いなし</blockquote>
```

<div class="html">
  <p>荀子は言います。</p>
  <blockquote>終身の楽しみありて、一日の憂いなし</blockquote>
</div>

## Headings
見出しには`<h1>`から`<h6>`までの 6 段階があり、`<h1>`は最も重要な見出しです。
