10 Element HTML yang Wajib Kamu Ketahui untuk Pemula

Kamu telah belajar dasar html di artikel sebelumnya. Disana telah saya jelaskan mengenai elemen yang ada di HTML.

Jika lupa, mari kita bahas sedikit.

Elemen adalah komponen-komponen kode di HTML yang bertujuan untuk mendefinisikan sesuatu.

Ada buanyak sekali, tercatat ada lebih dari 100 elemen HTML yang ada.

Dan ini akan terus berkembang dan bertambah seiring makin kompleksnya teknologi website saat ini.

Tapi, apakah semua wajib dihapal?

O tidak tentunya.

Belajar ngoding itu tidak mengharuskan kita untuk menghafal, yang penting paham dan tahu apa yang harus dilakukan

Maksudnya begini, misal jika kamu ingin membuat suatu menu. Ya, kamu tahu cara buatnya tapi hanya lupa elemennya.

Dan itu wajar dan gak papa, tinggal googling aja elemennya langsung ketemu.

Jadi, kamu gak harus menghafal semua elemen yang ada. Cukup kamu tahu bahwa ada elemen itu.

Langsung saja yak saya akan bahas elemen-elemen HTML yang umum digunakan:

No	Elemen	Tag
1.	Teks header	`<h1>, <h2>, <h3>, <h4>, <h5>, <h6>`
2.	Paragraf	`<p>..</p>`
3.	Link	`<a href="#">..</a>`
4.	List	`<ol>, <ul>, <li>`
5.	Gambar	`<img src="gmbr.jpg"/>`
6.	Tabel	`<table>, <tr>, <td>`
7.	Divider	`<div>..</div>`
8.	Teks Span	`<span>..</span>`
9.	Header	`<header>..</header>`
10.	Footer	`<footer>..</footer>`

1. Teks Header

Pertama adalah teks header atau disebut heading, fungsinya adalah mendefinisikan suatu topik.

Teks header dimulai dari <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>.

Cara makai heading bagaimana?

Misal nih, dalam suatu website berita yang bernama PUNTADEWA SITE mempublikasikan suatu artikel berjudul belajar html dari dasar.

Kemudian, di dalam artikel tersebut ada sub pembahasan mengenai:

Definisi HTML
Software Ngoding
- Teks Editor
- Web Browser

Maka, struktur heading yang benar adalah:

<h2>PUNTADEWA SITE</H2>
<h1>Belajar HTML dari Dasar</h1>
	<h2>Software ngoding</h2>
		<h3>Teks editor</h3>
		<h3>Web Browser</h3>

Mengapa PUNTADEWA SITE juga <h2>?

Nah, ini karna kita mempertimbangkan sisi search engine optimization (SEO). Sturktur diatas dipakai dalam halaman artikel bukan halaman homepage / blog list.

Strukturnya akan beda jika di beranda website, misal daftar artikelnya:

Belajar HTML
Membuat Tabel di Website
Memahami Kode Warna di HTML

Dengan title site yang sama, maka struktur text heading di homepage menjadi:

<h1>PUNTADEWA SITE</H1>
	<h2>Belajar HTML</h2>
	<h2>Membuat Tabel di Website</h2>
	<h2>Memahami Kode Warna di HTML</h2>

Disini paham?

Jadi, heading <h1> digunakan untuk mendefinisikan title utama (prioritas).

Kalau di homepage yang jadi prioritas adalah title website, sedangkan di post yang jadi prioritas adalah title artikel.

2. Paragraf

Paragraf dalam HTML didefinisikan dengan tag <p>.

Tag ini digunakan saat kita menulis sebuah artikel. Jadi, setiap paragraf dalam artikel tersebut harus ditulis diantara tag <p>....</p>.

Contohnya:

Paragraf tersebut agar bisa dibaca dengan baik oleh web browser ditulis dengan format:

3. Link

Link adalah tag yang berfungsi untuk menghubungkan satu halaman dengan halaman yang lain.

Masih bingung? Coba klik kalimat berikut –> puntadewa.my.id

Untuk membuat link tersebut dibutuhkan syntag: <a href="#link_tujuan">puntadewa.my.id</a>.

#link_tujuan diisi dengan halaman yang akan dituju, sedangkan puntadewa.my.id adalah teks yang diberi link.

Biasanya tag link ditambah atribut alt="teks alternatif" dan title="judul teks link".

4. List

List digunakan untuk membuat daftar. Ada dua tipe list yaitu:

Ordered list, daftar yang berurutan misal: 1,2, 3… dst atau a, b, c, … dst
Unordered list, daftar yang tidak berurutan, misalnya dengan lingkaran, kotak, strip

