Arti HTML Lengkap dengan Penjelasan Fungsi, Struktur, Komponen dan Contoh

Jakarta -

Di dunia programmer atau web developer, istilah HTML bukanlah hal yang asing lagi. HTML digunakan untuk mengatur struktur dan elemen-elemen dasar pada sebuah halaman web, seperti teks, gambar, tautan, dan lainnya.

Lantas, apa arti sebenarnya dari HTML? Yuk simak artikel berikut untuk memahami lebih dalam mengenai HTML.

Apa Itu HTML?

Mengutip dari laman resmi Kementerian Pendidikan dan Kebudayaan RI, HTML merupakan singkatan dari "HyperText Markup Language" yang artinya Bahasa Pemmarkupan HyperTeks.

Ini adalah sebuah bahasa markah yang digunakan untuk membuat dan memformat konten pada halaman web. HTML menjadi komponen dasar dari sebagian besar situs web di internet.

Perlu diingat, HTML adalah bahasa pemmarkupan, bukan bahasa pemrograman. Ini berarti HTML digunakan untuk memberi struktur dan tampilan pada konten di halaman web, tetapi tidak memiliki kemampuan seperti pemrograman dalam arti yang sebenarnya.

HTML mengandung serangkaian "tag" atau "elemen" yang memberi petunjuk kepada browser tentang bagaimana mengatur dan menampilkan konten.

Jadi pada umumnya, HTML berguna sebagai penandaan dan strukturisasi elemen-elemen seperti teks, gambar, tautan, daftar, formulir, dan lainnya pada halaman web.

Dengan menggunakan tag dan atribut dari HTML memungkinkan pengembang web untuk membangun tampilan dan interaksi yang konsisten dan mudah dibaca oleh berbagai peramban web.

Fungsi HTML

HTM memiliki beberapa fungsi penting dalam pengembangan web. Ini menjadi dasar dalam mengatur struktur dan konten pada halaman web. Berikut penjelasan lebih rinci mengenai fungsi-fungsi utama dari HTML:

Membuat Struktur Halaman Web

Seperti yang sudah dijelaskan sebelumnya, fungsi utama dari HTML adalah untuk mengatur struktur dasar halaman web. Ini dimulai dari membuat header, footer, navigasi, hingga kontennya.

Tak hanya itu, HTML juga berperan sebagai pondasi halaman web. Pasalnya, struktur HTML berfungsi untuk menerapkan beberapa bahasa pemrograman maupun bahasa lainnya seperti CSS dan JavaScript.

Maka dari itu, HTML kerap kali dikatakan sebagai dasar untuk memahami bahasa pemrograman.

Menambah Konten Website

Fungsi HTML selanjutnya adalah sebagai penambah konten pada halaman web. Karena, selain membuat struktur, kamu juga bisa memasukkan gambar, teks, dan lainnya sebagai penambah konten di halaman web.

Bahasa markup ini juga memungkinkan kamu untuk menyisipkan video, audio, ilustrasi, tabel, dan media-media lainnya. Dengan elemen seperti , , dan , kamu dapat menampilkan konten media secara langsung di halaman web tersebut.

Penyusunan Konten

Tak hanya sebagai penambah konten, HTML juga memungkinkan kamu untuk mengatur format atau tata letak konten pada halaman web. Misalnya, memilih ukuran dan jenis huruf, menentukan warna huruf, serta mengatur tata letak konten agar lebih terstruktur.

Kamu bisa menggunakan elemen seperti

(paragraf), hingga

(judul), dan

/
dengan
1. (daftar). Dengan elemen tersebut, kamu dapat memformat teks dan konten agar terlihat teratur dan mudah untuk dibaca.

Mengarahkan Pengguna ke Halaman Website Lain

HTML juga memungkinkan pembuatan tautan antara halaman web atau ke sumber eksternal. Link tersebut bisa kamu sematkan dalam teks tertentu, alias sebagai anchor text.

Melalui elemen dan atribut "href", kamu dapat membuat tautan yang menghubungkan pengguna dari satu halaman ke halaman lain atau ke alamat web lainnya.

Sebagai Basis untuk Tampilan Web

Meskipun HTML sendiri tidak mengatur tampilan, kamu bisa menggunakan atribut seperti "class" dan "id" untuk menghubungkan elemen dengan CSS (Cascading Style Sheets). Ini memungkinkan kamu untuk mengubah tampilan dan tata letak elemen.

Aksesibilitas

Dengan menggunakan elemen semantik dengan benar, bahasa markup ini dapat meningkatkan aksesibilitas halaman web bagi pengguna. Ini sangat berfungsi untuk berbagai kebutuhan, seperti layar penuh, pembaca layar, dan lainnya.

SEO (Search Engine Optimization)

Dengan mengikuti praktik terbaik HTML, konten pada halaman web dapat diindeks dan dipahami lebih baik oleh mesin pencari. Ini berfungsi untuk meningkatkan visibilitas halaman web pada hasil pencarian.

Struktur Dasar HTML

Sebuah dokumen HTML dimulai dengan elemen , yang memberi tahu browser bahwa dokumen ini adalah dokumen HTML. Dokumen kemudian dibagi menjadi dua bagian utama yaitu dan , berikut penjelasannya:

