Pengertian HTML Lengkap dengan Fungsi, Struktur, dan Contoh Penerapannya

Halo semuanya, pada artikel alafgani.web.id kali ini akan menjelaskan seputar HTML, mulai dari pengertian, fungsi, struktur, hingga contoh dari penerapannya. Mari simak pembahasan berikut untuk memberikan pemahaman tambahan mengenai HTML.

Pengertian HTML

Pengertian HTML secara umum, HTML singkatan dari HyperText Markup Language, merupakan  bahasa markup yang digunakan untuk membangun dan menyusun struktur halaman web. HTML bukanlah termasuk ke dalam bahasa pemrograman, melainkan sebuah bahasa markup (tag) yang terdiri dari elemen-elemen untuk memberikan instruksi kepada browser tentang bagaimana konten harus ditampilkan.

HTML sendiri tidak memiliki kemampuan untuk melakukan logika atau pemrosesan data seperti yang dilakukan dalam bahasa pemrograman. Maka untuk membuat halaman web yang interaktif dan dinamis, HTML sering digabungkan dengan bahasa pemrograman seperti JavaScript, PHP,  dan lainnya.

Sejarah HTML

Sedikit menyinggung sejarahnya, bahwa HTML dimulai pada awal tahun 1990-an ketika Tim Berners-Lee, seorang ilmuwan komputer dari CERN (Organisasi Eropa untuk Riset Nuklir), mengembangkan sistem hiperteks untuk berbagi informasi di antara para peneliti. Sistem ini dikenal sebagai World Wide Web.

Pada tahun 1991, Tim Berners-Lee membuat versi pertama HTML yang disebut HTML 1.0. Ini adalah versi sederhana yang mendefinisikan elemen dasar seperti judul, paragraf, dan tautan hiperteks. Pada saat itu, HTML digunakan secara internal di CERN dan tidak banyak dikenal di luar komunitas akademik.

Pada tahun 1993, Marc Andreessen dan timnya di National Center for Supercomputing Applications (NCSA) merilis browser Mosaic yang mendukung HTML. Mosaic menjadi populer dan membantu meningkatkan kesadaran publik tentang World Wide Web. Versi HTML yang digunakan pada saat itu adalah HTML 2.0, yang memperkenalkan beberapa elemen dan atribut baru.

Pada tahun 1995, W3C (World Wide Web Consortium) dibentuk dengan tujuan mengembangkan standar web yang terbuka dan interoperabel. W3C merilis HTML 3.0, tetapi tidak banyak digunakan karena browser pada saat itu belum sepenuhnya mendukung spesifikasi baru.

Kemudian, pada tahun 1997, HTML 4.0 dirilis oleh W3C. Versi ini memperkenalkan fitur-fitur seperti gaya CSS (Cascading Style Sheets) dan skrip JavaScript. HTML 4.01 dirilis sebagai revisi kecil dari HTML 4.0.

Pada tahun 2008, WHATWG merilis spesifikasi HTML5, yang menggabungkan fitur-fitur baru seperti audio dan video, elemen semantik, dan kemampuan interaktif yang ditingkatkan. Kemudian HTML5 menjadi terkenal dan didukung oleh banyak browser modern.

Sejak itu, HTML terus berkembang dengan versi baru dan perbaikan. W3C dan WHATWG bekerja bersama untuk mengembangkan spesifikasi HTML Living Standard, yang merupakan spesifikasi utama HTML saat ini. Spesifikasi ini diperbarui secara berkala untuk mencakup fitur-fitur baru dan perubahan dalam teknologi web.

Fungsi HTML

Fungsi utama HTML adalah untuk mengatur tampilan dan struktur halaman web, serta menyematkan elemen-elemen lain seperti teks, gambar, audio, video, dan tautan.

