Belajar Cara Membuat Struktur Dasar HTML dengan Lengkap

· 5 menit untuk membaca
Belajar Cara Membuat Struktur Dasar HTML dengan Lengkap

Meskipun bukan termasuk ke dalam sebuah bahasa pemrograman, HTML adalah bagian kerangka utama dari sebuah halaman website yang sangat penting. Untuk itu, kamu perlu mengetahui seperti apa struktur dasar dokumen HTML lengkap dengan tag yang ada dalam HTML. Berikut pembahasannya!

Penulisan Struktur Dasar HTML

Secara umum, struktur dasar HTML bisa kamu bedakan menjadi 2 jenis. Pertama adalah HTML 4 dan kedua HTML 5. Namun, saat ini HTML 5 merupakan struktur HTML yang paling populer. Karena HTML 5 merupakan versi yang lebih baru daripada versi sebelumnya, yaitu HTML 4.

Contoh dari struktur HTML 4 adalah sebagai berikut.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <title>Judul halaman</title>

    </head>

<body>

    <p>Isi halaman</p>

</body>

</html>

Pertama, kamu perlu menuliskan DOCTYPE yang cukup panjang. Ada beberapa bagian yang harus kamu tuliskan dalam DOCTYPE ini. Selanjutnya, barulah kamu bisa membuka tag <html> diikuti dengan <head> dan <body> serta jangan lupa untuk menutup setiap tag nya.

Sedangkan untuk HTML 5 sendiri, bisa kamu lihat pada contoh di bawah ini.

<!DOCTYPE html>

<html>

    <head>

        <title>Judul halaman</title>

    </head>

<body>

    <p>Isi halaman</p>

</body>

</html>

Pertama, kamu perlu menuliskan DOCTYPE diikuti dengan html saja. Kemudian, kamu bisa melanjutkannya dengan membuka tag <html> dan meneruskannya persis sama dengan struktur pada HTML 4 secara lengkap.

Jika kamu perhatikan, maka kamu bisa menemukan perbedaan dari kedua struktur tersebut. Tepat sekali, perbedaannya terletak pada bagian pertamanya atau tempat penulisan DOCTYPE nya.

Pada HTML 4, kamu perlu menuliskan DOCTYPE yang lebih panjang daripada HTML 5. Ini juga menjadi salah satu alasan kenapa HTML 5 menjadi lebih populer daripada HTML 4. Selain lebih mudah, hasil kode HTML juga bisa menjadi lebih ringkas dan lebih rapi.

Penjelasan Tag pada Struktur Dasar HTML

Sebelumnya, kamu sudah mengetahui seperti apa contoh dari struktur HTML. Namun, ada beberapa bagian yang masih belum kamu pahami apa kegunaan dari kamu menuliskan bagian kode tersebut. Nah, bagian-bagian tersebut akan dikupas secara tuntas pada pembahasan berikut ini:

1. Penjelasan DOCTYPE HTML

Bagian pertama yang akan kamu temukan pada struktur HTML adalah DOCTYPE. Meskipun seorang programmer sering mengabaikan bagian yang satu ini, sebenarnya DOCTYPE menjadi bagian yang sangat penting saat kamu membuat sebuah file html.

DOCTYPE merupakan pendeklarasian sebuah dokumen HTML untuk memberikan informasi kepada browser, sehingga browser bisa mengetahui bahwa file tersebut merupakan sebuah file dokumen html.

Selain untuk memberikan informasi kepada browser, DOCTYPE sendiri juga memiliki peranan penting sebagai identitas dari sebuah dokumen HTML. Dengan adanya DOCTYPE ini, programmer lain bisa mengetahui bahwa dokumen tersebut menggunakan HTML versi berapa.

Sehingga, programer lain juga bisa menyesuaikan dengan tag apa saja yang bisa digunakan.

2. Penjelasan Tag <html>

Tepat berada di bawah DOCTYPE, pasti kamu akan menemukan tag <html> pada sebuah dokumen HTML. Dengan menuliskan tag pembuka html ini, maka kamu bisa menggunakan seluruh tag html yang didukung oleh versi HTML sesuai dengan DOCTYPE sebelumnya.

Tag <html> ini memerlukan tag penutup. Nah, kamu bisa meletakkan tag-tag lainnya diantara tag pembuka dan tag penutup ini.

3. Penjelasan Tag <head>

