文字

単語を定義したい時に便利なHTMLタグまとめ1
公開:2019.08.04 更新:2019.09.10

どうもこんにちは!らいどらです。

今回はテキストの一部につけることもある、便利なタグの紹介です。私が知ったときは思っているより多くて驚きました(小学生並み感想文)

ちなみに本章の環境は全てHTML5です。それでは、どんどん見ていきましょう!

強調、重要性を表すタグ

<em>(エンファシス)

強調したいテキストの意味付けに使う。出力後は斜体となる。

<strong>

重要度を示すときに使う。出力後は太字となる。

<b>

強調や重要などの意味は表さず、特別なテキストを意味するタグ。出力後は太字となる。

<mark>

目立たせたい単語に使うタグ。出力後はハイライトされる(蛍光ペンのような感じ)

上記が強調系のタグになります。上二つは分かりやすいですが、bタグがややこしいですね。上記の仕様になったのはHTML5かららしいですが、5は基準作り過程で様々な変化があったと言われていますからね。少し複雑なタグも増えてしまったようです。

ただbタグの使用例としては、商品名やサービス名など、ページの主役となる単語に使う、ということが多いようです。

注意の意や異質なテキスト

<u>

ニュアンスが伝わりにくい単語や、あえて違う意味で使った単語などにつける。出力後は下線が付く。

例:これはスペルミスしています。(正解:apple)

<u> appel</u>

<i>

他の単語より位置づけの違う単語などに使う。出力後は斜体となる。

例:専門用語など

この場合iタグの、”意味がずれているような単語にタグを使う”ということが印象的でした。uタグは私的な意見で言うと、あまり小説とか読まない人には分かりづらかったりするのかな?と思いました。

引用を表すタグ

<cite>(サイト)

作品名などを引用する場合出したりするときに使う。出力後は斜体となる。

<q>(クォート)

作品名に使う上記とは対照的に、文単位での引用に使う。出力後はかぎかっこ(「」)で囲まれる。

上の方に比べたら分かりやすくなってきました。ていうか難しい方を後にするべきなんじゃ…..という心の声は置いといて、それこそ引用はいろんなサイトで使われている印象があります。

なにか文章などで人の心を動かすようなサイトならよく使うのかも?と思いました。

記述とは別の意味がある単語

<dfn>(ディフィニション)

サイト内で定義される定義語を表す。dfnタグ内にtitle属性のに入力した単語が対象の定義語として扱われる。単体での出力は特にない。

例 <p>このサイトは<dfn title=”らいどらが交わす言の葉”>木彫り語</dfn>で書かれています。</p>

abbr(アブリヴィエーション)

指定した単語が略称であることを示す。dfnの子要素として書くと出力後はtitle属性に入力した正式名称がカーソルオンで見れるようになる。

例 <dfn><abbr title =”空気読める人いますかね”>KYI</abbr></dfn>

定義も文章内に意味づけすることが出来たんですね。名前長いですがabbrは使い勝手良いなと思いました。….もしやabbrも略称なのか……..?

まとめ

予想以上に種類があったので今回はここでいったん辞めです。いやはや、初めて見たときも思いましたがタグにここまで細かい役割があるとか聞いてないよっ!って感じですね。そしてまだまだあるという事実…….。

救いがあるとするなら、次回の紹介はほぼ装飾メインなものが多いことでしょうか……。でも気を取り直して頑張りましょう!と独り言を言う木彫りなのでした。

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。