Berikut adalah beberapa fungsi utama HTML:

  • Struktur halaman
    HTML digunakan untuk membangun struktur dasar halaman web. Dengan menggunakan elemen-elemen HTML seperti <html>, <head>, dan <body>, kamu dapat menentukan elemen-elemen yang ada di halaman dan bagaimana mereka terorganisir.
  • Penyemat konten
    HTML memungkinkan kamu menyematkan berbagai jenis konten ke dalam halaman web. Misalnya, kamu dapat menyematkan teks menggunakan elemen <p> (paragraf), <h1><h6> (heading), atau <span> (teks sejajar). kamu juga dapat menyematkan gambar menggunakan elemen <img>, audio menggunakan elemen <audio>, video menggunakan elemen <video>, dan sebagainya.
  • Pembuatan tautan
    HTML memiliki elemen <a> (anchor) yang digunakan untuk membuat tautan atau hyperlink. Kamu dapat menautkan halaman web ke halaman web lain, ke bagian tertentu di halaman yang sama, atau ke berkas-berkas lainnya.
  • Mengatur tampilan
    HTML juga dapat digunakan untuk mengatur tampilan halaman web. Kamu dapat menggunakan elemen-elemen HTML dan atribut-atributnya untuk memberikan gaya dan tata letak yang sesuai, seperti <div>, <span>, dan atribut style. Namun, untuk kontrol gaya yang lebih lanjut, biasanya CSS (Cascading Style Sheets) digunakan secara terpisah.
  • Semantik
    HTML memiliki elemen-elemen semantik yang memberikan arti dan struktur yang lebih bermakna pada konten. Beberapa elemen semantik yang umum digunakan adalah <header>, <nav>, <section>, <article>, <footer>, dan sebagainya. Penggunaan elemen semantik memperbaiki aksesibilitas dan membantu mesin pencari dalam memahami konten halaman.

Struktur Dasar HTML

Sebuah dokumen HTML biasanya dimulai dengan tag <html>, yang mengindikasikan bahwa ini adalah dokumen HTML. Di dalam tag <html>, terdapat dua bagian penting, yaitu <head> dan <body>.

Bagian <head> berisi informasi tentang dokumen, seperti judul, informasi meta, dan deskripsi lainnya. Sementara bagian <body> berisi konten yang akan ditampilkan di halaman web.

Untuk memudahkan dalam memahaminya, coba perhatikan gambar di bawah ini:

Pengertian HTML Contoh skrip struktur dasar HTML
Contoh skrip struktur dasar HTML

Dalam contoh di atas, tag <title> digunakan untuk menentukan judul dokumen yang akan ditampilkan di bilah judul browser. Bagian konten yang ingin ditampilkan di halaman web ditempatkan di dalam elemen <body>, misalnya <h1> digunakan untuk judul utama dan <p> digunakan untuk paragraf teks.

Tag Dasar HTML

Berikut adalah beberapa tag dasar HTML yang harus diketahui:

<h1> hingga <h6> : Digunakan untuk membuat judul dengan tingkat kepentingan yang berbeda. Tag <h1> adalah yang paling penting dan tag <h6> adalah yang paling tidak penting.

<p> : Untuk membuat paragraf teks.

<a> : Digunakan untuk membuat tautan (link) ke halaman web lain atau bagian dalam dokumen yang sama.

<img> : Digunakan untuk menampilkan gambar di halaman web.

<ul> dan <li> : Digunakan untuk membuat daftar tak berurutan (unordered list).

<ol> dan <li> : Digunakan untuk membuat daftar berurutan (ordered list).

<div> : Digunakan untuk mengelompokkan elemen-elemen HTML menjadi satu blok.

<span> : Digunakan untuk mengelompokkan elemen-elemen HTML dalam sebuah baris.

<table> : Digunakan untuk membuat tabel.

Untuk mengetahui tag HTML lebih banyak lagi kamu bisa lihat pada artikel sebelumnya: Klik di sini

Atribut HTML

Tag HTML dapat memiliki atribut yang dapat ditambahkan ke dalam tag HTML tersebut untuk memberikan informasi tambahan atau mengatur perilaku elemen. Berikut adalah contoh atribut umum yang dapat di masukkan ke dalam tag HTML:

Atribut id : Digunakan untuk memberikan ID unik pada elemen tertentu.

Atribut class : Digunakan untuk memberikan satu atau beberapa kelas pada elemen tertentu.

Atribut src : Digunakan untuk menentukan sumber (source) gambar, audio, atau video.

Atribut href : Digunakan untuk menentukan URL tautan (link) pada elemen <a>.

Atribut style : Digunakan untuk memberikan gaya CSS langsung pada elemen tertentu.

Untuk memahami lebih jelas mengenai penggunaan dari atribut HTML ke dalam tag HTML, dapat dilihat gambar contoh dari penerapan atribut tersebut berikut ini:

Pengertian HTML: Contoh penerapan atribut HTML
Contoh penerapan atribut HTML

Penjelasan mengenai penggunaan atribut tersebut:

