HOME / ブログ一覧 / HTML5のテキスト関連タグまとめ

カテゴリーを表示するボタンもっと見る

カテゴリーを非表示するボタン閉じる

HTML5のテキスト関連タグまとめ

HTML5を基礎から体系的に学ぼうと決めて学習をはじめました。
手にした教科書の一番はじめの項目はテキスト関連のタグについてでしたが、正直「こんなの感覚でわかるよー」なんて思っていたのですが、正しい意味を知らないタグがとても多かったです。

これまでは、例えばテキストに下線をつけたければ「underの”u”でいいんじゃない！？」とか、
太字で強調したければ「boldの”b”でいいんじゃない！？」といった感じでなんとなくタグをつけていたのですが。
これを機会に正しい知識を覚えようと思いました。

・・・

・・・

・・・・・・覚えられん！！

ということで、自分のためでもありますが、HTML5のタグの意味についてまとめました！

HTML5タグ一覧

p要素

p要素は１つの段落（paragraph）を表す要素。

[サンプル]
<p>これからHTML5の学習を初めていきます。</p>

[表示]
これからHTML５の学習を初めていきます。

a要素

a要素にhref属性を指定すると、そのa要素の要素内容がリンク（ハイパーリンク）になる。
href属性は必須ではないが、href属性を指定していない状態では、それ以外の属性も指定できない。

[サンプル]
<a href=“https://cototabi.com/”>こちら</a>が私が運営しているブログです。

[表示]
こちらが私が運営しているブログです。

em要素

強調されている部分を表すための要素。

[サンプル]
HTML5で重要なのは<em>正確なタグの意味</em>を知っていることだ。

[表示]
HTML5で重要なのは正確なタグの意味を知っていることだ。

strong要素

「重要」「重大」「緊急」「深刻」のいずれかを示す要素。

[サンプルコード]
これは<strong>重大な問題</strong>ですよ！

[表示]
これは重大な問題ですよ！

blockquote要素

引用してきた文章ということを示す。ブロックレベル要素。（q要素と対で覚える）

[サンプルコード]
かの夏目漱石の名作にこう著されている。
<blockquote>
我輩は猫である。名前はまだない。
</blockquote>

[表示]
かの川端康成の名作にこう著されている。

トンネルを抜けたらそこは雪国だった。

q要素

引用してきた文章であることを示す。インラインレベル要素。（blockquote要素と対で覚える）

[サンプルコード]
ドラゴンボールの名セリフといえば悟空の<q>クリリンのことかー！</q>ですよね。

[表示]
ドラゴンボールの名セリフといえば悟空のクリリンのことかー！ですよね。

cite要素

創作物の出典・出所を表すための要素。

[サンプルコード]
JR常磐線　亀有駅には<cite>こちら葛飾区亀有公園前派出所</cite>の登場人物のオブジェがたくさんあります。

[表示]
JR常磐線　亀有駅にはこちら葛飾区亀有公園前派出所の登場人物のオブジェがたくさんあります。

mark要素

テキストの一部を参照しやすいように目立たせるための要素。

[サンプルコード]
HTML5で重要なのは<mark>コンテンツ・モデルと正しいタグの意味</mark>となります。

[表示]
HTML5で重要なのはコンテンツ・モデルと正しいタグの意味となります。

small要素

印刷物であれば、小さな文字で欄外に記載されているような注記項目を示す。
copyright、免責事項、警告、法的規則、帰属、など。

[サンプルコード]
<small>Copyright © 2018 WEBたび All Rights Reserved.</small>

[表示]
Copyright © 2018 WEBたび All Rights Reserved.

data要素

テキストと同時に、機械可読形式にしたデータも同時に提供するための要素。valueが必須属性。

[サンプルコード]
佐藤園<data value=“JAN:1234567890”>よーい、お茶</data>が発売された！

[表示]
佐藤園よーい、お茶が発売された！

time要素

日時を表すテキストと同時に、機械可読形式にしたデータも同時に提供するための要素。datetimeが必須属性。

[サンプルコード]
<time datetime=“2018-10-03”>昨日</data>が誕生日だった！

[表示]

abbr要素

その部分が略語であることを示す。

[サンプルコード]
あーあ、昨日も<abbr title=“結婚活動”>婚活</abbr>がうまくいかなかったなぁ。

[表示]
あーあ、昨日も婚活がうまくいかなかったなぁ。

dfn要素

その部分が定義の対象となっていることを示す。

[サンプルコード]
<dfn>HTML5</dfn>はW3Cが定義している。

[表示]
HTML5はW3Cが定義している。

b要素

その範囲のテキストに特別な意味合いを持たせることなく、実用的な目的で目立つようにさせるための要素。

[サンプルコード]
ブログを書きはじめて<b>サンプルコードを考えるのは大変だなぁ、</b>と思った。

