Struktur Dasar HTML

Setiap dokumen html yang ditampilkan browser pastilah memiliki struktur didalamnya termasuk html yang memiliki struktur dasar html untuk awal mula pengenalan, dimana struktur tersebut terdiri dari tag, elemen, dan atribut untuk mengatur seluruh isi informasi dan tata letak yang ditampilkan browser. Sebenarnya walaupun tanpa penulisan struktur yang benar browser dapat saja membaca dokumen, tetapi susunan yang menjadi standar penulisan tidak akan sesuai dan mungkin akan berantakan, dari situlah akan di bahas dasar-dasar penulisan struktur dasar html yang baik agar website tampil sesuai keinginan.

Jika pada tutorial html sebelumnya kita lebih membahas teori-teorinya saja maka kali ini lebih mengarah pada praktek, jika pembaca belum memahami apa itu html silahkan lihat pada tulisan sebelumnya, karena tutorial ini lebih mengarah pada praktek penulisan struktur kode html maka di butuhkan sebuah text editor, silahkan gunakan text editor kesukaan anda, tetapi jika anda belum mempunyai text editor kami merekomendasikan beberapa text editor yang bisa anda gunakan, silahkan lihat rekomendasi text editor untuk web programmer.

Agar browser dapat menerjemahkan sebuah dokumen HTML maka di butuhkan susunan atau pola terstruktur yang masing-masing blok memiliki fungsi yang berbeda-beda. Sebagai contoh kode sumber html di bawah ini.

Struktur HTML 4

<!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>Code language: HTML, XML (xml)

Struktur HTML 5

<!DOCTYPE html>
<html>
    <head>
        <title>Judul halaman</title>
    </head>
<body>
    <p>Isi halaman</p>
</body>
</html>Code language: HTML, XML (xml)

Hal mendasar yang menjadi pembeda antara html 5 dan versi html dibawahnya adalah menulisan DTD atau Document Type Declaration, DTD berfungsi untuk memberitahu web browser bahwa yang akan di proses adalah sebuah dokumen html.

DTD HTML 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">Code language: HTML, XML (xml)

DTD HTML 5

<!DOCTYPE html>Code language: HTML, XML (xml)

Pada struktur kode html diatas terlihat ada beberapa tag standar yang digunakan, tag-tag tersebut akan di olah oleh browser sesuai dengan perintah yang di baca melalui tag tersebut. Berikut ini pengertian dari masing-masing tag struktur kode html diatas.

<html></html>Tag html ini menjadi awal pembuka setelah dtd, berfungsi untuk memberikan informasi kepada browser bahwa dokumen yang akan di proses adalah dokumen html, tag html ini umumnya memiliki tag pembuka dan penutup dimana seluruh elemen akan di tulis di dalamnya.

<head></head> Tag head berfungsi sebagai pemberi informasi tambahan untuk diolah browser tanpa di tampilkan ke utama web browser, informasi tersebut bisa berupa judul halaman yang akan ditampilkan pada tab web browser, berupa meta informasi, dan dapat digunakan sebagai import kode pendukung seperti css dan javascript.

<title></title>Tag title berada di antara tag head, dimana tag ini berfungsi untuk menampilkan judul halaman yang akan muncul pada bagian atas atau tab web browser.

Tutorial Dasar HTML: Struktur Dasar HTML

<body></body> Tag body berisi semua informasi yang akan di tampilkan ke layar utama web browser, sebagai contoh ketika kita membuka halaman pada web browser maka bagian dari layar yang ditampilkan secara visual tersebut diproses di dalam tag body.

<p></p> Tag p adalah singkatan dari paragraf, tag ini berfungsi untuk penulisan paragraf, setiap paragraf baru yang akan ditulis maka tag p harus di tulis ulang didalam paragraf tersebut agar menjadi baris baru yang tersusun rapih.

Struktur di atas adalah stuktur html dasar, pada website profesional biasaya memiliki ratusan bahkan ribuan baris tag html yang ditulis didalamnya, untuk itu tutorial ini di bagi menjadi beberapa bagian sehingga memudahkan pembaca dalam memahami teknik pengembangan web profesional.

Struktur Dasar HTML