HTML: Pengertian, Fungsi, Komponen, Jenis, dan Sejarahnya

HyperText Markup Language atau HTML adalah bahasa markup dalam pembuatan web. Bahasa pemrograman ini memiliki 3 komponen penting, yaitu tag, element, dan yang terakhir adalah attribute. Ketiganya adalah komponen penting yang digunakan saat Anda menuliskan kode HTML di website Anda.
html
Daftar Isi

HTML adalah bahasa yang bahasa yang harus ditamatkan oleh seorang web developer, apalagi bagi Anda yang seorang front-end developer.

Bahasa pemrograman ini juga merupakan komponen yang sangat penting dalam website. Contohnya saat Anda akan mengembangkan website, Anda akan mempunyai website yang unik karena Anda membuatnya sendiri menyesuaikan keinginan Anda dengan menggunakan elemen-elemen dan sistem drag-and-drop yang tersedia.

Oleh sebab itu, tidak ada ruginya untuk belajar HTML yang dapat memberikan Anda wawasan baru tentang bahasa pemrograman agar Anda bisa memiliki pemahaman baru yang bisa memudahkan pekerjaan Anda. Yuk, simak sampai habis!

Apa itu HTML?

HTML merupakan singkatan dari HyperText Markup Language dan didefinisikan sebagai bahasa markup untuk pembuatan web.

Bahasa ini terdiri dari sekumpulan simbol-simbol dan kode-kode yang nantinya di-insert ke dalam sebuah file yang mau ditampilkan di internet. 

Simbol-simbol yang digunakan pada bahasa ini menggunakan tags berupa simbol bracket “<” dan “>” serta sering kali menggunakan “<p>” untuk menjelaskan sebuah informasi tentang teks dalam dokumen dan bisa juga terdiri dari tags lain sebagai sub element.

Untuk membuat sebuah file HTML, ada standar khusus yang harus diikuti. Standar yang diikuti tersebut mengacu pada ASCII (American Standard Code for Information Interchange).

Keberadaan bahasa pemrograman ini dapat membantu Anda dalam menyusun heading dan paragraf atau membuat link, gambar, dan lainnya yang bisa terlihat di web page yang kemudian akan memberi tahu web browser bagaimana untuk menampilkan gambar dan tulisan web page.

Web browser yang mendukung bahasa pemrograman ini, seperti Google Chrome, Mozilla Firefox, dan Microsoft Edge.

Sejarah HTML

Perkembangan HTML adalah bahasa pemrograman pertama di World Wide Web (WWW). Pengembang pertamanya adalah orang yang sama dengan penemu WWW, yaitu Tim Berners-Lee. 

Awalnya pada akhir tahun 1991, Tim Berners-Lee mempublikasikan dokumen yang disebut “HTML Tags” yang menggambarkan 18 elemen.

Awalnya ini dikembangkan untuk membantu ilmuwan mengakses dokumen yang terdapat di dalam komputer.

Kemudian pada versi 2.0 digunakan standar untuk fitur utama yang berbasis pada penerapan pada tahun 1994 yang selanjutnya pada tahun 1995 HTML 2.0 dipublikasikan sebagai RFC 1866.

Versi ini mampu menampilkan data dan form yang bisa langsung diedit. Dan juga versi ini adalah cikal bakal dari website interaktif.

Lalu pada tahun 1997, kembali dipublikasikan pada versi 3.2 sebagai W3C Recommendation. Versi ini memberikan fitur baru, yaitu fitur figure, yang berfungsi untuk mendukung tampilan image.

Selanjutnya pada kurun waktu akhir tahun 1997 dan pertengahan tahun 1998, dipublikasikan lagi HTML 4.0 sebagai W3C Recommendation. Pada versi ini ditambahkan command dasar berupa image, text, table, form, dan link.

Setelah itu pada akhir tahun 1999 hingga pertengahan 2000, muncul kembali dengan versi 4.01. Kali ini juga dipublikasikan dengan standar internasional untuk Hypertext Markup Language, yaitu ISO/IEC 15445:2000. Versi ini adalah versi yang digunakan pada web browser mana pun.

Dan terakhir pada tahun 2104, versi terbaru muncul bernama HTML 5. Versi ini sudah melalui tahap perkembangan hingga dapat membuat tampilan dengan menggabungkan HTML, CSS, dan JavaScript.

Karena versi ini adalah versi paling mutakhir, jadi versi ini menjadi yang paling canggih karena dilengkapi fitur embed video dan audio.

Baca Juga: Mengenal Website Mobile Friendly dan Manfaatnya Bagi SEO

Fungsi HTML

Setelah mengetahui cara kerjanya, jadi sebenarnya seperti apa fungsi HTML itu? Langsung saja kita bahas di bawah ini tentang fungsi-fungsinya.

1. Foundation

Bahasa pemrograman ini berfungsi sebagai pondasi dari sebuah website. Selain itu, apabila dikombinasikan dengan bahasa pemrograman lain akan membuat tampilan website Anda lebih menarik.

