Kami menggunakan cookies

Situs ini menggunakan cookies dari cmlabs untuk memberikan dan meningkatkan kualitas layanannya serta menganalisis lalu lintas..

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

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 TagFungsi 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
cmlabs

cmlabs

Bagaimana pendapat Anda? Apakah Anda menyukai artikel ini?

Update Terkini

Permudah proses analisis dengan SEO Tools yang terpasang langsung di peramban Anda. Saatnya menjadi ahli SEO sejati.

Gratis di semua peramban berbasis Chromium

Pasang di peramban Anda sekarang? Jelajahi sekarang cmlabs chrome extension pattern cmlabs chrome extension pattern

Butuh bantuan?

Ceritakan tentang kebutuhan SEO Anda, tim marketing kami akan membantu menemukan solusi terbaik.

Berikut daftar tim kami secara resmi dan diakui, hati-hati terhadap penipuan oknum tidak bertanggung jawab yang mengatasnamakan PT cmlabs Indonesia Digital (cmlabs). Baca lebih lanjut
Marketing Teams

Agita

Marketing

Tanya Saya
Marketing Teams

Irsa

Marketing

Tanya Saya
Marketing Teams

Yuliana

Business & Partnership

Tanya Saya
Marketing Teams

Thalia

Business Development Global

Tanya Saya
Marketing Teams

Robby

Business Development ID

Tanya Saya
Marketing Teams

Dwiyan

Partnership

Tanya Saya
Marketing Teams

Rochman

Product & Dev

Tanya Saya
Marketing Teams

Said

Career & Internship

Tanya Saya

Mohon maaf, saat ini tool Mobile Friendly Test tidak dapat diakses karena sedang dalam tahap pemeliharaan sistem sampai pemberitahuan lebih lanjut.

Cek

Tetap up-to-date dengan tool baru kami, cmlabs Surge. Jelajahi tren & event populer!

Cek

Pendapat Anda Berharga! Beri masukan untuk Survei Plagiarism Checker kami?

Cek

Temukan tren bisnis Anda dengan mudah! Kalkulator proyeksi trafik adalah alat yang sempurna untuk membantu Anda memahami permintaan di sektor bisnis Anda. Pilih sektor Anda dan lihat proyeksi trafiknya sekarang!

Cek

Saat ini tidak ada notifikasi...