HTMLの主な要素〜初心者だった自分に向けて〜 その③テキストコンテンツ

#HTML・テキストコンテンツ
###はじめに
その①「HTMLの主な要素〜初心者だった自分に向けて〜　その①メタデータ系」はこちら

その②「HTMLの主な要素〜初心者だった自分に向けて〜　その②セクショニングと、主な区分化要素」はこちら

今回の記事にはHTMLの中のテキスト要素、タグについてまとめてあります。

##div要素 `

` この要素はコンテンツを分割するための要素で、その範囲がブロックレベル要素であることだけを表します。他に適切な要素がない場合や、`class`や`id`を使用してスタイル付けをしやすくしたい場合に使用します。
この要素の中には、ブロックレベル要素でもインライン要素でも自由に入れることができます。

記述例

HTML

<div class="warning">
    <img src="/media/examples/frower.jpg"
         alt="花の画像">
    <p>花はとてもきれいです</p>
</div>
~~~


```css:CSS

.warning {
    border: 10px ridge #f00;
    background-color: #ff0;
    padding: .5rem;
    display: flex;
    flex-direction: column;
}

.warning img {
    width: 100%;
}

.warning p {
    font: small-caps bold 1.2rem sans-serif;
    text-align: center;
}
~~~

##hr要素 `<hr>`
この要素は、文章中で話題の変更やテーマの区切りとして横線を表示させるための要素です。<br>
_使用例_

```html:HTML
<p>ぼくは先輩に尋ねた。「hr要素ってなんですか？」。すると先輩は「ヘアラインだ」と答えた。
そしてこう続けた。「ヘアラインが後退する前に嫁をもらったほうがいいという警告のために使用する要素なんだよ」。
ぼくは、「ヘアラインなら"hr"ではなく"hl"じゃないのか？」と疑問に思ったが細かいことを気にするとヘアラインが
後退しそうなので考えるのをやめた。</p>
<hr>
<p>翌週の水曜日、ぼくは先輩の家を尋ねた。釣りにいく約束をしていたからだ。
しかし、何度チャイムをならしても先輩は出てこなかった。帰ろうとした時、後ろから先輩の声が聞こえた。
「約束は明日だろ」。
ぼくは照れ笑いを浮かべながら、「じゃあ、また明日」。と言い残すとそそくさとその場を立ち去った。</p>
~~~

##ul要素 `<ul>`、ol要素 `<ol>`
ul要素は、箇条書きのような形式で順序なしのリストを表す要素です。行頭は○印がデフォルトで、CSSの`list-style-type`で変更できます。
ol要素は逆に、順序付のリストを表します。行頭は１から順の数字になります。
##li要素 `<li>`
リスト内の１項目を表します。<br>この要素は`<ul>`、`<ol>`、`<menu>`のいずれかの子要素として配置する必要があります。

_記述例_

```html:HTML
<p>りんごの品種リスト<p/>

<ul>
    <li>ふじ</li>
    <li>紅玉</li>
    <li>ジョナゴールド</li>
    <li>王林</li>
</ul>
~~~

##p要素 `<p>`
テキストの段落を表す要素です。<br>画像やフォームなどの関連する情報を構造的にまとめることもできます。空の`<p>`要素を使って段落間を空けることは読み上げアプリなど動きを阻害することがあるので推奨されません。段落間を空けたいときはCSSの`margin`などを使用するのが一般的です。<br>また、改行のためにこの要素で区切ることもよくありません。`<br>`をいれることによって同じテキスト内での改行を行うことができます。

_記述例_

```html:HTML
<p>こんにちは、田中です。ご無沙汰しております。<br>
今回こうして手紙を送ったのは、結婚の報告がしたかったからです。いまぼくは幸せです。</p>
~~~