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

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

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

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

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

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

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

エスケープ処理とは?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


プログラミングやパソコンを使って働きたい!

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください!

\プログラミングを学んで/
人生を変えた3名

インタビュー記事一覧 >

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

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

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

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

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

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

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

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5