HTML Semantic Elements Demo

📝 Basic Semantic Elements

💡 Struktur Semantik Dasar

Elemen semantik HTML5 memberikan makna pada konten web, meningkatkan aksesibilitas dan SEO.

semantic.html

          
            <header>

              <h1>Judul Website</h1>

              <nav>

                <ul>

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

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

                </ul>

              </nav>

            </header>

            <main>

              <article>

                <h2>Judul Artikel</h2>

                <p>Konten artikel...</p>

              </article>

            </main>

            <footer>

              <p>© 2023 Website Saya</p>

            </footer>

🔍 Penjelasan Detail:

• <header> - Bagian kepala dokumen atau section
• <nav> - Berisi navigasi utama
• <main> - Konten utama yang unik di halaman
• <article> - Konten mandiri yang bisa berdiri sendiri
• <footer> - Bagian kaki dokumen atau section
• <section> - Pengelompokan konten tematik
• <aside> - Konten terkait tapi tidak langsung (sidebar)

⚡ Pro Tips

Gunakan hanya satu <main> per halaman, dan jangan letakkan di dalam elemen semantik lain seperti <article> atau <section>!

🔗 Advanced Semantic Elements

💡 Elemen Semantik Lanjutan

HTML5 memperkenalkan elemen semantik tambahan untuk struktur yang lebih spesifik.

advanced-semantic.html

          
            <figure>

              <img src="image.jpg" alt="Deskripsi">

              <figcaption>Keterangan gambar</figcaption>

            </figure>

            <details>

              <summary>Klik untuk detail</summary>

              <p>Konten tambahan yang bisa dibuka/tutup</p>

            </details>

            <time datetime="2023-10-15">15 Oktober 2023</time>

            <mark>Teks yang ditandai</mark>

            <progress value="70" max="100">70%</progress>

🔍 Penjelasan Detail:

• <figure> dan <figcaption> - Untuk gambar dengan keterangan
• <details> dan <summary> - Membuat konten yang bisa dibuka/tutup
• <time> - Menandai waktu/tanggal dengan format mesin (datetime)
• <mark> - Menyoroti teks penting
• <progress> - Menampilkan progress bar
• <meter> - Menampilkan pengukuran dalam range
• <dialog> - Membuat dialog/modal box

⚡ Pro Tips

Gunakan atribut role untuk meningkatkan aksesibilitas ketika elemen semantik HTML5 tidak cukup, contoh: <div role="navigation">

🎨 Semantic Layout Best Practices

💡 Praktik Terbaik Layout Semantik

Struktur semantik yang baik meningkatkan aksesibilitas, SEO, dan maintainability kode.

layout.html

          
            <body>

              <header>

                <h1>Judul Website</h1>

                <nav>...</nav>

              </header>

              <main>

                <article>

                  <h2>Judul Artikel</h2>

                  <section>

                    <h3>Subjudul</h3>

                    <p>Konten section...</p>

                  </section>

                </article>

                <aside>

                  <h2>Related Links</h2>

                  <ul>...</ul>

                </aside>

              </main>

              <footer>

                <p>© 2023</p>

              </footer>

            </body>

🔍 Penjelasan Detail:

• Hierarki heading yang tepat (h1 sampai h6)
• <main> sebagai konten utama yang unik
• <article> untuk konten mandiri yang bisa disindikasi
• <section> untuk pengelompokan tematik dengan heading
• <aside> untuk konten sekunder/sidebar
• <header> dan <footer> bisa digunakan di level dokumen atau section
• Hindari penggunaan <div> berlebihan ketika ada elemen semantik yang sesuai

⚡ Pro Tips

Gunakan validator HTML (seperti validator.w3.org) untuk memeriksa struktur semantik Anda dan pastikan heading mengikuti urutan logis (tidak melompat level)!