[表示]
ブログを書きはじめてサンプルコードを考えるのは大変だなぁ、と思った。

i要素

I要素は、その範囲のテキストが違う性質のものに切り替わっていることを表すための要素。

[サンプルコード]
日本の人気漫画のるろうに剣心は、海外では<i>Samurai-X</i>という題名で知られています。

[表示]
日本の人気漫画のるろうに剣心は、海外ではという題名で知られています。

s要素

すでに正しい情報ではなくなった部分、関係のない情報になってしまった部分を示す要素。

[サンプルコード]
本日限りの大特価！<s>2980円</s> 980円

[表示]
本日限りの大特価！2980円 980円

u要素

読み上げられたのを音声で聞いてもわからないが、表示上は明確に示される、テキスト以外による注釈のつけられた範囲をあらわすための要素。
中国語でテキストが固有名詞である場合や、スペルミスの箇所を示す場合に用いるが、一般的なWEBページではほとんど用いられていない。

[サンプルコード]
Hello!<u>Warld</u> !

[表示]
Hello!Warld !

bdo要素

要素内容のテキストを左から右へと表示するのか、右から左へと表示するのかを、グローバル属性であるdir属性を用いて設定する要素。

bdi要素

Unicodeの双方向（bidirectional）アルゴリズムの影響を受けないようにするために、特定の範囲のテキストだけを意図的に分離・独立（isolate）させる要素。

[サンプルコード]

  • ユーザー名<bdi>明子</bdi>: 10posts.
  • ユーザー名<bdi>ミキティ</bdi>: 13posts.
  • ユーザー名<bdi>صبرينة</bdi>: 7posts.

[表示]

  • ユーザー名明子: 10posts.
  • ユーザー名ミキティ: 13posts.
  • ユーザー名صبرينة: 7posts.

pre要素

その要素内容が整形済み(preformatted)であることを示す要素。
ソースコードやアスキーアートの表示、メールの内容を掲載する際などに使用される。

[サンプルコード]
<pre>
<code class=“language-css”>
h1 {
color: white;
background-color: blue;
}
</code>
</pre>

[表示]


h1 {
    color: white;
    background-color: blue;
}

code要素

その部分がコンピュータで使用されるソースコードデアあることを示す要素。

[サンプルコード]
<pre>
<code class=“language-css”>
h1 {
color: white;
background-color: blue;
}

</pre>

[表示]
<pre>
<code class=“language-css”>
h1 {
color: white;
background-color: blue;
}
</code>
</pre>

kbd要素

その部分がユーザーが入力する内容であることを示す要素。

[サンプルコード]
次に<kbd>F5</kbd> キーを押してください。

[表示]
次にF5キーを押してください。

samp

その部分がコンピューターのシステムやプログラムから出力されたもの、またはそのサンプルであることを示す。

[サンプルコード]
次に<kbd>F5</kbd> キーを押してください。

[表示]
次にF5キーを押してください。

var要素

その部分が変数（variablle）であることを示す要素です。

sup要素

その部分が上付き文字（superscript）であることを示す要素。

[サンプルコード]
次に<kbd>F5</kbd> キーを押してください。

[表示]
次にF5キーを押してください。

sub要素

その部分が下付き文字（subscript）であることを示す要素。

[サンプルコード]
次に<kbd>F5</kbd> キーを押してください。

[表示]
次にF5キーを押してください。

br要素

その位置で改行させるための空要素。

[サンプルコード]
我輩は猫である。<br>名前はまだない。

[表示]
我輩は猫である。

名前はまだない。

wbr要素

英単語やURLの途中でも行を折り返すことができるようにする要素。

[サンプルコード]
このタグは通常はあんまり使う機会がないのかな、Hel<wbr>lo!World!こんな感じになります。

[表示]
このタグは通常はあんまり使う機会がないのかな、Hello!World!こんな感じになります。

ins要素

文書に追加した部分を示すために使用する。

[サンプルコード]
この<ins>下線付きで表示されている部分</ins>があとから追加した文章です。

[表示]
この下線付きで表示されている部分があとから追加した文章です。

del要素

文書から削除した部分を示すために使用する。

[サンプルコード]
<del>以前はHTMLの正確なタグなんて知らなくてもいいと思っていました。</del>
いえいえ、そんなことはありません！

[表示]
以前はHTMLの正確なタグなんて知らなくてもいいと思っていました。
いえいえ、そんなことはありません！

まとめ

いかがだったでしょうか？
個人的に今のご時世フレームワークが充実しており、正しいHTMLよりもデザインが重視されているように感じます、、というか僕自身が実際そうでした。
一度こういう風に基本的なタグをまとめて見るのも良い経験になったと思っています。

最後までお読みいただき、ありがとうございました！

ブログ記事一覧へ