Atribut id : Dalam contoh di atas, elemen <h1> memiliki atribut id=”header”, yang memungkinkan Kamu merujuk elemen tersebut dengan menggunakan CSS atau JavaScript.

Atribut class : Pada elemen <h1> dan <a> menggunakan atribut class=”red-text”, yang memungkinkan Kamu menerapkan gaya khusus menggunakan CSS atau merujuk ke elemen tersebut dengan JavaScript.

Atribut src : Pada elemen <img> menggunakan atribut src=”gambar.jpg”, yang menentukan sumber gambar yang akan ditampilkan di halaman web.

Atribut href : Pada elemen <a> menggunakan atribut href=”https://www.example.com”, yang menentukan URL tujuan tautan tersebut.

Atribut style : Pada elemen <img> menggunakan atribut style untuk menentukan gaya langsung dalam bentuk properti CSS. Dalam contoh di atas, gambar tersebut akan memiliki lebar 300 piksel dan tinggi 200 piksel.

Menggabungkan CSS dengan HTML

HTML digunakan untuk mengatur struktur konten, sedangkan CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan gaya halaman web. CSS memungkinkan kita untuk mengubah warna, ukuran, dan tata letak dari elemen HTML.

CSS dapat diterapkan pada elemen HTML menggunakan atribut style atau melalui file terpisah dengan tag <link> di bagian <head> dokumen HTML.

  • Berikut adalah contoh penggunaan CSS dengan atribut style langsung dalam elemen HTML:
Penggunaan CSS dengan atribut style langsung dalam elemen HTML
Penggunaan CSS dengan atribut style langsung dalam elemen HTML

 

  • Berikut adalah contoh penggunaan CSS dengan file CSS yang terpisah menggunakan tag <link> di bagian <head> dokumen HTML:
Penggunaan CSS dengan file CSS yang terpisah menggunakan tag <link> di bagian <head> dokumen HTML
Penggunaan CSS dengan file CSS yang terpisah menggunakan tag di bagian dokumen HTML
Contoh tampilan file CSS yang sudah dibuat
Contoh tampilan file CSS yang sudah dibuat dengan nama file style.css

Dalam contoh ini, file CSS eksternal dengan nama file style.css dihubungkan ke halaman HTML menggunakan tag <link> dengan atribut href. Di dalam file CSS tersebut, gaya CSS didefinisikan untuk elemen <h1> dan <p>. Ketika halaman HTML dimuat, gaya-gaya tersebut akan diterapkan pada elemen-elemen tersebut.

Menggunakan HTML di Tingkat Mahir

Pada tingkat mahir, Kamu dapat mempelajari konsep-konsep HTML yang lebih canggih, seperti:

Formulir HTML

Kamu dapat membuat formulir interaktif dengan menggunakan elemen <form>, <input>, dan lainnya. Berikut adalah contoh sederhana penggunaan elemen <form> dan <input> dalam HTML:

Pengertian HTML: Contoh skrip membuat formulir HTML
Contoh skrip membuat formulir HTML

Penjelasan mengenai penggunaan elemen tersebut:

Elemen <form> digunakan untuk membuat sebuah form atau formulir di halaman web.

  1. Atribut action dalam elemen <form> untuk menentukan URL atau skrip yang akan memproses data form saat dikirim.
    Dalam contoh ini, action=”proses.php” hanya merupakan contoh URL yang akan memproses data form. Kamu perlu menggantinya dengan URL atau skrip yang sesuai dengan kebutuhan Kamu.
  2. Atribut method dalam elemen <form> untuk menentukan metode HTTP yang akan digunakan saat mengirim data form, dalam contoh ini method=”POST”.

Elemen <label> digunakan untuk membuat label atau label teks yang terkait dengan elemen input.

  1. Atribut for pada elemen <label> mengaitkan label dengan elemen input melalui atribut id.

Elemen <input> digunakan untuk membuat elemen inputan dalam form. Pada contoh di atas, terdapat tiga input dengan tipe text, email, dan password.

  1. Atribut id digunakan untuk mengaitkan elemen input dengan elemen label menggunakan atribut for.
  2. Atribut name digunakan untuk memberikan nama atau identifier unik untuk masing-masing elemen input.
  3. Atribut required menkamukan bahwa input tersebut wajib diisi sebelum form dapat dikirim.
  4. Terakhir, <input type=”submit”> digunakan untuk membuat tombol submit yang akan mengirimkan data form ke URL yang ditentukan dalam atribut action.

