Beberapa Tag Yang Terdapat Pada Head Dan Body Dokumen HTML

Secara garis besar dokumen html terdiri dari dua bagian, yaitu bagian head dan bagian body. Bagian head mengatur informasi mengenai dokumen, sedangkan bagian body merupakan tempat kode-kode terletak dan tampil pada browser.

Bagian head terdiri dari tag-tag yang mengatur informasi seperti judul dokumen, jenis karakter, tag meta, css, script, dan sebagainya. Tag yang terdapat di dalam head diperlukan terutama oleh browser dan robot perayap. Melalui bagian ini, dokumen html bisa dikenali baik oleh browser atau perayap, termasuk mesin pencarian atau search engine.

Bagian body adalah bagian dari dokumen html dimana segala yang ada di dalamnya akan tampak ketika diakses menggunakan browser. Oleh karena itu, bagian ini merupakan penyampai pesan dari penulis ke pembaca.

Pengisian bagian body perlu memperhatikan beberapa aspek agar konten yang tampil tampak rapi di mata pembaca.

Di antara tag head dan tag body terdapat tag unik untuk masing-masing. Tag tersebut ada yang hanya bisa diterapkan di antara salah satu head atau body. Ada juga tag yang bisa diterapkan di keduanya, seperti kode javascript.

Isi Kepala (Tag head) Walaupun Tidak Kelihatan Tetapi Tetap Penting
Berikut ini adalah beberapa tag yang digunakan di antara tag head.

Tag title
Tag title yang terdapat pada dokumen html memiliki kedudukan penting karena melalui tag ini judul dokumen html dikenali baik oleh browser, pengguna, atau pun robot perayap. Penulisan tag title adalah sebagai berikut.

Teks “Judul Dokumen” tidak nampak tetapi terlihat di browser oleh pengguna. Judul dokumen ini juga dijadikan judul pada hasil pencarian. Contoh penampakannya adalah sebagai berikut.

Judul Dokumen
Di sini terletak deskripsi tulisan.
/url-halaman-tulisan

Kode CSS
Cascading Style Sheet (CSS) merupakan kode yang mengatur penampilan sebuah dokumen html seperti mengatur ukuran lebar dan tinggi suatu bagian, warna, jarak, ukuran, dan sebagainya. Kode CSS merupakan salah satu kode yang terletak pada bagian head. Penggunaan kode CSS pada dokumen html bisa dilakukan dengan beberapa cara, yaitu eksternal, internal, dan inline.

* CSS Eksternal
Kode CSS ditulis pada sebuah file dengan ekstensi .css dan dipanggil melalui tag link di dalam tag head. Berikut contoh kodenya.

* CSS Internal
Kode CSS ditulis langsung di dalam file html diapit oleh tag style seperti berikut.

* CSS Inline
Berbeda dengan dua cara sebelumnya, CSS inline ditulis langsung di komponen body, bukan di head. Contohnya, jika terdapat bagian di tulisan yang ingin diberi perlakuan khusus maka solusinya adalah dengan CSS inline. Penggunaannya adalah seperti berikut.
konten

Tag meta
Tag meta merupakan tag tunggal, dimana penulisannya tidak menggunakan pembuka dan penutup. Contoh penulisannya adalah sebagai berikut.

Tag meta memberitahu browser agar menampilkan dokumen sebagaimana mestinya. Selain itu, informasi di tag meta digunakan oleh robot termasuk mesin pencarian. Contohnya, meta description akan ditampilkan di bawah judul pada halaman hasil pencarian.

Tag link
Penggunaan tag link di dalam tag head contohnya seperti pada CSS internal di atas (silakan lihat kembali di atas). Selain untuk memanggil file, tag link digunakan untuk memberitahu url asli suatu halaman web (canonical). Contoh penggunaan beberapa tag link adalah sebagai berikut.

Javascript
Salah satu tag yang biasanya digunakan di dalam tag head walaupun tidak menjadi suatu kewajiban adalah javascript. Contoh javascript yang digunakan pada tag head adalah skrip dari google analytics. Javascript diletakan pada tag head menggunakan tag script. Mirip seperti CSS, penulisan javascript bisa secara eksternal, internal, atau inline.

Pengisian komponen tag head menentukan keberhasilan suatu website mendapat banyak pengunjung dari mesin pencarian. Robot akan sangat peduli dengan komponen pada tag head. Oleh karena itu, komponen kepala (head) sangat penting meskipun tidak secara langsung terlihat oleh pengunjung di browser yang digunakannya.

