Apa perbedaan antara HTML dan XML?

HTML dan XML adalah dua bahasa markup populer dalam pengembangan aplikasi dan pengembangan web. Meskipun namanya serupa, tetapi HTML dan XML memiliki kasus penggunaan yang berbeda. HTML terutama digunakan untuk mengembangkan UI aplikasi. HTML membuat teks, gambar, tombol, kotak centang, dan kotak dropdown yang ditampilkan di situs web atau aplikasi. Sebaliknya, tujuan utama XML adalah pertukaran dan transfer data. XML mengodekan data dalam format yang dapat dibaca oleh mesin dan manusia. XML menjelaskan seperti apa data tersebut, sedangkan HTML menentukan cara menampilkan data ke pengguna akhir.

Baca tentang XML »

Apa saja persamaan antara HTML dan XML?

Baik XML maupun HTML—bersama dengan bahasa lain, seperti LaTeX, SVG, Markdown, dan SGML—termasuk dalam keluarga bahasa pemrograman yang disebut bahasa markup.

Bahasa markup adalah sistem untuk menggambarkan data, baik untuk manusia maupun program perangkat lunak lainnya. Bahasa markup menggunakan sintaksis yang mudah dibaca yang menentukan struktur, tipe, atribut, hubungan antara bagian, tampilan, dan makna data. 

Sebagai bahasa markup, HTML dan XML memiliki beberapa kesamaan.

Syntax

Bahasa markup biasanya memiliki sintaksis yang sama, termasuk tanda dan atribut.

Tanda

Tanda dilambangkan dengan simbol, seperti tanda kurung, koma, dan titik. Tanda menyediakan struktur dan tipe untuk elemen data. Tanda menentukan awal dan akhir dari setiap elemen konten. Dalam XML dan HTML, tanda diapit dalam kurung sudut, dengan setiap elemen berada di antara dua tanda pembuka dan penutup.

Atribut

Atribut memberikan informasi selengkapnya tentang elemen, seperti URL gambar. Dalam HTML dan XML, Anda menentukan atribut elemen di dalam tanda pembuka.

Struktur yang ditentukan dengan baik

Baik dokumen HTML maupun XML harus mematuhi aturan sintaksis bahasa yang diberikan untuk pemrosesan yang benar. Dokumen yang mengikuti aturan dikenal sebagai dokumen tersusun baik (well formed). Dokumen tersusun baik harus mencakup hal-hal berikut:

  1. Elemen root tunggal
  2. Tanda penutup (atau penutup otomatis) untuk semua elemen
  3. Nesting yang benar dengan tanda yang diapit dalam tanda lain
  4. Deskripsi karakter khusus yang benar, seperti & untuk simbol &

Developer menggunakan aplikasi editor teks atau lingkungan pengembangan terintegrasi (IDE) untuk menulis dan memeriksa sintaksis.

Baca tentang IDE »

Penggunaan

Developer biasanya tidak menggunakan bahasa markup HTML atau XML sendiri. Bahasa-bahasa ini dikombinasikan dengan bahasa skrip untuk membuat halaman web dan aplikasi dinamis. Aplikasi dinamis berubah karena data baru yang masuk.

Dalam kasus HTML, halaman aplikasi bersifat dinamis melalui bahasa skrip yang menghasilkan HTML baru. Untuk XML, bahasa skrip menggunakan informasi baru untuk memperbarui parameter.

Independensi platform

Independensi platform adalah kemampuan bahasa untuk bekerja pada sistem operasi dan platform yang berbeda tanpa memerlukan modifikasi apa pun. Baik XML maupun HTML berbasis teks dan menggunakan sintaksis sederhana. Hal ini membuat XML dan HTML mudah ditafsirkan oleh berbagai aplikasi perangkat lunak dan sistem operasi. Kode XML dan HTML berfungsi sebagaimana mestinya di seluruh peramban dan platform seluler yang berbeda.

Perbedaan sintaksis utama: HTML vs. XML

Perbedaan utama antara HTML dan XML terdapat pada tanda mereka. HTML memiliki tanda standar yang harus digunakan semua orang. Anda tidak dapat membuat tanda Anda sendiri saat menulis HTML. Sebaliknya, XML menggunakan tanda kustom yang dapat Anda tentukan sebagai pembuat dokumen.

Selanjutnya, kita akan membahas lebih lanjut tentang perbedaan tanda pada HTML dan XML.

Tanda yang telah ditentukan

Dalam HTML, ada tanda yang telah ditentukan. Hal ini berarti tanda itu sendiri berasal dari daftar set yang ditentukan oleh standar HTML. Standar HTML saat ini adalah HTML5. 

