HTMLHTML Dasar

Tutorial HTML Part 5: Struktur Dasar HTML

Struk Dasar HTML

Pada tutorial sebelumnya, kita sudah membahas tentang cara menjalankan file HTML, pengertian tag, element, dan atribut pada HTML. Di tutorial kali ini, kita akan membahas mengenai struk dasar HTML.


Struktur Dasar HTML

Struktur dasar HTML ini biasanya selalu ada dalam setiap file HTML. Penulisan struktur dasar HTML dasar juga harus berurutan atau mengikuti standar struktur HTML yang ada. Struktur dasar HTML terdiri dari beberapa tag-tag HTML, setiap tag HTML bisa memiliki tag pembuka dan penutup, tapi ada juga yang tidak memiliki tag penutup.

Setiap halaman HTML pasti mempunyai struktur dasar yang terdiri dari tag DOCTYPE, tag html, tag head, dan tag body. Itulah yang disebut struktur paling dasar dari HTML.

Supaya lebih paham, silahkan buka Sublime Text (text editor) anda, lalu coba ketikkan kode berikut ini:

<!DOCTYPE html>
<html>
<head>
	<title>Ini Title Website</title>
</head>
<body>
	<h2>Ini isi website</h2>
</body>
</html>

Simpan dengan nama “struktur.html” dan jalankan file dengan cara klik 2x (kali) file nya. Sekarang, kita akan membahas semua tag yang ada pada kode diatas disini.struktur dasar html


Pengertian DOCTYPE

DOCTYPE berfungsi untuk memberitahukan pada web browser bahwa file tersebut adalah file HTML atau mendeklarasikan dari dokumen HTML.

Jika DOCTYPE tidak dituliskan, browser akan tetap menampilkan dan memproses halaman web yang sudah dibuat seperti tidak terjadi apa-apa. Tapi browser sebenarnya menjalankan file HTML tersebut pada mode  yang dibuat khusus yang disebut quirk mode.

Dalam quirk mode, browser menerjemahkan halaman web sedikit berbeda dari seharusnya, terutama pada kode CSS. Hal ini karena browser menganggap bahwa ketika DOCTYPE tidak ditemukan, halaman tersebut mungkin merupakan  web yang kadaluwarsa.

Untuk mengetahui apakah web browser berjalan pada quirk mode atau standard mode lebih mudah jika menggunakan browser Mozilla Firefox. Dalam Mozilla, klik kanan pada halaman web, lalu pilih Page Info dan lihat pada bagian Render Mode akan terlihat apakah quirk mode atau standard mode.

mode pada html


Tag <html>

Pada baris nomor 2 terdapat tag pembuka HTML yaitu <html>, dan pada baris nomor 9 terdapat tag penutup HTML yaitu </html>. Tag ini menjadi wadah dari semua tag-tag HTML yang akan ditulis, atau ketika kamu akan menulis tag HTML lain harus berada didalam tag HTML ini.


Tag <head>

Pada baris ke 3 terdapat tag header yaitu <head>, dan penutupnya terdapat pada baris ke 5 yaitu </head>. Tag head menjadi tempat untuk menempatkan informasi-informasi yang ada atau digunakan didalam file html tersebut, misalnya seperti title, meta, script, dan lain sebagainya.

Selain diatas, element pada tag <head> umumnya berisi berbagai definisi halaman, seperti kode CSS, JavaScript, dan kode-kode lain yang tidak ditampilkan pada browser.

Tag <title> dalam contoh sebelumnya akan menampilkan title sebuah halaman web. Contohnya adalah pada gambar pertama dengan file yang bernama struktur.html, “Ini Title Website” akan ditampilkan pada tab browser.


Tag <body>

Pada baris ke 6 terdapat tag body yaitu <body>, dan penutupnya berada pada baris ke 8 yaitu </body>. Pada tag body ini dapat digambarkan sebagai tubuh dalam HTML. Jadi, tag body akan berisi seperti paragraf, link, gambar, dll.

Pada baris nomor 7 ada contoh tulisan “Ini isi website”, teks itu bagian yang tampil dalam browser. Perhatikan bahwa setiap tag akan diakhiri dengan penutup tag. Termasuk <html> yang merupakan tag paling awal dari sebuah halaman web.

Jika diperhatikan dari file HTML kita diatas, kalian dapat melihat setiap sepasang tag yang ada di dalamnya sedikit geser ke kanan, hal ini tujuannya adalah supaya kode HTML yang kita buat terlihat rapi dan mudah dibaca.


Struktur HTML yang kita bahas adalah struktur HTML yang paling dasar. Banyak sebuah halaman web yang memiliki ratusan atau ribuan baris, yang berisi dengan berbagai tag HTML. Pada tutorial berikutnya, kita akan membahas tag pertama yaitu tag <p> yang berguna untuk membuat paragraf di HTML.

Tags

Brian Harris

Seseorang yang tertarik dengan Dunia IT terutama di bidang Web Programming dan ingin menjadi Full-stack Developer.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close