Tag HTML yang digunakan pada bagian body
Berikut ini beberapa tag yang digunakan untuk format konten yang tampil pada browser.

Heading
Bagian heading pada halaman web html berfungsi untuk menandai judul tulisan. Penggunaan tag ini membuat tulisan menjadi tebal dan ukuran besar. Tag heading berbentuk dengan x berupa bilangan 1, 2, 3, sampai 6. Semakin besar angka x, semakin mengecil ukuran hurufnya. Contoh penggunaannya adalah sebagai berikut.

Sub Judul

Tag paragraf
Ingat, bahwa dalam dokumen html, berapa pun banyak baris dibuat tetap akan dibaca sebagai sebuah spasi. Sebuah paragraf perlu diapit oleh tag

…

agar beberapa paragraf terkelompokan dengan baik.Garis baru
Dalam pembuatan baris baru, tidak bisa diberikan hanya dengan sebuah enter. Untuk memaksa membuat baris baru, tambahkan tag
di awalnya. Tag br merupakan jenis tag tunggal. Jadi cukup digunakan satu saja di awal konten yang dipaksa menjadi baris baru.

Tag untuk membuat daftar
Bagi pemula, mungkin saja pembuatan daftar dilakukan dengan hanya menambahkan nomor di bagian depan tulisan. Walaupun cara ini tidak sepenuhnya salah, ada cara yang lebih benar.

Membuat daftar yang benar adalah menggunakan tag

1.
2. untuk daftar tanpa penomoran. Pemisah antara satu daftar dengan daftar lainnya memggunakan tag .

Contoh penggunaannya adalah sebagai berikut.

atau

Menampilkan gambar
Menambahkan gambar pada sebuah halaman html adalah dengan menggunakan tag img. Sebelumnya, gambar perlu diupload dan bisa diakses secara umum melalui sebuah url.

Penyimpnan gambar bisa dilakukan secara langsung bersama lokasi hosting website atau melalui layanan khusus tempat menyimpan gambar seperti photobucket atau flickr.

Penggunaan tag img untuk menyisipkan gambar adalah sebagai berikut.

Untuk mengatur ukuran lebar dan tinggi gambar dilakukan dengan menambahkan salah satu atau kedua property width atau height.

Angka 300 menunjukkan ukuran lebar foto diset 300px. Sedangkan ukuran tinggi akan menyesuaikan jika tidak diatur.

Kode untuk membuat tabel
Tabel merupakan salah satu komponen berguna dalam menyampaikan informasi. Untuk membuat tabel pada halaman html dapat dilakukan dengan menggunakan tag

Tabel merupakan penyajian informasi dalam bentuk baris dan kolom. Tag untuk mengatur baris dan kolom diletakan di antara tag table layaknya penggunaan tag li di dalam ol atau ul. Untuk mengatur baris, gunakan tag . Sedangkan untuk kolom, gunakan tag .

Contoh penggunaan table seperti berikut ini.

Contoh kode html table di atas akan menampilkan tabel 3 baris dan 2 kolom.

Kode untuk membuat tautan atau link
Tautan antarhalaman atau dengan halaman di luar website digunakan untuk berbagai tujuan seperti navigasi, rujukan, dan sebagainya.

Untuk membuat tautan, gunakan tag a seperti berikut.

TeksTag di atas jika diterapkan akan menampilkan tulisan Teks yang jika diklik akan menuju ke url-tujuan.

Tag-tag yang dibahas di halaman ini merupakan tag umum dengan penggunaan secara umum. Masih banyak tag lainnya yang dapat digunakan untuk format konten html antara lain div, span, dan sebagainya. Masih banyak juga variasi penggunaannya.

Pada awalnya, menulis dokumen html menggunakan tag secara langsung cukup memberatkan. Tetapi lama kelamaan setelah menjadi kebiasaan, proses pembuatan tulisan menggunakan tag html akan menjafi lebih mudah.

Oleh Opan
Dibuat 13/05/2017
Seorang guru matematika yang hobi menulis tiga bahasa, yaitu bahasa indonesia, matematika, dan php. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang dimiliki.

Demi menghargai hak kekayaan intelektual, mohon untuk tidak menyalin sebagian atau seluruh halaman web ini dengan cara apa pun untuk ditampilkan di halaman web lain atau diklaim sebagai karya milik Anda. Tindakan tersebut hanya akan merugikan diri Anda sendiri. Jika membutuhkan halaman ini dengan tujuan untuk digunakan sendiri, silakan unduh atau cetak secara langsung.