Cara Menyusun Struktur HTML untuk Website Bisnis

Menyusun struktur HTML yang baik untuk website bisnis adalah fondasi penting dalam membangun kehadiran online yang profesional. Struktur HTML website bisnis yang terorganisir dengan baik tidak hanya memudahkan pengembangan, tetapi juga meningkatkan performa SEO dan pengalaman pengguna.

Dalam panduan ini, Anda akan mempelajari cara menyusun struktur HTML untuk website bisnis dari nol, termasuk struktur folder dan file HTML website bisnis, best practices untuk HTML5, dan bagaimana membuat struktur HTML website bisnis agar SEO friendly.

Daftar isi

Mengapa Struktur HTML Penting untuk Website Bisnis?
Langkah 1: Merencanakan Struktur Folder dan File HTML Website Bisnis
Langkah 2: Membuat Struktur HTML Dasar Berbasis HTML5
Langkah 3: Menyusun Header dan Navigasi
Langkah 4: Struktur Main Content untuk Halaman Beranda
Langkah 5: Membuat Struktur Footer yang Informatif
Langkah 6: Kode Lengkap Halaman Beranda
Langkah 7: Struktur Halaman Kontak
Langkah 8: Optimasi Struktur HTML Website Bisnis agar SEO Friendly
Tips untuk Struktur HTML Website Bisnis untuk Startup
Struktur HTML Website Bisnis Tanpa CMS
Struktur HTML yang Baik untuk Website Bisnis
Kesimpulan

Baca juga: Membuat Navigasi Menu dengan HTML5

Mengapa Struktur HTML Penting untuk Website Bisnis?

Sebelum memulai, penting untuk memahami mengapa struktur HTML yang baik sangat krusial:

Keuntungan Struktur HTML yang Baik:

SEO Optimization: Mesin pencari lebih mudah mengindeks website dengan struktur yang jelas
Maintenance Mudah: Kode yang terorganisir memudahkan update dan perbaikan
Loading Cepat: Struktur yang efisien meningkatkan kecepatan loading
Skalabilitas: Mudah dikembangkan seiring pertumbuhan bisnis
Profesionalitas: Memberikan kesan profesional kepada pengunjung

Langkah 1: Merencanakan Struktur Folder dan File HTML Website Bisnis

Langkah pertama dalam menyusun struktur HTML website bisnis dari nol adalah membuat struktur folder yang terorganisir dengan baik.

Struktur Folder yang Direkomendasikan:

website-bisnis/
│
├── index.html
├── tentang.html
├── layanan.html
├── portofolio.html
└── kontak.html

Penjelasan Struktur:

Root folder: Berisi semua file HTML dengan CSS embedded di dalamnya
Struktur sangat sederhana – hanya file HTML
CSS ditulis langsung di tag <style> dalam setiap file HTML
Tidak perlu folder css/, js/, atau assets/ untuk website bisnis sederhana

Catatan Penting:

Struktur folder ini lebih sederhana dan efisien karena:

✅ Gambar menggunakan URL eksternal (Unsplash, Pexels, Pixabay) – tidak perlu folder images/
✅ Icon menggunakan inline SVG – tidak perlu folder icons/
✅ Logo menggunakan inline SVG – tidak perlu file logo terpisah
✅ Hemat space dan bandwidth – file lebih sedikit, loading lebih cepat

Tips Resource Gratis:

Untuk Gambar:

