Dimana Anda dapat melihat hasil karya kami?

Tempat kecil membuat kombinasi, namun persilangan yang terjadi didalamnya tidak memberikan banyak kombinasi. Jadi, berhati-hatilah dalam membuat justifikasi, terutama SEO.

HTML: Pengertian dan Contohnya

Terakhir diperbarui: Aug 01, 2022

https://cmlabs.co/id-id/seo-terms/html

Link copied!

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>

cmlabs

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>

cmlabs

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>

cmlabs

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>

cmlabs

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>

cmlabs

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>

cmlabs

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>

cmlabs

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>

cmlabs

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

Mitra kami yang berharga

Aliansi strategis ini memungkinkan kami untuk menawarkan kepada klien-klien kami berbagai solusi inovatif SEO dan pelayanan yang luar biasa. Pelajari Lanjut