Contoh Struktur Halaman FAQ Dalam HTML

Berikut adalah contoh struktur halaman FAQ dalam HTML yang bisa kamu gunakan untuk Freelancer Wiki di www.haikalfreelancer.wiki . Ini adalah kerangka dasar yang dapat diadaptasi sesuai dengan desain dan gaya halaman website kamu.

Contoh Struktur Halaman FAQ Dalam HTML

1. Pendahuluan

Mulailah dengan satu atau dua kalimat pengantar yang menjelaskan tujuan halaman FAQ ini, misalnya:

"Selamat datang di halaman FAQ Freelancer Wiki! Di sini, kami telah mengumpulkan pertanyaan yang sering diajukan tentang penggunaan situs dan informasi tentang freelancing secara umum. Jika tidak menemukan jawaban yang Anda cari, jangan ragu untuk menghubungi kami."

2. Pertanyaan Umum Tentang Freelancer Wiki

Di bagian ini, sertakan informasi dasar tentang Freelancer Wiki. Jelaskan tujuan, misi, dan siapa yang menjadi target pengguna.

3. Pertanyaan Seputar Konten dan Layanan

Jelaskan lebih dalam tentang jenis-jenis konten yang tersedia, dan bagaimana pengguna dapat mengambil manfaat dari artikel dan panduan di dalam situs.

4. Pertanyaan Seputar Freelancing

Buat bagian khusus untuk menjawab pertanyaan mendasar tentang freelancing, seperti cara memulai, sumber daya yang bisa digunakan, dan tips dasar.

5. Hubungi Kami

Sertakan informasi kontak, misalnya alamat email atau formulir kontak, jika pengguna ingin mengajukan pertanyaan yang belum tercantum.

html 
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQ - Freelancer Wiki</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1, h2 {
            color: #333;
        }
        .faq-section {
            margin-bottom: 20px;
        }
        .faq-section h2 {
            font-size: 1.2em;
            margin-top: 20px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }
        .question {
            font-weight: bold;
            cursor: pointer;
            margin: 10px 0;
        }
        .answer {
            display: none;
            padding: 10px 0;
            border-top: 1px solid #eee;
            color: #555;
        }
    </style>
    <script>
        function toggleAnswer(id) {
            const answer = document.getElementById(id);
            answer.style.display = (answer.style.display === 'none' || answer.style.display === '') ? 'block' : 'none';
        }
    </script>
</head>
<body>

<div class="container">
    <h1>FAQ - Freelancer Wiki</h1>
    <p>Selamat datang di halaman FAQ Freelancer Wiki! Di sini, kami menjawab pertanyaan umum tentang situs dan seputar dunia freelancing. Jika pertanyaan Anda tidak tercantum, silakan hubungi kami melalui halaman kontak.</p>

    <div class="faq-section">
        <h2>Pertanyaan Umum Tentang Freelancer Wiki</h2>
        <div class="question" onclick="toggleAnswer('answer1')">Apa itu Freelancer Wiki?</div>
        <div class="answer" id="answer1">
            Freelancer Wiki adalah situs yang menyediakan panduan, artikel, dan tips seputar dunia freelancing, dirancang untuk membantu freelancer dalam mengembangkan karier mereka.
        </div>

        <div class="question" onclick="toggleAnswer('answer2')">Siapa yang dapat menggunakan Freelancer Wiki?</div>
        <div class="answer" id="answer2">
            Freelancer Wiki dapat digunakan oleh siapa saja, terutama oleh individu yang tertarik atau sudah berprofesi sebagai freelancer di berbagai bidang.
        </div>
    </div>

    <div class="faq-section">
        <h2>Pertanyaan Seputar Konten dan Layanan</h2>
        <div class="question" onclick="toggleAnswer('answer3')">Apakah Freelancer Wiki gratis?</div>
        <div class="answer" id="answer3">
            Ya, Freelancer Wiki menyediakan konten gratis untuk membantu freelancer dalam berbagai aspek pekerjaan mereka.
        </div>

        <div class="question" onclick="toggleAnswer('answer4')">Bagaimana cara saya berkontribusi ke Freelancer Wiki?</div>
        <div class="answer" id="answer4">
            Kamu bisa menghubungi tim melalui halaman kontak untuk memberikan saran atau ide konten.
        </div>
    </div>

    <div class="faq-section">
        <h2>Pertanyaan Seputar Freelancing</h2>
        <div class="question" onclick="toggleAnswer('answer5')">Bagaimana cara memulai karier sebagai freelancer?</div>
        <div class="answer" id="answer5">
            Di Freelancer Wiki, kami memiliki panduan khusus untuk pemula yang bisa membantu memulai langkah-langkah pertama dalam freelancing.
        </div>
    </div>

    <div class="faq-section">
        <h2>Hubungi Kami</h2>
        <p>Jika ada pertanyaan yang belum terjawab, silakan <a href="/contact">hubungi kami</a> melalui halaman kontak kami.</p>
    </div>
</div>

</body>
</html>

Penjelasan Struktur Halaman FAQ:

<div class="faq-section">: Setiap bagian FAQ dibagi berdasarkan kategori (contoh: "Pertanyaan Umum Tentang Freelancer Wiki", "Pertanyaan Seputar Konten").
<div class="question" onclick="toggleAnswer('answerX')">: Ini adalah pertanyaan yang dapat diklik untuk menampilkan jawabannya. Fungsi JavaScript toggleAnswer() digunakan untuk mengontrol tampilan setiap jawaban.
<div class="answer" id="answerX">: Jawaban yang tersembunyi, yang akan tampil saat pertanyaan terkait diklik.

Dengan HTML dan JavaScript sederhana ini, halaman FAQ bisa lebih interaktif dan nyaman bagi pengguna.

Subscribe Us

Contoh Struktur Halaman FAQ Dalam HTML