HTML 特殊タグについて

トモジ

HTMLの特殊なタグって
どんなのがあるの・・・？

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、特殊タグに関して要点をわかりやすく説明しております。

HTML 特殊タグについて

bodyタグ内に記述するタグに関して、
使用頻度があまり高くないが覚えておきたいタグについて順番に説明していきます。

codeタグ

codeタグは、ソースコードをユーザーや検索エンジンにわかりやすく表記するタグになります。

また、CSSで装飾することでよりユーザーにわかりやすくできます。

<p>背景色の変更は<code>{background-color: 色指定;}</code>と書きましょう。</p>

code {
  display: inline-block;     /* ボックスの並びを変更 */
  padding: 0.1em 0.5em;      /* 文字周りの余白 */
  color: #333333;            /* 文字色 */
  background-color: #F7F7F7; /* 背景色 */
  border-radius: 3px;        /* 角丸 */
  border: solid 1px #DEDEDE; /* 枠線 */
}

rubyタグ・rtタグ・rpタグ(ルビをふる)

ルビとは、文章内の任意の文字に対し、
ふりがなや説明・異なる読み方といった
役割の小さな文字で表記されるもの

rubyタグは、
ルビをふりたい部分にrubyタグで囲み
ルビのふりがなとして表示する箇所を
rtタグで囲みます。

ルビに未対応の環境では横並び表示になってしまうので、カッコ付き表示にするためにrpタグも使用します。

<p>
<ruby>
  tomoji
  <rp>(</rp>
  <rt>ともじ</rt>
  <rp>)</rp>
</ruby>
</p>

supタグ(上付き文字)・sub(下付きタグ)

supタグやsubタグは、数学や化学式などでよく使用される小さい文字などを使用したい場合に必要になるタグです。

<p>
  <span>sup(上付きタグ) : </span>
  E=mc<sup>2</sup>
</p>
<hr>
<p>
  <span>sub(下付きタグ) : </span>
  CO<sub>2</sub>
</p>

smallタグ(注釈や著作権の表示)

smallタグは、小さな文字で表示され
注釈や著作権関係を表すために使用されます。

一般的にはページの最下部付近にある
Copyright表記の部分で使用されます。

<footer>
  <p>
    <small>&copy; 2020 tomoji</small>
  </p>
</footer>

blockquoteタグ(長い引用文を表す)

blockquoteタグは、長い引用文であることを示し
文章の段落などのまとまった単位で引用する場合に使用します。

blockquoteタグに関して

<p>※※※※※※※※※※※※※※※※</p>
<blockquote>
<p>
○○○○○○○○○○○○○○○○○○○○○○○○○○○<br>
××××××××××××<br>
△△△△△△△△△△△△△△△△△△△△△△
</p>
</blockquote>

画面表示

abbrタグ(略語を正式な言葉で補足する)

abbrタグは、
その部分が略語であることを示す要素です。

title属性に正式名称を記入することにより、
略語付近にカーソルを合わせると
正式名称が表示されます。

<p>
  ※HTMLにカーソルを合わせ数秒お待ちください<br>
  <abbr title="HyperText Markup Language">HTML</abbr>はコーディングでありプログラムではありません。
</p>

markタグ(ハイライトで目立たせる)

テキスト文をmarkタグで囲うと、黄色の蛍光ペンでラインを引いたような表示になります。

<p>
  HTMLは<mark>コーディング</mark>です。
</p>

まとめ

最後にこの記事のポイントをまとめておきます。