2. Creation

Fungsi keduanya adalah dapat membantu dalam membuat halaman website Anda yang dapat membantu Anda untuk menyalurkan berbagai informasi-informasi melalui internet.

3. Tagging

Kemudian fungsi ketiganya adalah bisa menandai teks dan bagian-bagian dari web page. Dengan bantuan Hypertext Markup Language, maka halaman website Anda akan mudah dibaca oleh orang lain karena tersusun dengan rapi dan menarik.

4. Showing

Selanjutnya adalah dapat menampilkan halaman yang tidak membosankan karena Anda bisa menambahkan gambar, video, maupun audio dengan memanfaatkan bahasa pemrograman ini.

5. Directing

Dan yang terakhir, kini HTML bisa membantu Anda membuat halaman yang bisa mengarahkan pembaca website Anda ke halaman lainnya yang dikenal sebagai hyperlink.

Kelebihan HTML

Hypertext Markup Language memiliki beberapa kelebihan yang menjadikannya bahasa yang sangat penting dalam pengembangan web. Berikut ini adalah beberapa kelebihan utama HTML:

1. Sederhana dan Mudah Dipahami

HTML adalah bahasa yang relatif mudah dipelajari dan dipahami, bahkan oleh pemula. Ini membuatnya menjadi bahasa yang populer bagi banyak orang yang ingin membuat halaman web dasar.

2. Platform-Independen

Hypertext Markup Language dapat dijalankan di berbagai platform dan sistem operasi, sehingga halaman web yang dibuat dengan Hypertext Markup Language dapat diakses oleh berbagai perangkat, termasuk komputer, smartphone, dan tablet.

3. Kompatibilitas

Banyak browser web mendukung Hypertext Markup Language dengan baik, sehingga halaman web yang dibuat dengan HTML umumnya dapat diakses dengan baik di berbagai browser yang berbeda.

4. Pengembangan Terbuka

HTML adalah standar terbuka yang dikembangkan oleh World Wide Web Consortium (W3C). Ini berarti bahwa siapa saja dapat mengakses spesifikasi Hypertext Markup Language dan berkontribusi pada perkembangannya.

5. Integrasi dengan Bahasa Lain

Hypertext Markup Language dapat dengan mudah diintegrasikan dengan bahasa pemrograman lain seperti CSS (Cascading Style Sheets) untuk mengatur tampilan halaman web dan JavaScript untuk menambahkan interaktivitas.

Kekurangan HTML

Hypertext Markup Language adalah bahasa dasar untuk membangun halaman web, tetapi memiliki beberapa kekurangan yang perlu dipertimbangkan:

1. Statik

HTML pada dasarnya adalah bahasa markup statis, yang berarti bahwa halaman web yang dibuat dengan Hypertext Markup Language cenderung bersifat statis dan tidak memiliki interaktivitas yang tinggi tanpa bantuan bahasa pemrograman lain seperti JavaScript.

2. Keamanan Terbatas

HTML tidak memiliki banyak mekanisme keamanan bawaan, dan serangan keamanan web seperti Cross-Site Scripting (XSS) dan Cross-Site Request Forgery (CSRF) dapat terjadi jika tidak diatasi dengan benar.

3. Keterbatasan Fungsional

Hypertext Markup Language tidak memiliki banyak fungsionalitas tingkat tinggi seperti database dan pengolahan data. Anda perlu menggunakan bahasa pemrograman server-side seperti PHP, Python, atau Ruby untuk melakukan tugas-tugas ini.

4. Ketergantungan pada Peramban

Meskipun HTML adalah standar terbuka, setiap peramban web memiliki cara unik untuk menafsirkan dan menampilkan halaman Hypertext Markup Language. Ini dapat menghasilkan perbedaan dalam tampilan halaman web antar peramban.

Komponen HTML

Html
Komponen HTML © Unsplash

Sebelum melanjutkan ke cara kerjanya, Anda juga perlu mengetahui komponen-komponennya. Secara umum, komponen tersebut terdiri atas tag, elemen, dan atribut.

1. Tag

Pertama adalah tag, komponen ini yang menandakan awalan dan akhiran yang akan dibaca oleh web browser. Tag menggunakan bracket “<” dan “>” dan apabila dituliskan menjadi <…>.

Tag untuk HTML saat ini mencapai 250 tags dan Anda cukup perlu menghafal tags dasarnya berikut ini:

a. <html>

Tag ini digunakan untuk memulai halaman Hypertext Markup Language yang akan menampilkan elemen-elemen dan konten.

b. <head>

Tag <head> digunakan untuk membuat halaman Hypertext Markup Language yang meliputi tampilan deskripsi di hasil pencarian search engine, style dari konten (CSS), dan lainnya.

c. <title>

Tag ini digunakan untuk membuat judul website.

d. <body>

Tag ini digunakan untuk membuat isi website.

e. <h1> hingga <h6>

Digunakan untuk membuat heading pada bagian isi.

