Struktur Dokumen HTML - Belajar Membuat Website

Daftar Isi

PETIK.NET | Struktur dokumen HTML adalah kerangka atau susunan dari sebuah dokumen HTML yang terdiri dari beberapa elemen seperti tag, atribut, dan isi konten. Struktur dokumen HTML umumnya terdiri dari tag < html >, < head >, dan < body >. Tag < html > menunjukkan awal dan akhir dari dokumen HTML, sedangkan tag < head > dan < body > digunakan untuk menampung elemen-elemen yang tidak tampil dan tampil di halaman web.

Selain itu, terdapat juga tag < title > dan < meta > yang digunakan untuk memberikan informasi metadata tentang halaman web. Tag < header >, < nav >, dan < footer > digunakan untuk menunjukkan bagian atas, navigasi, dan bagian bawah dari halaman web. Tag < main > dan < article > digunakan untuk menunjukkan konten utama dan artikel terkait pada halaman web.

Selanjutnya, tag < section > dan < aside > digunakan untuk menunjukkan bagian dari halaman web yang memiliki topik atau isi yang sama dan bagian yang terkait tetapi bukan bagian utama dari isi halaman. Dengan memahami struktur dokumen HTML, pengembang web dapat membuat halaman web yang terstruktur dan mudah dipelajari oleh browser dan mesin pencari.

Tag html, head, dan body

Tag HTML digunakan sebagai awal dan akhir dari dokumen HTML. Setiap halaman web harus memiliki tag HTML. Tag head digunakan untuk menentukan informasi tentang halaman web seperti judul, deskripsi, dan meta-data lainnya. Tag body digunakan untuk menentukan isi dari halaman web.

Tag title dan meta

Tag title digunakan untuk menentukan judul halaman web yang akan ditampilkan di browser. Tag meta digunakan untuk memberikan informasi tambahan tentang halaman web seperti deskripsi, kata kunci, dan jenis konten.

Tag header, nav, dan footer

Tag header digunakan untuk menentukan area header halaman web, yang biasanya berisi logo, judul, dan menu navigasi. Tag nav digunakan untuk menentukan menu navigasi halaman web. Tag footer digunakan untuk menentukan area footer halaman web, yang biasanya berisi hak cipta, tautan ke halaman lain, atau informasi kontak.

Tag main dan article

Tag main digunakan untuk menentukan area utama konten dari halaman web, yang biasanya berisi konten utama seperti artikel atau posting blog. Tag article digunakan untuk menentukan artikel atau posting blog individu dalam halaman web.

Tag section dan aside

Tag section digunakan untuk menentukan bagian-bagian dari halaman web yang berisi konten terkait. Misalnya, dalam halaman web yang berisi artikel tentang teknologi, bagian yang membahas komputer dapat dikelompokkan dalam tag section. Tag aside digunakan untuk menentukan konten yang terkait dengan konten utama tetapi tidak terlalu penting, seperti iklan atau tautan terkait.

Contoh kode

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Contoh Halaman Web</title>
<link rel="stylesheet" href="style.css">
<!-- Menambahkan stylesheet CSS ke halaman web -->
</head>
<body>
<header>
<!-- Menunjukkan bagian atas halaman web -->
<h1>Contoh Halaman Web</h1>
<!-- Menambahkan judul halaman web -->
<nav>
<!-- Menunjukkan daftar navigasi -->
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Kontak</a></li>
<!-- Menambahkan tautan ke halaman web lain -->
</ul>
</nav>
</header>
<main>
<!-- Menunjukkan konten utama halaman web -->
<section>
<!-- Menunjukkan bagian dari halaman web yang memiliki topik atau isi yang sama -->
<h2>Artikel Terbaru</h2>
<!-- Menambahkan judul bagian -->
<article>
<!-- Menunjukkan artikel atau konten yang terkait -->
<h3>Judul Artikel</h3>
<!-- Menambahkan judul artikel -->
<p>Ini adalah artikel yang terkait dengan halaman web ini.</p>
<!-- Menambahkan isi artikel -->
</article>
<article>
<h3>Judul Artikel Lainnya</h3>
<p>Ini adalah artikel lainnya yang terkait dengan halaman web ini.</p>
</article>
</section>
<aside>
<!-- Menunjukkan bagian dari halaman web yang terkait, tetapi bukan bagian utama dari isi halaman -->
<h2>Artikel Terkait</h2>
<!-- Menambahkan judul bagian -->
<ul>
<li><a href="#">Artikel Terkait 1</a></li>
<li><a href="#">Artikel Terkait 2</a></li>
<li><a href="#">Artikel Terkait 3</a></li>
<!-- Menambahkan tautan ke artikel terkait -->
</ul>
</aside>
</main>
<footer>
<!-- Menunjukkan bagian bawah halaman web -->
<p>Hak Cipta © 2023 Contoh Halaman Web</p>
<!-- Menambahkan informasi hak cipta -->
</footer>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Contoh Halaman Web</title>

</head>

<body>

<h1>Contoh Halaman Web</h1>

<nav>

<ul>

<li><a href="#">Beranda</a></li>

<li><a href="#">Tentang Kami</a></li>

<li><a href="#">Produk</a></li>

<li><a href="#">Kontak</a></li>

</ul>

</nav>

</header>

<main>

<h2>Artikel Terbaru</h2>

<h3>Judul Artikel</h3>

<p>Ini adalah artikel yang terkait dengan halaman web ini.</p>

</article>

<h3>Judul Artikel Lainnya</h3>

<p>Ini adalah artikel lainnya yang terkait dengan halaman web ini.</p>

</article>

</section>

<aside>

<h2>Artikel Terkait</h2>

<ul>

<li><a href="#">Artikel Terkait 1</a></li>

<li><a href="#">Artikel Terkait 2</a></li>

<li><a href="#">Artikel Terkait 3</a></li>

</ul>

</aside>

</main>

</footer>

</body>

</html>

Demikianlah penjelasan mengenai struktur dokumen HTML dan beberapa tag yang sering digunakan, seperti tag < html >, < head >, < body >, < title >, < meta > , < header >, < nav >, < footer >, < main >, < article >, < section >, dan < aside >. Dengan menguasai konsep ini, diharapkan dapat membantu para pengembang web dalam membuat halaman web yang terstruktur dan mudah dipahami oleh pengguna dan mesin pencari.