Berikut adalah contoh tanda HTML5 yang telah ditentukan:

  • <header> adalah tanda untuk header dokumen
  • <p> adalah tanda untuk paragraf
  • <h1> hingga <h6> adalah tanda untuk enam tingkat judul
  • <a> adalah tanda untuk hyperlink
  • <img> adalah tanda untuk gambar
  • <div> adalah tanda untuk elemen kontainer untuk mengelompokkan elemen lain
  • <body> adalah tanda yang menentukan konten utama

Sebaliknya, pada XML, tanda dapat diperpanjang, yang berarti dibuat khusus untuk tujuan dokumen. Sebagai pembuat dokumen, Anda akan menentukan tanda dan atribut. Tanda dan atribut tersebut bisa berupa kombinasi huruf dan angka.

Biasanya, pembuat dokumen menggunakan kata-kata sederhana yang menggambarkan data. Anda harus menulis skema XML yang menetukan tanda dan atribut untuk validasi dokumen dan pemahaman bersama.

Kami memberikan beberapa contoh sintaksis HTML dan XML dalam tabel berikut.

HTML

XML

<p class="body_paragraph">Ini adalah paragraf</p>

class= menandakan bahwa elemen memiliki atribut kelas, body_paragraph, yang dapat digunakan untuk menerapkan gaya tampilan.

<country language="English">Kanada</country>

country adalah elemen negara. language menandakan bahwa elemen memiliki atribut bahasa, yaitu bahasa Inggris (English).

<body>

<h1>Ini adalah Judul</h1>

<p class="body_paragraph">Ini adalah paragraf</p>

<div>

<h2>Ini adalah subjudul</h2>

<p>Ini adalah paragraf lain</p>

</div>

</body>

<continent name="Europe">

<country language="English">

Inggris

<currency>GBP</currency>

</country>

<country language="German">

Jerman

<currency>EUR</currency>

</country>

</continent>

Tanda penutup otomatis

Dalam HTML, beberapa elemen dapat menggunakan tanda penutup otomatis—ditandai dengan garis miring penutup—karena kurangnya konten. Sebagian kecil tanda HTML dapat menggunakan tanda penutup otomatis.

Sebaliknya, tanda penutup otomatis dalam XML dapat ada di tempat mana pun yang tidak memiliki konten.

HTML

XML

<img src="my_image.jpg" alt="My image" />

<country name="United Kingdom" currency="GBP" />

Perbedaan utama lainnya: HTML vs. XML

Terlepas dari persamaannya, XML dan HTML memiliki beberapa perbedaan.

Tujuan

HTML umumnya dikenal sebagai bahasa web. Tujuan utama HTML adalah untuk menampilkan konten, yang diberikan dalam dokumen berbasis teks, dalam bentuk grafis di peramban.

Sebaliknya, XML memungkinkan aplikasi yang berbeda untuk bertukar dan menyimpan data dan strukturnya dengan cara yang dipahami secara universal. Tujuan utama XML adalah untuk memungkinkan berbagai jenis aplikasi, seperti basis data, untuk memahami dan menggunakan data yang sama dan strukturnya. 

Pengetikan

HTML menggunakan pengetikan dinamis, dan tipe atribut diperiksa saat runtime terhadap tipe data yang diharapkan. Misalnya, jika atribut yang seharusnya adalah angka, tetapi yang dimasukkan adalah string, hal ini dapat menyebabkan kesalahan atau perilaku yang tidak diharapkan pada halaman web pada saat runtime. Pengetikan dinamis memungkinkan perubahan pada halaman web dengan data masuk baru.

Sebaliknya, XML menggunakan pengetikan statis, dan jenis atribut sudah ditentukan sebelumnya dalam skema XML dan diperiksa sebelum kompilasi atau pemrosesan. Pengetikan statis menghasilkan lebih sedikit kesalahan, tetapi konten yang dinamis juga sedikit.

Skema

Definisi tipe dokumen (DTD) atau skema menyediakan struktur yang dapat divalidasi dan diulang untuk dokumen serupa. DTD biasanya menyertakan informasi, seperti berikut ini:

  • Versi HTML atau XML yang digunakan
  • Elemen dan atribut yang diizinkan
  • Aturan untuk struktur dokumen dan hubungan elemen

Dalam HTML, DTD adalah deklarasi yang disertakan di awal dokumen HTML.

Dalam XML, DTD adalah file terpisah. DTD lebih penting dalam XML karena tanda XML ditentukan oleh pembuat dokumen. DTD berkontribusi pada pemahaman bersama tentang tanda antara pengirim dan penerima data.

Kapan menggunakan HTML vs. XML

HTML adalah tipe markup yang dikenal sebagai bahasa presentasi. Nama bahasa presentasi disebabkan karena faktanya untuk tujuan tampilan. Anda menggunakan HTML untuk membuat halaman web dan aplikasi web sisi klien. HTML biasanya dikombinasikan dengan Cascading Style Sheets (CSS) untuk tujuan pengaturan tampilan dan bahasa pemrograman JavaScript untuk perilaku dinamis.

