【HTML入門】「&」とは?HTMLのエスケープ処理を解説

2022.11.21
「&」とは?HTMLのエスケープ処理を解説

HTMLのソースコードをそのまま表示させたいときには、HTMLの特殊文字をエスケープ処理させる必要があります。

例えば、「&」を表示させたいときには、「&」という文字列を使いますね。

この特殊な文字列は文字実体参照と呼ばれます。

今回は、この「&」やその他の文字実体参照について解説していきます。

また、「&」という文字列をそのまま記述する方法も紹介しますね。

エスケープ処理とは?

エスケープ処理とは、HTML文書の文字列をそのまま表示させる処理のことです。

例えばHTMLのテキストを<b>タグで囲うとテキストが太字になりますよね。

この機能をなくして、タグをそのまま表示するには、「&lt;b&gt;」と記述する必要があります。

以下に、主なエスケープ処理を紹介します。

  • <(小なり):&lt;
  • >(大なり):&gt;
  • ‘(シングルクォーテーション):'
  • “(ダブルクォーテーション):&quot;

このエスケープ処理は、意図しない挙動を防ぐために行います。

例えば、投稿フォームがあるWebサービスでは、エスケープ処理を施す必要があります。

悪意のあるスクリプトを入力し実行させる、といった攻撃に合う可能性があるためです。

エスケープ処理しておけば、タグが機能しなくなりスクリプトの実行を防ぐことができます。

「&amp;」をそのまま表示させるには?

HTMLの特殊文字をそのまま表示させる方法は分かりましたね。

では、この「&amp;」という文字列をそのまま表示させるには、どうしたら良いのでしょうか?

コード内の「&」を「&amp;」に変換して書くことで、実現できます。

他の文字実体参照も同じように「&」を変換すれば、そのまま表示できますね。

ぜひ試してみてください。

まとめ:特殊文字のエスケープ処理を知ろう

今回は、「&amp;」やその他の文字実体参照を解説してきました。

HTMLの特殊文字をそのまま表示する以外に、Webサービスを作る際のセキュリティ面でも重要になります。

コーディングのみだとエスケープ処理に触れる機会は少ないかもしれませんが、Web制作において大事な知識なので、これを機に学習しておきましょう。

今回の記事が参考になれば幸いです。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2023 WEBCAMP MEDIA Powered by AFFINGER5