Cara menggunakan simbol html lengkap

Ada banyak simbol yang tidak bisa kita ketik secara manual (karena tidak ada di keyboard). Ucapkan seperti simbol sigma ∑, simbol hak cipta ©, mata uang euro €, root √, atau bahkan emoji seperti 😂😬😁😅😆😎

Dalam aplikasi pengolah kata seperti Microsoft Office, Google Docs, atau Libre Office, menulis simbol atau emoji sangatlah mudah. kita hanya perlu mencari tombol simbol lalu klik simbol yang kita inginkan

Tangkapan layar menambahkan simbol ke kantor gratis

Menambahkan Simbol ke HTML

Ada 3 cara untuk menambahkan simbol ke HTML

  1. Cara pertama dan termudah adalah. salin/tempel dari aplikasi lain. Simbol dapat kita temukan baik dari dokumen web, dari aplikasi pengolah teks, dll, lalu salin ke dalam dokumen HTML kita

  2. Cara kedua adalah. menggunakan nama entitas. Sebagian besar simbol memiliki nama entitas. Kita dapat menggunakan kombinasi sintaks &<nama-entitas>; untuk menampilkan simbol-simbol tertentu

    Misalnya kita ingin menampilkan sebuah simbol dengan copy nama entitas dan euro, kita dapat menuliskannya sebagai berikut

    • &euro; = €
    • &copy; = ©
  3. Cara ketiga adalah dengan menggunakan kode entitas. Sintaks penulisannya sama seperti jika kita menggunakan nama entitas, kita hanya perlu mengganti nama dengan kode

    • &#169; = ©
    • &#8364; = €

Kesatuan

Berikut ini adalah contoh karakter entitas dalam HTML

HasilDeskripsiNama EntitasKode Entitasnon-breaking space (spasi paksa)&nbsp;
<p>
  Tag <h1> adalah tag untuk menampilkan judul pada HTML
</p>
0<p> Tag <h1> adalah tag untuk menampilkan judul pada HTML </p> 1
<p>
  Tag <h1> adalah tag untuk menampilkan judul pada HTML
</p>
2>lebih dari (greater than)
<p>
  Tag <h1> adalah tag untuk menampilkan judul pada HTML
</p>
3
<p>
  Tag <h1> adalah tag untuk menampilkan judul pada HTML
</p>
4&dan
<p>
  Tag <h1> adalah tag untuk menampilkan judul pada HTML
</p>
5
<p>
  Tag <h1> adalah tag untuk menampilkan judul pada HTML
</p>
6"petik dua
<p>
  Tag <h1> adalah tag untuk menampilkan judul pada HTML
</p>
7
<p>
  Tag <h1> adalah tag untuk menampilkan judul pada HTML
</p>
8'petik satu
<p>
  Tag <h1> adalah tag untuk menampilkan judul pada HTML
</p>
9
<p>
  Tag &lt;h1&gt; adalah tag untuk menampilkan judul pada HTML
</p>
0¢mata uang sen
<p>
  Tag &lt;h1&gt; adalah tag untuk menampilkan judul pada HTML
</p>
1
<p>
  Tag &lt;h1&gt; adalah tag untuk menampilkan judul pada HTML
</p>
2£mata uang pound
<p>
  Tag &lt;h1&gt; adalah tag untuk menampilkan judul pada HTML
</p>
3
<p>
  Tag &lt;h1&gt; adalah tag untuk menampilkan judul pada HTML
</p>
4¥mata uang yen
<p>
  Tag &lt;h1&gt; adalah tag untuk menampilkan judul pada HTML
</p>
5
<p>
  Tag &lt;h1&gt; adalah tag untuk menampilkan judul pada HTML
</p>
6€mata uang euro&euro;&#8364;©copyright&copy;&#169;®registered trademark
<h3>Langsung Salin/Tempel</h3>
<p style="font-size: 40pt">😅</p>
<h3>Menggunakan nomor desimal</h3>
<p style="font-size: 20pt">&#128517;</p>
<h3>Menggunakan hexadecimal</h3>
<p>&#x1F605;</p>
1
<h3>Langsung Salin/Tempel</h3>
<p style="font-size: 40pt">😅</p>
<h3>Menggunakan nomor desimal</h3>
<p style="font-size: 20pt">&#128517;</p>
<h3>Menggunakan hexadecimal</h3>
<p>&#x1F605;</p>
2

Contoh penggunaan simbol spasi

<p>Aku             suka makan bakso</p>
<p>Aku &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; suka minum kopi</p>

Hasil keluaran

Contoh yang salah untuk menampilkan simbol (<) dan (>): ❌❌❌❌

<p>
  Tag <h1> adalah tag untuk menampilkan judul pada HTML
</p>

Hasil keluaran

Sebuah contoh yang benar. . .

<p>
  Tag &lt;h1&gt; adalah tag untuk menampilkan judul pada HTML
</p>

Hasil keluaran

Grup Simbol

