Praktek Elemen Block dan Inline
diatas adalah contoh display block dan inline beserta outputnya
Di HTML, elemen bisa ditampilkan sebagai block atau inline.
block (seperti paragraf <p> atau heading <h1>) selalu dimulai di baris baru dan memenuhi lebar layar yang tersedia. Misalnya, kalau kita buat dua paragraf, paragraf kedua otomatis muncul di bawah paragraf pertama.Tag HTML yang termasuk dalam kategori display: block secara default, antara lain:
- Heading:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> - Paragraf:
<p> - Divisi:
<div> - Daftar:
- Tidak terurut:
<ul> - Terurut:
<ol> - Item daftar:
<li>
- Tidak terurut:
- Formulir:
- Formulir:
<form> - Input teks area:
<textarea>
- Formulir:
- Tabel dan elemen terkait:
- Tabel:
<table> - Baris tabel:
<tr> - Sel tabel header:
<th> - Sel tabel data:
<td>
- Tabel:
- Konten semantik:
- Header:
<header> - Footer:
<footer> - Artikel:
<article> - Bagian:
<section> - Navigasi:
<nav> - Asides (keterangan sampingan):
<aside> - Figure (gambar atau diagram):
<figure> - Figcaption (keterangan gambar):
<figcaption>
- Header:
inline (seperti link <a> atau teks dengan <span>) tetap berada di satu baris dengan elemen lain, tidak membuat baris baru.Tag HTML yang secara default termasuk dalam kategori display: inline:
Teks dan Gaya Teks:
- Link:
<a> - Cetak tebal:
<b> - Cetak miring:
<i> - Penekanan teks:
<em> - Teks tebal kuat:
<strong> - Teks garis bawah:
<u> - Teks kecil:
<small> - Teks superskrip:
<sup> - Teks subskrip:
<sub> - Teks dengan garis tengah:
<s>
- Link:
Elemen untuk Struktur Teks:
- Span:
<span>(digunakan untuk membungkus bagian kecil dari teks atau elemen lainnya untuk tujuan styling) - Gambar:
<img> - Label dalam formulir:
<label> - Input:
<input>(kecuali<textarea>, yang merupakan elemen block) - Button:
<button>(walaupun bisa diatur menjadi block dengan CSS)
- Span:
Elemen Skrip dan Multimedia:
- Script:
<script> - Video (jika diatur dengan gaya inline):
<video> - Audio:
<audio>
- Script:
Komentar
Posting Komentar