Untuk setiap daftar item ditulis diantara tag <li>..</li>

Unordered List <ul>

Untuk membuat unordered list dibutuhkan tag <ul>...</ul>.

Jadi, misal kita mau buat daftar seperti ini:

ul satu
ul dua
ul tiga

Maka kode yang ditulis:

<ul>
	<li>ul satu</li>
	<li>ul dua</li>
	<li>ul tiga</li>
</ul>

Ordered List <ol>

Untuk membuat daftar berurutan dibutuhkan diantara tag <ol>..</ol>

Kita mau bikin:

ol satu
ol dua
ol tiga

Maka ditulis:

<ol>
	<li>ol satu</li>
	<li>ol dua</li>
	<li>ol tiga</li>
</ol>

5. Gambar

Untuk menyisipkan gambar dibutuhkan tag <img src="alamatgambar.jpg"/>

Kode tersebut dapat ditambahi atribut width="", height="", style="".

Misalkan, kita ingin menyisipkan gambar dibawah ini:

Nama gambar tersebut adalah contoh-sisipkan-gambar-html.jpg. Maka kode yang digunakan adalah <img src="contoh-sisipkan-gambar-html.jpg" />.

Yang perlu diperhatikan adalah penulisan letak direktori dari gambar tersebut.

Misal, gambar tersebut ada di folder A, maka akan menjadi: <img src="A/contoh-sisipkan-gambar-html.jpg" />.

6. Tabel

Untuk membuat table kita menggunakan tag <table>...</table>. Dimana row ditulis <tr>..</tr> dan kolom <td>...</td>.

Urutan nulis table adalah:

Kolom ada di dalam baris, baris ada di dalam tabel

Jadi, misal kita mau buat tabel ukuran 2×3 (2 baris dan 3 kolom) seperti tabel berikut:

isi 1	isi 2	isi 3
isi 4	isi 5	isi 6

Maka nulis html kodenya sebagai berikut:

<table> <!-- pembuka tabel-->
	<tr>
		<td>isi 1</td>
		<td>isi 2</td>
		<td>isi 3</td>
	</tr>
	<tr><!-- pembuka baris-->
		<td>isi 1</td>
		<td>isi 2</td>
		<td>isi 3</td>
	</tr><!-- penutup tabel-->
</table><!-- penutup tabel-->

Untuk lebih detail saya telah membahas cara membuat tabel di HTML di artikel yang lain.

7. Devider atau Pemisah

Kalau limat element tadi adalah elemen yang sangat dasar, untuk elemen yang satu ini cukup kompleks.

Tag devider ditulis <div>...</div>.

Apakah fungsi dari kode <div> ?

Kalau jaman dulu, untuk membuat sebuah layout website menggunakan elemen tabel. Misal kita ingin buat layout seperti gambar dibawah:

Maka kita menggunakan elemen tabel untuk membuatnya.

Tapi, saat ini element tabel sudah tidak digunakan lagi untuk membuat layout.

Tabel digunakan khusus untuk menampilkan data saja, misal data harga, data keuangan, data absensi, dll.

Kelebihan tag <div> adalah bisa digunakan untuk membuat layout apa saja, misal: kita juga bisa menggunakan <div> untuk membuat tabel.

Layout, diatas dapat dibuat dengan kode berikut:

<div>
	<div style="width: 100%; height: 125px">
		<H1>Header</H1>
	</div>
	<div style="width: 100%; height: 30px">
		MENU NAVIGASI
	</div>
	<div style="width: 60%; float: right">
		KONTEN
	</div>
	<div style="width: 35%; float: left">
		SIDEBAR
	</div>
</div>

8. Teks Span

Kalau ingin buat paragraf kita gunakan <p>, tapi gimana kalau hanya satu kata atau kalimat?

Kalau seperti itu, kita bisa menggunakan <span>...</span>.

Misal, kita ingin buat teks warna merah.

Kode yang digunakan adalah: <span style="color:red">teks warna merah</span>.

Dulu, untuk membuat sebuah header biasa digunakan elemen <div>, misal <div id="header"></div>.

Didefinisikan dengan id="header". Untuk atribut ID akan saya bahas di artikel selanjutnya.

Sekarang, untuk membuat header cukup dengan tag <header>..</header>

Sama seperti header, dulu untuk buat footer menggunakan kode <div> dengan atribuat footer.

Sekarang tinggal ketik saja <footer>..</footer>.

Untuk mengedit tampilan style dari element HTML diatas, kita membutuhkan CSS.

HTML Element Wajib