Sebelumnya, kamu sudah mengetahui bahwa ada tag lain yang bisa kamu tuliskan tepat di antara pembuka dan penutup tag html. Nah, pada struktur dokumen HTML, kamu akan menemukan tag <head> yang menjadi tag wajib untuk bisa membuat dokumen HTML yang benar.

Seluruh komponen yang ada di dalam <head> tidak akan tampil di dalam halaman website. Komponen yang ada di dalam tag <head> ini nantinya akan berguna untuk memberikan informasi terkait halaman tersebut kepada browser. Contohnya, seperti judul dan juga meta informasi.

Selain itu, kamu juga bisa melakukan import kode pendukung lain, seperti css dan juga javascript pada bagian <head> ini untuk memperindah tampilan halaman website.

4. Penjelasan Tag <title>

Salah satu komponen yang bisa kamu letakkan di dalam <head> adalah judul. Nah, tag <title> merupakan tag yang bisa kamu gunakan untuk mendefinisikan judul halaman dari dokumen HTML yang kamu buat.

Dengan meletakkan tag <title> pada struktur HTML, kamu bisa melihat apapun yang kamu tuliskan di antara pembuka dan penutup tag <title>. Nantinya akan muncul di bagian tab web browser yang kamu gunakan pada saat membuka dokumen HTML yang kamu buat ini.

5. Penjelasan Tag <body>

Struktur HTML yang juga tidak kalah penting adalah tag <body>. Tag html yang satu ini berperan penting dalam hal memuat konten yang akan kamu tampilkan pada halaman website di browser.

Kamu bisa menuliskan berbagai macam tag html lain pada bagian <body> ini. Mulai dari tag untuk heading, menyisipkan gambar, tabel html, dan lain sebagainya. Intinya, body ini merupakan tempat di mana kamu akan menyusun tampilan website yang akan ditampilkan di web browser nantinya.

Beberapa Tag HTML Lain Dalam Struktur HTML

Jika sebelumnya kamu sudah mengetahui tag yang wajib ada dalam struktur HTML, maka berikut ini terdapat beberapa tag HTML yang tidak wajib. Namun, juga tidak kalah penting keberadaannya dalam sebuah dokumen HTML. Di antaranya adalah sebagai berikut:

1. Tag <meta> untuk Deskripsi

Tag <meta> menjadi salah satu komponen yang bisa kamu tuliskan pada bagian struktur HTML, tepatnya di dalam tag <head>. Fungsi dari tag <meta> ini adalah untuk memberikan informasi dan deskripsi dari halaman website.

Secara mudahnya, bisa dikatakan meta ini berguna untuk memberikan cuplikan dari isi halaman website secara keseluruhan atau sebagian.

2. Tag <style> untuk CSS

Kemudian kamu juga perlu mengetahui tag <style> pada struktur HTML. Tag yang satu ini bisa kamu letakkan tepat berada di dalam tag <head>. Fungsinya adalah untuk melakukan impor apabila kamu memiliki file CSS eksternal yang ingin kamu sertakan untuk mempercantik halaman website kamu.

Dalam CSS ini, kamu bisa menggunakan berbagai macam bantuan seperti kode warna html, padding, margin, dan lain sebagainya. Untuk lebih lengkapnya, kamu bisa mempelajari lebih lanjut mengenai cara membuat website dengan html dan css.

3. Tag <script> untuk Javascript

Jenis tag terakhir adalah tag <script>. Tag <script> berguna untuk mengimpor file javascript eksternal. File javascript sendiri bisa kamu gunakan untuk membuat halaman website menjadi lebih interaktif lagi. Kamu bisa mengatur apa yang akan terjadi saat user menekan sebuah tombol, menggeser mouse, dan lain sebagainya.

Nah, berbeda dengan kedua tag sebelumnya, kamu bisa meletakkan tag <script> ini tepat berada di bawah tag penutup </body> dan di atas tag penutup </html>.

Sudah Paham Struktur Dasar HTML?

Struktur dasar HTML ini memang terbilang mudah untuk kamu pahami. Cukup sering-seringlah menuliskan struktur yang benar setiap kali membuat file HTML.

Dengan begitu, kamu bisa lebih cepat memahami dan juga lebih terbiasa dengan struktur HTML yang lengkap dan tepat. Sehingga, mimpi kamu untuk menjadi programmer yang handal akan semakin mudah untuk terwujud.