Apa Itu HTML | Simak Penjelasannya! • PT DIENG CYBER INDONESIA

Pengertian HTML dan Sejarahnya

Apa itu HTML ? Hypertext Markup Language atau HTML adalah bahasa markup standar yang di gunakan untuk membuat halaman website dan aplikasi web.

Sejarah HTML di mulai oleh Tim Berners-Lee, seorang ahli fisika di lembaga penelitian CERN yang berlokasi di Swiss. Versi pertamanya di rilis pada tahun 1991, dengan 18 tag. Sejak saat itu, setiap kali ada versi barunya yang pasti akan selalu ada tag dan attribute (tag modifier) yang baru juga.

Ketika bekerja dengan bahasa markup ini , Anda menggunakan struktur kode sederhana (tag dan attribute) untuk mark up halaman website. Misalnya, ketika Anda membuat sebuah paragraf dengan menempatkan enclosed text di antara tag pembuka <p> dan tag penutup </p>.

<p>Ini tag pembuka</p>

<p>Ini tag penutup </p>

Berkat popularitasnya yang terus meningkat, bahasa markup ini kini di anggap sebagai standar web resmi. Spesifikasi HTML di kelola dan di kembangkan oleh World Wide Web Consortium (W3C). Berdasarkan HTML Element Reference milik Mozilla Developer Network, saat ini ada 140 tag HTML, meskipun sebagiannya sudah tidak lagi di dukung oleh beberapa versi terbaru browser.

Kemudian, pada tahun 2014 HTML5 mulai di perkenalkan. Dengan diperkenalkannya HTML5, terdapat semantic baru seperti <artcile>, <header>, dan <footer> yang memperjelas bagian-bagian dalam konten. Nah, setelah Anda tahu apa itu HTML, selanjutnya kami akan membahas cara kerjanya.

Cara Kerja HTML

File HTML di akhiri dengan ekstensi .html atau .htm. Ekstensi file ini bisa di lihat dengan mengunakan web browser apa pun (seperti Google Chrome, Safari, atau Mozila Firefox). Browser tersebut membaca file HTML dan merender kontennya sehingga user internet bisa melihat dan membacanya.

Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Masing-masing halaman tersebut terdiri atas serangkaian tags atau bisa di sebut juga elements, yang tersusun untuk membentuk sebuah halaman website. Tag tersebut membuat hierarki yang menyusun konten sehingga menjadi bagian, paragraf, heading, dan block konten yang lainnya.

Sebagian besar elemen bahasa markup ini memiliki tag pembuka dan penutup yang menggunakan syntax <tag></tag>.

Berikut merupakan contoh kode dari susunan atau struktur HTML:

<div>

<h1>The Main Heading</h1>

<h2>A catchy subheading</h2>

<p>Paragraph one</p>

<p>Paragraph two with a <a href=”https://diengcyber”>hyperlink</a></p>

</div>

Elemen teratas dan terbawah adalah division sederhana (<div></div>) yang bisa Anda gunakan untuk mark up bagian konten yang lebih besar.
Susunan di atas terdiri atas heading (<h1></h1>), subheading (<h2></h2), dua paragraf (<p></p>), dan satu gambar (<img>).
Paragraf kedua meliputi sebuah link (<a></a>) dengan attribute href yang terdiri atas URL tujuan.
Tag gambar memiliki dua attribute, src untuk path gambar dan alt untuk deskripsi gambar.

Pengertian Tag HTML dan Fungsinya

Tag HTML memiliki dua tipe utama: block-level dan inline tags.

Elemen block-level memakai semua ruang yang tersedia dan selalu membuat line baru di dalam dokumen. Contoh dari tag block adalah heading dan paragraf.
Elemen inline hanya memakai space sesuai dengan kebutuhannya dan tidak membuat line baru di halaman. Biasanya elemen ini akan memformat isi konten dari elemen block-level. Contoh dari tag inline adalah link dan emphasized strings.

Tag Block-Level

Tiga tag block-level yang harus dimiliki oleh setiap dokumen HTML adalah <html>, <head>, dan <body>.

Tag <html></html> adalah elemen level tertinggi yang menyertakan setiap halaman HTML.
Tag <head></head> menyimpan informasi meta, seperti judul dan charset halaman.
Tag <body></body> melampirkan semua konten yang muncul pada suatu halaman.

<html>

<head>

<!– META INFORMATION –>

</head>

<body>

<!– PAGE CONTENT –>

</body>

</html>

