Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Teks Frase HTML Menggunakan Tag Phrase yang Tersedia

Tag Phrase pada HTML digunakan untuk mengindikasikan makna struktur dari teks blok. Contoh, tag abbr mengindikasikan bahwa frase menganduk kata abbreviation. Beberapa contoh dari tag phrase adalah abbr, strong, mark, dan lain sebagainya.


11 Elemen Utama Tag Phrase pada HTML
Ilustrasi Tag Phrase HTML

Sebelum memahami lebih dalam materi tentang Membuat Teks Frase HTML Menggunakan Tag Phrase yang Tersedia, terlebih dahulu pelajari materi tentang: Membuat Parameter HTML Mengunakan Tag Param Untuk Plugin Object [klik], Membuat Output Dinamis HTML Menggunakan Tag Output [klik], dan Membuat Opsi Pilihan HTML Menggunakan Tag Option [klik].

satu, Teks Emphasized: tag em digunakan untuk emphasized teks dan menampilkan font dalam format italic pada browser. Secara sederhana, tag ini akan menampilkan teks dalam format emphasized.

Sintak:
<em> Konten... </em>

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Teks Emphasized

</title>

 

<style>

.elf 

{

font-size:40px;

color:#090;

font-weight:bold;

text-align:center;}

 

{

font-size:20px;

text-align:center;}

</style>

 

</head>

 

<body>

<div 

class = "elf">

Blog Elfan

</div>

 

<p>

<em>Contoh Teks</em> emphasized

</p>

</body>

 

</html>

Output:
Blog Elfan

Contoh Teks emphasized


dua, Teks Abbreviation: pada HTML tag abbr digunakan untuk menampilkan teks dalam format abbreviation yang membutuhkan tag awalan dan tag akhiran.

Sintak:
<abbr title = "Blog Elfan">ELF</abbr>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Teks Abbreviation

</title>

 

<style>

.elf

{

font-size:40px;

color:#090;

font-weight:bold;

text-align:center;}

 

{

font-size:20px;

text-align:center;}

</style>

 

</head>

 

<body>

<div 

class = "elf">

Blog Elfan

</div>

 

<p>

<abbr 

title = "contoh teks">

ELF

</abbr>

tag abbreviation

</p>

</body>

 

</html>

Output:
Blog Elfan

ELF tag abbreviation


tiga, Elemen Acronym: tag ini digunakan untuk mengindikasikan konten yang dituliskan dalam bagian tag awalan dan akhiran merupakan bentuk dari akronim.

Sintak:
<acronym> Konten... </acronym>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Tag Acronym

</title>

 

<style>

.elf 

{

font-size:40px;

color:#090;

font-weight:bold;

text-align:center;}

 

{

font-size:20px;

text-align:center;}

</style>

 

</head>

 

<body>

<div 

class = "elf">

Blog Elfan

</div>

 

<p>

<acronym>Teks Akronum</acronym>

menggunakan tag acronym

</p>

</body>

 

</html>

Output:
Blog Elfan

Teks Akronum menggunakan tag acronym


empat, Teks Direction: tag bdo merupakan singkatan dari bi-directional override yang digunakan untuk override dari arah teks saat ini. Bentuk default dari teks direction adalah dari kiri ke kanan tetapi dengan menggunakan teks direction maka arahnya bisa diubah atau di-override.

  • ltr: menentukan arah teks dari kiri ke kanan.
  • rtl: menentukan arah teks dari kanan ke kiri.
  • auto: browser akan menentukan secara otomatis arah dari teks berdasarkan konten yang disediakan pada browser tersebut.

Sintak:
<bdo dir = "ltr/rtl/auto"> Konten... </bdo>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Tag decoration

</title>

 

<style>

.elf 

{

font-size:40px;

color:#090;

font-weight:bold;

text-align:center;}

 

{

font-size:20px;

text-align:center;}

</style>

 

</head>

 

<body>

<div 

class = "elf">

Blog Elfan

</div>

 

<p>

Tag decoration HTML

</p>

 

<p>

<bdo dir = "rtl">

Teks contoh untuk penerapan.

</bdo>

</p>

</body>

 

</html>

Output:
Blog Elfan

Tag decoration HTML

Teks contoh untuk penerapan.



lima, Short Quotation: digunakan untuk menambah tanda kutip pada kalimat yang menggunakan tag q. Konten yang ditelakkan diantara tag q tersebut akan ditampilkan dalam format kutipan.

Sintak:
<q> Konten... </q>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Tag Quotation

</title>

 

<style>

.elf 

{

font-size:40px;

color:#090;

font-weight:bold;

text-align:center;}

 

{

font-size:20px;

text-align:center;}

</style>

 

</head>

 

<body>

<div 

class = "elf">

Blog Elfan

</div>

 

<p>

<q>Ilustrasi dari</q

tag quotation

</p>

</body>

 

</html>

Output:
Blog Elfan

Ilustrasi dari tag quotation


enam, Marked Text: Konten yang ditulis dalam tag mark akan ditampilkan dalam format tanda kuning. Pada dasarnya tag ini bekerja seperti tanda garis bawah dan digunakan untuk menandai beberapa kata dalam suatu kalimat.

Sintak:
<mark> Konten... </mark>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Tag Mark

</title>

 

<style>

.elf 

{

font-size:40px;

color:#090;

font-weight:bold;

text-align:center;}

 