CharNumberEntity∀
<h3>Langsung Salin/Tempel</h3>
<p style="font-size: 40pt">😅</p>
<h3>Menggunakan nomor desimal</h3>
<p style="font-size: 20pt">&#128517;</p>
<h3>Menggunakan hexadecimal</h3>
<p>&#x1F605;</p>
3
<h3>Langsung Salin/Tempel</h3>
<p style="font-size: 40pt">😅</p>
<h3>Menggunakan nomor desimal</h3>
<p style="font-size: 20pt">&#128517;</p>
<h3>Menggunakan hexadecimal</h3>
<p>&#x1F605;</p>
4∂
<h3>Langsung Salin/Tempel</h3>
<p style="font-size: 40pt">😅</p>
<h3>Menggunakan nomor desimal</h3>
<p style="font-size: 20pt">&#128517;</p>
<h3>Menggunakan hexadecimal</h3>
<p>&#x1F605;</p>
5
<h3>Langsung Salin/Tempel</h3>
<p style="font-size: 40pt">😅</p>
<h3>Menggunakan nomor desimal</h3>
<p style="font-size: 20pt">&#128517;</p>
<h3>Menggunakan hexadecimal</h3>
<p>&#x1F605;</p>
6∃
<h3>Langsung Salin/Tempel</h3>
<p style="font-size: 40pt">😅</p>
<h3>Menggunakan nomor desimal</h3>
<p style="font-size: 20pt">&#128517;</p>
<h3>Menggunakan hexadecimal</h3>
<p>&#x1F605;</p>
7
<h3>Langsung Salin/Tempel</h3>
<p style="font-size: 40pt">😅</p>
<h3>Menggunakan nomor desimal</h3>
<p style="font-size: 20pt">&#128517;</p>
<h3>Menggunakan hexadecimal</h3>
<p>&#x1F605;</p>
8∅
<h3>Langsung Salin/Tempel</h3>
<p style="font-size: 40pt">😅</p>
<h3>Menggunakan nomor desimal</h3>
<p style="font-size: 20pt">&#128517;</p>
<h3>Menggunakan hexadecimal</h3>
<p>&#x1F605;</p>
9&<nama-entitas>;0∇&<nama-entitas>;1&<nama-entitas>;2∈&<nama-entitas>;3&<nama-entitas>;4∉&<nama-entitas>;5&<nama-entitas>;6∋&<nama-entitas>;7&<nama-entitas>;8∏&<nama-entitas>;9&euro;0∑&euro;1&euro;2

Lebih lengkap. Referensi simbol matematika

Emoji

Untuk menampilkan emot (emoji) kita juga bisa melakukan 3 cara

  • langsung salin dan tempel dari sumber lain
  • menggunakan kode desimal dari setiap emoji &euro;3
  • dan gunakan kode heksadesimal dari setiap emoji &euro;4

Perhatikan contoh berikut

<h3>Langsung Salin/Tempel</h3>
<p style="font-size: 40pt">😅</p>
<h3>Menggunakan nomor desimal</h3>
<p style="font-size: 20pt">&#128517;</p>
<h3>Menggunakan hexadecimal</h3>
<p>&#x1F605;</p>

Hasil keluaran

Grup Emoji Wajah

EmojiNomor DesimalNomor Hexadecimal😀1285121F600😁1285131F601😂1285141F602😃1285151F603😄1285161F604😅1285171F605😆1285181F606😇1285191F607😈1285201F608😉1285211F609😊1285221F60A😋1285231F60B😌1285241F60C😍1285251F60D😎1285261F60E😏1285271F60F😐1285281F610😑1285291F611😒1285301F612😓1285311F613😔1285321F614😕1285331F615😖1285341F616😗 1285351F617😘1285361F618😙1285371F619😚1285381F61A😛1285391F61B😜1285401F61C😝1285411F61D😞1285421F61E😟1285431F61F😠1285441F620😡1285451F621😢1285461F622😣1285471F623😤1285481F624😥1285491F625😦1285501F626😧1285511F627😨1285521F628😩1285531F629😪1285541F62A😫1285551F62B😬1285561F62C😭1285571F62D😮1285581F62E😯1285591F62F😰 1285601F630😱1285611F631😲1285621F632😳1285631F633😴1285641F634😵1285651F635😶1285661F636😷1285671F637🙁1285771F641🙂1285781F642🙃1285791F643🙄1285801F644🤐1292961F910🤑1292971F911🤒1292981F912🤓1292991F913🤔1293001F914🤕1293011F915🤠1293121F920🤡1293131F921🤢1293141F922🤣1293151F923🤤1293161F924🤥1293171F925🤧1293191F927🤨 1293201F928🤩1293211F929🤪1293221F92A🤫1293231F92B🤬1293241F92C🤭1293251F92D🤮1293261F92E🤯1293

Untuk mendapatkan daftar emoji yang lebih lengkap, silahkan kunjungi getemoji. com, anda tinggal copy paste dari situs tersebut

Kesimpulan

Tidak semua simbol dan karakter tersedia di keyboard kami. Oleh karena itu, HTML memberi kita cara untuk menampilkan simbol, karakter, atau bahkan emoji menggunakan entitas &euro;5

Selain cara manual seperti itu, kita juga bisa praktek copy/paste untuk menambahkan simbol atau emoji yang kita inginkan

Kode Program Lengkap

Bagi anda yang ingin mendapatkan kode program lengkapnya silahkan kunjungi repositori html-dasar di github