Heading memiliki 6 level. Level tersebut bervariasi, mulai dari <h1></h1> sampai <h6></h6>, di mana h1 merupakan level heading tertinggi dan h6 adalah level terendah. Paragraf di buka dan di tutup dengan tag <p></p>, sedangkan blockquote menggunakan tag <blockquote></blockquote>.
Division merupakan bagian konten yang lebih besar dan biasanya terdiri atas beberapa paragraf, gambar, kadang-kadang blockquote, dan elemen lebih kecil lainnya. Kita bisa membuat mark up dengan menggunakan tag <div></div>. Di dalam elemen div juga terdapat tag div lainnya.
Anda juga bisa menggunakan tag <ol></ol> untuk list yang berurutan dan <ul></ul> untuk list yang tidak berurutan. Masing-masing list item harus di buka dan di tutup dengan tag <li></li>. Sebagai contoh, di bawah ini adalah tampilan dasar daftar tidak berurutan dalam HTML:

<ul>

</ul>

Tag Inline

Sebagian besar tag inline di gunakan untuk memformat teks. Sebagai contoh, tag <strong></strong> akan render elemen ke format bold, sedangkan tag <em></em> akan ditampilkan dalam format italic.

Hyperlink adalah elemen inline yang mewajibkan adanya tag <a></a> dan attribute href untuk mengindikasi tujuan link:

<a href=”https://diengcyber.com/”>Click me!</a>

Gambar (image) juga merupakan elemen inline. Anda dapat menambahkan satu gambar dengan menggunakan <img> tanpa harus membubuhkan tag penutup. Hanya saja, Anda di sarankan menggunakan attribute src untuk menentukan path gambar.

Apa yang Membedakan HTML dengan HTML5?

Sejak pertama di perkenalkan, bahasa ini telah melewati perkembangan yang cukup signifikan. W3C terus merilis versi dan update terbaru sembari mencetak sejarah dan mengukuhkan keberadaannya.

HTML4 (di kenal sebagai “HTML”) di rilis pada tahun 1999 dan versi terbarunya di perkenalkan pada publik pada tahun 2014, yaitu HTML5, versi terbaru ini menambahkan lebih banyak fitur baru ke bahasa mark up ini.

Salah satu fitur canggih di HTML5 adalah dukungan untuk embed audio dan video. Jadi, alih-alih menggunakan Flash player, kita bisa menyematkan file video dan audio ke halaman website dengan memanfaatkan tag <audio></audio> dan <video></video>. Fitur tersebut juga memiliki dukungan bawaan untuk SVG dan MathML untuk rumus matematika dan ilmiah.

HTML5 juga memperkenalkan beberapa perbaikan pada semantic. Tag semantic baru mengirimkan informasi pada browser tentang arti konten, yang tak hanya bermanfaat bagi pembaca, tapi juga mesin pencari.

Tag semantic yang paling banyak di gunakan adalah <article></article>, <section></section>, <aside></aside>, <header></header>, dan <footer></footer>.

Kelebihan dan Kekurangan HTML

Sama seperti hal teknis lainnya dalam dunia web, bahasa markup ini juga punya kelebihan dan kekurangannya.

Kelebihan HTML:

Di gunakan secara luas dan memiliki banyak sumber serta komunitas yang besar.
Di jalankan secara alami di setiap web browser.
Mudah di pelajari.
Open-source dan sepenuhnya gratis.
Rapi dan konsisten.
Menjadi standar resmi web, di kelola oleh (W3C).
Integrasi mudah dengan bahasa backend, seperti PHP dan Node.js.

Kekurangan HTML:

Umumnya di gunakan untuk halaman web statis. Untuk fitur dinamis, Anda bisa menggunakan JavaScript atau bahasa backend, seperti PHP.
Tidak bisa menjalankan logic. Alhasil, semua halaman web harus di buat terpisah meskipun menggunakan elemen yang sama, seperti header dan footer.
Fitur baru tidak bisa di gunakan dengan cepat di sebagian browser.
Perilaku browser terkadang sulit di prediksi. Misalnya, browser lama tidak selalu bisa merender tag yang lebih baru.

Hubungan HTML, CSS, dan JavaScript

Meskipun di nyatakan sebagai bahasa markup yang canggih dan mudah, HTML tidak sepenuhnya bisa membuat website yang profesional dan responsif. Bahasa ini hanya bisa di gunakan untuk menambah elemen dan membuat struktur konten.

Namun di satu sisi, bahasa ini bisa bekerja secara maksimal dengan dua bahasa frontend: CSS (Cascading Style Sheet) dan JavaScript Jika di gabungkan, kedua bahasa frontend ini bisa meningkatkan pengalaman user dan memberikan fungsi yang lebih canggih loh!.

CSS erat kaitannya dengan styling, seperti background, warna, layout, spacing, dan animiasi.
JavaScript memungkinkan Anda menambahkan fungsionalitas yang dinamis, seperti slider, pop-up, dan galeri foto.

Jika di gambarkan, berikut perbedaan HTML dan CSS dan JavaScript: HTML adalah orang yang tidak mengenakan busana apa pun, kemudian CSS adalah bajunya, kemudian JavaScript adalah aktivitas dan sikap orang tersebut.

Terimakasih telah membaca, semoga membantu.

Editor : felia vevi vistiana