• : Bagian ini berisi informasi tentang dokumen, seperti judul halaman yang akan ditampilkan di bilah judul browser, tautan ke file eksternal seperti CSS atau JavaScript, serta meta tag yang memberikan informasi tentang dokumen.
• : Bagian ini berisi konten aktual yang akan ditampilkan kepada pengunjung halaman. Ini bisa berupa teks, gambar, tautan, dan elemen lainnya.

Mengenal Komponen HTML

Agar lebih jelas, kamu juga perlu mengetahui apa saja komponen yang terdapat pada bahasa markup ini. Umumnya, komponen HTML terdiri dari Tag, Elemen, dan Atribut.

Tag

Tag yang merupakan dasar HTML didefinisikan dengan menggunakan tanda < diikuti oleh nama tag dan diakhiri dengan >. Elemen ini terdiri dari tag pembuka, konten, dan tag penutup.

Setiap tag memiliki fungsi perintah yang berbeda. Mulai dari membuat paragraf, judul, heading, italic, cetak tebal, dan lainnya. Ini dapat disesuaikan dengan kebutuhan kamu.

• Contoh dari tag yaitu:

Ini adalah paragraf.

Ini adalah tautan

Beberapa tag memiliki atribut yang memberikan informasi tambahan tentang elemen tersebut. Misalnya, tag menggunakan atribut "href" untuk menentukan URL tautan.

Pada awalnya, tag HTML hanya berjumlah 18. Namun hingga kini sudah ada lebih dari 250 tag yang bisa digunakan. Berikut beberapa contoh tag HTML yang perlu diketahui untuk pemula:

• , untuk memulai membuat halaman HTML yang mencakup semua konten dan elemen.
• , untuk membuat judul website
• , untuk membuat isi website

• , untuk membuat paragraf

• , untuk membuat halaman HTML yang mencakup tampilan deskripsi di hasil pencarian Google, style konten (CSS), dan lainnya.

• sampai

  , untuk mengatur heading konten.

Elemen

Elemen dalam HTML adalah blok pembangun dasar yang digunakan untuk membentuk struktur dan konten pada halaman web. Setiap elemen diidentifikasi oleh tag HTML yang dikelilingi oleh tanda .

Elemen mendefinisikan bagaimana konten di dalamnya harus ditampilkan atau diperlakukan oleh peramban web. Setiap elemen dapat memiliki tag pembuka, konten, dan tag penutup.

Secara umum, elemen HTML memiliki format konten. Dengan arti adalah tag pembuka yang menunjukkan jenis elemen. Sedangkan, adalah tag penutup yang menandakan akhir dari elemen jika diperlukan.

Berikut beberapa contoh elemen HTML:

• Elemen paragraf:

  Ini adalah contoh paragraf.

• Elemen judul: Judul Utama
• Elemen tautan: Tautan
• Elemen gambar: .

Beberapa elemen dapat memiliki atribut yang memberikan informasi tambahan tentang elemen tersebut. Misalnya, elemen tautan memiliki atribut "href" yang menentukan URL tautan.

Atribut

Atribut dalam HTML adalah informasi tambahan yang dapat ditambahkan ke dalam elemen untuk mengatur penampilan elemen tersebut.

Dengan kata lain, atribut memberikan detail atau instruksi lebih lanjut kepada peramban tentang bagaimana elemen harus ditampilkan atau diperlakukan.

Atribut biasanya didefinisikan dalam tag pembuka elemen dan memiliki format nama="nilai", di mana "nama" adalah nama atribut dan "nilai" adalah nilai yang diberikan kepada atribut tersebut.

Atribut "href" pada Tautan

Elemen tautan digunakan untuk membuat tautan di dalam halaman. Atribut "href" menentukan URL yang akan dibuka ketika tautan diklik.

• Contoh: Tautan ke Example.com

Atribut "src" pada Gambar

Elemen gambar digunakan untuk menyisipkan gambar ke dalam halaman. Atribut "src" menunjukkan sumber gambar yang akan ditampilkan.

• Contoh:

Atribut "class" pada Elemen untuk CSS

Atribut "class" digunakan untuk memberikan nama kelas kepada elemen. Ini membantu dalam menghubungkan elemen dengan aturan gaya (CSS) yang mendefinisikan tampilannya.

• Contoh:

  Ini adalah paragraf dengan kelas teks-utama.

Atribut "id" untuk Pengenalan Unik

Atribut "id" memberikan pengenalan unik kepada elemen tertentu dalam halaman. Ini berguna untuk menghubungkan elemen dengan CSS atau skrip JavaScript.

• Contoh:
  Ini adalah header halaman.

Atribut "style" untuk Gaya Inline

Atribut "style" digunakan untuk memberikan gaya langsung ke elemen dalam bentuk properti CSS. Ini dapat mengatur properti seperti warna, font, dan tata letak.

• Contoh:

  Teks ini berwarna biru.

Atribut Khusus untuk Formulir

Elemen dalam formulir seperti ,

Simak Video "Penjualan PC Skala Global di Kuartal 4 2022 Merosot Tajam"
[Gambas:Video 20detik]
(row/row)