Pengertian dan Struktur Dasar - dasar HTML (HyperText Markup Language)
.png)
HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat dan menyusun halaman web. HTML mendefinisikan struktur dan konten dari sebuah halaman web, yang kemudian akan ditampilkan oleh browser.
Struktur
dasar dari sebuah dokumen HTML terdiri dari beberapa bagian utama:
- Deklarasi
DOCTYPE:
Bagian ini berada di paling atas dokumen dan berfungsi untuk memberitahu
browser versi HTML yang digunakan, sehingga browser dapat menampilkan
halaman dengan benar. Contohnya: <!DOCTYPE html> menandakan bahwa
dokumen tersebut menggunakan HTML5.
- Elemen <html>: Merupakan elemen akar yang
membungkus seluruh konten halaman web. Semua elemen lain berada di dalam
elemen ini. Contoh: <html lang="id"> menunjukkan bahwa
bahasa utama halaman adalah Bahasa Indonesia.
- Elemen <head>: Bagian ini berisi informasi
meta tentang halaman, seperti judul, karakter encoding, dan link ke file
CSS eksternal. Informasi dalam <head> tidak ditampilkan langsung di
halaman web, tetapi penting untuk pengaturan dan identifikasi halaman.
- Elemen
<title>:
Menentukan judul halaman yang akan muncul di tab browser. Contoh: <title>Judul
Halaman</title>.
- Elemen
<meta>:
Menyediakan metadata seperti deskripsi halaman, kata kunci, dan
pengaturan karakter. Contoh: <meta charset="UTF-8">
menetapkan karakter encoding UTF-8.
- Elemen
<link>:
Menghubungkan halaman dengan sumber eksternal, seperti stylesheet CSS.
Contoh: <link rel="stylesheet"
href="styles.css">.
- Elemen
<script>:
Menyisipkan atau merujuk ke skrip JavaScript yang akan dijalankan pada
halaman. Contoh: <script src="script.js"></script>.
- Elemen <body>: Bagian ini berisi semua konten
yang akan ditampilkan kepada pengguna, seperti teks, gambar, video, dan
elemen interaktif lainnya.
- Elemen
heading (<h1> hingga <h6>): Digunakan untuk judul dan subjudul, dengan <h1>
sebagai tingkat tertinggi dan <h6> terendah.
- Elemen
paragraf (<p>):
Untuk menampilkan teks dalam bentuk paragraf.
- Elemen
gambar (<img>):
Untuk menyisipkan gambar ke dalam halaman. Contoh: <img
src="gambar.jpg" alt="Deskripsi Gambar">.
- Elemen
tautan (<a>):
Untuk membuat hyperlink ke halaman lain atau sumber eksternal. Contoh: <a
href="https://www.example.com">Kunjungi Example</a>.
Elemen Struktur Semantik:
Elemen-elemen ini membantu mendefinisikan bagian-bagian spesifik dari sebuah
halaman web, sehingga memudahkan pengembang dan mesin pencari dalam memahami
struktur konten.
- <header>:
Menandai bagian header atau kepala dari sebuah halaman atau seksi,
biasanya berisi judul atau navigasi utama.
- <nav>:
Digunakan untuk membungkus elemen navigasi utama yang menghubungkan ke
bagian lain dari situs atau halaman.
- <section>:
Merepresentasikan sebuah bagian atau seksi dalam dokumen, yang biasanya
terdiri dari konten dengan tema serupa.
- <article>:
Menunjukkan konten independen yang dapat didistribusikan atau digunakan
kembali, seperti posting blog atau berita.
- <aside>:
Berisi konten sampingan atau tambahan yang terkait dengan konten utama,
seperti sidebar atau catatan kaki.
- <footer>:
Menandai bagian kaki dari sebuah halaman atau seksi, biasanya berisi
informasi penulis, hak cipta, atau link terkait.
Elemen Multimedia: HTML5 mempermudah
penyisipan konten multimedia tanpa memerlukan plugin eksternal.
- <audio>:
Digunakan untuk menyematkan file audio.
- <video>:
Digunakan untuk menyematkan file video.
- <source>:
Menentukan sumber media alternatif untuk elemen <audio> atau <video>.
- <track>:
Menyediakan teks pelacak untuk media, seperti subtitle atau caption.
Elemen Grafik dan Efek:
- <canvas>:
Menyediakan area untuk menggambar grafik secara dinamis menggunakan
JavaScript.
- <svg>:
Mendukung penyisipan grafik vektor skala (Scalable Vector Graphics)
langsung dalam HTML.
Elemen Formulir Baru: HTML5
memperkenalkan elemen dan atribut baru untuk meningkatkan fungsionalitas
formulir.
- <datalist>:
Menyediakan daftar opsi yang dapat dipilih pengguna saat mengisi input.
- <keygen>:
Digunakan untuk menghasilkan pasangan kunci untuk enkripsi.
- <output>:
Menampilkan hasil kalkulasi atau output dari operasi tertentu.
Elemen Lainnya:
- <mark>:
Menyoroti atau menandai teks yang dianggap penting atau relevan.
- <progress>:
Merepresentasikan kemajuan dari sebuah tugas atau proses.
- <meter>:
Menampilkan pengukuran dalam rentang tertentu, seperti tingkat kepuasan
atau kapasitas.
- Elemen
Formulir Baru:
HTML5 memperkenalkan elemen dan atribut baru untuk meningkatkan
fungsionalitas dan pengalaman pengguna dalam pengisian formulir.
- <datalist>: Menyediakan daftar opsi yang
dapat dipilih pengguna saat mengisi input, memberikan fitur
"autocomplete" pada elemen <input>.
- <keygen>: Digunakan untuk menghasilkan
pasangan kunci untuk enkripsi, membantu dalam proses otentikasi yang
aman.
- <output>: Menampilkan hasil kalkulasi
atau output dari operasi tertentu, seperti hasil perhitungan atau
pengolahan data lainnya.
- Elemen
Grafik dan Efek:
- <canvas>: Menyediakan area untuk
menggambar grafik secara dinamis menggunakan JavaScript, memungkinkan
pembuatan grafik, animasi, atau bahkan permainan sederhana.
- <svg>: Mendukung penyisipan grafik vektor skala (Scalable Vector Graphics) langsung dalam HTML, memungkinkan pembuatan grafik yang dapat diskalakan tanpa kehilangan kualitas.
Dengan
memahami dan memanfaatkan elemen-elemen baru ini, pengembang dapat membuat
halaman web yang lebih interaktif, semantik, dan responsif sesuai dengan
standar web modern.
REFERENSI
0 Response to "Pengertian dan Struktur Dasar - dasar HTML (HyperText Markup Language)"
Post a Comment