Cara menampilkan tag html di html

Biasanya, tag HTML tidak terlihat oleh pengguna akhir karena digunakan untuk merender konten halaman

Namun, Anda tetap dapat menampilkan tag pada halaman tersebut jika Anda memastikan entitas HTML

Entitas HTML adalah cara untuk menampilkan karakter tertentu dalam HTML. Dalam kasus kami, kami memerlukan cara untuk menampilkan karakter < dan >, karena ini adalah karakter yang dicadangkan dalam HTML

Karena mereka memiliki arti khusus dalam HTML, mereka biasanya tidak ditampilkan sebagai teks biasa

Berikut adalah contoh penggunaan entitas HTML untuk menampilkan tag HTML

	<h1>This is a heading.</h1>
<ul>
    <li>This is a list item.</li>
</ul>
<ol>
    <li>This is a list item.</li>
</ol>

Beginilah tampilannya dirender di browser

	<h1>This is a heading.</h1>
<ul>
    <li>This is a list item.</li>
</ul>
<ol>
    <li>This is a list item.</li>
</ol>

Berikut adalah daftar semua karakter HTML yang dicadangkan dan entitasnya

• <. <
• >. >
• &.

  	<h1>This is a heading.</h1>
  <ul>
      <li>This is a list item.</li>
  </ul>
  <ol>
      <li>This is a list item.</li>
  </ol>
  

  _0

• 	<h1>This is a heading.</h1>
  <ul>
      <li>This is a list item.</li>
  </ul>
  <ol>
      <li>This is a list item.</li>
  </ol>
  

  _1.

  	<h1>This is a heading.</h1>
  <ul>
      <li>This is a list item.</li>
  </ul>
  <ol>
      <li>This is a list item.</li>
  </ol>
  

  _2

Setiap entitas dimulai dengan & dan diakhiri dengan

	<h1>This is a heading.</h1>
<ul>
    <li>This is a list item.</li>
</ul>
<ol>
    <li>This is a list item.</li>
</ol>

Untuk menyandikan HTML, Anda dapat menggunakan pencarian dan penggantian untuk setiap karakter yang dicadangkan untuk mengonversinya menjadi entitas yang sesuai

Setelah Anda menyandikan HTML, Anda ingin mempertahankan format dan indentasi HTML

Untuk melakukannya, gunakan tag

	<h1>This is a heading.</h1>
<ul>
    <li>This is a list item.</li>
</ul>
<ol>
    <li>This is a list item.</li>
</ol>

Berikut adalah contoh cara menggunakan tag

	<h1>This is a heading.</h1>
<ul>
    <li>This is a list item.</li>
</ul>
<ol>
    <li>This is a list item.</li>
</ol>

	<pre>
    &lt;h1&gt;This is a heading.&lt;/h1&gt;
    &lt;ul&gt;
        &lt;li&gt;This is a list item.&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ol&gt;
        &lt;li&gt;This is a list item.&lt;/li&gt;
    &lt;/ol&gt;
</pre>

Kami telah melihat cara menampilkan tag HTML sebagai teks biasa menggunakan entitas HTML. Kita juga telah melihat cara menggunakan tag

	<h1>This is a heading.</h1>
<ul>
    <li>This is a list item.</li>
</ul>
<ol>
    <li>This is a list item.</li>
</ol>

Semoga postingan ini bermanfaat bagi Anda

Jika Anda ingin belajar tentang pengembangan web, mendirikan start-up, bootstrap SaaS, dan lainnya, ikuti saya di Twitter. Anda juga dapat bergabung dalam percakapan di Discord resmi kami

Selamat datang di tutorial tentang cara menampilkan kode HTML sebagai teks. Ingin menambahkan cuplikan kode HTML ke situs web Anda?

Untuk menampilkan kode HTML sebagai teks, cukup ganti < dengan <, dan > dengan >. Sebagai contoh

• <strong> Hello World! </strong>
• <p> Goodbye World! </p>

Itu mencakup dasar-dasar cepat, tetapi baca terus jika Anda membutuhkan lebih banyak tip dan contoh

ⓘ Saya telah menyertakan file zip dengan semua kode sumber di awal tutorial ini, jadi Anda tidak perlu menyalin-tempel semuanya… Atau jika Anda hanya ingin langsung masuk

SLIDE CEPAT

Unduh & Catatan

UNDUH & CATATAN

Pertama, berikut adalah tautan unduhan ke kode contoh seperti yang dijanjikan

