Elemen HTML adalah semua yang mencakup yang di mulai dari tag pembuka dan diakhiri dengan tag penutup, termasuk didalamnya adalah isi tag dan atributnya.
Pola penulisan Elemen HTML yang benar adalah sebagai berikut :
<namatag nama_atribut="nilai_atribut">Isi Tag</namatag>
Pemakaian nama_atribut="nilai_atribut" bersifat optional atau pilihan yang bisa anda pakai atau tidak, kecuali ada beberapa tag yang wajib untuk menyertakan nama dan nilai atribut seperti tag <img>, <a>, <iframe> dll.
Nested Elemen
Isi Elemen HTML tidak selalu berupa text, tapi bisa juga diisi dengan elemen HTML yang lain. Sehingga isi sebuah Elemen HTML berisi Elemen lain, inilah yang disebut dengan Nested Elemen.
Agar lebih jelas silahkan perhatikan gambar di bawah ini:
Pada gambar di atas isi dari tag <html> yang merupakan root elemen berisi dua tag yaitu tag <head> dan <body>.
Isi dari tag <head> berupa elemen <title> dan isi dari tag <body> berupa elemen <h1> dan <p>
Berikut adalah beberapa elemen HTML yang paling umum digunakan dan dapat membantu membuat website yang efektif dan menarik:
Headings (Judul)
Elemen HTML ini digunakan untuk menandai judul dan sub-judul dari halaman web. HTML memiliki enam tingkatan judul (h1-h6), di mana h1 adalah tingkatan judul paling penting dan h6 adalah tingkatan judul paling tidak penting. Ini penting karena mesin pencari dan pembaca layar menggunakan informasi ini untuk menemukan konten penting di halaman web.
Contoh:
<h1>Ini adalah judul h1</h1>
<h2>Ini adalah judul h2</h2>
<h3>Ini adalah judul h3</h3>
Paragraphs (Paragraf)
Elemen HTML ini digunakan untuk menandai paragraf pada halaman web.
Contoh:
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
Links (Tautan)
Elemen HTML ini digunakan untuk membuat tautan ke halaman web lain. Pengguna dapat mengklik tautan ini untuk beralih ke halaman baru atau download file.
Contoh:
<a href="https://www.example.com">Ini adalah tautan</a>
Images (Gambar)
Elemen HTML ini digunakan untuk menambahkan gambar ke halaman web.
Contoh:
<img src="image.jpg" alt="Deskripsi gambar" />
Lists (Daftar)
Elemen HTML ini digunakan untuk membuat daftar, baik dalam bentuk daftar bernomor atau daftar tak bernomor.
<ul>
<li>Item daftar tak bernomor 1</li>
<li>Item daftar tak bernomor 2</li>
</ul>
<ol>
<li>Item daftar bernomor 1</li>
<li>Item daftar bernomor 2</li>
</ol>
Tables (Tabel)
Elemen HTML ini digunakan untuk membuat tabel pada halaman web.
Contoh:
<table>
<tr>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>John</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Jane</td>
<td>Bandung</td>
</tr>
</table>
Forms (Formulir)
Elemen HTML ini digunakan untuk membuat formulir untuk mengumpulkan informasi dari pengguna.
Contoh:
<form>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Kirim">
</form>
Itulah beberapa elemen HTML yang paling umum digunakan pada halaman web.
untuk membuat halaman web silahkan ikuti langkah berikut ini :
- Buat sebuah folder untuk menyimpan file html
- Buka text editor visual studio code yang telah anda instal
- Pilih menu file -> New Text File
- Kemudian ketik kode berikut
- Simpan file tersebut di folder yang telah di buat sebelumnya kemudian beri nama latihan1.html
- Setelah itu buka folder kemudian klik kanan file latihan1.html
- Pilih menu Open With dan pilih browser yang tersedia (saya menyarankan menggunakan Google Chrome)
- Ganti elemen yang berada di tag body (<h1>,<p>) dengan elemen-elemen yang telah di contohkan di atas, kemudian lihat hasilnya di browser dengan merefresh halaman (tekan tombol F5)
<!DOCTYPE html>
<html lang="en">
<head>
<title>ini judul</title>
</head>
<body>
<h1>Ini judul artikel</h1>
<p>ini paragraf pertama</p>
<p>ini paragraf ke dua</p>
</body>
</html>
Silahkan anda coba praktekan dengan membuat file html menggunakan applikasi text editor visual studio code beberapa elemen diatas kemudian lihat hasilnya di browser.
Itulah Elemen HTML Pengertian dan Penjelasannya, semoga apa yang saya tulis dalam artikel ini dapat bermanfaat.