Markup Language: Pengertian, Fungsi, Cara Kerja, & Contohnya

Markup language atau bahasa markup adalah bahasa penanda yang memakai tag untuk memberi label dan struktur pada teks, gambar, atau data dalam dokumen digital, sehingga browser dan mesin pencari tahu cara menampilkan dan memahami isinya. Contoh paling umum adalah HTML untuk halaman web dan XML untuk data. Istilah ini sering ditemui di dunia pemrograman website.

Bahasa tersebut dapat digunakan untuk berkomunikasi dengan komputer pada proses pengembangan sebuah situs web.

Penasaran bagaimana cara kerjanya dan apa saja contohnya? Tepat sekali, SiteSpirit akan membahas tentang apa itu bahasa markup, cara kerja, manfaat, hingga contoh-contohnya. Pastikan untuk membaca sampai akhir, ya!

Apa itu Markup Language?

Bahasa markup atau markup language adalah aturan penulisan tag untuk menandai struktur dan makna teks, gambar, atau data pada dokumen digital, sehingga browser dapat menampilkannya sesuai layout yang dirancang.

Bahasa markup dapat digunakan untuk menata dokumen, menambah format, atau menentukan tampilan elemen-elemen pada halaman web.

Bahasa markup berbeda dengan bahasa pemrograman. Bahasa pemrograman digunakan untuk mengembangkan website atau aplikasi yang fungsional, sedangkan markup language fokus pada tampilan dan struktur konten yang ada pada halaman tersebut.

Markup language menggunakan tanda atau tags sebagai sarana komunikasi. Tags tersebut dapat dibaca dan diterjemahkan oleh komputer menjadi tampilan halaman website yang sesuai dengan layout-nya.

Ada dua jenis markup language yang digunakan dalam proses pengembangan website, yaitu semantic dan presentational.

Markup semantik adalah aspek yang membantu search engine, browser, dan developer untuk memahami konten yang ada pada halaman website.

Sementara itu, presentational markup adalah aspek yang fokus pada presentasi atau tampilan konten. Presentasi tersebut dapat meliputi ukuran, font, warna, layout, dan gaya visual lainnya.

Dokumen, Markup, CSS, dan JavaScript: Apa Bedanya?

Dalam istilah document and markup, dokumen adalah isi yang ingin disajikan, seperti teks, gambar, atau data, sedangkan markup adalah tag yang ditempelkan pada isi tersebut untuk memberi struktur dan makna. Misalnya, <h1> menandai judul utama dan <p> menandai paragraf.

HTML sebagai bahasa markup hanya menjelaskan struktur dan makna konten. Tampilan visual seperti warna, ukuran font, dan tata letak umumnya diatur oleh CSS, sedangkan perilaku interaktif diatur oleh JavaScript. Karena itu, bahasa markup bukan bahasa pemrograman: ia tidak memiliki logika seperti percabangan atau perulangan, melainkan hanya menandai isi dokumen.

Manfaat Markup Language

Menggunakan bahasa markup pada proses pengembangan website memiliki beberapa manfaat, di antaranya adalah sebagai berikut.

1. Meningkatkan SEO

Menggunakan markup pada konten adalah ibarat landmark pada peta. Tanda berupa tag tersebut akan menunjukkan titik penting yang dapat memudahkan search engine untuk memahami struktur konten.

Tanda markup heading seperti <h1>, <h2>, dan seterusnya adalah penunjuk arah yang dapat memudahkan mesin pencari untuk memahami hierarki yang ada pada konten tersebut.

Sama halnya seperti membeli buku, bukankah Anda akan memperhatikan struktur konten melalui daftar isi untuk melihat apakah buku tersebut cocok dengan tujuan pembeliannya?

Hal tersebut juga berlaku pada konten website. Pengguna akan mencari informasi yang sesuai dengan apa yang dicarinya melalui struktur tersebut.

Bahasa markup juga merupakan salah satu sarana berkomunikasi dengan mesin pencari, sehingga konten Anda akan dipahami dengan mudah.

Dengan itu, konten tersebut dapat ditampilkan di halaman hasil pencarian yang relevan untuk meningkatkan web traffic.

2. Meningkatkan Aksesibilitas

Menggunakan markup dapat memudahkan pengguna disabilitas untuk mengakses situs Anda.

Pasalnya, markup language dapat diterjemahkan oleh teknologi bantu seperti pembaca layar. Hal tersebut dapat membantu cara akses yang berbeda dari biasanya.

Menggunakan bahasa markup pada konten berarti menciptakan website yang ramah bagi semua pengguna, sehingga dapat meningkatkan aksesibilitas halaman web tersebut.

3. Konsistensi Layout

Bahasa markup dapat mendefinisikan isi konten beserta strukturnya dengan mudah. Hal itu membuat setiap halaman memiliki struktur yang konsisten, misalnya judul selalu ditandai sebagai heading dan menu selalu ditandai sebagai navigasi.

Struktur yang konsisten ini memudahkan CSS untuk mengatur tampilan secara seragam. Adapun tampilan yang responsif di berbagai device diatur oleh CSS, misalnya melalui media query dan tata letak yang fleksibel, bukan oleh bahasa markup itu sendiri. Kombinasi keduanya dapat meningkatkan User Experience (UX).

4. Menambah Interaktivitas

Bahasa markup seperti HTML dapat mendukung elemen-elemen tambahan yang bersifat interaktif, seperti button, formulir, atau hyperlink.

Hal tersebut dapat membuat pengguna juga dapat berinteraksi langsung dengan website.

