HTML menyediakan struktur dokumen (terdiri dari semua elemen HTML individual pada halaman).
HTML juga menyediakan semantik dokumen HTML. Elemen umumnya digunakan untuk makna tertentu. Misalnya, judul tingkat 1 lebih penting daripada judul tingkat 2.
Sebagian besar pemformatan dan penataan gaya pada halaman web dilakukan menggunakan CSS. Namun, peramban memformat elemen HTML tertentu dengan cara standar tanpa memerlukan CSS. Oleh karena itu, CSS hanya berfungsi untuk meningkatkan tampilan suatu elemen dari cara standar peramban menampilkannya.
{tocify} $title={Daftar Isi}
Berikut adalah contoh elemen HTML umum, beserta penjelasan penggunaannya, serta contoh format dasarnya ketika diterapkan pada dokumen HTML.
Judul
Ada tag khusus untuk menentukan judul dalam HTML. Ada 6 tingkatan judul dalam HTML, mulai dari <h1> untuk yang paling penting, hingga <h6> untuk yang paling tidak penting.
Berikut ini:
<h1>Judul 1</h1> <h2>Judul 2</h2> <h3>Judul 3</h3> <h4>Judul 4</h4> <h5>Judul 5</h5> <h6>Judul 6</h6>
Elemen <strong>
Untuk memberi penekanan kuat pada suatu teks, gunakan elemen <strong>.
<p><strong>Perhatian:</strong> Silakan biarkan pintunya terbuka.</p>
Elemen <em>
Anda dapat memberi penekanan pada teks dengan menggunakan elemen <em>.
<p>Stroberi tentu saja <em>lezat</em>!</p>
Jeda Baris
Anda dapat memaksa jeda baris dengan menggunakan elemen <br>.
<p>Berikut adalah <br>jeda baris.</p>
Jeda Tematik
Anda dapat membuat jeda tematik tingkat paragraf dengan menggunakan elemen <hr>. Oleh karena itu, elemen ini memungkinkan Anda untuk memisahkan berbagai topik ke dalam kelompok yang logis.
Pada versi HTML awal, elemen ini merepresentasikan "aturan horizontal". Namun, HTML5 memberinya makna semantik khusus (mewakili pemisah tematik tingkat paragraf).
<p>Berikut salah satu topiknya... </p> <hr> <p>Berikut topik lainnya.</p>
Daftar Tak Berurut (Tak Bernomor)
Untuk membuat daftar tak berurutan, gunakan elemen <ul> untuk menentukan daftar, dan elemen <li> untuk setiap item daftar.
<ul> <li>Item Daftar 1</li> <li>Item Daftar 2</li> <li>Item Daftar 3</li> </ul>
Daftar Berurut (Bernomor)
Untuk membuat daftar berurut, gunakan elemen <ol> untuk menentukan daftar, dan elemen <li> untuk setiap item daftar.
<ol> <li>Item Daftar 1</li> <li>Item Daftar 2</li> <li>Item Daftar 3</li> </ol>
Daftar Berurut atau Daftar Tak Berurut?
Anda mungkin terkadang bertanya-tanya daftar mana yang terbaik untuk digunakan. Berikut beberapa informasi yang bisa Anda gunakan sebagai panduan.
Daftar Berurut
Daftar berurut sebaiknya digunakan ketika urutannya penting. Daftar ini hanya boleh digunakan jika, jika urutannya diubah, maknanya akan berubah.
Misalnya, daftar instruksi langkah demi langkah sebaiknya disusun dalam daftar berurutan jika urutan langkah-langkahnya penting (yaitu langkah-langkah tersebut harus dijalankan persis sesuai urutan yang tercantum dalam daftar).
Contoh lain adalah daftar yang diurutkan berdasarkan peringkat, seperti daftar "10 teratas".
Daftar Tak Berurut
Daftar tak berurutan sebaiknya digunakan jika urutannya tidak penting. Daftar belanjaan adalah contoh umum daftar tak berurutan (asalkan urutan setiap item tidak menjadi masalah).
Daftar berurutan sering digunakan dalam navigasi situs web untuk menampilkan item menu. Daftar ini biasanya ditata dengan CSS agar lebih terlihat seperti navigasi daripada daftar.
{alertInfo}
Kami akan membahas lebih banyak elemen HTML sepanjang tutorial ini, tetapi sebelum membahasnya, Anda harus tahu tentang atribut.