## Apa itu HTML5? **Analogi Sederhana:** HTML = kerangka rumah (struktur bangunan). CSS = cat & dekorasi. JavaScript = listrik & furniture yang berfungsi. HTML (HyperText Markup Language) adalah bahasa markup buat bikin struktur website. HTML5 adalah versi terbaru dengan banyak fitur modern. **Kenapa HTML5 Wajib Dikuasai?** - **Foundation website** - Semua website butuh HTML - **Semantic elements** - Struktur yang meaningful (bagus buat SEO) - **Built-in validation** - Form validation tanpa JavaScript - **Multimedia support** - Audio & video tanpa plugin Flash - **Accessibility** - Ramah buat semua user (termasuk yang punya disabilitas) **Fun Fact:** Tanpa HTML yang proper, CSS & JavaScript ga akan maksimal! ## Basic Structure Ini struktur dasar HTML5 document: ```html Judul Halaman

Hello World

Konten halaman

``` **Penjelasan:** - `` - Deklarasi HTML5 - `` - Root element, lang buat language - `` - Metadata (ga tampil di page) - `` - Content yang keliatan ## Semantic Elements (Tag dengan Makna) **Apa itu Semantic?** Semantic = tag dengan makna jelas. Browser & search engine langsung tau ini bagian apa! **Kenapa penting?** - SEO lebih baik (Google paham struktur page) - Accessibility (screen reader bisa navigate dengan mudah) - Kode lebih gampang dibaca - Maintenance lebih simpel ### Page Structure ```html

Judul Artikel

Section 1

Content...

Section 2

Content...

``` ### Semantic Elements Explained **`

`** - Header section (logo, navigation) - Bisa ada banyak headers di page (article header, section header) **`

`** - Navigation links - Main navigation menu **`

`** - Main content area - Cuma boleh ada SATU `

` per page - Ga boleh nested di `

`, `

` **`

`** - Self-contained content - Bisa berdiri sendiri (blog post, news article, comment) **`

`** - Thematic grouping of content - Biasanya punya heading **`

`** - Side content (sidebar, related content) - Content yang related tapi bisa dihapus tanpa ganggu main content **`

`** - Footer section (copyright, links, contact info) - Bisa ada banyak footers (article footer, page footer) ### Kenapa Semantic HTML? ```html

...

``` **Manfaatnya:** - **SEO** - Search engine lebih paham struktur - **Accessibility** - Screen reader lebih mudah navigate - **Maintainability** - Code lebih readable - **Future-proof** - Standards-compliant ## Text Elements ### Headings ```html

Main Heading (cuma satu per page)

Sub Heading

Sub-sub Heading

Heading Level 4

Heading Level 5

Heading Level 6

``` Best practices: - Satu `

` per page (biasanya page title) - Jangan skip levels (h1 → h2 → h3, bukan h1 → h3) - Pakai buat struktur, bukan buat styling ### Paragraphs & Text ```html

This is a paragraph.

First line
Second line

This is important text.

This is emphasized text.

This is highlighted text.

This is small text.

Price: ~~$100~~ $80

H₂O

E = mc²

This is a long quote from someone.

He said, Short inline quote.

Use console.log() to debug.

function hello() {
 console.log("Hello");
}

``` ## Lists ### Unordered List ```html

Item 1
Item 2
Item 3

``` ### Ordered List ```html

First step
Second step
Third step

Item 5
Item 6

Item 3
Item 2
Item 1

``` ### Description List ```html

HTML: HyperText Markup Language
CSS: Cascading Style Sheets

``` ## Links & Images ### Links ```html Google About Page Send Email Call Us Jump to Section Download PDF ``` **Link attributes:** - `target="_blank"` - Buka di tab baru - `rel="noopener noreferrer"` - Security (wajib pakai dengan `target="_blank"`) - `download` - Download file daripada navigate ### Images ```html Description

2024 Sales Performance

``` **Penting:** - `alt` attribute WAJIB buat accessibility - Pakai `loading="lazy"` buat images di bawah fold - `srcset` buat responsive images ## Forms HTML5 nambah banyak input types dan validation built-in. ### Basic Form ```html ``` ### HTML5 Input Types ```html I agree to terms Option 1 Option 2 ``` ### Form Validation Attributes ```html ``` ### Textarea & Select ```html Message: Country: ``` ### Form Example ```html ``` ## Tables ```html

Name	Age	City
John	25	Jakarta
Jane	30	Bandung
Total: 2 people

``` ## Multimedia ### Audio ```html

``` ### Video ```html

``` ### Iframe ```html ``` ## Meta Tags (SEO & Social) ```html ``` ## Best Practices Accessibility ### Pakai Semantic HTML ```html

Click me

``` ### Alt Text buat Images ```html

``` ### Labels buat Inputs ```html Email: Email: ``` ### ARIA Attributes (kalau perlu) ```html

Custom Button

Enter your full name ``` ### Hierarki Heading ```html

Main Title

Section 1

Subsection 1.1

Subsection 1.2

Section 2

Main Title

Should be h2

``` ## HTML5 APIs ### Local Storage ```html ``` ### Geolocation ```html ``` ## Kesalahan Umum ### 1. Div Soup ```html

``` ### 2. Missing Alt Text ```html

``` ### 3. Inline Styles ```html

Text

``` ### 4. Lupa Closing Tags ```html

Paragraph 1

Paragraph 2

Paragraph 1

Paragraph 2

``` ### 5. Pakai <br> buat Spacing ```html

Text

``` ## Tips Best Practices 1. **Selalu pakai semantic HTML** - Better SEO & accessibility 2. **Satu H1 per page** - Main page title aja 3. **Label semua form inputs** - Penting buat accessibility 4. **Include alt text** - Buat semua images (empty alt buat decorative) 5. **Validate HTML kamu** - Pakai W3C validator 6. **Pakai DOCTYPE yang benar** - `` buat HTML5 7. **Close semua tags** - Termasuk self-closing (``, `
`) 8. **Indent yang proper** - Bikin code readable 9. **Pakai lowercase** - Buat tags dan attributes 10. **Quote attributes** - Selalu pakai quotes (`class="example"`) ## Tools buat Validate - [W3C HTML Validator](https://validator.w3.org/) - Cek HTML validity - [WAVE](https://wave.webaim.org/) - Accessibility checker - Browser DevTools - Inspect & debug - Lighthouse - Performance, SEO, accessibility audit ## Kesimpulan **HTML5 = Foundation Web Development!** Tanpa HTML yang proper, CSS & JavaScript ga akan maksimal. Semua dimulai dari struktur HTML yang benar. **Yang Wajib Dikuasai:** 1. **Basic Structure** (``, ``, ``) 2. **Semantic Elements** (`

`, `