{

font-size:20px;

text-align:center;}

</style>

 

</head>

 

<body>

<div 

class = "elf">

Blog Elfan

</div>

 

<p>

<mark>Contoh Teks</mark>

dari tag mark

</p>

</body>

 

</html>

Output:
Blog Elfan

Contoh Teks dari tag mark


tujuh, Strong Text: digunakan untuk menampilkan kata penting dalam suatu kalimat.

Sintak:
<strong> Konten... </strong>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

tag strong

</title>

 

<style>

.elf 

{

font-size:40px;

color:#090;

font-weight:bold;

text-align:center;}

 

{

font-size:20px;

text-align:center;}

</style>

 

</head>

 

<body>

<div 

class = "elf">

Blog Elfan

</div>

 

<p>

<strong>

Ilustrasi teks

</strong

dari tag strong

</p>

</body>

 

</html>

Output:
Blog Elfan

Ilustrasi teks dari tag strong


delapan, Quoting Text: tag blockquote digunakan untuk menebalkan tag yang digunakan dalam kutipan kalimat. Tag ini digunakan untuk melakukan kutipan panjang pada dokumen html.

Sintak:
<blockquote> Konten... </blockquote>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Tag Blockquote

</title>

 

<style>

.elf 

{

font-size:40px;

color:#090;

font-weight:bold;

text-align:center;}

</style>

 

</head>

 

<body>

<div 

class = "elf">

Blog Elfan

</div>

 

<blockquote>

Blog ini adalah blog tentang ilmu komputer yang dapat digunakan untuk mempelajari berbagai bahasa pemrograman.

</blockquote>

</body>

 

</html>

Output:
Blog Elfan
Blog ini adalah blog tentang ilmu komputer yang dapat digunakan untuk mempelajari berbagai bahasa pemrograman.

sembilan, Programming Code: menampilkan kode program pada tag kode html yang digunakan. Konten yang diletakkan diantara bagian awalan dan akhiran dari tag code akan dianggap sebagai kode program.

Sintak:
<code> Konten... </code>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Tag Code

</title>

 

<style>

.elf 

{

font-size:40px;

color:#090;

font-weight:bold;

text-align:center;}

 

{

font-size:20px;

text-align:center;}

</style>

 

</head>

 

<body>

<div 

class = "elf">

Blog Elfan

</div>

 

<p>

<code>Ilustrasi Teks</code>

dari tag code

</p>

</body>

 

</html>

Output:
Blog Elfan

Ilustrasi Teks dari tag code


sepuluh, Program Output: output dari program ditulis dalam tag samp yang diletakkan diantara bagian awalan dan akhiran tag yang ditampilkan sebagai contoh output.

Sintak:
<samp> Konten... </samp>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Tag Output Program

</title>

 

<style>

.elf 

{

font-size:40px;

color:#090;

font-weight:bold;

text-align:center;}

 

{

font-size:20px;

text-align:center;}

</style>

 

</head>

 

<body>

<div 

class = "elf">

Blog Elfan

</div>

 

<p>

<samp>Ilustrasi Teks</samp>

dari tag output program

</p>

</body>

 

</html>

Output:
Blog Elfan

Ilustrasi Teks dari tag output program


sebelas, Address Text: digunakan untuk menampilkan alamat pada web browser yang terletak diantara bagian awalan dan akhiran tag address yang akan dianggap sebagai format alamat pada dokumen HTML.

Sintak:
<address> Konten... </address>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Tag Address

</title>

 

<style>

.elf 

{

font-size:40px;

color:#090;

font-weight:bold;

text-align:center;}

 

address 

{

font-size:20px;

text-align:center;}

</style>

 

</head>

 

<body>

<div 

class = "elf">

Blog Elfan

</div>

 

<address>

Kantor Smandela,

sector-142, Noida,

USA

</address>

</body>

 

</html>

Output:
Blog Elfan
Kantor Smandela, sector-142, Noida, USA

Artikel ini didedikasikan kepada: Mohammad Faesal Febriandyono, Muhammad Fairuz Zahir, Nabilahusna Nurul Imani, Naviatul Fadilla Nurrohmah, dan Nur Rahma Martiyana.

5 komentar untuk "Membuat Teks Frase HTML Menggunakan Tag Phrase yang Tersedia"

  1. Apa yang dimaksud dengan tag phrase atau frasa pada dokumen html?

    BalasHapus
    Balasan
    1. Pada dokumen HTML, tag frase digunakan untuk menunjukkan makna struktural dari sebuah blok teks tertentu dari untaian kalimat. Contoh, tag abbr yang digunakan untuk menunjukkan bahwa frasa tersebut berisi kata singkatan. Beberapa contoh tag frase adalah abbr, strong, mark, dan lain sebagainya.

      Hapus
    2. Jadi, tag framasa itu adalah kumpulan dari beberapa tag yang digunakan untuk memberikan penekanan tertentu pada kata yang terdapat dalam kalimat pada dokumen html.

      Hapus
  2. Apakah penggunakan tag frase yang berlebih akan memengaruhi kualitas konten?

    BalasHapus
    Balasan
    1. Iya, semakin banyak tag phrase yang digunakan dalam suatu kalimat maka akan semakin banyak kode program yang akan digunakan pada dokumem html tersebut, dan dapat memberatkan kecepatan loading dokumen html (walaupun tidak berdampak terlalu signifikan).

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -