Elemen Blok dan Inline HTML
Artikel ini menjelaskan elemen blok dan inline HTML.
Ini menjelaskan perbedaan antara elemen tingkat blok dan elemen sebaris, serta elemen tingkat blok utama dan elemen sebaris utama.
YouTube Video
Elemen tingkat blok dan elemen sebaris
HTML memiliki dua kategori utama elemen yang menentukan bagaimana elemen-elemen tersebut ditampilkan di layar: 'elemen tingkat blok' dan 'elemen sebaris'. Elemen-elemen ini berperan penting dalam tata letak halaman dan secara langsung memengaruhi posisi mereka. Di sini, kami akan menjelaskan secara rinci karakteristik dan penggunaan setiap elemen.
Apa itu elemen tingkat blok?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>Elemen tingkat blok biasanya menempati seluruh lebar halaman dan muncul pada baris terpisah dari elemen lainnya. Elemen-elemen ini dapat berisi elemen tingkat blok lainnya atau elemen sebaris di dalamnya, dan mendefinisikan struktur dokumen yang lebih besar.
Fitur:
- Elemen-elemen tersebut dimulai pada baris baru dan berkembang untuk menempati lebar sebanyak mungkin (biasanya seluruh lebar elemen induk).
- Elemen-elemen ini dipisahkan secara vertikal dari elemen blok lainnya dengan margin yang diterapkan di antaranya.
- Mereka dapat berisi elemen blok atau inline lainnya di dalamnya.
Di sini, elemen tingkat blok berikut digunakan:.
- Tag
<div>biasanya digunakan untuk membangun tata letak. - Tag
<p>digunakan untuk mendefinisikan paragraf. <h1>hingga<h6>adalah elemen yang digunakan untuk mendefinisikan heading.<h1>adalah heading terbesar, dan<h6>adalah yang terkecil.- Tag
<ul>membuat daftar tidak berurutan. - Tag
<ol>membuat daftar berurutan. - Tag
<section>mendefinisikan sebuah bagian dalam dokumen.
Apa itu elemen sebaris?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>Elemen sebaris ditempatkan pada baris yang sama dengan elemen lainnya dan biasanya hanya memakan lebar sesuai dengan kontennya. Elemen-elemen ini dianggap sebagai bagian dari teks dan, tidak seperti elemen level blok, tidak mengisi seluruh baris.
Fitur:
- Elemen muncul pada garis yang sama dan ditempatkan berdampingan dengan elemen inline lainnya.
- Lebar ditentukan oleh konten elemen (teks atau gambar).
- Elemen ini dapat dimasukkan ke dalam elemen tingkat blok, tetapi tidak sebaliknya.
Di sini, elemen sebaris berikut digunakan:.
- Tag
<span>digunakan untuk menekankan bagian dari teks dengan gaya tertentu. - Tag
<a>mendefinisikan hyperlink. - Tag
<img>adalah elemen yang digunakan untuk menyematkan gambar. <strong>menyoroti teks penting (biasanya ditampilkan dalam huruf tebal).<em>menunjukkan teks yang ditekan (biasanya ditampilkan dalam huruf miring).
Perbedaan antara elemen tingkat blok dan elemen sebaris
- Metode tampilan: Elemen tingkat blok ditampilkan pada baris baru dan mengambil seluruh lebar halaman, sedangkan elemen sebaris ditampilkan pada baris yang sama dengan elemen lainnya dan lebarnya ditentukan oleh kontennya.
- Penanganan elemen internal: Elemen tingkat blok dapat berisi elemen tingkat blok lainnya serta elemen sebaris, tetapi elemen sebaris tidak dapat berisi elemen tingkat blok.
- Peran tata letak: Elemen tingkat blok terutama digunakan untuk membuat struktur tata letak halaman, sedangkan elemen sebaris mendefinisikan elemen kecil seperti teks dan tautan.
Poin-poin penting untuk membedakan
Membuat tata letak: Gunakan elemen tingkat blok seperti <div>, <section>, <article> untuk mendefinisikan bagian besar dan blok konten.
Dekorasi teks dan tautan: Gunakan elemen sebaris seperti <span>, <a>, <strong>, <em> untuk mendekorasi bagian dari teks atau menambahkan tautan.
Mencampur elemen tingkat blok dan elemen inline
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- Elemen block-level seperti
<main>,<header>, dan<section>digunakan, dan biasanya dirender pada baris baru, mengisi seluruh lebar elemen induknya. - Elemen inline seperti
<a>,<strong>,<span>, dan<img>digunakan, dan mereka ditempatkan dalam satu baris tanpa mengisi seluruh lebar dalam elemen block-level.
Menyertakan elemen-elemen inline dalam elemen-elemen tingkat blok adalah pola umum. Misalnya, umum untuk menyertakan tautan (<a>) atau penekanan (<strong>) di dalam paragraf (<p>). Namun, karena Anda tidak dapat menyertakan elemen tingkat blok di dalam elemen inline, penting untuk menggunakannya secara tepat.
Ringkasan
Elemen tingkat blok dan elemen inline adalah dua jenis elemen HTML dasar, masing-masing dengan perannya sendiri. Elemen tingkat blok membentuk dasar tata letak halaman, sedangkan elemen inline digunakan untuk mendekorasi dan memanipulasi konten kecil di dalamnya. Memahami dan menggunakan kedua jenis elemen ini dengan benar memungkinkan penulisan kode HTML yang efisien.
Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.