Siap Kerja  

Mengetahui Elemen Struktur Dasar HTML dan Cara Membuatnya

Struktur dasar HTML adalah

Hypertext Markup Language (HTML) merupakan bahasa markup yang berguna untuk membuat halaman website. HTML menggunakan tag dan atribut tertentu untuk menginstruksikan browser tentang cara menampilkan teks mencakup format, gaya, ukuran font, dan gambar yang akan ditampilkan. 

 

HTML memiliki struktur dasar dalam pembuatannya dan terdapat beberapa elemen yang membentuk struktur dasar tersebut. Biasanya, penguasaan HTML perlu dipahami oleh seorang Front-end Web Developer. Lantas, apa itu struktur dasar dalam HTML? 

 

Eitsss.. tenang! Kali ini kelas.com akan membahas tuntas seputar struktur dasar HTML mulai dari penjelasan, cara membuat struktur, hingga cara penggunaan struktur HTML tersebut. Simak selengkapnya dalam artikel ini, ya!

 

Apa Itu Struktur Dasar HTML?

Struktur dasar HTML merupakan sebuah case insensitive yang terdiri beberapa elemen yang membentuk suatu dokumen atau website. Case-insensitive artinya tidak ada perbedaan antara huruf kapital dan huruf kecil, misalnya seperti 'P' dan 'p' yang keduanya dianggap sama.

 

Tag pada HTML diklasifikasikan menjadi dua jenis:

 

  • Paired tags: Tag ini berpasangan, memiliki tag pembuka (< >) dan penutup (</ >). Misalnya, <p> … </p>

  • Empty tags: Tag ini tidak berpasangan dan tidak berisi informasi. Misalnya, <img src="" alt="">

 

Selain itu, struktur dasar HTML juga terbagi atas dua bagian seperti berikut.

Head Part

Bagian ini disebut dengan bagian inti atau kepala dari struktur dasar HTML. Pada bagian ini, akan terdapat judul dan metadata dari dokumen website yang akan dituliskan dan terkandung didalam HTML tersebut.

Body Part

Bagian berikutnya adalah bagian badan dari dokumen dari struktur dasar HTML. Bagian ini menyertakan informasi yang ingin kamu tampilkan di halaman web agar halaman web kompatibel dengan HTML 4 , termasuk document type declaration (DTD) sebelum elemen HTML dituliskan.

 

5 Elemen Struktur Dasar HTML

 

Sumber: Freepik

 

Bagi Developer, terdapat 5 elemen struktur dasar HTML yang berguna untuk penulisan dan pembuatan HTML, diantaranya sebagai berikut.

<!DOCTYPE>

Elemen HTML ini digunakan untuk memberi tahu browser tentang versi HTML yang digunakan di halaman web. <!DOCTYPE> sebenarnya bukan tag/elemen, melainkan instruksi ke browser mengenai jenis dokumen. 

 

Elemen <!DOCTYPE> merupakan elemen null yang tidak memiliki tag penutup serta tidak boleh berisi konten apapun.

Di sisi lain, ada berbagai tipe HTML ini seperti HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, dan lainnya.

<html>

Elemen <html> dalam HTML digunakan untuk menentukan root halaman HTML dan XHTML. Elemen tag <html> memberi tahu browser bahwa itu adalah dokumen HTML.

 

Elemen <html> dapat menjadi second outer container untuk semua yang ada di dokumen HTML yang diikuti dengan tag.  Selain itu, elemen <html> ini membutuhkan tag awal dan akhir dalam penulisan sintaksisnya.

<head>

Elemen dari struktur dasar HTML berikutnya adalah <head> yang digunakan untuk membuat sebuah metadata yang memainkan peran penting dalam pembuatan website. Untuk membuat HTML ini, biasanya digunakan di antara elemen <html> dan <body>.

 

Elemen struktur dasar HTML ini merupakan bagian dari dokumen yang isinya tidak ditampilkan di browser saat halaman dimuat. Artinya, elemen ini hanya berisi metadata dokumen HTML yang menentukan informasi tentang dokumen HTML tersebut.

<title>

Elemen berikutnya dalam struktur dasar HTML adalah <title> yaitu, menampilkan judul halaman website. Selain itu, elemen ini dapat membantu peringkat yang lebih tinggi dalam hasil penelusuran jika didalamnya mengandung keywords yang sesuai.

 

Elemen <title> juga disebut sebagai elemen terpenting yang perlu dicantumkan dalam mengoptimalkan HTML. Elemen ini akan berguna untuk memberikan judul yang relevan dengan konten HTML lengkap.

<body>

Elemen terakhir dalam struktur dasar HTML adalah <body>, yaitu elemen yang menentukan konten utama dokumen HTML yang muncul di browser. Elemen ini dapat berisi judul, teks, paragraf, foto, tabel, link, video, dan lainnya.

 

Selain itu, elemen <body> juga harus muncul setelah <head>, atau harus disisipkan diantara tag </head> dan </html>. Untuk itu, elemen ini sangat penting untuk semua dokumen HTML dan hanya boleh digunakan sekali di seluruh dokumen.

 

 

Baca juga:

 

Cara Membuat Struktur Dasar HTML

Sumber: Freepik

 

Untuk membuat struktur dasar HTML diperlukan penulisan sintaksis yang dituliskan sesuai urutan tag atau elemen. Oleh karena itu, contoh penulisan struktur dasar HTML dapat dituliskan seperti berikut.

 

<!DOCTYPE html>  

<html>  

<head>  

<title>Body Tag</title>  

</head>  

<body>  

<h1>...</h1>  

<p>...</p>  

</body>  

</html> 

 

Dalam membuat struktur ini, kamu perlu memperhatikan dari setiap fungsi elemen serta tag HTML tersebut. Selain itu, ada struktur HTML juga dapat disesuaikan dengan tambahan pelengkap elemen lainnya.

 

#BelajarLebihMudah Jadi Front-end Web Developer Bersama kelas.com

Setelah memahami pengertian hingga berbagai elemen dari struktur dasar HTML, maka sebagai Front-end Web Developer kamu perlu mengetahui cara membuat struktur dasar HTML dengan tepat. Terlebih lagi, ada banyak elemen yang perlu kamu tuliskan agar struktur HTML tersebut dapat dibuat dengan baik.

 

Jika kamu masih bingung bagaimana membuat struktur dasar HTML, kelas.com punya solusinya nih! Ayo, segera daftarkan dirimu di kelas online belajar struktur dasar HTML untuk calon Front-end Web Developer andal bersama kelas.com.

 

Di kelas, kamu akan banyak mendapatkan insight baru seputar dunia pemrograman yang menjadi dasar dari seorang Front-end Web Developer. Selain itu, di akhir sesi kamu bisa dapatkan e-sertifikat yang dapat kamu tambahkan di CV, loh! Wah, menarik banget kan? Yuk, daftarkan dirimu dan tingkatkan skill kamu sekarang juga!

Bagikan Artikel ini: