テキスト #

HTML文書にテキストを記載、装飾、補足するための要素についてをここでは述べる。

(一部表示例も記載するが、ブラウザ等により表示が異なる場合もあるので注意。)

p要素 #

p要素は、一つの段落を表す要素である。

<p>段落１</p>
<p>段落２</p>

a要素 #

a要素は別URLへのリンクを示す時に使う要素であり、通常はhref属性を指定して利用する。

href属性で遷移先のURLを指定する。

<p><a href="/">ホーム</a></p>

em要素 #

em要素は強調(emphasize)する部分を示すための要素である。入れ子にすることもでき、それにより強調の度合いを強くすることもできる。

<p>ここが<em><em>超</em>タイヘン</em>な箇所だ</p>

表示例

ここが超タイヘンな箇所だ

strong要素 #

strong要素は重要性、重大性、緊急性が高いテキストを示す時に利用する。

この要素も入れ子にして利用することができ、重要性の度合いを強くすることもできる。

strong要素で囲まれた部分は通常太字になって表示される。しかし、ただ太字にするためにこの要素を使うのはやめた方が良い。

<p>左方向は通行可能</p>
<p>右方向は<strong>立入禁止</strong></p>

表示例

左方向は通行可能

右方向は立入禁止

blockquote要素 #

blockquote要素は、その部分が引用してきた要素であることを示す要素である。

引用を示す要素は他にもあるが、blockquote要素はブロックレベル要素(段落や表などをひとかたまりとする要素)であり、例えば複数行に対して適用したい場合などに利用する。

引用元を示したいときはcite属性(及びcite要素)を利用して示す。

<blockquote>
<p>引用文１</p>
<p>引用文２</p>
<p>引用文３</p>
</blockquote>

表示例

引用文１

引用文２

引用文３

q要素 #

q要素もblockquote要素と同じく、引用してきたことを示す要素である。

q要素はインラインレベル要素として引用文を示す時に使用する。

blockquote要素と同じく、引用元を示したいときはcite属性(及びcite要素)を利用して示す。

<p>
好きな言葉は<q>「まずはやってから考えよう」</q>ですね。
</p>

表示例

好きな言葉は「まずはやってから考えよう」ですね。

cite要素 #

cite要素は、引用元や参照先を示すための要素である。

<p>
<cite>太宰治『ダス・ゲマイネ』</cite>の冒頭は<q>「恋をしたのだ。そんなことは、全く初めてであった。」</q>だ。
</p>

表示例

太宰治『ダス・ゲマイネ』の冒頭は「恋をしたのだ。そんなことは、全く初めてであった。」だ。

mark要素 #

mark要素はある部分を目立たせたいときに使用する要素である。マーカーで線を引くようなもの。

<p>
645年、中大兄皇子が<mark>大化の改新</mark>を行った。
</p>

表示例

645年、中大兄皇子が大化の改新を行った。

small要素 #

small要素は注釈・注記のような、欄外に示すような細かい情報を示すときに使用する要素である。

例としては著作権(Copyright)や免責事項など。

<p>
    以上である。
    <small>©️ 2020 Tatsuroh Wakasugi.</small>
</p>

表示例

以上である。 ©️ 2020 Tatsuroh Wakasugi.

data要素 #

data要素は、要素内のテキスト等に対して、「機械可読データ」を追加したい時に利用する要素である。

要は、プログラムにテキストを読み込ませるとき、実際に表示されるテキストの内容ではなく、別の内容として読み込ませたいときに使用する。

data要素を使うときはvalue属性を必須とする。value属性の値に、機械に使わせる値を入力する。

ただし、日時など時刻に関するデータを扱うときは、data要素ではなく次のtime要素を使った方が良い。

<p>
    私の所持金は<data value="30000">三万円</data>です。
</p>

この場合ブラウザには"三万円"と表示されるが、プログラムがこのページを読み込むときこの箇所は"30000"となる。

time要素 #

time要素は、日時など時刻に関するdata要素である。時刻に関する機械可読データを適用させたい時に使用する。

値に関する属性はvalue属性ではなく、time要素の場合datetime属性である。こちらを利用する。

<p>
    締め切りは<time datetime="2020-05-01T17:30Z">明日の午後5時30分</time>です。
</p>

abbr要素 #

abbr要素は、それが略語であることを示す要素である。略してない、正式名も示したいときはtitle属性を使用する。

<p>
    <abbr title="転職活動">転活</abbr>をいつから始めようか・・
</p>

表示例

転活をいつから始めようか・・

dfn要素 #

dfn要素は、それが定義の対象となっていることを示す要素である。他の文中に何かの定義についての説明がされている時、どれをその定義の説明の対象としているかを示すために用いる。

<p>
    今日は<dfn>昭和の日</dfn>で、昭和天皇の誕生日である4月29日にあてられている日本の国民の祝日である。
</p>

表示例

今日は昭和の日で、昭和天皇の誕生日である4月29日にあてられている日本の国民の祝日である。

