HTML Technical Elements Demo

📝 Basic Technical Elements

💡 Elemen Teknis Dasar

HTML menyediakan berbagai elemen teknis untuk keperluan metadata, performa, dan optimasi.

technical.html

          
            <!-- Metadata dasar -->

            <meta charset="UTF-8">

            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            <meta name="description" content="Deskripsi halaman">

            <!-- Preload resources -->

            <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

            <!-- Favicon modern -->

            <link rel="icon" type="image/svg+xml" href="/favicon.svg">

            <link rel="apple-touch-icon" href="/apple-touch-icon.png">

            <meta name="theme-color" content="#1a1a1a">

🔍 Penjelasan Detail:

• <meta charset> - Encoding karakter wajib untuk dokumen HTML5
• <meta viewport> - Penting untuk tampilan mobile
• <meta description> - Deskripsi untuk SEO dan social media
• <link preload> - Memuat resource penting lebih awal
• as - Menentukan jenis resource yang dipreload
• Favicon modern - SVG untuk kualitas tinggi, PNG untuk fallback
• theme-color - Warna tema browser mobile

⚡ Pro Tips

Gunakan <meta name="robots" content="index, follow"> untuk kontrol SEO dasar!

🔗 Performance Optimization

💡 Optimasi Performa

Elemen teknis untuk meningkatkan kecepatan dan efisiensi halaman web.

performance.html

          
            <!-- Lazy loading images -->

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

            <!-- Async/defer scripts -->

            <script src="script.js" defer></script>

            <script src="analytics.js" async></script>

            <!-- Resource hints -->

            <link rel="preconnect" href="https://api.example.com">

            <link rel="dns-prefetch" href="//cdn.example.com">

            <!-- Critical CSS -->

            <style>

              /* CSS kritis di sini */

            </style>

            <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

🔍 Penjelasan Detail:

• loading="lazy" - Lazy loading untuk gambar di bawah fold
• defer - Menunda eksekusi script sampai HTML selesai parsing
• async - Eksekusi script asinkron tanpa blocking render
• preconnect - Membuat koneksi awal ke domain eksternal
• dns-prefetch - Resolve DNS lebih awal untuk domain eksternal
• Critical CSS - CSS penting dalam <style> untuk render cepat
• Teknik loadCSS - Memuat stylesheet non-blocking dengan media print

⚡ Pro Tips

Gunakan <link rel="modulepreload"> untuk memuat modul JavaScript ES6 lebih awal!

🎨 Advanced Technical Features

💡 Fitur Teknis Lanjutan

Elemen teknis canggih untuk pengalaman web modern.

advanced.html

          
            <!-- Web Components -->

            <template id="user-card">

              <style>

                /* Scoped CSS */

              </style>

              <div class="card">...</div>

            </template>

            <!-- SVG inline -->

            <svg width="100" height="100">

              <circle cx="50" cy="50" r="40" fill="#00bcd4"/>

            </svg>

            <!-- MathML -->

            <math>

              <mrow>

                <msup>

                  <mi>a</mi>

                  <mn>2</mn>

                </msup>

              </mrow>

            </math>

🔍 Penjelasan Detail:

• <template> - Template HTML untuk Web Components
• <slot> - Placeholder untuk komponen yang bisa diisi
• SVG inline - Grafik vektor langsung dalam HTML
• MathML - Untuk menampilkan notasi matematika
• <picture> - Responsive images dengan fallback
• <dialog> - Native modal dialog
• Custom Elements - Mendefinisikan elemen HTML baru

⚡ Pro Tips

Gunakan <meta http-equiv="Content-Security-Policy"> untuk meningkatkan keamanan dengan CSP!