HTML 入門
基本的なタグをマスターしよう
特殊文字を表示する
HTMLでは <p>
のようにタグで文書の構造を記述するので,<
や >
という文字を本文にそのまま使用すると,それらがタグとして認識されてしまいます.したがって,<
や >
などの特殊文字を本文で表示するにはエスケープ処理が必要になります.
<
を本文中で表示するには <
と入力します.>
を本文中で表示するためには >
と入力します.
index.html(抜粋)
<p>
本文中で < や > を表示させたい.
</p>
ブラウザでの表示結果
本文中で < や > を表示させたい.
つまり,&
文字を使ってエスケープ処理を行うことから,やはり &
自体を表示させる場合もエスケープ処理が必要です.&
を表示するためには HTML で &
と入力します.
index.html(抜粋)
<p>
本文中で & を表示させたい.
</p>
ブラウザでの表示結果
本文中で & を表示させたい.
主なエスケープ記号を表にまとめておきます.
入力 | 表示 | 説明 |
---|---|---|
< | < | 不等号記号 (Less Than) |
> | > | 不等号記号 (Greater Than) |
& | & | アンドマーク(アンパサンド: AMPersand) |
" | " | ダブルクォート (double QUOTe) |
' | ' | シングルクォート (APOStrophe) |
| 空白文字(ただし改行を認めない: Non-Breaking SPace) |
上の表で
は改行を認めない空白文字です.PC の場合は Web ブラウザの横幅を変更して,下の表示結果が「xyz」と「xyz」の間では改行されないことを確認してください.これはたとえば,論文での参考文献リストなどにおいて「Vol. 1, No. 5, pp. 123-128 (2021)」を「Vol. 1, No. 5, pp. 123-128 (2021)」と入力することで,ピリオドと数字の間では改行されない「Vol. 1, No. 5, pp. 123-128 (2024)」のような表示を実現したいときなどに利用できます.
index.html(抜粋)
<p>
ab abc ab abc ab abc ab ab abc xyz xyz ab abc ab xyz xyz ab xyz xyz ab abc abc abc abc abc xyz xyz abc ab xyz xyz ab abc ab abc ab ab abc xyz xyz ab abc ab xyz xyz ab xyz xyz ab abc abc abc abc abc xyz xyz abc ab xyz xyz abc 本文中で改行を認めない空白文字 を表示させたい.本文中で改行を認めない空白文字 を表示させたい.「xyz」と「xyz」の間だけは改行を認めたくない状況です.
</p>
<p>
著者名,論文名 論文名 論文名,雑誌名 雑誌名 雑誌名 雑誌名,Vol. 1, No. 5, pp. 123-128 (2021).ピリオドの直後で改行されないことに注意してください.
</p>
ブラウザでの表示結果
ab abc ab abc ab abc ab ab abc xyz xyz ab abc ab xyz xyz ab xyz xyz ab abc abc abc abc abc xyz xyz abc ab xyz xyz ab abc ab abc ab ab abc xyz xyz ab abc ab xyz xyz ab xyz xyz ab abc abc abc abc abc xyz xyz abc ab xyz xyz abc 本文中で改行を認めない空白文字 を表示させたい.本文中で改行を認めない空白文字 を表示させたい.「xyz」と「xyz」の間だけは改行を認めたくない状況です.
著者名,論文名 論文名 論文名,雑誌名 雑誌名 雑誌名 雑誌名,Vol. 1, No. 5, pp. 123-128 (2021).ピリオドの直後で改行されないことに注意してください.