【初心者向け】HTMLタグを表示する簡単な方法



【初心者向け】HTMLタグを表示する簡単な方法
目次
  1. 特殊文字用いたタグ表示
  2. 特殊文字を表示するコード
  3. まとめ

ITエンジニアとして勤務をしていると避けて通れないのが技術のアウトプット。職場のテックブログの記事執筆などで、ソースコードを公開する場が少なからずあるはずです。

ここで問題になるのが、HTML言語。ブログのシステム側で処理されている場合は別として、HTMLのソースコードをそのまま貼り付けても表示することはできません。何故なら、ソースコードに書かれたHTMLタグをブラウザが解釈して、表示処理を行ってしまうからです。

例えば、下記のようなソースコードを貼り付けるとします。

<section>
    <h1>ここは記事のタイトルです</h1>
    <p>ここには本文を記載します</p>
</section>

これをシステム側で処理を行っていないブログなどに貼り付ければ、ブラウザがHTMLタグを解釈して表示処理を行ってしまう為に下記のような表示になるはずです。

ここは記事タイトルです

ここには本文を記載します

これを回避する為に、特殊文字という概念が定義されています。

特殊文字用いたタグ表示

文字コードの違いなどにより表示できない一部の文字や、前述のようにタグの一部として処理されてしまいブラウザ上で非表示となる文字列を特殊文字と呼びます。

実際に特殊文字を用いてソースコードを表示してみましょう。

&lt;section&gt;
    &lt;h1&gt;ここは記事のタイトルです&lt;/h1&gt;
    &lt;p&gt;ここには本文を記載します&lt;/p&gt;
&lt;/section&gt;

このソースコードを実際にブラウザを通してみてみると下記のようになります。

<section>

<h1>ここは記事のタイトルです</h1>

<p>ここには本文を記載します</p>

</section>

後述しますが、特殊文字に対応した文字列が定義がされていて、この文字列を記述することで特殊文字が表示されます。今回の場合はそれぞれの特殊文字を下記のような文字列に置き換えることでブラウザでも表示されるようにしました。

  • <&lt; に変換
  • >&gt; に変換

※ 厳密には文字実体参照と呼ばれる方法ですが、今回は初心者向けなので特殊文字の表示で用語を統一させていただきます。

特殊文字を表示するコード

上記の他にも様々な特殊文字があります。ここでは、よく使われる特殊文字と対応文字列の紹介をします。他にも様々な特殊文字がありますので、是非とも検索してみてください。

特殊文字 文字列 補足
< &lt; 大なり記号
> &gt; 小なり記号
& &amp; アンバーサンド
" &quot; ダブルクォート
&nbsp; 半角スペース
© &copy; コピーライト記号
° &deg; 度単位
® &reg; 商標記号

まとめ

HTMLのソースコードを表示するというテーマで特殊文字を紹介させていただきましたが、様々な場面で特殊文字を使う画面があると思います。どのような特殊文字があるのかを把握して、是非とも実務で役立ててください。

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp