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 -