f. <p>

Tag ini untuk memulai sebuah paragraf.

g. <!–>

Dan yang terakhir ini digunakan untuk membuat sebuah komentar.

2. Element

Element adalah kumpulan dari keseluruhan kode dari tag pembuka sampai dengan tag penutup. Komponen kedua ini terdiri dari tag pembuka, isi konten, dan tag penutup. Selain itu, element juga disebut nested element. Contohnya seperti berikut:

<html>

<body>

<h2>Ayam Geprek<h2>

<p>Ayam geprek adalah makanan yang lezat.</p>

<body>

<html>

3. Attribute

Komponen ketiga ini adalah attribute. Pada bagian ini berisi informasi atau perintah tambahan yang ada di dalam element. Attribute berfungsi sebagai yang menjelaskan command dari tag pada element.

Berikut ini adalah attribute khusus yang digunakan beberapa tag, yaitu:

a. src

Attribute ini bisa digunakan pada tag <img>, <embed>, <iframe>, dan <audio>.

b. action

Attribute kedua ini dapat digunakan pada tag <form>.

c. href

Attribute ketiga ini dapat digunakan pada tag <a> dan <link>.

d. autoplay

Dan yang terakhir, attribute ini dapat digunakan untuk tag <audio> dan <video>.

Attribute juga diimplementasikan dengan bahasa pemrograman JavaScript yang bisa membuat halaman website Anda dapat melakukan aksi-aksi tertentu.

Cara Kerja HTML

Html
WordPress © Unsplash

Dokumen HTML adalah file yang memiliki format ekstensi .htm atau .html. Biasanya, sebuah web browser membaca file tersebut dan kemudian melakukan render kontennya sehingga Anda bisa melihatnya melalui web page.

Setiap pages memiliki elemen-elemen yang terdiri dari sekumpulan tags dan atribut. Element adalah building blocks dari web pages.

Sebuah tag yang akan memberi tahu web browser awal dan akhir dari sebuah elemen, sedangkan sebuah atribut akan mendeskripsikan karakteristik dari elemen tersebut.

Terdapat 3 bagian utama dari sebuah elemen adalah:

  • Opening tag, bagian ini untuk menjelaskan awalan dari sebuah elemen. Tag ini biasanya menggunakan bracket pembuka dan penutup. Contohnya, saat kita akan membuat paragraf harus dimulai dengan tag <p>.
  • Content, pada bagian ini adalah bagian bisa Anda lihat di web page.
  • Dan terakhir pada bagian closing tag ini adalah yang menjelaskan penutupan dari sebuah elemen. Tag yang tertulis di sini mirip seperti pada opening tag namun ditambahkan forward slash, seperti </p>.

Kombinasi dari 3 bagian ini akan membentuk element seperti berikut:

<p> Crepes adalah jajanan yang lezat dan bergizi. </p>

Apa Hubungan antara HTML, CSS, dan JavaScript?

Karena untuk membuat tampilan website Anda semakin menarik, HTML memerlukan bantuan dari CSS (Cascading Style Sheets) dan JavaScript untuk membuat konten website yang lebih menarik dan responsif.

Dalam hal ini CSS berperan untuk memberikan styling, seperti background, color, layout, spacing, dan animasi. Sedangkan, JavaScript berperan untuk menambahkan fungsionalitas dinamis, seperti sliders, pop-up, dan galeri foto. Ketiga bahasa pemrograman ini adalah bahasa dasar yang penting bagi seorang front-end developer.

Baca juga: Mengenal Fitur Disavow Link untuk Mempertahankan Performa Websitemu

Nah, demikian penjelasan tentang bahasa pemrograman HTML. Apakah Anda tertarik untuk mempelajarinya?

Akan lebih lengkap lagi apabila Anda juga belajar tentang CSS dan JavaScript. Semoga artikel ini dapat bermanfaat untuk Anda dan nantikan artikel-artikel lainnya, ya!

Sekawan Studio menyediakan jasa pembuatan website terbaik dengan desain profesional, modern, dan responsif.

Bagikan:

Tampilkan lebih Banyak Rekomendasi Topik.

Dapatkan informasi dan notifikasi update artikel terbaru dari kami, untuk menambah pengetahuan seputar dunia teknologi.

Mulai Proyek!

Tentukan paket pilihan sesuai dengan bisnis Anda.

Informasi Personal

Cluster Coding Factory, KEK Singhasari, Jl. Raya Klampok, RT.04/RW.04, Pasrepan, Klampok, Kec. Singosari, Kabupaten Malang, Jawa Timur 65153

Daftarkan diri gratis dan dapatkan keuntungan dari program kami.

Mari wujudkan idemu.

Cluster Coding Factory, KEK Singhasari, Jl. Raya Klampok, RT.04/RW.04, Pasrepan, Klampok, Kec. Singosari, Kabupaten Malang, Jawa Timur 65153

Raih keuntungan bersama kami!

Daftarkan diri gratis dan dapatkan keuntungan dari program kami.