b要素 #

b要素は特に意味合いを持つことは無いが、表示として目立たせたい時に利用する要素である。

目立たせたい時の意味がしっかりある場合には、b要素ではなくそれに応じた適切な要素を利用すること。例えば強調ならem要素、緊急・重要性が高い内容ならstrong要素、一部分を目立たせたいならmark要素など。

<p>
<b>b要素</b>は表示として目立たせたい時に利用する。
</p>

表示例

b要素は表示として目立たせたい時に利用する。

i要素 #

i要素も特に意味合いを持つことは無いが、表示として他と区別させたい時に利用する要素である。

他と区別させたい時の意味がしっかりある場合には、i要素ではなくそれに応じた適切な要素を利用すること。例えば強調ならem要素、定義に関することならdfn要素など。

<p>
<i>i要素</i>は表示として他と区別させたい時に利用する。
</p>

表示例

i要素は表示として他と区別させたい時に利用する。

s要素 #

s要素は、既に使われていない、古い情報となった部分を表すための要素である。

<p>
s要素は、<s>既に使われていない情報となった部分</s>を表すための要素である。
</p>

表示例

s要素は、既に使われていない情報となった部分を表すための要素である。

u要素 #

u要素はスペルミスなどの通知をする際に使用する。デフォルトでは下線が引かれる。

他の意味を持つ場合には、u要素ではなくそれに応じた適切な要素を利用すること。

<p>
u要素は、<u>spelu misu</u>を表すための要素である。
</p>

表示例

u要素は、spelu misuを表すための要素である。

bdo要素 #

bdo要素は、要素内の文字表記の方向を上書きする要素である。表記の方向はdir属性を使って指定する。(必ず指定する)

<p>
bdo要素を使って、「<bdo dir="rtl">文字列の表記の方向を右から左</bdo>」へ指定することができる。
</p>

表示例

bdo要素を使って、「文字列の表記の方向を右から左」へ指定することができる。

bdi要素 #

bdi要素は、要素内の文字表記のアルゴリズム(方向)を、ブラウザ全体で利用しているアルゴリズムとは別扱いにさせる要素である。

入力フォームなどから入力した文字を挿入するときなどに利用する。

<ul>
    <li><bdi>リスト</bdi></li>
    <li><bdi>قائمة</bdi></li>
</ul>

表示例

• リスト
• قائمة

pre要素 #

pre要素はその内容の部分が既に整形済み(タブ・スペースなどで整えている)であることを示す要素である。この要素の内容は入力されている通りにそのまま表示される（タブ・スペースなどは弾かれない）

<p>タブ３つ"            "、スペース３つ"   "</p>
<p><pre>タブ３つ"           "、スペース３つ"   "</pre></p>

表示例

タブ３つ" "、スペース３つ" "

タブ３つ"           "、スペース３つ"   "

code要素 #

code要素は、その部分はソースコードであることを示す要素である。

<code>
print("Hello! World!")
</code>

表示例

kbd要素 #

kbd要素は、その部分がユーザーが入力する内容であることを示す要素である。具体的にはキー名を指定する。

次に<kbd>Shift</kbd>キーを押してください。

表示例

samp要素 #

samp要素は、それがプログラムから出力されたもの、またはそのサンプルであることを示す要素である。

<samp>
ダウンロードしています・・
</samp>

表示例

var要素 #

var要素は、それが数式やプログラム内などの変数であることを示す要素である。

<p>
    <var>y</var> = 2<var>x</var>+1
</p>

表示例

y = 2x+1

sup要素 #

sup要素は、上付き文字であることを示す要素である。

<p>
    <var>y</var> = 2<var>x</var><sup>2</sup>+1
</p>

表示例

y = 2x²+1

sub要素 #

sub要素は、下付き文字であることを示す要素である。

<p>
    a<sub>n+1</sub> = a<sub>n</sub>+1
</p>

表示例

a_n+1 = a_n+1

br要素 #

br要素は、改行を表す空要素である。１つ書くたびに１回改行されて表示される。

１１１
２２２
３３３

１１１<br>
２２２<br>
３３３<br>

表示例

１１１
２２２
３３３

wbr要素 #

wbr要素は、英文のテキストをその箇所で折り返して表示させるための空要素である。

通常、英文やURLなどの半角英字で書かれた文は、途中で改行されないようにブラウザが調整して表示してくれるが、このwbr要素を使うとその箇所で改行されて表示してくれる。

This is aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
That is aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>

表示例

ins要素 #

ins要素は、文章に追加された部分であることを示す要素である。

<p>締め切りは木曜日 午後5:00です。</p>
<ins><p>(追記) 金曜日 午後5:00まで延長します</p></ins>

表示例

締め切りは木曜日 午後5:00です。

del要素 #

del要素は、文章中で削除した部分を示すための要素である。

<p>HTML5試験に<del>うっかり</del>合格した。</p>

表示例

HTML5試験にうっかり合格した。