Media HTML

Kamu dapat memasukkan audio dan video ke dalam halaman web menggunakan elemen <audio> dan <video>.

Berikut adalah contoh sederhana penggunaan elemen <audio> dan <video> dalam HTML:

contoh penerapan elemen audio dan video dalam HTML
Contoh penerapan elemen audio dan video dalam HTML

Penjelasan mengenai penggunaan elemen tersebut:

Elemen <audio> digunakan untuk menampilkan dan memutar file audio di halaman web.

  1. Atribut controls dalam elemen <audio> menambahkan kontrol pemutaran standar seperti tombol play, pause, dan pengaturan volume.
  2. Di dalam elemen <audio>, Kamu dapat menambahkan satu atau beberapa elemen <source>, yang berisi sumber file audio dengan atribut src dan tipe MIME yang sesuai dengan atribut type. Jika browser tidak mendukung format audio yang diberikan, teks yang ditampilkan dalam elemen <audio> akan muncul sebagai alternatif.

Elemen <video> digunakan untuk menampilkan dan memutar file video di halaman web.

  1. Atribut controls dalam elemen <video> menambahkan kontrol pemutaran standar seperti tombol play, pause, dan pengaturan volume.
  2. Atribut width dapat digunakan untuk menentukan lebar video dalam piksel.
  3. Di dalam elemen <video>, Kamu dapat menambahkan satu atau beberapa elemen <source>, yang berisi sumber file video dengan atribut src dan tipe MIME yang sesuai dengan atribut type. Jika browser tidak mendukung format video yang diberikan, teks yang ditampilkan dalam elemen <video> akan muncul sebagai alternatif.

Pastikan untuk menggantikan audio.mp3 dan video.mp4 dengan URL atau nama file yang sesuai dengan file audio dan video yang ingin Kamu tampilkan.

Semantik HTML

Semantik HTML merujuk pada penggunaan elemen HTML dengan memperhatikan arti dan makna yang sesuai dari setiap elemen tersebut. Dalam praktiknya, semantik HTML berfokus pada pemilihan dan penggunaan elemen HTML yang paling cocok untuk mendeskripsikan struktur dan konten halaman web dengan jelas dan bermakna.

Dengan menggunakan elemen HTML yang tepat untuk setiap bagian halaman, menjadi lebih mudah bagi pengembang dan pembaca untuk memahami struktur dan hierarki konten.

Kamu dapat menggunakan elemen HTML semantik contohnya seperti <header>, <nav>, <article>, dan lainnya untuk memberikan struktur yang lebih jelas pada halaman web Kamu.

Berikut adalah contoh sederhana penggunaan elemen <header>, <nav>, dan <article> dalam HTML dengan semantik yang sesuai:

Contoh penggunaan elemen semantik HTML
Contoh penggunaan elemen semantik HTML

Penjelasan mengenai penggunaan elemen tersebut:

Elemen <header> digunakan untuk menunjukkan bagian kepala halaman atau bagian atas halaman. Dalam contoh ini, elemen <header> digunakan untuk menampilkan judul utama halaman.

Elemen <nav> digunakan untuk menunjukkan bagian navigasi atau menu dalam halaman web. Dalam contoh ini, elemen <nav> digunakan untuk menampilkan menu navigasi dengan daftar tautan.

Elemen <article> digunakan untuk menunjukkan konten independen, misalnya artikel, berita, atau posting blog. Dalam contoh ini, elemen <article> digunakan untuk menampilkan konten artikel dengan judul dan isi.

Dalam contoh di atas, gaya CSS juga diterapkan untuk memberikan tampilan yang lebih baik pada elemen-elemen tersebut. Harap diingat bahwa gaya yang diberikan hanyalah contoh dan dapat disesuaikan dengan kebutuhan desain halaman web Kamu.

Responsif dan Mobile-First Design

Responsif dan Mobile-First Design adalah dua konsep penting dalam pengembangan web yang menekankan pentingnya tampilan dan pengalaman pengguna yang baik di berbagai perangkat, terutama pada perangkat mobile atau seluler.

Responsive Design

Dalam hal ini berfokus pada pembuatan halaman web yang dapat menyesuaikan tampilannya secara otomatis dengan berbagai ukuran layar, mulai dari desktop, tablet, hingga perangkat mobile. Dalam responsif design, elemen-elemen halaman akan diatur ulang, diubah ukurannya, atau bahkan disembunyikan sesuai dengan ukuran layar yang digunakan oleh pengguna.

