Hypertext markup language atau biasa dikenal sebagai HTML adalah kode untuk membangun struktur website. Diseluruh website yang ada pada internet HTML adalah bahasa pemrograman yang digunakan untuk menyusun struktur dari seluruh komponen yang ada diwebsite tersebut. Mulai dari tulisan, blok, gambar, video dan lain – lain.
Istilah hypertext sendiri berarti perhubungan antara satu halaman dengan halaman lain. Bahkan HTML dapat menghubungkan satu komponen website dengan website lainnya (didomain yang berbeda) yakni dengan hyperlinks.
HTML umumnya dipasangkan dengan dua bahasa pemrograman lainnya yakni javascript dan css. CSS untuk membuat desain atas struktur HTML (warna, jarak, ukuran, etc) dan javascript untuk membuat interasi (contoh : action saat tombol di klik).
Bagaimana Struktur Kode pada Website di Susun
Syntax yang ada pada HTML melambangkan komponen penyusun atas website tersebut. Terdapat banyak sekali syntax penyusun pada HTML Mulai dari head, body, footer, img, video dan lain sebagaiinya.
Namun, dari berbagai syntax html kode tersebut hanya terdapat 3 komponen penyusun utama(dan wajib) atas suatu website yakni head, body dan footer.
hampir diseluruh website yang ada di internet menggunakan konsep sesuai dengan ilustrasi diatas seperti menjadi suatu standar dalam industri software engineering.
Komponen utama header pada website
Secara harfiah header pada struktur website berarti kepala atau kop dari website tersebut. Pada komponen header ini terdapat tiga sub komponen penting yang wajib ditempatkan di header website yakni :
| No | Nama Sub komponen | Kegunaan |
| 1 | Metadata website | Metadata adalah informasi atau data yang menjelaskan tentang identitas website tersebut. Contohnya seperti judul pada website tersebut, bahasa yang digunakan pada website, deskripsi webnsite tersebut hingga metadata custom untuk SEO seperti keyword yang cocok untuk website, dan lain sebagaiinya. |
| 2 | import css | HTML memang dapat berdiri sendiri, namun website akan terlihat seperti kanvas kosong yang hanya memiliki text hitam putih. CSS berperah untuk memberikan warna dan desain atas website. Alasan utama mengapa CSS diletakan pada header, karena header adalah kop website. Website di load oleh browser dari kode yang paling atas ke bawah. Sehingga, css harus diletakan di kop agar saat user membuka website, website langsung dapat memiliki desain dan warna. |
| 3 | import javascript utama | sama halnya dengan CSS, javascript juga berperan penting dalam memberikan action terhadap website. Seperti memberikan popup saat suatu tombol di klik. Javascript juga harus diletakan dipaling atas, terutama apabila javascript ini adalah framework utama yang digunakan difile javascript lain. Contohnya adalah jquery, angular, vue dan lain sebagiainya. |
berikut ini adalah contoh metadata pada degananda.com yang mencakup ketiga hal diatas.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Degananda.com – Dokumentasiku Belajar Pemrograman Web</title> <script type='text/javascript' src='https://degananda.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script> <script type='text/javascript' src='https://degananda.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script> <meta property="og:type" content="website" /> <meta property="og:title" content="Degananda.com" /> <meta property="og:description" content="Dokumentasiku Belajar Pemrograman Web" /> <meta property="og:url" content="https://degananda.com/" /> <meta property="og:site_name" content="Degananda.com" /> <meta property="og:image" content="https://degananda.com/wp-content/uploads/2017/06/cropped-favicon.png" /> <link rel='stylesheet' id='tagdiv-style-css' href='https://degananda.com/wp-content/themes/meistermag/style.css?ver=1.2' type='text/css' media='all' /> <link href="https://fonts.googleapis.com/css?family=Martel+Sans" rel="stylesheet"> </head>
degananda.com menggunakan framework library javascript, yakni jquery. Sedangkan untuk styling file utama css yang digunakan adalah meistermag/style.css.
Komponen utama body pada website – div dan span
sedangkan pada sisi body, ini akan sangat tergantung pada konten website tersebut. Namun umumnya yang pasti adalah dua sub komponen div dan span.
| No | Nama Sub komponen | Kegunaan |
| 1 | div | merupakan syntax yang digunakan untuk membuat blok baris pada website. Biasannya setiap section pada website dipisahkan dengan div. ini dikarenakan setiap div dapat diberikan pengaturan css tersendiri (jarak,warna dan lain sebagainnya) |
| 2 | span | hampir mirip dengan div, hanya saja sub komponen span ini tidak dapat membuat blok baris. Tetapi blok yang digunakan adalah blok berjejer. Artinnya jika terdapat dua buah sub komponen span, maka dua komponen tersebut akan berjejer. |
dan perlu diperhatikan bahwa span dapat dimasukan kedalam div, begitu juga div juga dapat dimasukan kedalam div. Ibaratnya div ini adalah sebuah baskom yang dapat dimasukan berbagai macam sub komponen.
ingat bahwa span tidak dianjurkan dimasukan sub komponen div karena secara logika tidak masuk akal. Hal ini akan merusak struktur website (tidak standar) Span adalah blok sejajar dan div adalah blok baris (setiap blok melakukan bloking baris tersebut.
Komponen utama Footer pada website
pada sisi footer hanya terdapat satu sub komponen utama yang penting yakni import javasript secondary.
tidak semua website memiliki file javascript secondary. hanya pada website yang menggunakan javascript library seperti jquery, vue,react dan lain sebagainya.
Sebagai contoh apabila website tersebut menggunakan framework jquery, maka file javascript yang dibuat untuk website tersebut dan berbasiskan pada framework javascript ini harus diletakan pada footer. Ini dikarenakan file javascript secondary berbasiskan atau menggunakan file javascript utama pada header.
Berikut ini adalah contoh isi footer dari website degananda.com
<footer> <script type='text/javascript' src='https://degananda.com/wp-content/themes/meistermag/includes/js_files/tagdiv-menu-script.js?ver=1.2'></script> <script type='text/javascript' src='https://degananda.com/wp-content/themes/meistermag/includes/js_files/tagdiv-search-script.js?ver=1.2'></script> </footer>
perlu diperhatikan bahwa tidak semua footer website menggunakan syntax footer, biasannya footer juga dapat didefinisikan sebelum syntax body berahir.