Sebaliknya, Anda menggunakan XML untuk pertukaran data di antara dua aplikasi atau sistem. Untuk memahami format yang sama, aplikasi telah berbagi skema XML yang menentukan konten file XML.

Meskipun XML masih digunakan secara luas, tetapi JSON, bahasa markup ringan lainnya untuk pertukaran data, sekarang lebih populer karena penguraiannya yang cepat. Anda dapat membaca perbandingan JSON dan XML untuk memilih format pertukaran data terbaik untuk Anda.

Cara menggunakan HTML dan XML secara bersamaan

XML dapat disematkan dalam HTML dan diurai dengan bahasa pemrograman JavaScript untuk membuat halaman web yang dinamis. Sama halnya dengan HTML yang juga dapat disematkan dalam XML jika diperlukan sehingga menggunakan data karakter (CDATA) untuk plaintext. Lihat contoh berikut.

XML dalam HTML

HTML dalam XML

<html>

  <head>

    <title>Halaman XML Tersemat</title>

    <script type="text/xml">

      <data>

        <item>

          <name>Apple</name>

          <price>1.00</price>

        </item>

        <item>

          <name>Markisa</name>

          <price>2,00</price>

        </item>

      </data>

    </script>

  </head>

  <body>

    <h1>Harga Buah Dinamis</h1>

    <div id="output"></div>

    <script>

      var xml = document.querySelector('script[type="text/xml"]').textContent;

      var parser = new DOMParser();

      var doc = parser.parseFromString(xml, "text/xml");

      var output = document.querySelector('#output');

      var items = doc.getElementsByTagName('item');

      for (var i = 0; i < items.length; i++) {

        var item = items[i];

        var name = item.getElementsByTagName('name')[0].textContent;

        var price = item.getElementsByTagName('price')[0].textContent;

        output.innerHTML += '<div><strong>' + name + '</strong>: ' + price + '</div>';

      }

    </script>

  </body>

</html>

<embeddedHTML>

    <title>Kode HTML yang disematkan dalam XML</title>

    <description><![CDATA[

        <div>

            <h1>Embedded HTML header</h1>

            <p>Embedded HTML paragraph.</p>

        </div>

    ]]></description>

</embeddedHTML>

Extensible HyperText Markup Language (XHTML) adalah bahasa markup lain yang menggabungkan HTML dan XML dalam sintaksisnya.

Ringkasan perbedaan utama: HTML vs. XML

 

HTML

XML

Apa itu?

Bahasa markup digunakan terutama untuk menampilkan konten terstruktur di peramban.

Bahasa markup digunakan terutama untuk pertukaran data terstruktur di antara sistem komputer.

Tahun rilis

1993.

1998.

Tujuan

Bahasa presentasi.

Bahasa pertukaran data.

Digunakan saat

Membangun halaman web sisi klien atau aplikasi web.

Bertukar data antara di dua sistem (tetapi periksa apakah JSON adalah format yang lebih baik untuk Anda).

Tanda

Tanda yang telah ditentukan.

Tanda yang dapat diperpanjang.

Pengetikan

Dinamis.

Diperbaiki saat menggunakan skema XML.

Bagaimana AWS dapat mendukung kebutuhan HTML dan XML Anda?

Semua layanan integrasi data Amazon Web Services (AWS) dapat memproses file XML. Berikut dua contohnya:

  • AWS Glue adalah layanan integrasi data nirserver yang dapat Anda gunakan untuk menyiapkan data dengan antarmuka visual tunjuk dan klik yang interaktif tanpa menulis kode. AWS Glue DataBrew dapat memasukkan semua tipe format file, termasuk XML.
  • Amazon Simple Queue Service (Amazon SQS) adalah layanan antrean pesan terkelola penuh yang dapat Anda gunakan untuk mengirim, menyimpan, serta menerima pesan antarkomponen perangkat lunak pada volume berapa pun. Pesan Amazon SQS dapat memuat hingga 256 KB teks data, termasuk data XML, JSON, dan yang tidak diformat.

Sama halnya dengan AWS yang menawarkan seperangkat alat dan layanan yang luas untuk mengembangkan, melakukan deployment, dan mengoperasikan aplikasi Anda dalam skala besar. Misalnya, berikut adalah dua layanan yang dapat Anda gunakan:

  • Menggunakan AWS Amplify, Anda dapat membangun UI pixel-perfect secara visual. Hubungkan UI frontend Anda ke backend cloud hanya dengan beberapa klik.
  • Dengan Amazon Lightsail, Anda dapat menggunakan tumpukan pengembangan yang telah dikonfigurasi sebelumnya untuk membuat aplikasi dan situs web khusus hanya dalam beberapa klik.

Mulai pengembangan aplikasi Anda di AWS dengan membuat akun sekarang juga.

Langkah Berikutnya dengan AWS