Untuk mencapai responsif design, beberapa teknik yang umum digunakan adalah:

  1. Media Queries: Media queries digunakan untuk mengatur gaya CSS berdasarkan ukuran layar. Dengan menggunakan media queries, Anda dapat mengubah tata letak, ukuran font, dan atribut lainnya untuk menciptakan tampilan yang sesuai dengan berbagai ukuran layar.
  2. Grid System: Grid system seperti menggunakan framework CSS seperti Bootstrap memungkinkan untuk membuat tata letak yang responsif dengan membagi halaman menjadi kolom dan baris yang fleksibel. Dengan menggunakan grid system, elemen-elemen dapat diatur secara proporsional dan menyesuaikan dengan ukuran layar.

Mobile-First Design

Mobile-First Design adalah pendekatan dalam pengembangan web yang memprioritaskan desain dan pengembangan untuk perangkat mobile terlebih dahulu sebelum menciptakan tampilan untuk desktop. Dalam pendekatan ini, desain dan pengembangan halaman web dimulai dengan fokus pada pengalaman pengguna di perangkat mobile yang lebih kecil dan terbatas. Setelah itu, desain ditingkatkan dan disempurnakan untuk desktop dengan fitur-fitur tambahan yang relevan.

Dengan menggunakan Mobile-First Design, manfaat yang dapat diperoleh antara lain:

  1. Fokus pada pengalaman pengguna di perangkat mobile yang semakin penting dalam penggunaan web.
  2. Memastikan bahwa konten yang penting dan fungsionalitas dasar dapat diakses dengan baik pada perangkat mobile yang memiliki keterbatasan ruang dan fitur.
  3. Pengurangan waktu dan usaha dalam pengembangan dan penyesuaian tampilan untuk perangkat mobile setelahnya.

Untuk menerapkan Mobile-First Design, beberapa prinsip yang dapat diikuti adalah:

  1. Prioritaskan konten: Identifikasi konten yang paling penting untuk pengguna perangkat mobile dan fokus pada penampilan dan fungsionalitasnya.
  2. Gunakan gaya dan ukuran font yang responsif: Pastikan font dapat dibaca dengan baik pada perangkat mobile dan perhatikan ukuran dan tata letak font.
  3. Gunakan ikon dan gambar yang responsif: Pastikan ikon dan gambar dapat menyesuaikan dengan ukuran layar dan tetap tampil baik pada perangkat mobile.

Kombinasi responsif design dan Mobile-First Design memberikan pengalaman pengguna yang lebih baik pada berbagai perangkat dan memastikan bahwa halaman web dapat beradaptasi dengan baik pada perkembangan teknologi mobile. Kamu dapat mempelajari teknik-teknik tersebut untuk membuat halaman web responsif yang optimal.

Kesimpulan

HTML merupakan dasar dari setiap halaman web. Dalam panduan ini, kami telah menjelaskan pengenalan dasar HTML, struktur dasar HTML, tag-tag umum yang digunakan, dan juga sekaligus memberikan contoh penerapan HTML beserta kombinasi atribut-atribut di dalamnya.

Untuk meningkatkan kemampuan kamu dalam menguasai ilmu HTML, alangkah baiknya kamu mencoba berlatih sendiri dengan merujuk pada pembahasan dalam artikel ini.

Selamat mencoba, dan terus semangat!


Daftar Materi Belajar HTML:

  1. Pengertian HTML Lengkap dengan Fungsi, Struktur, dan Contoh Penerapannya
  2. Menampilkan Gambar pada HTML Lengkap
  3. Heading dan Contohnya
  4. Menampilkan Gambar pada HTML Lengkap
  5. Tag HTML Beserta Penjelasan dan Contohnya
  6. Paragraf HTML dan Contohnya
  7. List Pada HTML dan Contohnya
  8. Hyperlink HTML dan Contohnya
  9. Table HTML dan Contohnya
  10. Form Attribut dan Contohnya
  11. Baris baru HTML
  12. Iframe dan Contohnya
  13. Class dan Id HTML
  14. Menghubungkan HTML dan CSS
  15. Ebook HTML Lengkap

Lihat Semua materi belajar html diatas, untuk menguasai HTML dengan Cepat!

Leave a Comment