Kalau lo baru belajar HTML, pasti pernah denger tentang Block-level Elements dan Inline Elements. Tenang aja, ini bukan istilah ribet kok! Intinya, elemen HTML bisa dikelompokkan jadi dua: yang ngeblok dan yang sebaris. Yuk, kita bahas lebih dalam!
1. Block-level Elements
Bayangin lo lagi nulis dokumen. Ada paragraf, heading, list, dan sebagainya. Nah, Block-level Elements itu kayak paragraf dalam tulisan, mereka otomatis bikin baris baru dan ngambil seluruh lebar layar yang tersedia.
Contoh Block-level Elements:
<p>(Paragraf)<div>(Container tanpa makna spesifik)<h1>sampai<h6>(Heading)<ul>dan<ol>(List tak berurutan dan berurutan)<section>dan<article>(Struktur konten)<table>(Tabel)
Ciri utama block-level elements adalah mereka selalu mulai di baris baru dan ngambil lebar penuh dari parent element-nya.
2. Inline Elements
Kalau block-level kayak paragraf, inline elements itu kayak kata atau frasa dalam paragraf. Mereka nggak bikin baris baru dan cuma selebar kontennya aja.
Contoh Inline Elements:
<a>(Link)<span>(Container kecil)<strong>dan<b>(Teks tebal)<em>dan<i>(Teks miring)<img>(Gambar)<code>(Kode program)
Intinya, inline elements ini lebih hemat tempat dan biasanya dipakai buat memperindah teks atau menambahkan elemen kecil di dalam teks.
3. The <div> Element
Nah, ini elemen paling sering dipakai di HTML. <div> itu semacam kotak serbaguna buat ngelompokkan elemen lain. Biasanya dipake buat styling pake CSS atau buat grupin beberapa elemen dalam satu blok.
Contoh:
<div class="box" style="background-color:yellow;>
<h2>Judul</h2>
<p>Ini adalah paragraf di dalam div.</p>
</div>
<div> nggak punya tampilan khusus, tapi bisa dikasih gaya lewat CSS. Makanya sering dipake buat tata letak halaman.
4. The <span> Element
Kalau <div> buat grupin elemen blok, <span> itu versi inline-nya. Cocok banget buat styling bagian kecil dalam teks tanpa ngeblok satu baris penuh.
Contoh:
<p>Halo, <span style="color: red;">ini teks merah</span> di dalam paragraf.</p>
<span> berguna kalau lo mau ngasih gaya ke beberapa kata aja dalam satu teks tanpa ganggu tampilan keseluruhan.
5. Chapter Summary
Oke, kita udah bahas perbedaan block-level dan inline elements:
- Block-level: Bikin baris baru dan lebar penuh (contoh:
<div>,<p>,<h1>–<h6>). - Inline elements: Tetap di satu baris, cuma selebar kontennya aja (contoh:
<span>,<a>,<strong>). <div>buat grupin elemen blok.<span>buat grupin elemen sebaris.
6. HTML Block and Inline Elements Tags
Block-level Tags:
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>Inline Tags:
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>Jadi gitu deh, bedanya block-level sama inline elements di HTML. Sekarang lo bisa bedain mana elemen yang bikin baris baru dan mana yang tetep di satu baris. Gampang kan? Yuk, coba praktek biar makin paham!
Komentar