HTML - Tag Frase
Tag frase telah dikosongkan untuk tujuan tertentu, meskipun mereka ditampilkan dengan cara yang sama seperti tag dasar lainnya <b>, <i>, <pre>, dan <tt>, Anda telah melihat di bab sebelumnya. Bab ini akan memandu Anda mempelajari semua tag frase penting, jadi mari kita mulai melihatnya satu per satu.
Teks yang Ditekankan
Apa pun yang muncul di dalam <em>...</em> elemen ditampilkan sebagai teks yang ditekankan.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Teks yang Ditandai
Apa pun yang muncul dengan-dalam <mark>...</mark> elemen, ditampilkan sebagai ditandai dengan tinta kuning.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Teks Kuat
Apa pun yang muncul di dalam <strong>...</strong> elemen ditampilkan sebagai teks penting.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Singkatan Teks
Anda dapat menyingkat teks dengan meletakkannya di dalam tag pembuka <abbr> dan penutup </abbr>. Jika ada, atribut title [judul] harus berisi deskripsi lengkap ini dan tidak ada yang lain.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Elemen Akronim
Itu <acronym> elemen memungkinkan Anda untuk menunjukkan bahwa teks antara tag <acronym> dan </acronym> adalah akronim.
Saat ini, browser utama tidak mengubah tampilan konten dari elemen <acronym>.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Arah Teks
Itu <bdo>...</bdo> elemen adalah singkatan dari Bi-Directional Override dan digunakan untuk mengganti arah teks saat ini.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go right to left.</bdo></p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Ketentuan Khusus
Itu <dfn>...</dfn>elemen (atau Elemen Definisi HTML) memungkinkan Anda untuk menentukan bahwa Anda memperkenalkan istilah khusus. Penggunaannya mirip dengan kata miring di tengah-tengah paragraf.
Biasanya, Anda akan menggunakan elemen <dfn> saat pertama kali Anda memperkenalkan istilah kunci. Peramban terbaru merender konten elemen <dfn> dengan font miring.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Mengutip Teks
Ketika Anda ingin mengutip suatu bagian dari sumber lain, Anda harus meletakkannya di antaranya <blockquote>...</blockquote> tag.
Teks di dalam elemen <blockquote> biasanya menjorok dari tepi kiri dan kanan teks di sekitarnya, dan terkadang menggunakan font miring.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Kutipan Singkat
Itu <q>...</q> elemen digunakan saat Anda ingin menambahkan tanda kutip ganda dalam kalimat.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Kutipan Teks
Jika Anda mengutip teks, Anda dapat menunjukkan sumber yang menempatkannya di antara pembukaan <cite> tag dan penutup </cite> menandai
Seperti yang Anda harapkan dalam publikasi cetak, konten elemen <cite> ditampilkan dalam teks miring secara default.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Kode Komputer
Kode pemrograman apa pun yang muncul di halaman Web harus ditempatkan di dalamnya <code>...</code>tag. Biasanya konten elemen <code> disajikan dalam font monospace, seperti kode di kebanyakan buku pemrograman.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Teks Keyboard
Saat Anda berbicara tentang komputer, jika Anda ingin memberi tahu pembaca untuk memasukkan beberapa teks, Anda dapat menggunakan <kbd>...</kbd> elemen untuk menunjukkan apa yang harus diketik, seperti dalam contoh ini.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Variabel Pemrograman
Elemen ini biasanya digunakan bersama dengan <pre> dan <code> elemen untuk menunjukkan bahwa konten elemen itu adalah variabel.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Keluaran Program
Itu <samp>...</samp> elemen menunjukkan contoh keluaran dari sebuah program, dan skrip dll. Sekali lagi, ini terutama digunakan saat mendokumentasikan konsep pemrograman atau pengkodean.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Teks Alamat
Itu <address>...</address> elemen digunakan untuk memuat alamat apa pun.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -