Blok HTML dan Unsur Inline

Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemennya. Nilai tampilan default untuk sebagian besar elemen adalah blok atau inline.


Elment Level Blok

Elemen tingkat blok selalu dimulai pada baris baru dan menghabiskan lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).
Elemen <div> adalah elemen tingkat blok.

Contoh elemen tingkat blok:

•     <div>
•     <h1> - <h6>
•     <p>
•     <Form>

Elemen inline

Elemen inline tidak dimulai pada baris baru dan hanya membutuhkan lebar sebanyak yang diperlukan.

Ini adalah elemen inline <span> di dalam paragraf.

Contoh elemen inline:

•     <span>
•     <a>
•     <img>

Elemen <div>

Elemen <div> adalah elemen tingkat blok yang sering digunakan sebagai wadah untuk elemen HTML lainnya.

Elemen <div> tidak memiliki atribut yang diperlukan, namun gaya dan kelas biasa terjadi.

Bila digunakan bersamaan dengan CSS, elemen <div> dapat digunakan untuk membuat blok konten:
Contoh
<div style = "background-color: hitam; warna: putih; padding: 20px;">

<h2> London </h2>
<p> London adalah ibu kota Inggris. Kota ini merupakan kota terpadat di Inggris, dengan wilayah metropolitan yang berpenduduk lebih dari 13 juta jiwa. </p>
</div>

Elemen <span>

Elemen <span> adalah elemen inline yang sering digunakan sebagai wadah untuk beberapa teks.

Elemen <span> tidak memiliki atribut yang diperlukan, namun gaya dan kelas biasa terjadi.

Bila digunakan bersamaan dengan CSS, elemen <span> dapat digunakan untuk menyesuaikan bagian teks:
Contoh
<h1> Saya <span style = "warna: merah"> Penting </ span> Pos </ h1>

Tag Pengurutan HTML
<div> Mendefinisikan sebuah bagian dalam sebuah dokumen (block-level)
<Span> Mendefinisikan sebuah bagian dalam sebuah dokumen (inline)

Share :

Tweet

✚

Related Post