Lompat ke konten Lompat ke sidebar Lompat ke Berlangganan Lompat ke footer

HTML Paragraphs

HTML Paragraphs - Berikut ini adalah rangkuman tentang tag/ elemen HTML paragraphs (<p>).

Apa itu HTML Paragraphs?

HTML Paragraphs adalah tag atau elemen HTML yang berfungsi untuk membuat konten di dalam tag tersebut menjadi paragraf. Tag ini biasanya digunakan untuk konten berupa teks/ tulisan.

Kode HTML Paragraph adalah <p>...konten tulisan...</p>.

Teks yang menggunakan tag HTML Paragraph akan langsung dimulai pada baris baru dan secara otomatis memiliki margin atas dan bawah tanpa perlu penyesuaian CSS Styling.

Konten di dalam tag HTML Paragraph juga akan membuat kelebihan spasi (extra spaces) dan baris baru hilang secara otomatis.

Tips: Jangan masukkan elemen container seperti gambar (<img>), blockquote (<blockquote>), HTML Headings, atau lainnya di dalam elemen paragraph <p>.

Default Stylesheet

HTML Element Default Stylesheet
<p></p>
  • Display: block
  • Margin-top: 1em
  • Margin-right: 0
  • Margin-left: 0
  • Margin-bottom: 1em

Atribut dan Fungsi

Atribut Fungsi Value Contoh
class Berisikan class selector untuk CSS Styling. class-selector <p class='paragraph1'>Konten Artikel</p>
id Berisikan kode unik id selector untuk CSS Styling dan element targeting. class-selector <p id='paragraph1'>Konten Artikel</p>
style Berisikan code styling CSS untuk gambar. CSS Value <p style='text-align:center'>Konten Artikel</p>

Contoh Penerapan

<p>Ini Teks Paragraph 1</p>
<p>Ini Teks Paragraph 2</p>
<p>Ini Teks Paragraph 3</p>

Hasil

Ini Teks Paragraph 1

Ini Teks Paragraph 2

Ini Teks Paragraph 3

Note: Hasil yang tampil di bagian hasil sudah terpengaruh oleh CSS Styling, sehingga tidak tampil sebagaimana default.

Catatan

  • Meski berbentuk paragraph, indensasi dari text tetap harus diatur secara manual dengan metode CSS Styling menggunakan property text-indent.
  • Alternatif lain untuk elemen HTML Paragraph adalah HTML Preformatted Text (<pre>).

Penutup

Itulah sedikit rangkuman tentang HTML Paragraph yang bisa saya bagikan. Jika ada yang kurang, kurang jelas, atau salah silahkan beritahukan atau tanyakan saja melalui kolom komentar di bawah. Semoga bermanfaat dan sampai jumpa di tulisan saya lainnya.

Headings sangat membantu pembaca konten memahami setiap bagian dari konten pada webpage.Ninura

Anda mungkin menyukai postingan ini:

Newest Post
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar