0Pricing
HTML Academy · Pelajaran

br hr blockquote dan pre

Atur pemisah baris, pemisah tematik, kutipan, dan teks yang telah diformat sebelumnya.

br hr blockquote dan pre adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Elemen br

Elemen <br> menyisipkan jeda baris di dalam konten teks:

<p>221B Baker Street<br>
London, NW1 6XE<br>
United Kingdom</p>
<!-- Good use: addresses, poetry, lyrics -->
<!-- Bad use: spacing paragraphs — use margin/padding instead -->

Kapan Menggunakan br

Gunakan <br> hanya jika jeda baris merupakan bagian dari konten:

  • Alamat pos
  • Puisi dengan jeda baris tertentu
  • Lirik lagu

Jangan gunakan <br> untuk menambahkan jarak visual antarparagraf — itu adalah tugas CSS.

Elemen hr

Elemen <hr> merepresentasikan pemisah tematik antara konten:

<p>Chapter One begins here and introduces the characters.</p>

<hr>

<p>Chapter Two starts a new scene entirely.</p>
<!-- hr = thematic shift in content, not just a visual line -->
<!-- Style with CSS: border, color, margin -->

Menata hr dengan CSS

<hr> dapat ditata sepenuhnya:

<hr style="border: none; border-top: 2px solid #e0e0e0; margin: 2rem 0;">

<!-- Or in CSS: -->
<!--
hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 1.5rem 0;
}
-->

Elemen blockquote

<blockquote> menandai bagian yang dikutip dari sumber lain:

<blockquote cite="https://example.com/article">
  <p>The best time to plant a tree was 20 years ago.
     The second best time is now.</p>
</blockquote>
<p>— Chinese Proverb</p>
<!-- cite attribute = URL of the source (machine-readable) -->
<!-- cite element inside blockquote = visible attribution -->

Kutipan Inline dengan q

Untuk kutipan inline yang singkat, gunakan <q>, bukan <blockquote>:

<p>She said <q cite="https://example.com">the meeting is at noon</q>.</p>
<!-- Browser adds quotation marks automatically -->
<!-- blockquote = block-level, full quote -->
<!-- q = inline, short quote within a sentence -->

Elemen pre

<pre> menampilkan teks dalam font berlebar tetap dan mempertahankan spasi persis seperti aslinya:

<pre>
function hello() {
    console.log("Hello!");
}
</pre>
<!-- Spaces, tabs, and newlines are preserved -->
<!-- Default font: monospace -->
<!-- Used for code, ASCII art, or text that depends on spacing -->

pre dan code Bersama-sama

Gabungkan <pre> dan <code> untuk blok kode:

<pre><code>
const greet = (name) => {
  return `Hello, ${name}!`;
};
console.log(greet("World"));
</code></pre>
<!-- pre = preserves whitespace -->
<!-- code = semantic: this is computer code -->
<!-- syntax highlighting libraries like Prism target pre > code -->

Escape dalam pre

Karakter khusus HTML di dalam <pre> tetap harus di-escape:

<pre><code>
<!-- These must be escaped: -->
&lt;div class="box"&gt;
  &lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;
<!-- &lt; = <   &gt; = >   &amp; = & -->
</code></pre>

Pelipatan Spasi

HTML biasa melipat spasi — beberapa spasi dan baris baru menjadi satu spasi:

<p>This    has    extra    spaces.</p>
<!-- Renders as: "This has extra spaces." -->

<pre>This    keeps    all    spaces.</pre>
<!-- Renders exactly as written -->

<!-- To preserve whitespace in p without pre: CSS white-space: pre -->
<p style="white-space: pre-wrap">Preserved&#10;newlines</p>

Ringkasan Elemen Spasi

Referensi singkat:

  • <br> — jeda baris inline (alamat, puisi)
  • <hr> — pemisah bagian tematik
  • <blockquote> — kutipan tingkat block
  • <q> — kutipan inline
  • <pre> — teks terformat sebelumnya, mempertahankan spasi
  • <code> — cuplikan kode inline

Pemeriksaan Singkat

Elemen mana yang mempertahankan semua spasi, termasuk spasi dan baris baru, persis seperti yang ditulis?

Ringkasan: br hr blockquote pre

Elemen spasi dan kutipan:

  • <br> — jeda baris di dalam konten (bukan untuk memberi jarak)
  • <hr> — pemisah konten tematik (semantik, bukan sekadar visual)
  • <blockquote cite> — kutipan block dengan sumber
  • <q> — kutipan inline
  • <pre><code> — blok kode terformat

Pertanyaan yang Sering Diajukan

Apakah pelajaran “br hr blockquote dan pre” gratis?

Ya — teks lengkap “br hr blockquote dan pre” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “br hr blockquote dan pre”?

Atur pemisah baris, pemisah tematik, kutipan, dan teks yang telah diformat sebelumnya. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “br hr blockquote dan pre” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Heading h1-h6 dan Hierarkinya
  2. Paragraf em strong dan b i
  3. br hr blockquote dan pre
  4. Elemen span dan div
← Kembali ke HTML Academy