Catatan Blog Semantik

15 minitPemulaHTML

Blog resipi Aina nampak betul, tetapi di sebalik tabir setiap elemen ialah <div>. Enjin carian tidak dapat membezakan tajuk daripada teks, dan pengguna pembaca skrin tidak boleh melompat ke kandungan utama atau menyenaraikan tajuk. Beri setiap bahagian maksud sebenarnya.

Keperluan

Nama laman dan menu diletak dalam <header> halaman; tiga pautan menu diletak di dalam <nav>.
Catatan itu ialah <article> di dalam <main>. Tajuknya ialah satu-satunya <h1> di halaman; "The secret…" ialah <h2>; teks isi menggunakan <p>.
Tarikh ialah <time> dengan datetime yang boleh dibaca mesin seperti 2026-10-12.
Foto ialah <figure> dengan <figcaption>, dan <img> diberi alt yang bermakna.
Baris hak cipta ialah <footer> halaman.

Kekalkan nama class jika mahu — CSS akan terus berfungsi. Hanya tag yang perlu ditukar.

Tulis semula index.html yang penuh dengan <div> menggunakan HTML semantik: header + nav, main + article, satu h1, satu h2, p, time datetime, figure + figcaption (dengan alt), dan footer.

Semakan

Landmark header dengan nav, main, dan footer
Article dalam main dengan satu h1 dan satu h2
Teks isi menggunakan perenggan
Tarikh ialah <time> yang boleh dibaca mesin
Foto dalam figure dengan teks alt dan kapsyen

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.