To be Emphasized of the Day! Panduan Penggunaan Section, Div, dan Span di HTML by ChatGPT

Perbedaan & Penggunaan 

<section> | <div> | <span> 

dalam HTML

Dalam pengembangan web, elemen <section>, <div>, dan <span> sering digunakan untuk membungkus konten. Meski sama-sama berfungsi sebagai container, ketiganya memiliki fungsi, semantik, dan peran berbeda. Artikel ini akan menjelaskan perbedaan dan contoh penggunaannya.

1. <section>: Container Semantik

Elemen <section> adalah elemen block-level semantik untuk menandai satu bagian halaman yang memiliki topik atau tema tertentu. Biasanya digunakan bersama heading (<h1>-<h6>).

<section>
          <h2>Berita Teknologi</h2>
          <p>Artikel terbaru seputar perkembangan teknologi...</p>
</section>

2. <div>: Container Netral untuk Layout

Elemen <div> adalah elemen block-level tanpa semantik. Biasa digunakan untuk mengelompokkan elemen lain dan memberi styling atau mengatur layout.

<div class="container">
          <div class="card">Konten 1</div>
          <div class="card">Konten 2</div>
</div>

3. <span>: Styling Inline

Elemen <span> adalah elemen inline untuk memberi gaya (style) atau penanda pada teks tertentu tanpa memengaruhi alur paragraf.

<p>Belajar <span style="color:#1cc88a;">HTML</span> itu menyenangkan!</p>

🔑 Perbandingan Singkat

Elemen	Tipe	Fungsi Utama	Semantik
<section>	Block-level	Membagi halaman jadi bagian/topik	Ya
<div>	Block-level	Pengelompokkan/layout	Tidak
<span>	Inline	Styling teks	Tidak

📌 CONTOH LENGKAP

Berikut satu <section> yang berisi <div> dan <span> dengan styling inline:

<section
          style="
                    background: white;
                    margin: 20px auto;
                    padding: 20px;
                    max-width: 800px;
                    border-radius: 8px;
                    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
          "
>
          <h2>Berita Teknologi</h2>
          <p>
                    Dunia teknologi berkembang pesat. Salah satu fokus utama
                    adalah
                    <span style="color: #1cc88a; font-weight: bold"
                              >Artificial Intelligence</span
                    >
                    (AI).
          </p>
          <div style="display: flex; gap: 10px; margin-top: 15px">
                    <div
                              style="
                                        background: #d4fbe5;
                                        padding: 10px;
                                        flex: 1;
                                        border-radius: 5px;
                              "
                    >
                              <span style="color: #1cc88a; font-weight: bold"
                                        >Berita 1:</span
                              >
                              Update terbaru AI
                    </div>
                    <div
                              style="
                                        background: #d4fbe5;
                                        padding: 10px;
                                        flex: 1;
                                        border-radius: 5px;
                              "
                    >
                              <span style="color: #1cc88a; font-weight: bold"
                                        >Berita 2:</span
                              >
                              Cloud Computing
                    </div>
          </div>
</section>

🧩 KESIMPULAN

• <section>: Container semantik untuk konten dengan topik tertentu.
• <div>: Container netral untuk layout dan grouping.
• <span>: Container inline untuk styling atau highlight teks.

Dengan memahami peran ketiga elemen ini, Anda dapat membuat struktur HTML yang lebih terorganisir, mudah dibaca mesin pencari, dan enak dipelihara.