Struktur HTML: Mengenal Elemen Dasar dan Fungsinya.

HTML atau singkatan dari HyperText Markup Language merupakan bahasa markup yang digunakan untuk membuat dan mengatur tampilan pada website. HTML terdiri dari berbagai elemen yang membentuk struktur dasar sebuah halaman web. Dalam artikel ini, kita akan membahas struktur dasar HTML dan elemen yang digunakan dalam struktur tersebut.
Struktur Dasar HTML Setiap halaman web harus memiliki struktur dasar HTML yang terdiri dari elemen dasar, yaitu <!DOCTYPE html>
, <html>
, <head>
, dan <body>
.
Berikut adalah penjelasan dari setiap elemen tersebut:
<!DOCTYPE html>
Elemen<!DOCTYPE html>
adalah sebuah deklarasi dokumen yang memberitahu browser bahwa dokumen tersebut ditulis dengan menggunakan HTML versi terbaru. Elemen ini harus dituliskan di awal dokumen.<html>
Elemen<html>
adalah elemen yang membungkus seluruh dokumen HTML. Semua elemen lainnya harus berada di dalam elemen<html>
.<head>
Elemen<head>
adalah elemen yang berisi informasi-informasi meta tentang dokumen, seperti judul halaman, deskripsi, dan keywords. Elemen<head>
tidak ditampilkan pada tampilan halaman web, namun hanya digunakan untuk memberikan informasi-informasi yang terkait dengan halaman tersebut.<body>
Elemen<body>
adalah elemen yang berisi semua konten yang ditampilkan pada halaman web. Semua elemen yang akan ditampilkan pada halaman web harus berada di dalam elemen<body>
.
Elemen Dasar HTML Selain empat elemen dasar yang telah dijelaskan di atas, ada juga beberapa elemen dasar yang umumnya digunakan pada setiap halaman web.
Berikut adalah beberapa elemen tersebut beserta penjelasannya:
<h1> - <h6>
Elemen<h1>
–<h6>
digunakan untuk membuat judul atau heading pada halaman web. Elemen<h1>
adalah heading yang paling penting dan biasanya digunakan untuk judul halaman.<p>
Elemen<p>
digunakan untuk membuat paragraf pada halaman web.<a>
Elemen<a>
digunakan untuk membuat hyperlink. Elemen ini harus memiliki atributhref
yang menunjukkan alamat URL yang akan dibuka ketika hyperlink tersebut di klik.<img>
Elemen<img
>
digunakan untuk menampilkan gambar pada halaman web. Elemen ini harus memiliki atributsrc
yang menunjukkan alamat URL gambar yang akan ditampilkan.<ul>
dan<li>
Elemen<ul>
dan<li>
digunakan untuk membuat daftar tak-berurutan. Elemen<ul>
adalah elemen yang membungkus seluruh daftar, sedangkan elemen<li>
adalah elemen yang digunakan untuk membuat setiap item pada daftar.<ol>
dan<li>
Elemen<ol>
dan<li>
digunakan untuk membuat daftar berurutan. Elemen<ol>
adalah elemen yang membungkus seluruh daftar, sedangkan elemen<li>
adalah elemen yang digunakan untuk membuat setiap item pada daftar.<table>
,<tr>
,<th>
, dan<td>
Elemen<table>
,<tr>
,<th>
, dan<td>
digunakan untuk membuat tabel pada halaman web. Elemen<table>
adalah elemen yang membungkus seluruh tabel, sedangkan elemen<tr>
digunakan untuk membuat baris pada tabel. Elemen<th>
dan<td>
digunakan untuk membuat sel pada tabel. Sel yang dibuat dengan elemen<th>
biasanya digunakan untuk membuat header pada tabel, sedangkan sel yang dibuat dengan elemen<td>
digunakan untuk membuat data pada tabel.<form>
dan<input>
Elemen<form>
dan<input>
digunakan untuk membuat form pada halaman web. Elemen<form>
adalah elemen yang membungkus seluruh form, sedangkan elemen<input>
digunakan untuk membuat input field pada form. Elemen<input>
dapat memiliki beberapa tipe, seperti tipe teks, tipe email, tipe password, dan lain-lain.<div>
dan<span>
Elemen<div>
dan<span>
digunakan untuk membuat blok atau elemen yang dapat diatur secara terpisah pada halaman web. Elemen<div>
biasanya digunakan untuk membuat blok yang besar, sedangkan elemen<span>
digunakan untuk membuat elemen yang lebih kecil.
Kesimpulan
Struktur dasar HTML terdiri dari empat elemen dasar, yaitu <!DOCTYPE html>
, <html>
, <head>
, dan <body>
. Setiap halaman web harus memiliki struktur dasar ini. Selain itu, ada juga beberapa elemen dasar yang umumnya digunakan pada setiap halaman web, seperti <h1>
– <h6>
, <p>
, <a>
, <img>
, <ul>
, <ol>
, <table>
, <tr>
, <th>
, <td>
, <form>
, <input>
, <div>
, dan <span>
. Dengan memahami struktur dan elemen dasar HTML, kita dapat membuat halaman web yang lebih baik dan terstruktur.