Articles
Pengenalan ke HTML
Tag Terkait dengan Tampilan Kode, Kutipan, dan Daftar

Tag Terkait dengan Tampilan Kode, Kutipan, dan Daftar

Artikel ini menjelaskan tag yang terkait dengan tampilan kode, kutipan, dan daftar.

Ini menjelaskan cara menulis kode sumber, kutipan, anotasi, dan daftar dalam HTML.

YouTube Video

Tag terkait tampilan kode

Tag <code>

Inline code example: let x = 10; 
1Inline code example: <code>let x = 10;</code>
  • Tag <code> adalah elemen inline yang digunakan untuk menunjukkan kode atau potongan program di dalam dokumen HTML.
  • Secara default, ini ditampilkan dalam font monospace, meningkatkan keterbacaan kode.

Tag <pre> 

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>
  • Tag <pre> digunakan untuk menampilkan teks dalam format aslinya di dalam dokumen HTML. Menggunakan tag ini mempertahankan spasi dan pemecahan baris dalam teks, menjaga format aslinya. Ini terutama digunakan untuk menampilkan konten yang perlu menjaga format, seperti kode program, puisi, atau seni teks.
    function hello() {
        console.log("Hello, world!");
    }
    
1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>
  • Dalam tag <pre>, spasi dipertahankan, jadi jika ada spasi sebelum tag penutup, sebuah baris kosong akan muncul di akhir seperti dalam contoh ini.

Tag <samp>

Sample system output: Error: Invalid input. 
1Sample system output: <samp>Error: Invalid input.</samp>
  • Tag <samp> adalah tag HTML yang digunakan untuk mewakili output dari suatu program komputer. Ini digunakan untuk menunjukkan keluaran atau pesan dari sebuah program atau sistem.

Tag <kbd>

Keyboard input example: Ctrl + C 
1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>
  • Tag <kbd> adalah tag HTML yang digunakan untuk mewakili input pengguna. Ini digunakan untuk menunjukkan input keyboard atau input perintah, seperti pintasan.

Tag <var>

Variable example: x = 5; 
1Variable example: <var>x</var> = 5;
  • Tag <var> digunakan untuk mewakili variabel dalam program atau persamaan. Ini digunakan untuk menekankan nama variabel atau variabel dalam rumus matematika.

Tag yang digunakan untuk kutipan, dll.

Tag <blockquote>

This is a blockquote for longer quotations. 
1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>
  • Tag <blockquote> digunakan untuk mewakili kutipan panjang atau teks dari sumber lain, dan biasanya ditampilkan pada level blok.

Tag <q>

This is a short quote: Short quote example. 
1This is a short quote: <q>Short quote example.</q>
  • Tag <q> adalah elemen inline yang digunakan untuk mewakili kutipan pendek. Tag ini dapat digunakan untuk menandai bagian teks atau kalimat sebagai kutipan. Teks yang dibungkus dalam tag <q> biasanya ditampilkan dengan tanda kutip. Tag <q> juga dapat disusun secara bersarang. Dalam kasus ini, jenis tanda kutip yang berbeda umumnya digunakan untuk kutipan dalam.

Tag <cite>

Reference to a book: The Great Gatsby 
1Reference to a book: <cite>The Great Gatsby</cite>
  • Tag <cite> adalah elemen inline yang digunakan untuk menunjukkan sumber dari kutipan atau referensi. Ini terutama digunakan untuk menunjukkan sumber dari sebuah karya, seperti judul karya, artikel, makalah, halaman web, atau buku.

Tag <address>

123 Main Street, Springfield, USA
1<address>123 Main Street, Springfield, USA</address>
  • Tag <address> digunakan untuk mewakili informasi kontak yang terkait dengan penulis atau pemilik dokumen atau bagian. Tag ini biasanya berisi alamat email, nomor telepon, alamat fisik, dan informasi serupa.

Tag <time> 

1<time datetime="2024-12-04">December 4, 2024</time>
  • Tag <time> digunakan untuk merepresentasikan titik waktu tertentu, durasi, atau waktu yang berulang. Tag ini dapat menyertakan tanggal dan waktu untuk memberikan makna semantik pada dokumen.

Tag <data>

Current Year 
1<data value="2024">Current Year</data>
  • Tag <data> digunakan untuk menghubungkan konten yang dapat dibaca manusia dengan nilai yang dapat ditafsirkan oleh mesin. Tag ini berguna untuk menandai data sedemikian rupa sehingga dapat dengan mudah diproses oleh program.

Tag <details> dan <summary>

More information

Here is some additional content.

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>
  • Tag <details> membuat widget yang dapat dilipat dan diperluas. Dengan menggunakannya bersama tag <summary>, Anda dapat membuat bagian yang dapat diklik untuk menampilkan lebih banyak detail, yang sering digunakan untuk tampilan interaktif seperti 'Baca lebih lanjut'.

Tag yang digunakan untuk tampilan daftar

Tag <ul>

  • Item 1
  • Item 2
  • Item 3
1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>
  • Ini adalah tag yang digunakan untuk membuat daftar tidak terurut. Setiap item dalam daftar didefinisikan dengan tag <li>. Secara default, sebuah titik hitam ditampilkan di depan setiap item daftar.

Tag <ol>

  1. Step 1
  2. Step 2
  3. Step 3
1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>
  • Tag ini digunakan untuk membuat daftar terurut. Setiap item dalam daftar didefinisikan dengan tag <li>. Secara default, angka ditampilkan untuk menunjukkan urutan dari item.

Tag <dl>

Term 1
Definition of Term 1
Term 2
Definition of Term 2
1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>
  • Tag ini digunakan untuk membuat daftar pasangan yang terdiri dari istilah dan definisi, atau nama dan detail. Item daftar didefinisikan dengan tag <dt> dan <dd>. Istilah atau nama ditulis dalam tag <dt>, dan definisi atau penjelasan ditulis dalam tag <dd>.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Tag terkait teksTag yang Berhubungan dengan Tabel