5. Struktur yang Sistematis

Sebagaimana fungsi utamanya untuk mengatur struktur dokumen digital, markup language dapat membantu Anda untuk mengorganisir konten yang ada pada halaman website.

Dengan itu, elemen-elemen seperti judul, paragraf, tabel, dan gambar dapat tersusun dengan rapi.

Cara Kerja Markup Language

Berikut adalah gambaran bagaimana bahasa markup bekerja.

• Sebelum menggunakan bahasa markup, mulailah dengan sebuah konten seperti gambar, teks, tautan, atau data lainnya. Itu disebabkan karena markup language memerlukan sebuah konten untuk diberi tanda atau tags
• Gunakan tag untuk mengubah konten. Umumnya, tag tersebut diapit dengan tanda kurung seperti <ini>. Jika menggunakan HTML, Anda dapat menggunakan tag <p> untuk elemen paragraf, <img> untuk gambar, <a href> untuk hyperlink, dan beberapa aturan tag lainnya sesuai kebutuhan
• Setelah semua konten ditandai dengan tag, maka browser akan lebih mudah untuk membacanya. Dengan itu, browser dapat menampilkan presentasi konten sesuai dengan bahasa markup tersebut

Contoh Markup Language

Berikut merupakan contoh-contoh bahasa markup yang paling populer.

1. Hypertext (HTML)

<h1>Judul Halaman</h1>
<p>Ini adalah paragraf dengan teks <b>tebal</b> dan sebuah <a href="/kontak/">tautan</a>.</p>

Contoh markup HTML sederhana

HTML atau Hypertext Markup Language adalah salah satu bahasa yang digunakan untuk menyusun struktur konten, seperti paragraf, heading, dan hyperlink.

Bahasa ini merupakan jenis yang paling populer dan sering digunakan oleh para developer.

HTML menggunakan tag yang sudah ditentukan dengan aturan-aturannya, seperti <p> untuk paragraf, <b> untuk bold, <a> untuk anchor text link, dan lain sebagainya.

Bahasa ini dapat ditulis pada text editor dan diintegrasikan dengan beberapa styling sheets dan scripting language, seperti Cascading Style Sheet (CSS) dan Javascript.

2. Extensible (XML)

<produk>
  <nama>Kemeja Batik</nama>
  <harga mata_uang="IDR">150000</harga>
</produk>

Contoh markup XML sederhana

Extensible Markup Language (XML) bukanlah versi perpanjangan dari HTML. XML merupakan turunan yang lebih sederhana dari SGML. Bahasa ini dibuat oleh World Wide Web Consortium (W3C) dan digunakan untuk menyimpan dan mengirimkan data yang terstruktur.

Lebih lanjut, XML dapat menyimpan data digital dalam bentuk teks sederhana, sehingga akan lebih dimengerti oleh server.

Dengan itu, Anda tak perlu memodifikasi atau mengubah apapun untuk menyimpan atau mengirimkan data antar server.

Berbeda dengan HTML yang menggunakan tag tertentu yang telah ditentukan, Anda dapat membuat tag sendiri pada XML dengan tanda penutup di dalamnya.

3. Extensible Hypertext (XHTML)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head><title>Contoh XHTML</title></head>
  <body>
    <p>Setiap tag wajib ditutup, termasuk tag kosong seperti <br /></p>
  </body>
</html>

Contoh markup XHTML sederhana

XHTML atau Extensible Hypertext Markup Language adalah perpaduan antara HTML dan juga XML.

Bahasa ini dibuat berdasarkan formulasi gabungan dari kedua markup tersebut, yaitu kemampuan presentasi dari HTML dan aturan sintaks dari XML.

Dengan menggunakan bahasa ini, Anda dapat memastikan konsistensi markup. Akan tetapi, XHTML lebih ketat daripada HTML dalam menangani kesalahan.

Jika halaman XHTML disajikan sebagai application/xhtml+xml dan terdapat kesalahan sintaks, browser akan menampilkan pesan error alih-alih halaman Anda. Namun, jika disajikan sebagai text/html, browser tetap menampilkannya seperti HTML biasa.

4. Standard Generalized (SGML)

Standard Generalized Markup Language (SGML) adalah kerangka yang digunakan untuk membuat bahasa sesuai dengan kebutuhan yang lebih spesifik.

Anda harus membuat Document Type Definition (DTD) terlebih dahulu sebelum menggunakan SGML.

Kemudian, DTD tersebut akan berfungsi untuk menetapkan batasan, memahami struktur, dan meletakkan berbagai macam elemen pada dokumen.

Nah, itulah beberapa informasi tentang markup language. Pada intinya, Anda akan membutuhkan bahasa markup untuk membuat website.

Hal tersebut bertujuan agar struktur dan format halaman yang tampil sesuai dengan tujuan. Dengan itu, browser akan lebih mudah untuk memahami struktur konten yang Anda sajikan.

Penggunaan bahasa ini pada pengembangan website memiliki beberapa keuntungan, di antaranya adalah meningkatkan peringkat dan traffic, serta menjadikan struktur website lebih konsisten sehingga tampilannya mudah diatur dengan CSS pada berbagai device.

Jika bisnis Anda belum mempunyai situs web, Anda tak perlu susah payah untuk membuatnya sendiri. Sitespirit menyediakan jasa pembuatan website dengan desain khusus dan struktur kode yang rapi, mulai dari perencanaan hingga peluncuran dan pemeliharaan.

Konsultasikan kebutuhan Anda!