こんばんよう。ばななです。
皆さんは普段、何気なくHTMLやCSSをPCでカタカタと打っていると思いますが、読み方ちゃんと合っていますか？
例えば、”width”。ワイズ、ワイドなどと呼んでいませんか？それは間違っています！しまった！という方、ここで改めて読み方を覚えておきましょう！
htmlを触って間も無くの方や、会社内でコーディングをしている方、必見です！

今回は、これだけは覚えておきたい！【前編：HTML（タグ）の読み方】を紹介したいと思います。
後編はCSS（プロパティ）の読み方について紹介しています。こちらもぜひ。

「アンカー エイチレフ」/ anchor hyper reference の 略。
別に読むと” a “は「アンカー」、” href “は「ハイパーレファランス」と読みます。

---

《 使用例 》
〈 ブラウザ上の表示 〉

<a href="#04">リンクリンク</a>

【 alt 】

「オルト」と読みます。
img要素の中に記述される画像の代替となるテキストの情報を表す属性です。

【 br 】

「ブレイク」/ break の 略。
改行する際に使うタグです。ビーアールって読んでた…。

---

《 使用例 》
〈 ブラウザ上の表示 〉

頭の中でおじさんが<br>踊ってる

【 colgroup 】

「カラムグループ」と読みます。
表の縦列をグループ化するタグ。

---

《 使用例 》

〈 ブラウザ上の表示 〉

果物

名前	人気	備考
りんご	☆☆☆☆☆	ゴリラが好むNO.1
バナナ	☆☆☆☆	猿が好むNO.1

<table border="1">
<colgroup span="2" width="100" align="center">
<colgroup width="100">
<colgroup width="150">
<thead>
<tr>
<th>名前</th><th>人気</th><th>備考</th>
</tr>
</thead>

<tbody>
<tr><td>りんご</td><td>☆☆☆☆☆</td><td>ゴリラが好むNO.1</td>
</tr>

<tr>
<td>バナナ</td><td>☆☆☆☆</td><td>猿が好むNO.1</td>
</tr>
</tbody>

</table>

【 dir 】

「ディレクトリ」と読みます。
リストを表示するタグ。
html5では廃止されました。
なので、” ul “に置き換えることを推奨されています。

---

《 使用例 》
〈 ブラウザ上の表示 〉

<dir>
<li>チューリップ</li>
<li>バラ</li>
<li>さくら</li>
</dir>

▼
〈 ブラウザ上の表示 〉

<ul style="list-style-type: square">
<li>チューリップ</li>
<li>バラ</li>
<li>さくら</li>
</ul>

【 em 】

「エンファシス」 / emphasis の 略。
強勢する箇所を表す要素です。

---

《 使用例 》
〈 ブラウザ上の表示 〉

フィリピン産のバナナはとてもおいしいです。そして、夏は皮をむいて<em>凍らせて食べる</em>と、ひんやりとしておいしいです。

【 h 】

「エイチ・ヘッダー」/ heading の 略。
見出しを付けるタグ。

---

《 使用例 》
〈 ブラウザ上の表示 〉

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>

【 <img src=””> 】

「イメージソース」/ image source の 略。
画像を挿入する際に使用するタグです。

---

《 使用例 》
〈 ブラウザ上の表示 〉

<img src="../images/applebanana.jpg">

【 ins 】

「インサート」と読みます。
追加された部分であることを示すタグ。

---

《 使用例 》
〈 ブラウザ上の表示 〉

新しいお店オープンしました！
<ins title="新店舗紹介" datetime="2016-08-09T14:25:00+09:00">
new open
</ins>

【 li 】

「リスト」と読みます。
リストの項目を記述するタグ。

---

〈 ブラウザ上の表示 〉

<ul type="disc">
<li>パパイヤ</li>
<li>マンゴー</li>
<li>ココナツ</li>
<li>かき氷</li>
<li>イチゴ味</li>
</ul>

【 ol 】

「オーエル・オーダーリスト」と読みます。
順序のあるリストを表示するタグ。

---

《 使用例 》
〈 ブラウザ上の表示 〉

<h3>ホットケーキの作り方</h3>
<ol type="1">
<li>ホットプレートを温める</li>
<li>ホットケーキミックスと卵と牛乳とバターと砂糖を混ぜる</li>
<li>ホットプレートの上で焼く</li>
<li>両面焼いたら、生じゃないことを確認する</li>
<li>バターやお好みでフルーツソースを添えたら、完成</li>
</ol>

<h3>ホットケーキの作り方</h3>

