Sebelum memulai membuat file HTML, ada beberapa hal penting dalam HTML yang harus di pahami terlebih dahulu yaitu tag, elemen, atribut, dan struktur dasar HTML.
1. Tag
Tag HTML adalah penanda yang digunakan untuk mengelompokkan dan memformat konten pada halaman web. Tag HTML dibuat dengan menggunakan tanda kurung sudut "<" dan ">". Tag seringnya berpasangan yaitu tag pembuka dan tag penutup, tetapi ada uga yang hanya memiliki tag pembuka saja seperti tag image yang di tulis <img>. Tag pembuka memiliki nama yang sama dengan tag penutup, tetapi tag penutup memiliki garis miring ("/") sebelum tanda kurung sudut penutup. Contoh tag pembuka dan penutup adalah "<p>" dan "</p>".
Tag HTML yang sering di gunakan:
Berikut adalah beberapa tag HTML umum yang sering digunakan:
| Tag | Fungsi |
|---|---|
| <h1> Sampai <h6> | Untuk menambahkan judul atau subjudul pada halaman web |
| <p> | Untuk menambahkan paragraf pada dokumen |
| <a> | untuk membuat tautan atau hyperlink pada dokumen |
| <img> | Untuk menambahkan gambar pada dokumen |
| <ul> dan <li> | Untuk membuat daftar dengan poin-poin. Tag ul menyatakan awal daftar, dan tag li menyatakan setiap item dalam daftar |
| <ol> dan <li> | Untuk membuat daftar dengan nomor. Tag ol menyatakan awal daftar, dan tag li menyatakan setiap item dalam daftar |
Selain tag-tag di atas, masih banyak lagi tag HTML yang bisa digunakan untuk membuat halaman web
2. Elemen
Elemen HTML adalah kombinasi dari satu atau lebih tag yang membentuk suatu objek dalam halaman web, seperti sebuah paragraf atau gambar. Elemen HTML dimulai dengan tag pembuka dan diakhiri dengan tag penutup. Isi elemen HTML adalah konten yang terletak di antara tag pembuka dan tag penutup. Contoh elemen HTML adalah <p> Ini adalah sebuah paragraf </p>
3. Atribut
Atribut HTML memberikan informasi tambahan tentang suatu elemen HTML. Atribut ditempatkan di dalam tag pembuka dan biasanya terdiri dari nama dan nilai atribut yang dipisahkan oleh tanda sama dengan (=). Contoh atribut adalah "src" untuk menentukan sumber gambar pada elemen <img>, "href" untuk menentukan alamat tautan pada elemen <a>, dan "style" untuk menentukan gaya atau tampilan elemen HTML.
Dari kombinasi, tag, elemen, dan atribut HTML memungkinkan pengguna untuk membuat halaman web yang kaya akan konten dan interaksi dengan pengguna
4. Struktur dasar HTML
Setiap halaman HTML dimulai dengan sebuah dokumen HTML. Dokumen ini kemudian terdiri dari beberapa bagian, termasuk judul, badan, dan elemen lainnya. Berikut adalah contoh struktur dasar dari sebuah dokumen HTML:
Struktur dasar HTMLseperti contoh diatas, terdiri dari beberapa elemen yang membentuk dokumen HTML. Elemen-elemen ini memiliki struktur dan peran masing-masing dalam halaman web. Berikut ini adalah penjelasan lebih rinci tentang elemen-elemen yang membentuk struktur dasar HTML:
- <!DOCTYPE html> Tag ini merupakan deklarasi jenis dokumen HTML yang digunakan pada halaman web. HTML5 adalah jenis dokumen HTML terbaru yang biasa digunakan.
- <html> Tag ini membungkus keseluruhan dokumen HTML.
- <head> Tag ini berisi informasi penting yang tidak ditampilkan pada halaman web, seperti judul, meta tag, dan script. Bagian ini juga bisa digunakan untuk menambahkan CSS dan JavaScript pada halaman web.
- <title> Tag ini digunakan untuk memberikan judul pada halaman web. Judul akan ditampilkan di bilah judul browser ketika halaman web dibuka.
- <body> Tag ini berisi seluruh konten yang ditampilkan pada halaman web, seperti teks, gambar, video, dan audio.
Setelah tag head dan body, kita dapat menambahkan berbagai elemen HTML seperti tag h1 hingga h6 untuk memberikan judul dan subjudul pada halaman web, tag p untuk menambahkan paragraf, tag a untuk menambahkan tautan atau hyperlink, tag img untuk menambahkan gambar, dan tag ul dan ol untuk membuat daftar dengan poin-poin atau nomor.
Dengan menggunakan struktur dasar HTML, kita dapat membuat halaman web yang sederhana atau kompleks dengan menambahkan berbagai elemen HTML sesuai kebutuhan. Struktur dasar HTML juga memastikan bahwa halaman web kita terstruktur dengan baik dan dapat diakses oleh browser dan mesin pencari dengan mudah.
