Referensi lengkap HTML5. Semantic elements, forms, media, APIs, dan fitur modern lainnya. Dari basic sampe advanced.
Struktur dasar HTML yang diperlukan untuk membuat halaman web yang valid dan responsive.
Template HTML5 dasar yang lengkap dengan semua elemen penting untuk memulai website.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Deskripsi halaman">
<title>Judul Halaman</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World</h1>
<script src="script.js"></script>
</body>
</html>
Tag meta yang penting untuk SEO, social media sharing, dan konfigurasi browser.
<!-- Character set -->
<meta charset="UTF-8">
<!-- Viewport untuk responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Description untuk SEO -->
<meta name="description" content="Deskripsi website kamu">
<!-- Keywords -->
<meta name="keywords" content="html, css, javascript">
<!-- Author -->
<meta name="author" content="Nama Kamu">
<!-- Refresh page -->
<meta http-equiv="refresh" content="30">
<!-- Open Graph (Facebook, LinkedIn) -->
<meta property="og:title" content="Judul">
<meta property="og:description" content="Deskripsi">
<meta property="og:image" content="image.jpg">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Judul">
Elemen HTML5 yang memiliki makna semantik untuk meningkatkan struktur dan aksesibilitas website.
Elemen semantic untuk struktur layout yang lebih bermakna dan SEO-friendly.
<!-- Header website -->
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main>
<!-- Section -->
<section>
<h2>Section Title</h2>
<p>Content here</p>
</section>
<!-- Article -->
<article>
<h2>Article Title</h2>
<p>Article content</p>
</article>
<!-- Aside untuk sidebar -->
<aside>
<h3>Related Links</h3>
</aside>
</main>
<!-- Footer website -->
<footer>
<p>© 2025 Website Kamu</p>
</footer>
Elemen untuk mengelompokkan gambar dengan caption yang sesuai.
<figure>
<img src="image.jpg" alt="Deskripsi gambar">
<figcaption>Caption gambar di sini</figcaption>
</figure>
Elemen untuk membuat collapsible content (expandable/collapsible).
<details>
<summary>Klik buat expand</summary>
<p>Content yang di-hidden, muncul kalau di-klik</p>
</details>