TRIK RAHASIA PARA MASTER WEB: Tutorial HTML: Tags, Attribute dan Element

Setelah sebelumnya kita membahas tentang bagaimana cara membuat file HTML yang sederhana dan membukanya lewat browser, kali ini kita akan mencoba untuk menambahkan beberapa tag HTML agar file HTML yang kita buat terlihat lebih baik.

Tag

Dasar dari struktur HTML adalah tag dimana tag ini biasanya diletakkan di awal dan di akhir konten sehingga konten tersebut menjadi lebih bermakna.

Nah, sekarang kita buka kembali file "webpertama.html" yang telah kita buat sebelumnya menggunakan notepad atau text editor lainnya lalu tambahkan beberapa tag HTML kedalamnya sehingga terlihat seperti berikut.

Setelah selesai kemudian simpan kembali dan bukalah file HTML tersebut menggunakan browser.

Apa yang terjadi? tidak ada perbedaan?
Itu karena tag yang tadi ditambahkan bukan untuk mengubah tampilan dari file HTML tersebut namun tujuannya adalah untuk membuat konten yang ada di dalamnya menjadi lebih mempunyai arti.

Penjelasannya adalah pada baris pertama yaitu <!DOCTYPE html> berfungsi untuk mendeklarasikan tipe file kepada browser agar si browser tersebut mengetahui jenis HTML mana yang sedang kita gunakan, dalam kasus ini kita menggunakan HTML5. Dan ini sangat penting untuk dicantumkan dalam setiap file HTML yang akan kita buat. Kalau kita tidak mencantumkannya, maka browser akan berpendapat kalau kita sebenarnya tidak mengetahui apa yang sebenarnya kita tulis dan berpendapat bahwa kita melakukan suatu tindakan yang aneh menurut si browser tersebut karena kita tidak menjelaskan kepada si browser kalau yang kita tulis adalah sebuah dokumen dengan tipe HTML.

Selanjutnya adalah tag <html>, tag ini berfungsi sebagai tag pembuka yang memberitahukan kepada si browser bahwa semua yang berada di antara tag pembuka <html> dan tag penutup </html> adalah sebuah dokumen HTML. Dan semua yang berada di antara tag <body> dan tag </body> adalah konten utama yang nantinya akan ditampilkan oleh si browser.

Tag Penutup

Tag </body> dan </html> adalah tag penutup dari masing-masing pembukanya, tag </body> adalah penutup dari tag <body> begitu juga dengan tag </html> adalah penutup dari tag <html>.

Namun tidak semua tag dalam HTML membutuhkan tag penutup, misalnya adalah tag break . Tag tidak membutuhkan tag penutup karena tag berdiri sendiri dan tidak ada konten di dalamnya. Tag itu sendiri berfungsi untuk menurunkan tulisan/konten satu level dari tulisan/konten sebelumnya kalau dalam keyboard tag adalah tombol enter ketika kita mengetik.

Yang perlu diingat adalah, apabila sebuah tag yang memiliki konten di dalamnya maka tag tersebut haruslah ditutup dengan tag penutup (<tag pembuka>konten</tag penutup>). Namun pada suatu saat kita akan menemukan tag yang berdiri sendiri seperti tag break yang bentuknya seperti bukan . Itu karena penulisan tersebut merujuk kepada XHTML.

XHTML itu sendiri adalah sebuah bentuk dari HTML yang berdasarkan kepada bahasa pemrograman lain yaitu XML. Sebenarnya tidak ada perbedaan yang berarti antara dan setelah ditampilkan dalam browser. Namun karena kita membahas tutorial HTML maka kita akan menggunakan tag yang lebih sederhana.

Attribute/Atribut

Tag-tag dalam HTML memiliki sebuah atau lebih atribut dimana berfungsi untuk memberikan informasi tambahan. Atribut berada di dalam tag pembuka dengan sebuah nilai yang diletakkan antara tanda kutip.

<tag atribut="nilai">konten</tag>

Atribut ini akan kita bahas pada tutorial selanjutnya.

Elemen

Seperti yang telah kita ketahui bahwa tag tidak lebih dari memberikan penanda pada awal dan akhir, penanda awal dan akhir dari suatu elemen yang membentuk sebuah halaman web. Kita bisa mengatakan bahwa sesuatu yang berada di antara tag <body> dan </body> adalah elemen dari body. Contoh lainnya adalah dimana <title> dan </title> adalah tag title dan <title>Judul Web</title> adalah elemen dari title.

***

Daftar Tutorial HTML: