Lihat Istilah Lain
Hypertext Markup Language atau disingkat HTML adalah bahasa markup standar untuk membuat halaman web. HTML awalnya dikembangkan di CERN (Conseil Européen pour la Recherche Nucléaire; Organisasi Eropa untuk Riset Nuklir) oleh Tim Berners-Lee sekitar tahun 1990.
Pada simulasi yang sederhana, browser menerima dokumen HTML dari server web atau dari penyimpanan lokal, kemudian melakukan pengambilan (atau disebut rendering) dokumen ke halaman web multimedia.
HTML akan menggambarkan struktur halaman-web secara semantik dan menjadi “tanda” awal untuk penampilan dokumen.
Penting untuk diketahui pemula, jika elemen HTML merupakan blok bangunan halaman HTML. Apa itu blok bangunan HTML?
Dengan konstruksi blok HTML, gambar, text dan objek HTML lainnya dapat disematkan ke dalam halaman. Elemen ini juga menyediakan sarana untuk membuat dokumen atau text-terstruktur seperti pos, paragraf, daftar, tautan, kutipan dan tag lainnya.
Contoh kode HTML
Berikut adalah contoh penulisan kode HTML.
<!DOCTYPE html>
<html>
-- Header --
<head>
<title>This is a title</title>
</head>
-- Body --
<body>
<p>Hello world!</p>
</body>
</html>Versi HTML
HTML 2 - November 24, 1995
HTML 3 - Januari 14, 1997
HTML 4 - Desember 18, 1997
HTML 5 - Oktober 28, 2014
Catatan: pada setiap versi HTML di atas memiliki sub-versi lagi, seperti 4,0 dan 4,1. Kami hanya memberikan summary dari versi utama.
Komponen-Komponen dalam HTML
Pada umumnya, komponen HTML dibagi menjadi tiga yaitu tag, elemen, dan atribut.
Tag
HTML tag adalah tanda yang menjadi awalan dan akhiran pada perintah HTML. Tiap tag memiliki kegunaan yang berbeda. Penulisan Tag diawali dan diakhiri dengan kurung siku <..> dan di dalamnya terdapat nama tag. Pada HTML, tag digunakan secara berpasangan meliputi tag pembuka <..> dan tag penutup </..>.
Hingga saat ini sudah terdapat sekitar 250 tag HTML, beberapa tag HTML yang perlu Anda ketahui yaitu:
| Nama Tag | Fungsi Tag |
|---|---|
| <html> </html> | untuk mengawali pembuatan halaman HTML yang berisi konten dan elemen |
| <head> </head> | untuk membuat bagian head yang dapat memuat judul, resource, dan meta tag |
| <title> </title> | untuk membuat judul website yang ditampilkan pada bagian atas jendela browser |
| <body> </body> | untuk menuliskan bagian body |
| <p> </p> | untuk membuat paragraf dalam halaman HTML |
| <h1> sampai <h6> | untuk membuat heading tags |
| <!-- --> | untuk membuat komentar |
Tabel 1: Contoh beberapa tag HTML beserta fungsinya.
Elemen
Elemen adalah komponen yang menyusun halaman HTML. Sebuah elemen HTML bisa terdiri dari tag pembuka, tag isi, dan tag penutup. Terkadang juga memiliki atribut. Sebagai contoh, sebuah elemen terdiri dari tag pembuka <p> menunjukkan elemen paragraf, atribut berupa align="center", tag isi atau teks berupa “Hello World”, dan tag penutup </p> untuk mengakhir elemen paragraf tersebut.
Sebuah elemen juga dapat memuat elemen HTML lainnya atau biasa disebut elemen bersarang (nested element). Perhatikan contoh penulisan elemen HTML bersarang berikut:
<html>
<body>
<p align="center">Hello world!</p>
</body>
</html>Atribut
Atribut merupakan informasi tambahan yang ada dalam elemen HTML. Atribut berfungsi untuk memperjelas perintah tag dalam elemen. Dalam sebuah tag bisa memiliki lebih dari satu atribut, meski tidak semua atribut dapat digunakan dalam tag yang sama. Simak kode HTML berikut.
<img src="bunga-mawar.jpg” alt="10 tangkai bunga mawar berwarna merah"></img>Dari contoh di atas dapat dilihat bahwa tag <img> memiliki dua atribut yaitu src dan alt. Hal ini menunjukkan perintah agar browser menampilkan gambar dari file bunga-mawar.jpg dengan alt text berisi “10 tangkai bunga mawar berwarna merah”.
HTML Tags untuk Optimasi Website
Beberapa HTML tags yang dapat Anda manfaatkan untuk mengoptimasi website, di antaranya:
Title Tags
Title tags adalah teks judul yang akan ditampilkan pada bagian atas jendela browser. Pastikan title tags mengandung kata kunci yang relevan dengan konten halaman agar . Perhatikan penulisan title tags berikut.
<head>
<title>HTML Tags untuk Optimasi Website</title>
</head>Meta Tags
Salah satu meta tags yang terpenting adalah meta description yang memuat deskripsi singkat terkait informasi yang disampaikan dalam sebuah halaman web. Meta description harus dibuat menarik dan mengandung kata kunci. Panjang yang disarankan adalah sekitar 400 – 750 pixel saja.
Contoh penulisan meta tags pada HTML sebagai berikut.
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML adalah markup standar untuk membuat halaman web.
Dalam artikel ini kami akan membahas pengertian, komponen, serta HTML tags untuk
optimasi web.">
<meta name="keywords" content="HTML, SEO, Website">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>Heading Tags (H1, H2, H3, dst)
Heading tag menunjukkan struktur konten yang memudahkan pengunjung maupun mesin pencari dalam memahami informasi dalam konten. HTML tags memiliki 6 kategori heading tags mulai dari H1 untuk menandai hal yang paling penting, hingga H6 untuk hal yang tidak terlalu penting. Perhatikan contoh kode heading tags berikut.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Image dan Alt tags
Untuk melampirkan gambar pada halaman, Anda dapat menggunakan image dan alt tags. Hal ini juga dapat memudahkan mesin pencari dalam memahami multimedia yang ada pada halaman Anda. Dengan begitu, konten Anda bisa terindeks dengan baik oleh mesin telusur sehingga performa situs web pun semakin baik.
<img src="kucing.jpg” alt="gambar seekor kucing yang sedang mengejar bola"></img>Hyperlink
Hyperlink atau anchor text biasa digunakan untuk menambahkan teks yang berisi tautan menuju halaman tertentu. Untuk mengoptimasi website, pastikan kata yang Anda gunakan dalam anchor text relevan dengan halaman web yang dituju. Contoh dari hyperlink:
<a href="https://cmlabs.co/id-id/seo-guidelines/seo-on-page">Panduan SEO On-Page</a>Link No Follow
No follow adalah tag dalam HTML yang digunakan untuk mencegah Google mengikuti laman yang ditautkan dalam sebuah anchor text. Atribut ini dapat Anda gunakan untuk menghindari hukuman Google, ketika menautkan link berkualitas rendah. Simak penulisan atribut link rel="no follow" berikut:
<a href="https://cmlabs.co/id-id/seo-guidelines/seo-on-page" rel="nofollow">Panduan SEO On-Page</a>
cmlabs
Lihat Istilah Lain
Berlangganan Newsletter kami
Masukkan alamat email anda untuk menerima notifikasi Newsletter kami
