HTML - Entities
こんにちは、未来のウェブ開発者たち！あなたの近所の親切なコンピュータ教師として、私はHTMLエンティティの興味深い世界にあなたを案内することを楽しみにしています。プログラミングが初めてでも心配しないでください。基礎から始めて、少しずつ進めていきます。このチュートリアルの終わりには、あなたはHTMLエンティティの専門家になるでしょう！
HTMLエンティティとは？
まず、HTMLエンティティが何かを理解しましょう。これらは、HTMLでは表示が難しい文字を表す特別なコードだと思ってください。まるでウェブページのための秘密の言語のようです！
なぜHTMLエンティティが必要か？
例えば、HTMLで小于記号（<）を表示したいとします。そのまま直接入力すると、ブラウザは新しいHTMLタグの始まりと間違えるかもしれません！ここでエンティティが救世主的な役割を果たします。これにより、特別な文字をブラウザを混乱させずに表示することができます。
HTMLキャラクターエンティティの名前とコード
では、最も一般的なHTMLエンティティのいくつかを見てみましょう。名前と数値コードの両方を確認します。
| 字符 | エンティティ名 | 数値コード |
|---|---|---|
| < | < | < |
| > | > | > |
| & | & | & |
| " | " | " |
| ' | ' | ' |
これらを実践で見てみましょう：
<p>I love to use <strong> tags to make text <strong>bold</strong>!</p>
<p>The ampersand symbol (&) is used for HTML entities.</p>この例では、<と>を使って実際のタグを表示し、&を使ってアンパサンドを表示しています。これらのエンティティを削除して、何が起こるかを試してみてください！
HTML非改行スペースの名前とコード
次に、非常に便利な特別なエンティティについて話しましょう：非改行スペース。
| 字符 | エンティティ名 | 数値コード |
|---|---|---|
| (スペース) |
非改行スペースは、スーパーヒーロースペースのように、不要な行ブレを防ぎます。例えば：
<p>I love HTML entities!</p>これにより、「HTML」と「entities」が常に同じ行に留まります。
HTMLエンティティの例
知識を試してみましょう：
<p>I'm learning HTML & it's <em>amazing</em>!</p>
<p>Copyright © 2023 by John Doe</p>この例では、&を使ってアンパサンドを表示し、<と>を使って<em>タグを表示し、©を使って著作権シンボルを表示し、 を使って「John」と「Doe」を一緒に保持しています。
ISO 8859-1シンボルエンティティの名前とコード
HTMLはさまざまなシンボルのためのエンティティも提供しています。以下は一般的なものです：
| シンボル | エンティティ名 | 数値コード |
|---|---|---|
| © | © | © |
| ® | ® | ® |
| ™ | ™ | ™ |
| € | € | € |
| £ | £ | £ |
これらを実践で見てみましょう：
<p>Our company, Web Wizards™, accepts payments in € and £.</p>
<p>All content is © 2023 Web Wizards®.</p>ISO 8859-1キャラクターエンティティの名前とコード
時折、アキュートや他のdiaskeu marksを持つ文字を表示する必要があります。HTMLエンティティが再び助け舟を出します：
| 字符 | エンティティ名 | 数値コード |
|---|---|---|
| à | à | à |
| é | é | é |
| ñ | ñ | ñ |
| ü | ü | ü |
以下のように使用します：
<p>In Spanish, "hello" is "hola" and "goodbye" is "adiós".</p>
<p>The French word for "beach" is "plage" (pronounced "plâzh").</p>ブラウザでサポートされている他のエンティティ
現代のブラウザは、数学記号、矢印、甚至是顔文字など、広範なエンティティをサポートしています。以下是一些楽しいもの：
| シンボル | エンティティ名 | 数値コード |
|---|---|---|
| ∞ | ∞ | ∞ |
| ♥ | ♥ | ♥ |
| → | → | → |
| ☺ | ⌣ | ☺ |
これらを使って遊び心のあるメッセージを作成しましょう：
<p>I have ∞ love for HTML! ♥</p>
<p>Let's move forward → and keep learning! ⌣</p>これらのエンティティは楽しいですが、適切に使用することが重要です。エンティティの過剰使用は、HTMLの読みやすさと保守性を損なう可能性があります。
結論
おめでとうございます！あなたはHTMLエンティティの世界に深く飛び込んだばかりです。特別な文字の表示から楽しいシンボルの追加まで、あなたはウェブ開発ツールボックスに強力なツールを手に入れました。
このまとめとして、私の教え子の一个小さなエピソードを共有します：ある生徒がアンパサンドがウェブページから消えることにイライラしていました。HTMLエンティティを見せると、彼の顔は宝を発見したかのように輝きました。学習の魔法は、常に解決策が見つかることです！
忘れないでください、練習は完璧を生みます。これらのエンティティをHTMLプロジェクトに取り入れてみて、すぐに第二の自然になるでしょう。ハッピーコーディング、そしてあなたのウェブページが完璧にレンダリングされた文字とシンボルでいっぱいになることを願っています！
Credits: Image by storyset