Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Membuat Teks Frase HTML Menggunakan Tag Phrase yang Tersedia

Dipublikasikan Oleh: elfanmauludi 5 komentar
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.


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, Membuat Output Dinamis HTML Menggunakan Tag Output, dan Membuat Opsi Pilihan HTML Menggunakan Tag Option.

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>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Teks Emphasized

</title>

 

<style>

.elf 

{

font-size:40px;

color:#090;

font-weight:bold;

text-align:center;}

 

p 

{

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;}

 

p 

{

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;}

 

p 

{

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;}

 

p 

{

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;}

 

p 

{

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;}

 

p 

{

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;}

 

p 

{

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;}

 

p 

{

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;}

 

p 

{

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

Membuat teks frase dalam bahasa markup HTML dapat dilakukan dengan memanfaatkan berbagai tag yang disediakan untuk memberikan makna tertentu pada bagian-bagian teks yang diinginkan. Penggunaan tag frase ini memungkinkan teks yang ditampilkan di halaman web memiliki konteks yang lebih jelas, baik dari segi struktur maupun tujuan penyampaiannya. Sebelum membahas lebih lanjut mengenai cara menggunakan tag frase dalam HTML, penting untuk memahami apa yang dimaksud dengan tag frase itu sendiri dan bagaimana cara kerjanya.

HTML, sebagai bahasa markup yang digunakan untuk membuat struktur halaman web, menyediakan berbagai tag untuk menyusun elemen-elemen dalam halaman tersebut. Beberapa tag dalam HTML berfungsi untuk mengatur teks dengan memberikan penekanan, menjelaskan relasi antar kata, atau menambahkan makna tertentu pada teks. Tag-tag ini dikenal dengan sebutan tag frase, yang berperan penting dalam memberikan informasi lebih lanjut mengenai elemen teks tersebut, baik untuk mesin pencari maupun pembaca manusia.

Salah satu jenis tag frase yang digunakan adalah tag untuk menambahkan penekanan pada kata atau bagian teks tertentu. Tag ini digunakan untuk memperjelas atau memberi bobot lebih pada kata yang dirasa penting dalam konteks kalimat. Penggunaan tag ini sering ditemukan pada teks yang membutuhkan sorotan, misalnya kata yang hendak ditegaskan dalam sebuah pernyataan atau kalimat penting dalam sebuah paragraf. Selain memberikan penekanan, beberapa tag frase juga dapat digunakan untuk menandakan bagian teks yang memiliki hubungan erat dengan konsep tertentu, seperti istilah atau nama yang penting.

Selain penekanan, tag frase juga digunakan untuk menunjukkan jenis kata atau makna khusus dalam teks. Misalnya, tag frase bisa digunakan untuk menandakan bahwa kata tersebut merupakan kutipan langsung dari sumber lain atau ucapan seseorang. Penggunaan tag semacam ini memberikan petunjuk yang jelas kepada pembaca bahwa bagian tersebut merupakan bagian yang mengutip atau mereferensikan sumber lain, sehingga pembaca dapat memahami konteks dengan lebih baik.

Beberapa tag juga digunakan untuk tujuan tertentu, seperti menandakan kata-kata yang memiliki arti atau makna khusus dalam suatu konteks. Misalnya, dalam teks yang membahas mengenai dunia teknologi atau ilmu pengetahuan, seringkali terdapat istilah teknis yang memerlukan penjelasan lebih lanjut. Tag-tag frase ini memungkinkan pemisahan atau penekanan pada kata tersebut, sehingga pembaca bisa mengenali bahwa istilah tersebut adalah sebuah konsep atau istilah teknis yang memerlukan perhatian khusus.

Selain itu, HTML juga menyediakan tag yang digunakan untuk menandakan teks yang lebih bersifat informal atau untuk menambahkan penekanan yang lebih ringan pada bagian tertentu dari teks. Penggunaan tag ini memberi kebebasan bagi pengembang untuk menyesuaikan gaya penulisan yang sesuai dengan konteks atau gaya tulisan yang diinginkan, baik untuk kebutuhan profesional maupun untuk penyajian yang lebih santai dan mudah dipahami.

Tag-tag frase ini juga berperan dalam mempermudah mesin pencari untuk memahami dan mengindeks teks dalam halaman web. Mesin pencari, seperti yang digunakan di berbagai platform pencarian, akan menggunakan tag-tag ini untuk menilai relevansi teks dalam halaman web terhadap kata kunci pencarian yang dimasukkan oleh pengguna. Dengan menggunakan tag frase dengan benar, situs web dapat memperoleh keuntungan dari peningkatan visibilitas di hasil pencarian, karena mesin pencari dapat lebih mudah memahami struktur dan konteks halaman tersebut.

Untuk penggunaan tag frase yang optimal, perlu diperhatikan bahwa setiap tag memiliki fungsi yang berbeda, dan tag tersebut harus digunakan dengan tepat sesuai dengan tujuan penyampaian informasi. Salah penggunaan tag dapat menyebabkan kebingungan baik bagi pembaca manusia maupun bagi mesin pencari yang sedang mengindeks halaman tersebut. Misalnya, menggunakan tag penekanan pada kata yang tidak perlu ditekankan atau tidak relevan dengan konteks, bisa mengurangi efektivitas penggunaan tag tersebut. Oleh karena itu, penting untuk memiliki pemahaman yang jelas mengenai tag frase yang digunakan dalam HTML dan kapan waktu yang tepat untuk menggunakannya.

Pada akhirnya, tag frase dalam HTML berperan penting dalam memperjelas struktur dan makna teks yang ada dalam sebuah halaman web. Penggunaan yang tepat dari tag-tag ini tidak hanya membantu pembaca dalam memahami isi halaman lebih baik, tetapi juga mendukung tujuan pengindeksan halaman oleh mesin pencari. Sebagai pengembang web, memahami dan mengimplementasikan tag frase dengan benar dapat membuat perbedaan besar dalam kualitas penyajian informasi di web.

Selain fungsinya dalam konteks SEO (optimisasi mesin pencari), penggunaan tag frase dalam HTML juga berperan penting dalam meningkatkan aksesibilitas sebuah halaman. Dengan memberikan makna yang lebih jelas pada elemen-elemen teks, tag frase membantu pembaca dengan kebutuhan khusus, seperti pengguna pembaca layar, untuk memahami konten dengan lebih mudah. Pembaca layar akan mengartikan tag yang digunakan dalam halaman web untuk memberikan informasi yang lebih terstruktur dan lebih mudah dipahami, terutama bagi yang memiliki gangguan penglihatan atau keterbatasan lainnya.

Misalnya, tag frase yang digunakan untuk menandakan kutipan langsung atau teks yang diucapkan oleh orang lain memberikan konteks tambahan bagi pengguna pembaca layar. Begitu pula dengan tag yang menunjukkan istilah teknis atau nama tempat, yang akan memberikan petunjuk kepada pembaca untuk mengenali istilah atau konsep penting dalam teks tersebut. Hal ini memungkinkan pembaca untuk menavigasi konten dengan lebih efisien tanpa perlu bergantung pada interpretasi pribadi atau asumsi yang tidak jelas.

Selain itu, penggunaan tag frase juga berkaitan erat dengan semantik halaman web. Semantik sendiri adalah aspek yang mengacu pada penggunaan elemen-elemen HTML dengan tujuan untuk memberikan makna yang lebih jelas dan tepat. Dalam hal ini, tag frase yang sesuai dengan konteks akan memberikan makna tambahan pada teks yang disajikan, sehingga teks tersebut tidak hanya tampil sebagai sekadar urutan kata-kata, tetapi juga memiliki struktur yang mudah dipahami dan dimengerti. Dengan menggunakan tag semantik yang tepat, halaman web akan terlihat lebih profesional dan mudah diindeks oleh mesin pencari, serta memberikan pengalaman yang lebih baik bagi pengunjung.

Menggunakan tag frase dalam HTML dengan bijak juga dapat meningkatkan keterbacaan teks. Keterbacaan sangat penting, terutama dalam menyampaikan informasi secara jelas dan cepat. Dalam banyak kasus, pembaca cenderung melewati teks panjang yang sulit dipahami atau yang tidak memiliki struktur yang jelas. Dengan menggunakan tag frase yang tepat, pembaca dapat lebih mudah memindai dan memahami isi teks, sehingga meningkatkan pengalaman membaca secara keseluruhan. Misalnya, kata-kata yang ditekankan atau istilah-istilah yang didefinisikan dengan tag tertentu memberikan petunjuk visual dan kontekstual yang membantu pembaca fokus pada poin-poin penting dalam teks.

Tag frase dalam HTML juga memiliki peran besar dalam memberikan keberagaman tampilan dan gaya pada teks tanpa mengubah struktur dasar dokumen. Hal ini memberikan fleksibilitas bagi pengembang web untuk mengatur bagaimana teks disajikan tanpa harus bergantung pada pengaturan gaya visual eksternal seperti CSS. Sebagai contoh, penggunaan tag frase untuk menekankan kata atau memberikan penanda khusus pada teks tidak hanya membantu pembaca dalam memahami makna, tetapi juga memberikan variasi dalam cara teks disajikan di halaman web. Dengan demikian, tag ini mendukung penggunaan yang lebih kreatif dan dinamis dalam penyajian informasi.

Seiring dengan perkembangan teknologi web, penting untuk terus mengingat bahwa penggunaan tag frase dalam HTML juga harus memperhatikan standar dan pedoman yang telah ditetapkan oleh organisasi pengembang web. Pedoman ini mencakup penggunaan elemen HTML secara tepat dan konsisten, yang tidak hanya bermanfaat bagi pembaca manusia tetapi juga mempengaruhi cara mesin pencari dan browser memahami dan menampilkan halaman web. Penggunaan tag frase yang tepat akan meningkatkan kualitas dan keterbacaan halaman web, yang pada gilirannya akan berkontribusi pada reputasi situs web dan pengalaman pengunjung.

Secara keseluruhan, penggunaan tag frase dalam HTML memberikan kontribusi besar dalam membuat teks lebih mudah dipahami, terstruktur dengan baik, dan mudah diakses oleh berbagai pihak. Dalam dunia web yang semakin berkembang, penting untuk menggunakan tag ini dengan bijaksana dan memperhatikan tujuan penggunaannya, baik itu untuk menekankan suatu kata, memberikan makna lebih pada istilah khusus, atau menandakan kutipan. Dengan memahami cara yang tepat dalam memanfaatkan tag frase ini, pengembang web dapat menciptakan halaman yang tidak hanya efektif dalam menyampaikan pesan, tetapi juga ramah pengguna dan mudah diindeks oleh mesin pencari. Sehingga, pengalaman pengguna menjadi lebih baik, dan situs web memiliki peluang yang lebih besar untuk ditemukan dan diakses oleh lebih banyak orang.

Artikel ini akan dibaca oleh: Mohammad Faesal Febriandyono, Muhammad Fairuz Zahir, Nabilahusna Nurul Imani, Naviatul Fadilla Nurrohmah, dan Nur Rahma Martiyana.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

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

  1. AnonimJumat, 02 Juli 2021 pukul 10.04.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimJumat, 02 Juli 2021 pukul 10.05.00 WIB

      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. AnonimJumat, 02 Juli 2021 pukul 10.05.00 WIB

      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. AnonimJumat, 02 Juli 2021 pukul 10.08.00 WIB

    Apakah penggunakan tag frase yang berlebih akan memengaruhi kualitas konten?

    BalasHapus
    Balasan
    1. AnonimJumat, 02 Juli 2021 pukul 10.10.00 WIB

      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 -