Unsplash (https://unsplash.com) – Foto berkualitas tinggi
Pexels (https://pexels.com) – Foto dan video gratis
Pixabay (https://pixabay.com) – Gambar dan ilustrasi

Untuk Icon SVG:

Heroicons (https://heroicons.com) – Icon modern dari Tailwind
Feather Icons (https://feathericons.com) – Icon minimalis
Material Icons (https://fonts.google.com/icons) – Icon dari Google

Cukup copy SVG code dan paste langsung ke HTML Anda!

Langkah 2: Membuat Struktur HTML Dasar Berbasis HTML5

Struktur HTML website bisnis berbasis HTML5 menggunakan tag semantik yang membuat kode lebih bermakna dan SEO friendly.

Template HTML5 Dasar untuk Website Bisnis:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Deskripsi bisnis Anda untuk SEO">
    <meta name="keywords" content="kata kunci, bisnis, produk">
    <meta name="author" content="Nama Bisnis Anda">
    
    <!-- Open Graph untuk Social Media -->
    <meta property="og:title" content="Nama Bisnis Anda">
    <meta property="og:description" content="Deskripsi bisnis">
    <meta property="og:image" content="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200&h=630&fit=crop">
    <meta property="og:url" content="https://www.bisnisanda.com">
    
    <title>Nama Bisnis Anda - Tagline Bisnis</title>
    
    <style>
        /* CSS Dasar */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <!-- Header Section -->
    <header>
        <nav>
            <!-- Navigasi menu -->
        </nav>
    </header>

    <!-- Main Content -->
    <main>
        <!-- Konten utama website -->
    </main>

    <!-- Footer Section -->
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>Code language: HTML, XML (xml)

Penjelasan Elemen Penting:

<!DOCTYPE html>: Deklarasi HTML5
<meta name="viewport">: Penting untuk responsive design
Meta tags SEO: Membantu mesin pencari memahami konten
Open Graph tags: Optimasi untuk social media sharing
<style>: CSS embedded langsung di HTML (lebih praktis dan cepat)
Tag semantik: <header>, <main>, <footer> untuk struktur yang jelas
Tidak perlu file CSS atau JS eksternal untuk template dasar

Langkah 3: Menyusun Header dan Navigasi

Header adalah bagian pertama yang dilihat pengunjung. Berikut struktur HTML yang baik untuk website bisnis:

<header class="site-header">
    <div class="container">
        <!-- Logo -->
        <div class="logo">
            <a href="index.html">
                <svg width="150" height="40" viewBox="0 0 150 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="20" cy="20" r="15" fill="#667eea"/>
                    <path d="M15 20L18 23L25 16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <text x="45" y="26" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">Bisnis Anda</text>
                </svg>
            </a>
        </div>

        <!-- Navigation Menu -->
        <nav class="main-navigation" role="navigation" aria-label="Main Navigation">
            <ul>
                <li><a href="index.html" aria-current="page">Beranda</a></li>
                <li><a href="tentang.html">Tentang Kami</a></li>
                <li><a href="layanan.html">Layanan</a></li>
                <li><a href="portofolio.html">Portofolio</a></li>
                <li><a href="kontak.html">Kontak</a></li>
            </ul>
        </nav>

        <!-- Call to Action Button -->
        <div class="header-cta">
            <a href="kontak.html" class="btn btn-primary">Hubungi Kami</a>
        </div>

        <!-- Mobile Menu Toggle -->
        <button class="mobile-menu-toggle" aria-label="Toggle Menu">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </div>
</header>Code language: HTML, XML (xml)

Best Practices Header:

Logo yang linkable ke homepage
Navigasi yang jelas dan mudah diakses
CTA (Call to Action) button yang menonjol
Mobile-friendly dengan hamburger menu
Atribut ARIA untuk aksesibilitas

Langkah 4: Struktur Main Content untuk Halaman Beranda

Halaman beranda adalah wajah bisnis Anda. Berikut struktur template HTML website bisnis responsif untuk homepage:

<main class="homepage">
    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container">
            <div class="hero-content">
                <h1>Solusi Bisnis Terbaik untuk Perusahaan Anda</h1>
                <p class="hero-subtitle">Kami membantu bisnis berkembang dengan layanan profesional</p>
                <div class="hero-buttons">
                    <a href="layanan.html" class="btn btn-primary">Lihat Layanan</a>
                    <a href="tentang.html" class="btn btn-secondary">Tentang Kami</a>
                </div>
            </div>
            <div class="hero-image">
                <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop" alt="Hero Image">
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services-section">
        <div class="container">
            <h2>Layanan Kami</h2>
            <div class="services-grid">
                <article class="service-card">
                    <div class="service-icon">
                        <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" fill="#667eea"/>
                        </svg>
                    </div>
                    <h3>Layanan 1</h3>
                    <p>Deskripsi layanan pertama...</p>
                    <a href="layanan.html#service-1">Selengkapnya</a>
                </article>

                <article class="service-card">
                    <div class="service-icon">
                        <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 12 7.4l3.38 4.6L17 10.83 14.92 8H20v6z" fill="#667eea"/>
                        </svg>
                    </div>
                    <h3>Layanan 2</h3>
                    <p>Deskripsi layanan kedua...</p>
                    <a href="layanan.html#service-2">Selengkapnya</a>
                </article>

                <article class="service-card">
                    <div class="service-icon">
                        <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71z" fill="#667eea"/>
                            <path d="M12 2L2 9l10 5 10-5-10-7z" fill="#667eea" opacity="0.6"/>
                        </svg>
                    </div>
                    <h3>Layanan 3</h3>
                    <p>Deskripsi layanan ketiga...</p>
                    <a href="layanan.html#service-3">Selengkapnya</a>
                </article>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
        <div class="container">
            <h2>Siap Mengembangkan Bisnis Anda?</h2>
            <p>Hubungi kami sekarang untuk konsultasi gratis</p>
            <a href="kontak.html" class="btn btn-large">Hubungi Kami Sekarang</a>
        </div>
    </section>
</main>Code language: HTML, XML (xml)

Struktur Section yang Efektif:

Hero Section: Pesan utama dan CTA
Services Section: Showcase layanan
CTA Section: Ajakan bertindak

Tips Gambar dan Icon:

Untuk hero image, Anda bisa menggunakan layanan gambar gratis seperti:

Unsplash (https://unsplash.com) – Gambar berkualitas tinggi gratis
Pexels (https://pexels.com) – Foto dan video gratis
Pixabay (https://pixabay.com) – Gambar dan ilustrasi gratis

Untuk icon, gunakan inline SVG seperti contoh di atas. Keuntungan inline SVG:

Tidak perlu request HTTP tambahan
Bisa diubah warnanya dengan CSS
Scalable tanpa kehilangan kualitas
Lebih cepat loading

Sumber icon SVG gratis:

Heroicons (https://heroicons.com) – Icon modern dari Tailwind
Feather Icons (https://feathericons.com) – Icon minimalis
Material Icons (https://fonts.google.com/icons) – Icon dari Google

Langkah 5: Membuat Struktur Footer yang Informatif

Footer yang baik memberikan informasi penting dan navigasi tambahan:

<footer class="site-footer">
    <div class="container">
        <div class="footer-content">
            <!-- Company Info -->
            <div class="footer-column">
                <h3>Tentang Kami</h3>
                <p>Deskripsi singkat tentang bisnis Anda.</p>
                <div class="social-media">
                    <a href="#" aria-label="Facebook">Facebook</a>
                    <a href="#" aria-label="Instagram">Instagram</a>
                    <a href="#" aria-label="LinkedIn">LinkedIn</a>
                </div>
            </div>

            <!-- Quick Links -->
            <div class="footer-column">
                <h3>Link Cepat</h3>
                <ul>
                    <li><a href="index.html">Beranda</a></li>
                    <li><a href="tentang.html">Tentang Kami</a></li>
                    <li><a href="layanan.html">Layanan</a></li>
                    <li><a href="kontak.html">Kontak</a></li>
                </ul>
            </div>

            <!-- Contact Info -->
            <div class="footer-column">
                <h3>Kontak</h3>
                <address>
                    <p><strong>Alamat:</strong><br>
                    Jl. Contoh No. 123, Jakarta</p>
                    
                    <p><strong>Email:</strong><br>
                    <a href="mailto:info@bisnis.com">info@bisnis.com</a></p>
                    
                    <p><strong>Telepon:</strong><br>
                    <a href="tel:+6281234567890">+62 812-3456-7890</a></p>
                </address>
            </div>
        </div>

        <!-- Copyright -->
        <div class="footer-bottom">
            <p>&copy; 2025 Nama Bisnis Anda. Semua Hak Dilindungi.</p>
        </div>
    </div>
</footer>Code language: HTML, XML (xml)

Langkah 6: Kode Lengkap Halaman Beranda

Berikut adalah kode lengkap halaman beranda (index.html) yang menggabungkan semua komponen dari langkah-langkah sebelumnya:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Deskripsi bisnis Anda untuk SEO">
    <meta name="keywords" content="kata kunci, bisnis, produk">
    <meta name="author" content="Nama Bisnis Anda">
    
    <!-- Open Graph untuk Social Media -->
    <meta property="og:title" content="Nama Bisnis Anda">
    <meta property="og:description" content="Deskripsi bisnis">
    <meta property="og:image" content="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200&h=630&fit=crop">
    <meta property="og:url" content="https://www.bisnisanda.com">
    
    <title>Nama Bisnis Anda - Tagline Bisnis</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="assets/icons/favicon.png">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header Styles */
        .site-header {
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .site-header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
        }

        .logo svg {
            height: 40px;
            width: auto;
        }

        .logo a {
            text-decoration: none;
            color: #333;
            font-size: 24px;
            font-weight: bold;
        }

        .main-navigation ul {
            display: flex;
            list-style: none;
            gap: 30px;
        }

        .main-navigation a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            transition: color 0.3s;
        }

        .main-navigation a:hover {
            color: #007bff;
        }

        .header-cta .btn {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .header-cta .btn:hover {
            background-color: #0056b3;
        }

        .mobile-menu-toggle {
            display: none;
            flex-direction: column;
            background: none;
            border: none;
            cursor: pointer;
        }

        .mobile-menu-toggle span {
            width: 25px;
            height: 3px;
            background-color: #333;
            margin: 3px 0;
        }

        /* Hero Section */
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 100px 0;
            text-align: center;
        }

        .hero-image {
            margin-top: 40px;
        }

        .hero-image img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        .hero-section h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .hero-subtitle {
            font-size: 20px;
            margin-bottom: 30px;
        }

        .hero-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
        }

        .btn {
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: 500;
            transition: transform 0.3s;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn-primary {
            background-color: #fff;
            color: #667eea;
        }

        .btn-secondary {
            background-color: transparent;
            color: white;
            border: 2px solid white;
        }

        /* Services Section */
        .services-section {
            padding: 80px 0;
            background-color: #f8f9fa;
        }

        .services-section h2 {
            text-align: center;
            font-size: 36px;
            margin-bottom: 50px;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .service-card {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.3s;
        }

        .service-card:hover {
            transform: translateY(-10px);
        }

        .service-icon svg {
            width: 60px;
            height: 60px;
        }

        .service-card h3 {
            margin: 20px 0 15px;
            color: #667eea;
        }

        .service-card a {
            color: #667eea;
            text-decoration: none;
            font-weight: 500;
        }

        /* CTA Section */
        .cta-section {
            background-color: #667eea;
            color: white;
            text-align: center;
            padding: 80px 0;
        }

        .cta-section h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }

        .cta-section p {
            font-size: 18px;
            margin-bottom: 30px;
            opacity: 0.9;
        }

        .btn-large {
            padding: 15px 40px;
            font-size: 18px;
            margin-top: 10px;
            background-color: #fff;
            color: #667eea;
        }

        /* Footer Styles */
        .site-footer {
            background-color: #333;
            color: #fff;
            padding: 60px 0 20px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-column h3 {
            margin-bottom: 20px;
            color: #fff;
        }

        .footer-column p {
            margin-bottom: 15px;
            color: #ccc;
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column ul li {
            margin-bottom: 10px;
        }

        .footer-column a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-column a:hover {
            color: #fff;
        }

        .social-media {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }

        .social-media a {
            color: #fff;
            text-decoration: none;
        }

        address {
            font-style: normal;
        }

        .footer-bottom {
            border-top: 1px solid #555;
            padding-top: 20px;
            text-align: center;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .site-header .container {
                flex-wrap: wrap;
            }

            .main-navigation {
                width: 100%;
                order: 3;
            }

            .main-navigation ul {
                flex-direction: column;
                gap: 15px;
                padding: 20px 0;
            }

            .mobile-menu-toggle {
                display: flex;
            }

            .hero-section h1 {
                font-size: 32px;
            }

            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }

            .footer-content {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- Header Section -->
    <header class="site-header">
        <div class="container">
            <!-- Logo -->
            <div class="logo">
                <a href="index.html">
                    <svg width="150" height="40" viewBox="0 0 150 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="20" cy="20" r="15" fill="#667eea"/>
                        <path d="M15 20L18 23L25 16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <text x="45" y="26" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">Bisnis Anda</text>
                    </svg>
                </a>
            </div>

            <!-- Navigation Menu -->
            <nav class="main-navigation" role="navigation" aria-label="Main Navigation">
                <ul>
                    <li><a href="index.html" aria-current="page">Beranda</a></li>
                    <li><a href="tentang.html">Tentang Kami</a></li>
                    <li><a href="layanan.html">Layanan</a></li>
                    <li><a href="portofolio.html">Portofolio</a></li>
                    <li><a href="kontak.html">Kontak</a></li>
                </ul>
            </nav>

            <!-- Call to Action Button -->
            <div class="header-cta">
                <a href="kontak.html" class="btn btn-primary">Hubungi Kami</a>
            </div>

            <!-- Mobile Menu Toggle -->
            <button class="mobile-menu-toggle" aria-label="Toggle Menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </header>

    <!-- Main Content -->
    <main class="homepage">
        <!-- Hero Section -->
        <section class="hero-section">
            <div class="container">
                <div class="hero-content">
                    <h1>Solusi Bisnis Terbaik untuk Perusahaan Anda</h1>
                    <p class="hero-subtitle">Kami membantu bisnis berkembang dengan layanan profesional</p>
                    <div class="hero-buttons">
                        <a href="layanan.html" class="btn btn-primary">Lihat Layanan</a>
                        <a href="tentang.html" class="btn btn-secondary">Tentang Kami</a>
                    </div>
                </div>
                <div class="hero-image">
                    <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop" alt="Hero Image">
                </div>
            </div>
        </section>

        <!-- Services Section -->
        <section class="services-section">
            <div class="container">
                <h2>Layanan Kami</h2>
                <div class="services-grid">
                    <article class="service-card">
                        <div class="service-icon">
                            <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" fill="#667eea"/>
                            </svg>
                        </div>
                        <h3>Layanan 1</h3>
                        <p>Deskripsi layanan pertama...</p>
                        <a href="layanan.html#service-1">Selengkapnya</a>
                    </article>

                    <article class="service-card">
                        <div class="service-icon">
                            <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 12 7.4l3.38 4.6L17 10.83 14.92 8H20v6z" fill="#667eea"/>
                            </svg>
                        </div>
                        <h3>Layanan 2</h3>
                        <p>Deskripsi layanan kedua...</p>
                        <a href="layanan.html#service-2">Selengkapnya</a>
                    </article>

                    <article class="service-card">
                        <div class="service-icon">
                            <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71z" fill="#667eea"/>
                                <path d="M12 2L2 9l10 5 10-5-10-7z" fill="#667eea" opacity="0.6"/>
                            </svg>
                        </div>
                        <h3>Layanan 3</h3>
                        <p>Deskripsi layanan ketiga...</p>
                        <a href="layanan.html#service-3">Selengkapnya</a>
                    </article>
                </div>
            </div>
        </section>

        <!-- CTA Section -->
        <section class="cta-section">
            <div class="container">
                <h2>Siap Mengembangkan Bisnis Anda?</h2>
                <p>Hubungi kami sekarang untuk konsultasi gratis</p>
                <a href="kontak.html" class="btn btn-large">Hubungi Kami Sekarang</a>
            </div>
        </section>
    </main>

    <!-- Footer Section -->
    <footer class="site-footer">
        <div class="container">
            <div class="footer-content">
                <!-- Company Info -->
                <div class="footer-column">
                    <h3>Tentang Kami</h3>
                    <p>Deskripsi singkat tentang bisnis Anda dan nilai yang ditawarkan kepada pelanggan.</p>
                    <div class="social-media">
                        <a href="#" aria-label="Facebook">Facebook</a>
                        <a href="#" aria-label="Instagram">Instagram</a>
                        <a href="#" aria-label="LinkedIn">LinkedIn</a>
                    </div>
                </div>

                <!-- Quick Links -->
                <div class="footer-column">
                    <h3>Link Cepat</h3>
                    <ul>
                        <li><a href="index.html">Beranda</a></li>
                        <li><a href="tentang.html">Tentang Kami</a></li>
                        <li><a href="layanan.html">Layanan</a></li>
                        <li><a href="kontak.html">Kontak</a></li>
                    </ul>
                </div>

                <!-- Contact Info -->
                <div class="footer-column">
                    <h3>Kontak</h3>
                    <address>
                        <p><strong>Alamat:</strong><br>
                        Jl. Contoh No. 123, Jakarta</p>
                        
                        <p><strong>Email:</strong><br>
                        <a href="mailto:info@bisnis.com">info@bisnis.com</a></p>
                        
                        <p><strong>Telepon:</strong><br>
                        <a href="tel:+6281234567890">+62 812-3456-7890</a></p>
                    </address>
                </div>
            </div>

            <!-- Copyright -->
            <div class="footer-bottom">
                <p>&copy; 2025 Nama Bisnis Anda. Semua Hak Dilindungi.</p>
            </div>
        </div>
    </footer>

    <!-- Schema Markup untuk Bisnis Lokal -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "LocalBusiness",
        "name": "Nama Bisnis Anda",
        "address": {
            "@type": "PostalAddress",
            "streetAddress": "Jl. Contoh No. 123",
            "addressLocality": "Jakarta",
            "addressCountry": "ID"
        },
        "telephone": "+62-812-3456-7890"
    }
    </script>
</body>
</html>Code language: HTML, XML (xml)

Berikut ini adalah hasil dari gambar kode html tampilan halaman beranda seperti kode diatas.

Langkah 7: Struktur Halaman Kontak

Halaman kontak yang efektif untuk website bisnis:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kontak Kami - Nama Bisnis</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header Styles */
        .site-header {
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .site-header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
        }

        .logo svg {
            height: 40px;
            width: auto;
        }

        .logo a {
            text-decoration: none;
            color: #333;
            font-size: 24px;
            font-weight: bold;
        }

        .main-navigation ul {
            display: flex;
            list-style: none;
            gap: 30px;
        }

        .main-navigation a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            transition: color 0.3s;
        }

        .main-navigation a:hover {
            color: #007bff;
        }

        .header-cta .btn {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .header-cta .btn:hover {
            background-color: #0056b3;
        }

        .mobile-menu-toggle {
            display: none;
            flex-direction: column;
            background: none;
            border: none;
            cursor: pointer;
        }

        .mobile-menu-toggle span {
            width: 25px;
            height: 3px;
            background-color: #333;
            margin: 3px 0;
        }

        .page-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 60px 0;
            text-align: center;
        }

        .page-header h1 {
            font-size: 48px;
            margin-bottom: 15px;
        }

        .contact-content {
            padding: 60px 0;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 40px;
            margin-top: 40px;
        }

        .contact-form-wrapper h2,
        .contact-info-wrapper h2 {
            margin-bottom: 30px;
            color: #667eea;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-family: inherit;
            font-size: 14px;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .btn {
            background-color: #667eea;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #5568d3;
        }

        .contact-info-item {
            margin-bottom: 30px;
        }

        .contact-info-item h3 {
            color: #667eea;
            margin-bottom: 10px;
        }

        .contact-info-item a {
            color: #333;
            text-decoration: none;
        }

        .contact-info-item a:hover {
            color: #667eea;
        }

        /* Footer Styles */
        .site-footer {
            background-color: #333;
            color: #fff;
            padding: 60px 0 20px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-column h3 {
            margin-bottom: 20px;
            color: #fff;
        }

        .footer-column p {
            margin-bottom: 15px;
            color: #ccc;
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column ul li {
            margin-bottom: 10px;
        }

        .footer-column a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-column a:hover {
            color: #fff;
        }

        .social-media {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }

        .social-media a {
            color: #fff;
            text-decoration: none;
        }

        address {
            font-style: normal;
        }

        .footer-bottom {
            border-top: 1px solid #555;
            padding-top: 20px;
            text-align: center;
        }

        @media (max-width: 768px) {
            .site-header .container {
                flex-wrap: wrap;
            }

            .main-navigation {
                width: 100%;
                order: 3;
            }

            .main-navigation ul {
                flex-direction: column;
                gap: 15px;
                padding: 20px 0;
            }

            .mobile-menu-toggle {
                display: flex;
            }

            .contact-grid {
                grid-template-columns: 1fr;
            }

            .page-header h1 {
                font-size: 32px;
            }

            .footer-content {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- Header Section -->
    <header class="site-header">
        <div class="container">
            <!-- Logo -->
            <div class="logo">
                <a href="index.html">
                    <svg width="150" height="40" viewBox="0 0 150 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="20" cy="20" r="15" fill="#667eea"/>
                        <path d="M15 20L18 23L25 16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <text x="45" y="26" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">Bisnis Anda</text>
                    </svg>
                </a>
            </div>

            <!-- Navigation Menu -->
            <nav class="main-navigation" role="navigation" aria-label="Main Navigation">
                <ul>
                    <li><a href="index.html">Beranda</a></li>
                    <li><a href="tentang.html">Tentang Kami</a></li>
                    <li><a href="layanan.html">Layanan</a></li>
                    <li><a href="portofolio.html">Portofolio</a></li>
                    <li><a href="kontak.html" aria-current="page">Kontak</a></li>
                </ul>
            </nav>

            <!-- Call to Action Button -->
            <div class="header-cta">
                <a href="kontak.html" class="btn btn-primary">Hubungi Kami</a>
            </div>

            <!-- Mobile Menu Toggle -->
            <button class="mobile-menu-toggle" aria-label="Toggle Menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </header>

    <main class="contact-page">
        <section class="page-header">
            <div class="container">
                <h1>Hubungi Kami</h1>
                <p>Kami siap membantu kebutuhan bisnis Anda</p>
            </div>
        </section>

        <section class="contact-content">
            <div class="container">
                <div class="contact-grid">
                    <!-- Contact Form -->
                    <div class="contact-form-wrapper">
                        <h2>Kirim Pesan</h2>
                        <form action="process-form.php" method="POST">
                            <div class="form-group">
                                <label for="name">Nama Lengkap *</label>
                                <input type="text" id="name" name="name" required>
                            </div>

                            <div class="form-group">
                                <label for="email">Email *</label>
                                <input type="email" id="email" name="email" required>
                            </div>

                            <div class="form-group">
                                <label for="phone">Nomor Telepon</label>
                                <input type="tel" id="phone" name="phone">
                            </div>

                            <div class="form-group">
                                <label for="message">Pesan *</label>
                                <textarea id="message" name="message" rows="6" required></textarea>
                            </div>

                            <button type="submit" class="btn btn-primary">Kirim Pesan</button>
                        </form>
                    </div>

                    <!-- Contact Information -->
                    <div class="contact-info-wrapper">
                        <h2>Informasi Kontak</h2>
                        
                        <div class="contact-info-item">
                            <h3>Alamat</h3>
                            <p>Jl. Contoh No. 123, Jakarta</p>
                        </div>

                        <div class="contact-info-item">
                            <h3>Email</h3>
                            <p><a href="mailto:info@bisnis.com">info@bisnis.com</a></p>
                        </div>

                        <div class="contact-info-item">
                            <h3>Telepon</h3>
                            <p><a href="tel:+6281234567890">+62 812-3456-7890</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer Section -->
    <footer class="site-footer">
        <div class="container">
            <div class="footer-content">
                <!-- Company Info -->
                <div class="footer-column">
                    <h3>Tentang Kami</h3>
                    <p>Deskripsi singkat tentang bisnis Anda dan nilai yang ditawarkan kepada pelanggan.</p>
                    <div class="social-media">
                        <a href="#" aria-label="Facebook">Facebook</a>
                        <a href="#" aria-label="Instagram">Instagram</a>
                        <a href="#" aria-label="LinkedIn">LinkedIn</a>
                    </div>
                </div>

                <!-- Quick Links -->
                <div class="footer-column">
                    <h3>Link Cepat</h3>
                    <ul>
                        <li><a href="index.html">Beranda</a></li>
                        <li><a href="tentang.html">Tentang Kami</a></li>
                        <li><a href="layanan.html">Layanan</a></li>
                        <li><a href="kontak.html">Kontak</a></li>
                    </ul>
                </div>

                <!-- Contact Info -->
                <div class="footer-column">
                    <h3>Kontak</h3>
                    <address>
                        <p><strong>Alamat:</strong><br>
                        Jl. Contoh No. 123, Jakarta</p>
                        
                        <p><strong>Email:</strong><br>
                        <a href="mailto:info@bisnis.com">info@bisnis.com</a></p>
                        
                        <p><strong>Telepon:</strong><br>
                        <a href="tel:+6281234567890">+62 812-3456-7890</a></p>
                    </address>
                </div>
            </div>

            <!-- Copyright -->
            <div class="footer-bottom">
                <p>&copy; 2025 Nama Bisnis Anda. Semua Hak Dilindungi.</p>
            </div>
        </div>
    </footer>
</body>
</html>
Code language: HTML, XML (xml)

Berikut ini adalah tampilan website bisnis halaman kontak.

Langkah 8: Optimasi Struktur HTML Website Bisnis agar SEO Friendly

Untuk membuat struktur HTML website bisnis agar SEO friendly, ikuti praktik terbaik ini:

1. Struktur Heading yang Benar

<main>
    <h1>Judul Utama Halaman (Hanya Satu H1)</h1>
    
    <section>
        <h2>Subjudul Section 1</h2>
        <h3>Sub-subjudul</h3>
        <p>Konten...</p>
    </section>
</main>Code language: HTML, XML (xml)

2. Schema Markup untuk Bisnis Lokal

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "Nama Bisnis Anda",
    "address": {
        "@type": "PostalAddress",
        "streetAddress": "Jl. Contoh No. 123",
        "addressLocality": "Jakarta",
        "addressCountry": "ID"
    },
    "telephone": "+62-812-3456-7890"
}
</script>Code language: HTML, XML (xml)

3. Optimasi Gambar untuk SEO

<img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=800&h=600&fit=crop" 
     alt="Deskripsi produk yang jelas"
     width="800"
     height="600"
     loading="lazy">Code language: HTML, XML (xml)

Catatan: Gunakan layanan gambar gratis seperti Unsplash, Pexels, atau Pixabay untuk gambar produk dan konten.

Tips untuk Struktur HTML Website Bisnis untuk Startup

Jika Anda membangun struktur HTML website bisnis untuk startup:

1. Prioritaskan Kecepatan

Minimalkan file CSS dan JavaScript
Gunakan lazy loading untuk gambar
Optimalkan ukuran gambar

2. Fokus pada Konversi

<section class="cta-section">
    <div class="container">
        <h2>Mulai Sekarang</h2>
        <p>Daftar gratis dan rasakan manfaatnya</p>
        <a href="signup.html" class="btn">Daftar Gratis</a>
    </div>
</section>Code language: HTML, XML (xml)

3. Mobile-First Approach

/* Mobile First CSS */
.hero-section {
    padding: 40px 20px;
}

@media (min-width: 768px) {
    .hero-section {
        padding: 80px 40px;
    }
}Code language: CSS (css)

Struktur HTML Website Bisnis Tanpa CMS

Keuntungan membuat struktur HTML website bisnis tanpa CMS:

Kontrol Penuh: Anda mengontrol setiap aspek website
Performa Lebih Cepat: Tidak ada overhead dari CMS
Keamanan Lebih Baik: Lebih sedikit celah keamanan
Biaya Lebih Rendah: Tidak perlu hosting khusus

Struktur HTML yang Baik untuk Website Bisnis

✅ Struktur Dasar

✅ DOCTYPE HTML5 dideklarasikan
✅ Meta charset UTF-8
✅ Meta viewport untuk responsive
✅ Title tag yang deskriptif
✅ Meta description yang menarik

✅ SEO

✅ Hanya satu H1 per halaman
✅ Struktur heading hierarkis
✅ Alt text pada semua gambar
✅ Internal linking yang baik
✅ Schema markup

✅ Performa

✅ CSS di head
✅ JavaScript di akhir body
✅ Lazy loading untuk gambar

Penulis sengaja tidak membuatkan beberapa halaman seperti halaman Tentang Kami, Layanan, dan Portofolio, penulis bermaksud halaman-halaman yang tidak ada tersebut bisa dibuat sendiri sebagai bahan latihan agar sesuai dengan tampilan yang di inginkan sendiri.

Kesimpulan

Menyusun struktur HTML untuk website bisnis yang baik memerlukan perencanaan matang. Dengan mengikuti panduan langkah demi langkah ini, Anda dapat membuat struktur HTML website bisnis dari nol yang profesional, responsif, dan SEO friendly.

Kunci sukses dalam cara menyusun struktur HTML untuk website bisnis adalah:

Gunakan struktur folder yang sederhana dan efisien
Manfaatkan resource gratis (Unsplash untuk gambar, inline SVG untuk icon)
Terapkan HTML5 semantik untuk SEO
Optimalkan performa dengan lazy loading dan CDN
Prioritaskan pengalaman pengguna dan responsive design

Dengan pendekatan modern menggunakan URL eksternal untuk gambar dan inline SVG untuk icon, Anda dapat membuat website bisnis yang:

✅ Lebih cepat – Tidak perlu hosting banyak file gambar
✅ Lebih hemat – Bandwidth dan storage minimal
✅ Lebih mudah maintain – Struktur folder yang simpel
✅ Tetap profesional – Gambar berkualitas tinggi dari Unsplash

Baik Anda membuat struktur HTML website bisnis untuk startup atau bisnis kecil, prinsip-prinsip ini akan membantu Anda membangun fondasi yang kuat untuk kehadiran online yang sukses.