<ol type="a">
<li>ホットプレートを温める</li>
<li>ホットケーキミックスと卵と牛乳とバターと砂糖を混ぜる</li>
<li>ホットプレートの上で焼く</li>
<li>両面焼いたら、生じゃないことを確認する</li>
<li>バターやお好みでフルーツソースを添えたら、完成</li>
</ol>

【 optgroup 】

「オプショングループ」と読みます。
セレクトボックスの選択肢をグループ化するタグ。

---

《 使用例 》
〈 ブラウザ上の表示 〉

<form action="cgi-bin/formmail.cgi" method="post">
好きな動物は？：
<select name="monkeygorilla">
<optgroup label="monkey">
<option label="チンパンジー" value="chim">チンパンジー</option>
<option label="シャマン" value="sia">シャマン</option>
<option label="ボウシテナガザル" value="cap">ボウシテナガザル</option>
<option label="シロテテナガザル" value="whi">シロテテナガザル</option>
<option label="カニクイザル" value="club">カニクイザル</option>
</optgroup>
<optgroup label="gorilla">
<option label="ニシゴリラ" value="gorilla">ニシゴリラ</option>
<option label="ヒガシゴリラ" value="berin">ヒガシゴリラ</option>
<option label="マウンテンゴリラ" value="beringei">マウンテンゴリラ</option>
<option label="ニシローランドゴリラ" value="gorigori">ニシローランドゴリラ</option>
<option label="ブウィンディゴリラ" value="ssp">ブウィンディゴリラ</option>
</optgroup>
</select>
<input type="submit" value="送信"><input type="reset" value="リセット">
</form>

【 p 】

「パラグラフ」/ paragraph の 略。
ひとつの段落を表すタグです。
「ピー」と読まれることもあります。

---

《 使用例 》
〈 ブラウザ上の表示 〉

<p>
奈良の鹿は人懐っこいけ、せんべい目掛けて襲いかかってくるでこわいな〜。
</p>

【 q 】

” p ” ではありません。
「クォート」 / quotation の 略。
引用・抜粋であることを表すタグです。

---

《 使用例 》
〈 ブラウザ上の表示 〉

<q>地球は青かった</q>は、ユーリイ・ガガーリンの言葉です。

実行ボタンを押した後、
<samp>処理が完了しました。</samp>
というメッセージが画面に表示されるまで、しばらくお待ちください。

【 テーブルを作成するタグ 】

---

【 tr 】

「ティアール・テーブルロウ」と読みます。
テーブル（表）の横方向の一行を定義するタグ。

【 th 】

「ティエイチ・テーブルヘッダー」と読みます。
テーブル（表）の見出しセルを作成するタグ。

【 td 】

「ティディ・テーブルデータ」と読みます。
テーブル（表）のデータセルを作成するタグ。

---

《 使用例 》
〈 ブラウザ上の表示 〉

<table border="1" width="500" cellspacing="0" cellpadding="5">

<tr>
<th>味</th>
<th width="350">説明</th>
<th width="350">色</th>
</tr>

<tr>
<td align="right" nowrap>イチゴ味</td>
<td valign="top" width="350">甘酸っぱい</td>
<td valign="top" width="350">ピンク</td>
</tr>

<tr>
<td align="right" nowrap>レモン味</td>
<td valign="top" width="350">さっぱり</td>
<td valign="top" width="350">イエロー</td>
</tr>

</table>

【 u 】

「ユー・アンダーライン」と読みます。
テキストに下線（アンダーライン）を引くタグ。

---

《 使用例 》
〈 ブラウザ上の表示 〉

バナナは<u>おいしい</u>です。

【 ul 】

「ユーエル・アンオーダードリスト」と読みます。
順序のないリストを表示するタグ。

---

《 使用例はこちら 》

今回は、特に読み間違いが多いものや読みにくいタグを抜粋してご紹介しましたが、いかがだったでしょうか？

PCの中では、読めなくても使えればいいものですが、よく使うものは特に知っておいた方がよいかな、と思いました。
私は、実際に読み間違いをして、恥ずかしい思いを経験した苦い思い出があります。情報系の専門学校に通っていますが、周りにも私と同じく間違って読んでいる人が多くいるなあ、と少し安心してしまったり…ww
さらに、今回調べた結果、社会人の方でも読み間違いをして恥ずかしい経験をした方も少なくないことを知り、驚きました。
後編ではCSS（プロパティの読み方をいくつか紹介しています。
後編に続きます！
少しでも、みなさんのお役に立てれば嬉しいです！