はじめに

語源と用例で分かる HTML タグ辞典 は こんな本です

こんな人に向けて書きました

• Web サイト制作などで HTML を書くが、細かいタグ選びには迷う人
• 人に HTML を教えることがあるが、細かい説明をするのが大変な人
• <ul> の u が unordered の u だと知って笑ったことがある人

これは書きませんでした

• Web 制作での使いどころがあまり思いつかなかった HTML タグの説明
• 沢山ありすぎるフォーム関連の HTML タグの説明
• どんな CSS を使ったら素敵な見た目にできるかの説明

これは許してください

• 例示したサイトは 2020 年 1 ~ 2 月のもので、現在とは異なる場合があります。
• 例示した HTML の一部は断りなく省略されていることがあります。
• タグによって語源には諸説あり、懸命に調べましたが誤りがある場合があります。

主に参考にしたサイトはこれです

• MDN web docs https://developer.mozilla.org/ja/
• Weblio 英和辞書 https://ejje.weblio.jp/

手に取っていただいたあなたへ

本書は、Web コーダーの新人教育を行う中で「どうやったら自分の HTML タグ選 びの好みを伝授できるのか」を考える中で生まれました。

より良い HTML を考えたいあなたにも、考えたくないあなたにも、本書が HTML を考えるきっかけのひとつになりますように。

2020 年 2 月某日 柏木みらる

第1章 たいてい文章の中で使うもの

文章のまとまりの中の一部分のテキストに意味・役割付けをする HTML タグ。
そのほとんどが、初期値が display:inline; の要素。

ハイパーリンク(以下 : リンク)を作成する HTML タグ。地点と地点をつなぎとめる錨のイメージ。別のページ・ページ内の別の場所・ファイル・メールアドレス・電話番号などへのリンクを作成するために使う。

例

https://techbookfest.org/event/tbf08

<a _href="https://blog.techbookfest.org/2019/12/20/tbf08-sponsor/">技術書典8 のスポンサー申込受付を開始しました!</a>

https://toyota.jp/

<a class="clicktag" href="≪中略≫" target="_self">
<div>
  ≪中略≫
  <span>踏み間違い加速抑制システム</span>
  <span>今ならお得に装着できます!今お乗りのクルマに装着できる安全サポートシステム。万が一の踏み間違いに備えませんか?</span>
</div>
</a>

<a href="mailto:example@example.com">メールでのお問い合わせ</a>

https://www.japanet.co.jp/shopping/i/sp/sp-index.html

<a href="tel:0120441202">≪中略≫</a>

https://www.aichi-toyota.jp/carlineup

<a href="#carlist-body-item-8"><span>ビジネスカー</span></a>

他と区別したいテキストを表す HTML タグ。重要(strong)でもなく、強調(em)したいわけでもなく、意味はないが他と区別したいだけのテキストのために使うタグ。
<span> で事足りるため、あまり使われていない。

例

https://www.epress-iflag.jp/lp/

<h2>ホームページ<b>制作実績</b></h2>

改行を生成するための HTML タグ。<p> などの文章のブロックの中で、行を分割したいときに使う。

例

https://liginc.co.jp/recruit/393218

<td>
スキル・経験・実績により決定(400万円~800万円程度)<br>
査定年2回/賞与年2回(夏季・冬季)
</td>

強調したい言葉に使う HTML タグ。重要なものではなく、読み上げるときに強調して読む(アクセントをつける)ような言葉に使う。

例

https://rinkus.jp/

<p><em>平日のお仕事の後でも</em><br>ご相談に回答致します!</p>

<p><em>私は</em>リンゴが好きです</p>

<p>私は<em>リンゴ</em>が好きです</p>