CATATAN CEPAT

DOWNLOAD KODE CONTOH

Klik di sini untuk mengunduh semua kode sumber contoh, saya telah merilisnya di bawah lisensi MIT, jadi silakan membangun di atasnya atau menggunakannya dalam proyek Anda sendiri

TAMPILKAN HTML SEBAGAI TEKS

Baiklah, sekarang mari kita masuk ke contoh untuk menampilkan kode HTML sebagai teks di halaman web

CONTOH 1) KODE HTML INLINE

1-inline-kode. html

<style>
code {
  padding: 3px;
  border: 1px solid #dfe22b;
  background: #fffb89;
}
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
</style>
 
<p>
  The <code>&lt;strong&gt;</code> tag is not to be used to bold text.
  It actually has a semantic meaning of "strong emphasis".
</p>

Tag

<style>
pre {
  color: #fff;
  background: #384669;
}
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
</style>
 
<pre><code>&lt;ul&gt;
  &lt;li&gt;First&lt;/li&gt;
  &lt;li&gt;Second&lt;/li&gt;
  &lt;li&gt;Third&lt;/li&gt;
&lt;/ul&gt;</code></pre>

Seperti di pendahuluan, yang harus kita lakukan adalah mengganti < dengan < dan > dengan >

• <style>
  pre {
    color: #fff;
    background: #384669;
  }
  * {
    font-family: arial, sans-serif;
    box-sizing: border-box;
  }
  </style>
   
  <pre><code>&lt;ul&gt;
    &lt;li&gt;First&lt;/li&gt;
    &lt;li&gt;Second&lt;/li&gt;
    &lt;li&gt;Third&lt;/li&gt;
  &lt;/ul&gt;</code></pre>

  _5 disebut "entitas HTML". Secara khusus, ________ 24 _______ mewakili “kurang dari” dan > untuk “lebih besar dari”
• Ada banyak “karakter entitas HTML” lainnya, seperti

  <style>
  pre {
    color: #fff;
    background: #384669;
  }
  * {
    font-family: arial, sans-serif;
    box-sizing: border-box;
  }
  </style>
   
  <pre><code>&lt;ul&gt;
    &lt;li&gt;First&lt;/li&gt;
    &lt;li&gt;Second&lt;/li&gt;
    &lt;li&gt;Third&lt;/li&gt;
  &lt;/ul&gt;</code></pre>

  8 untuk ampersand. Saya akan meninggalkan tautan di bawah untuk daftar yang lebih lengkap
• Terakhir, membungkus kode HTML Anda dalam ________11______9 adalah opsional. Yah, lebih mudah untuk menambahkan kosmetik dengan cara ini, dan ini juga memberikan petunjuk semantik "ini adalah kode komputer" ke mesin pencari

CONTOH 2) SNIPPET KODE HTML

2-kode-cuplikan. html

<style>
pre {
  color: #fff;
  background: #384669;
}
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
</style>
 
<pre><code>&lt;ul&gt;
  &lt;li&gt;First&lt;/li&gt;
  &lt;li&gt;Second&lt;/li&gt;
  &lt;li&gt;Third&lt;/li&gt;
&lt;/ul&gt;</code></pre>

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Jika Anda ingin menampilkan cuplikan, bungkus saja dengan sepasang

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

P. S. Sangat sulit untuk mengubah semua tag menjadi entitas HTML secara manual. Cukup lakukan pencarian untuk “kode entitas HTML online”, dan ada banyak alat online gratis

BIT & LINK YANG BERMANFAAT

Itu saja untuk tutorialnya, dan ini adalah bagian kecil tentang beberapa tambahan dan tautan yang mungkin berguna bagi Anda

EKSTRA) PENYOROT KODE

Jika Anda menginginkan "cuplikan kode yang cantik", ada beberapa pustaka Javascript di luar sana yang dapat Anda gunakan

• Sorot JS
• Pelangi
• Prisma
• Mikro
• Penyorot Sintaks

LINK dan REFERENSI

• Entitas HTML – MDN
• Simbol HTML – Toptal

LEMBAR CHEAT INFOGRAFIS

Terima kasih telah membaca, dan kami telah sampai pada akhir. Saya harap ini membantu Anda untuk lebih memahami, dan jika Anda ingin berbagi sesuatu dengan panduan ini, jangan ragu untuk berkomentar di bawah ini. Semoga berhasil dan selamat membuat kode

Bagaimana cara menampilkan tag HTML sebagai teks biasa dalam HTML?