Pengertian HTML dan Sejarahnya
dalam artikel ini, kami akan membahas semua hal tentang HTML, termasuk apa itu HTML, pengertian HTML, dan lain sebagainya. Selamat membaca!
HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa markup standar untuk membuat dan menyusun halaman dan aplikasi web. Anda bisa menggunakan bahasa markup ini untuk bagian paragraf, heading, maupun link pada suatu web page.
Sejarah HTML dimulai oleh Tim Berners-Lee, seorang ahli fisika di lembaga penelitian CERN yang berlokasi di Swiss. Versi pertamanya dirilis pada tahun 1991, dengan 18 tag. Sejak saat itu, setiap kali ada versi barunya, pasti akan selalu ada tag dan attribute (tag modifier) yang juga baru.
Ketika bekerja dengan bahasa markup ini , Anda menggunakan struktur kode sederhana (tag dan attribute) untuk mark up halaman website. Misalnya, Anda membuat sebuah paragraf dengan menempatkan enclosed text di antara tag pembuka <p> dan tag penutup </p>.
<p>This is how you add a paragraph in HTML.</p>
<p>You can have more than one!</p>Berkat popularitasnya yang terus meningkat, bahasa markup ini kini dianggap sebagai standar web resmi. Spesifikasi HTML dikelola dan dikembangkan 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 didukung oleh beberapa versi terbaru browser.
Kemudian, pada tahun 2014, HTML5 mulai diperkenalkan. Dengan diperkenalkannya HTML5, terdapat semantic baru seperti <artcile>, <header>, dan <footer> yang memperjelas bagian-bagian dalam konten.
Bagaimana Cara Kerja HTML?
File HTML diakhiri dengan ekstensi .html atau .htm. Ekstensi file ini bisa dilihat 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. Contohnya, halaman beranda, ‘Tentang Kami’, halaman kontak memiliki dokumennya sendiri-sendiri.
Masing-masing halaman tersebut terdiri atas serangkaian tags (bisa disebut juga elements), yang tersusun untuk membentuk sebuah halaman website. Tag tersebut membuat hierarki yang menyusun konten hingga menjadi bagian, paragraf, heading, dan block konten lainnya.
Sebagian besar elemen bahasa markup ini memiliki tag pembuka dan penutup yang menggunakan syntax <tag></tag>.
Berikut contoh kode dari susunan atau struktur HTML:
<div>
<h1>The Main Heading</h1>
<h2>A catchy subheading</h2>
<p>Paragraph one</p>
<img src="/" alt="Image">
<p>Paragraph two with a <a href="https://example.com">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 dibuka dan ditutup 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 dibuka dan ditutup dengan tag <li></li>. Sebagai contoh, di bawah ini adalah tampilan dasar daftar tidak berurutan dalam HTML:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>Tag Inline
Sebagian besar tag inline digunakan 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://example.com/">Click me!</a>Gambar (image) juga merupakan elemen inline. Anda dapat menambahkan satu gambardengan menggunakan <img> tanpa harus membubuhkan tag penutup.Hanya saja, Anda disarankan menggunakan attribute src untuk menentukan path gambar, misalnya:<img src="/images/example.jpg" alt="Example image">