Cheat sheet HTML adalah panduan ringkas berisi referensi cepat untuk tag, atribut, dan syntax HTML. Cheat sheet HTML lengkap ini untuk belajar HTML cepat.
Baca juga: Daftar Tag HTML Lengkap dan Fungsinya
Mengapa Cheat Sheet?
- ⚡ Referensi cepat
- 📚 Panduan lengkap
- 🎯 Praktis
- 🇮🇩 HTML cheat sheet bahasa Indonesia
Tag HTML Penting
Daftar tag HTML cepat:
<!-- Container -->
<div>Block container</div>
<span>Inline container</span>
<!-- Heading -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<!-- Paragraf -->
<p>Paragraf teks</p>
<!-- Line Break & HR -->
<br>
<hr>
<!-- Comment -->
<!-- Komentar -->Code language: HTML, XML (xml)List dan Link
<!-- Unordered List -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<!-- Ordered List -->
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
<!-- Description List -->
<dl>
<dt>HTML</dt>
<dd>Markup Language</dd>
</dl>
<!-- Links -->
<a href="https://example.com">Link</a>
<a href="page.html">Internal</a>
<a href="#section">Anchor</a>
<a href="mailto:info@example.com">Email</a>
<a href="tel:+6281234567890">Phone</a>
<a href="file.pdf" download>Download</a>
<a href="url" target="_blank" rel="noopener">New Tab</a>Code language: HTML, XML (xml)Table
Panduan HTML pemula untuk tabel:
<!-- Simple Table -->
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<!-- Complete Table -->
<table>
<caption>Title</caption>
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Footer</td>
</tr>
</tfoot>
</table>Code language: HTML, XML (xml)HTML5 Semantic
Cheat sheet HTML lengkap semantic:
<!DOCTYPE html>
<html lang="id">
<body>
<header>
<h1>Logo</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>Article Title</h2>
<time datetime="2024-01-15">15 Jan 2024</time>
</header>
<section>
<h3>Section 1</h3>
<p>Content...</p>
</section>
</article>
<aside>
<h3>Related</h3>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 Website</p>
<address>
<a href="mailto:info@example.com">Email</a>
</address>
</footer>
<details>
<summary>Click for details</summary>
<p>Hidden content</p>
</details>
</body>
</html>Code language: HTML, XML (xml)Semantic Tags:
<header>– Header<nav>– Navigation<main>– Main content<article>– Independent content<section>– Content section<aside>– Sidebar<footer>– Footer<details>– Collapsible<summary>– Summary<time>– Date/time<address>– Contact<figure>– Media with caption
Meta Tags SEO
HTML cheat sheet bahasa Indonesia untuk SEO:
<head>
<!-- Essential -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title (50-60 chars)</title>
<!-- SEO -->
<meta name="description" content="Description (150-160 chars)">
<meta name="keywords" content="keyword1, keyword2">
<meta name="author" content="Author Name">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/page">
<!-- Open Graph -->
<meta property="og:title" content="Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="https://example.com/img.jpg">
<meta property="og:url" content="https://example.com/page">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Title">
<meta name="twitter:image" content="https://example.com/img.jpg">
<!-- Favicon -->
<link rel="icon" href="favicon.png">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
</head>Code language: HTML, XML (xml)Tabel Referensi
| Kategori | Tags |
|---|---|
| Structure | html, head, body, div, span |
| Text | h1-h6, p, strong, em, br, hr |
| List | ul, ol, li, dl, dt, dd |
| Media | a, img, audio, video, iframe |
| Table | table, tr, th, td, thead, tbody |
| Form | form, input, label, select, button |
| Semantic | header, nav, main, article, footer |
Kesimpulan
Cheat sheet HTML ini adalah panduan HTML singkat untuk belajar HTML cepat. Dengan HTML ringkasan lengkap ini, developer pemula dapat:
✅ Referensi cepat tag HTML
✅ Contoh kode siap pakai
✅ Lengkap dari dasar hingga HTML5
✅ SEO-friendly dengan meta tags
Tips Menggunakan:
- Bookmark untuk referensi
- Praktik setiap contoh
- Validasi dengan W3C
- Kombinasi dengan CSS/JS
- Update pengetahuan
Panduan HTML pemula ini berguna untuk semua level developer!
