Tag Mark HTML5 dan Fungsinya
Tag <mark> pada HTML digunakan untuk mendefinisikan teks mark. Tag ini digunakan untuk menyoroti bagian dari teks pada paragraf. Tag <mark> adalah tag baru yang merupakan bagian dari HTML5.
Sintak:
<mark> Konten... </mark>
Contoh:
Sebelum mempelajari materi tentang Tag Mark HTML5 dan Fungsinya, terlebih dahulu pelajari materi tentang: Tag Header HTML5 dan Fungsinya, Cara Membuat Status Progress HTML5, dan Tanda Kurung pada HTML5 dan Fungsi Tag RP.
Salah satu elemen penting dalam keseharian pengembangan web adalah tag <mark> dalam HTML5. Elemen ini memberikan cara yang sederhana namun efektif untuk menyorot atau menandai teks tertentu di dalam halaman web. Dalam artikel ini, akan diulas lebih lanjut tentang penggunaan, manfaat, dan cara terbaik untuk memanfaatkan tag <mark>.
Tag <mark> adalah elemen HTML5 yang digunakan untuk menyorot atau menandai sebagian teks di dalam halaman web. Ini memungkinkan pengembang untuk menonjolkan teks tertentu sehingga lebih mudah dikenali oleh pengguna.
<mark> Konten... </mark>
<!DOCTYPE html>
<html>
<head>
<title>
tag mark
</title>
<style>
body
{
text-align:center;}
h1
{
color:green;}
</style>
</head>
<body>
<h1>
Belajar Program
</h1>
<h2>
Tag Mark
</h2>
<p>
<mark>
Blog ElfanMauludi:
</mark>
Merupakan
<mark>
Portal Komputer
</mark>
dan Informasi Lainnya
</p>
</body>
</html>
Output:
Belajar Program
Tag Mark
Blog ElfanMauludi: Merupakan Portal Komputer dan Informasi Lainnya
Baca Juga:
Contoh: Properti CSS juga dapat digunakan untuk mengubah warna elemen mark dan properti lainnya.
<!DOCTYPE html>
<html>
<head>
<title>tag mark
</title>
<style>
body
{
text-align:center;}
h1
{
color:green;}
mark
{
background-color:green;
color:white;}
</style>
</head>
<body>
<h1>
Blog Komputer
</h1>
<h2>
Tag Mark
</h2>
<p>
<mark>
Mari makan,
</mark>
dan
<mark>
Minum
</mark>
Sepuasnya.
</p>
</body>
</html>
Output:
Blog Komputer
Tag Mark
Mari makan, dan Minum Sepuasnya.
Contoh: Penggunaan Tag <mark>.
<!DOCTYPE html>
<html>
<body>
<p>
Ini adalah <mark>teks yang disorot</mark> dalam sebuah paragraf.
</p>
</body>
</html>
Penjelasan: Pada contoh yang diberikan sebelumnya, tag <mark> mengapit teks yang ingin disorot. Penyorotan yang diberikan oleh <mark> dapat bervariasi tergantung pada peramban dan gaya default yang diterapkan.
Contoh: Penyesuaian dan Gaya.
<!DOCTYPE html>
<html>
<body>
<p>
Ini adalah
<mark
style="background-color: yellow;">
teks yang disorot
</mark>
dengan gaya khusus.
</p>
</body>
</html>
Penjelasan: Pengguna dapat menyesuaikan tampilan dari <mark> menggunakan CSS atau atribut style untuk mengubah warna, latar belakang, atau gaya lainnya yang sesuai dengan desain halaman web.
Contoh: Penggunaan JavaScript.
<!DOCTYPE html>
<html>
<body>
<script>
const markedText =
document.querySelector('mark');
markedText.classList.add('highlight');
</script>
</body>
</html>
Penjelasan: Dengan JavaScript, pengguna dapat menambahkan atau menghapus kelas pada elemen <mark>, memungkinkan kustomisasi lebih lanjut atau pengaturan tampilan yang dinamis.
Manfaat tag <mark>:
- Penandaan Penting: Memungkinkan untuk menyorot teks yang dianggap penting atau relevan dalam suatu konteks tertentu.
- Memudahkan Identifikasi: Membantu pengguna dalam mengidentifikasi informasi kunci atau bagian yang lebih signifikan dalam teks panjang.
- Aksesibilitas yang Meningkat: Membantu pengguna dengan kebutuhan aksesibilitas dalam menyorot dan mengenali bagian-bagian penting dari teks.
Keunggulan Tag <mark> dalam HTML5 untuk Menyoroti Teks
Tag <mark> adalah elemen HTML5 yang sederhana namun kuat yang memberikan kemampuan untuk menyoroti atau menandai teks tertentu di dalam halaman web. Dalam artikel ini, akan mengeksplorasi keunggulan-keunggulan utama dari penggunaan tag <mark>:
- Penyorotan Teks yang Penting: Tag <mark> memungkinkan penyorotan teks yang dianggap penting atau relevan dalam suatu konteks. Penggunaannya membantu menonjolkan bagian-bagian kunci dalam teks, memudahkan pengguna dalam mengidentifikasi informasi penting.
- Meningkatkan Keterbacaan dan Pemahaman: Dengan menyoroti teks, elemen <mark> membantu meningkatkan keterbacaan konten. Ini memungkinkan pengguna untuk dengan mudah mengidentifikasi dan memahami bagian-bagian yang lebih penting atau relevan dalam teks yang panjang atau kompleks.
- Fleksibilitas dalam Penyesuaian Tampilan: Tag <mark> dapat disesuaikan dengan mudah menggunakan CSS untuk mengubah tampilan sorotan teks. Pengguna dapat menyesuaikan warna, latar belakang, ukuran teks, atau gaya lainnya untuk menonjolkan teks sesuai dengan kebutuhan desain halaman web.
- Aksesibilitas yang Ditingkatkan: Penggunaan tag <mark> membantu meningkatkan aksesibilitas. Bagi pengguna yang menggunakan pembaca layar atau memiliki kebutuhan aksesibilitas lainnya, penyorotan teks membantu dalam menyoroti informasi penting yang mungkin ingin difokuskan.
- Kemudahan Penggunaan: Tag <mark> merupakan solusi yang sederhana dan mudah digunakan. Menandai teks yang ingin disorot hanya memerlukan penutupan teks yang diinginkan di dalam tag <mark>, menjadikannya alat yang mudah digunakan oleh pengembang.
- Peningkatan Pengalaman Pengguna: Dengan menyoroti teks yang relevan atau penting, tag <mark> membantu meningkatkan pengalaman pengguna secara keseluruhan. Informasi yang disorot dengan jelas membantu pengguna untuk fokus pada poin penting atau perincian yang ingin disampaikan.
Tag <mark> adalah alat yang berguna dalam menyoroti informasi penting dalam halaman web. Dengan kemampuannya untuk menyoroti teks yang relevan dan penting, meningkatkan keterbacaan, aksesibilitas yang ditingkatkan, dan fleksibilitas dalam penyesuaian tampilan, penggunaan tag <mark> membantu meningkatkan kualitas konten dan pengalaman pengguna secara keseluruhan.
Penting untuk menggunakan tag <mark> secara bijak, menyoroti informasi yang benar-benar penting tanpa menyebabkan kebingungan dalam konteks teks. Dengan memanfaatkan fitur tag <mark> secara tepat, pengembang dapat meningkatkan fokus pengguna pada informasi kunci dan memperkuat pemahaman terhadap konten yang disajikan.
Sayangnya, tag <mark> dalam HTML5 memiliki kekurangan yang sangat terbatas karena sifatnya yang sederhana dan fungsionalitasnya yang cukup spesifik. Namun, ada beberapa pertimbangan yang perlu diperhatikan terkait penggunaan tag <mark>. Dalam artikel ini, akan membahas beberapa keterbatasan yang mungkin terkait dengan penggunaan tag <mark>.
Keterbatasan Tag <mark> dalam HTML5:
- Ketergantungan pada Penyajian Visual: Tag <mark> digunakan untuk menyoroti teks secara visual. Ketergantungan pada penyajian visual ini dapat menjadi kekurangan bagi pengguna dengan gangguan penglihatan atau pengguna yang bergantung pada pembaca layar. Pengguna tersebut mungkin tidak dapat memperoleh manfaat yang sama dari penyorotan visual pada teks.
- Konsistensi Penyorotan pada Berbagai Peramban: Meskipun tag <mark> diharapkan memberikan efek yang serupa pada berbagai peramban, konsistensi dalam tampilan penyorotan teks tidak selalu dijamin. Perbedaan dalam gaya default peramban dapat menyebabkan variasi yang tidak diinginkan dalam penyorotan teks.
- Pemahaman Konteks yang Tidak Jelas: Penyorotan teks menggunakan tag <mark> tidak selalu memberikan konteks yang jelas. Beberapa pengguna mungkin kesulitan memahami mengapa teks tersebut disorot atau bagian mana yang seharusnya menjadi fokus utama.
- Keterbatasan dalam Penyesuaian Gaya: Meskipun tag <mark> dapat disesuaikan dengan CSS, keterbatasan dalam mengubah gaya penyorotan terkadang dapat menjadi hambatan. Beberapa properti CSS mungkin memiliki dampak terbatas pada tampilan tag <mark> tergantung pada peramban dan gaya default yang diterapkan.
Tag <mark> adalah elemen yang berguna untuk menyorot teks tertentu dalam halaman web. Dengan kemampuannya yang sederhana namun efektif, <mark> memungkinkan pengembang untuk menonjolkan informasi penting atau relevan, memudahkan pengguna dalam mengidentifikasi bagian penting dalam teks, dan meningkatkan aksesibilitas konten web.
Penting untuk menggunakan tag <mark> secara bijaksana, mengarahkan pengguna ke informasi yang relevan dan memberikan penyorotan yang jelas tanpa mengganggu atau membingungkan konteks secara keseluruhan. Dengan memanfaatkan fitur tag <mark> dengan baik, pengguna dapat meningkatkan pengalaman pengguna dan mempertegas informasi penting dalam halaman web.
Referensi Tambahan:
Artikel ini akan dibaca oleh: Naeli Nurul Amalia, Novi Wulandari, Posvita Kusumaning Tunjungsari, Rafi Taufan Setiaji, dan Raras Indah Aningtyas.
5 komentar untuk "Tag Mark HTML5 dan Fungsinya"
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 -
Apa yang dimaksud dengan tag mark pada html?
BalasHapusTag mark merupakan elemen yang mewakili teks yang ditandai atau disorot untuk tujuan referensi atau notasi, karena relevansi atau pentingnya bagian yang ditandai tersebut dalam konteks yang melingkupinya.
HapusTag mark digunakan untuk menyorot beberap bagian teks yang terdapat dalam elemen lain seperti paragraf, yang digunakan untuk referens iatau tujuan notasi apa pun. Pada sebagian besar browser, teks yang berisi tag mark akan dirender dengan latar belakang kuning, tetapi dapat pula diubah menggunakan properti CSS.
HapusJadi fungsi tag mark itu hampir sama seperti proses pemberian warna stabilo pada catatan yang kita buat?
BalasHapusYups hampir sama demikian, namun dengan variasi atau kombinasi warna yang lebih banyak jika dilakukan modifikasi menggunakan properti CSS pada html.
Hapus