Loading time...
Google AdSense Leaderboard (728x90) Paste AdSense responsive code in this widget
Latest
LATEST | Memuat artikel terbaru...
Home » Tutorial Web Dasar Part 6: Struktur Web Modern dengan Tag Semantik
11.10

Tutorial Web Dasar Part 6: Struktur Web Modern dengan Tag Semantik

Assalamualaikum Wr. Wb.

Tutorial Web Dasar Part 6: Struktur Web Modern dengan Tag Semantik & Multimedia HTML5 | Rapi, Bersih, dan Standar Industri | Sering melihat website yang isi kodenya hanya tumpukan <div id="..."> sampai ratusan baris? Cara lama tersebut sering membuat pusing saat proses maintenance dan kurang disukai oleh mesin pencari Google. Di era HTML5 modern, kita wajib menggunakan Semantic HTML agar struktur web jelas maknanya, serta menyematkan Audio dan Video tanpa plugin pihak ketiga. Kali ini admin akan membagikan panduan lengkapnya yang dijamin work 100%.

1. Mengapa Harus Menggunakan Tag Semantik?

Tag semantik memberikan arti (*meaning*) pada setiap blok halaman web, baik bagi browser, pembaca layar (screen reader untuk disabilitas), maupun robot perayap Google (SEO). Berikut tag penting yang menggantikan peran <div> biasa:

  • <header> : Bagian kepala website (logo, judul blog, tagline).
  • <nav> : Wadah khusus tautan menu navigasi utama.
  • <main> : Konten inti halaman web (hanya boleh ada 1 per halaman).
  • <article> : Blok postingan artikel mandiri yang bisa didistribusikan ulang.
  • <section> : Pembagi bab atau bagian tematik dalam satu halaman.
  • <aside> : Sidebar pendukung (daftar artikel populer, profil penulis, link terkait).
  • <footer> : Kaki halaman (hak cipta, link kebijakan, kontak).

2. Menyematkan Video & Audio Asli HTML5

Dulu kita butuh Adobe Flash Player untuk memutar media, sekarang cukup gunakan tag native:

  • Video: Menggunakan tag <video controls> dengan dukungan format .mp4 atau .webm.
  • Audio: Menggunakan tag <audio controls> untuk file podcast atau musik .mp3.
  • Gambar Ber-keterangan: Gunakan tag <figure> dan <figcaption> untuk menyematkan gambar lengkap dengan sumbernya.
Struktur tata letak semantik dan pemutar multimedia bawaan HTML5

3. Full Source Code Praktik

Berikut adalah source code lengkap yang menggabungkan seluruh tag semantik dan multimedia:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh Website Semantik Modern</title>
</head>
<body>

    <!-- Header & Navigasi -->
    <header style="background: #0f172a; color: white; padding: 15px;">
        <h1>Portal Belajar Coding</h1>
        <nav>
            <a href="#home" style="color: #38bdf8; margin-right: 15px;">Home</a>
            <a href="#artikel" style="color: #38bdf8; margin-right: 15px;">Artikel</a>
            <a href="#kontak" style="color: #38bdf8;">Kontak</a>
        </nav>
    </header>

    <!-- Area Konten Utama -->
    <main style="display: flex; gap: 20px; padding: 20px;">
        
        <!-- Postingan Artikel -->
        <article style="flex: 2; background: #f8fafc; padding: 20px; border: 1px solid #e2e8f0;">
            <h2>Belajar HTML Semantik & Media Player</h2>
            <p>Ditulis oleh <strong>Admin</strong> pada kategori Web Development.</p>

            <!-- Pemutar Video -->
            <section>
                <h3>Video Tutorial Pendukung:</h3>
                <video width="100%" height="auto" controls poster="thumbnail.jpg">
                    <source src="video-tutorial.mp4" type="video/mp4">
                    Browser anda tidak mendukung tag video HTML5.
                </video>
            </section>

            <!-- Pemutar Audio -->
            <section style="margin-top: 20px;">
                <h3>Audio Podcast Ringkasan Materi:</h3>
                <audio controls style="width: 100%;">
                    <source src="podcast-materi.mp3" type="audio/mpeg">
                    Browser anda tidak mendukung tag audio HTML5.
                </audio>
            </section>
        </article>

        <!-- Sidebar -->
        <aside style="flex: 1; background: #ffffff; padding: 20px; border: 1px solid #e2e8f0;">
            <h3>Artikel Terkait</h3>
            <ul>
                <li><a href="#">Dasar Tag & Paragraf</a></li>
                <li><a href="#">Form & Input Lengkap</a></li>
                <li><a href="#">Tutorial CSS Flexbox</a></li>
            </ul>
        </aside>

    </main>

    <!-- Footer -->
    <footer style="background: #0f172a; color: #94a3b8; text-align: center; padding: 15px; margin-top: 20px;">
        <p>&copy; 2026 Belajar Coding. All rights reserved.</p>
    </footer>

</body>
</html>

Itulah panduan menyusun website dengan tag semantik dan multimedia HTML5. Dengan kode yang bersih, website anda akan jauh lebih cepat terindeks oleh mesin pencari.

Sekian tutorial kali ini, semoga bermanfaat, jika ada kesalahan mohon di maafkan, jika berguna mohon di share ke Social Media.

Terima Kasih.

Wassalamualaikum Wr. Wb.

Sumber gambar: Koleksi Pribadi / Screenshot Praktik

0 Komentar

Posting Komentar

Pengunjung yang baik selalu meninggalkan komentar

Silahkan berikan komentar/kritik/saran tentang artikel ini untuk kemajuan blog ini,
Mohon untuk tidak berkomentar berbau SARA, Pornografi, Spam, dan kata-kata kasar agar tidak terjadi kesalah pahaman disini.

Terima Kasih