Tutorial HTML #04: Tentang Tag Paragraf HTML

Tag Paragraf HTML.- Untuk bahasan Tutorial HTML Dasar kita kali ini, kita akan membahas tentang Tag Paragraf secaara lebih intensif lagi. Bagaimana kodenya? mari simak penjelasannya berikut ini.

Tentang Tag Paragraf HTML | Kita Ngoding HTML #04 |

Cara Membuat Paragraf di HTML

Apa fungsi tag <p pada HTML?

Fungsi tag <p di HTML adalah sebuah kode untuk membuat paragraf pada dokumen HTML.

Adapun tag pendukung dari tag paragraf yaitu: <div>, <hr>, <br> dan <pre>.

Contoh Tag Paragraf HTML

Berikut contoh kode dari paragraf :

<!DOCTYPE html>
<html>
<head>
    <title>Mengenal Tag Paragraf</title>
</head>
<body>
    <p>ini adalah contoh penggunaan paragraf pada html.</p>
    <p>ini adalah contoh paragraf kedua.</p>
</body>
</html>

Jika sahabat menggunakan Sublime Text 3 seperti admin. sahabat cukup menulis “html” kemudian tekan tab pada keyboard, maka Sublime Text 3 akan secara otomatis membuatkan sebuah struktur HTML lengkap. Jadi sahabat tinggal menambahkan apa yang ingin ditampilkan pada website sahabat.

Beberapa Atribut Untuk Paragraf

Atribut untuk paragraf terdiri dari align, id, class dan lain sebagainya. Walaupun sebenarnya menurut validator W3C harusnya menggunakan kode CSS. Kenapa?. karena memang tugas CSS untuk mempercantik/menghias suatu website, sementara HTML lebih bertugas untuk membuat struktur dasar dari web.

Contohnya sebagai berikut :

</head>
<body>
    <p align="center">paragraf rata tengah</p>
    <p align="right">Paragraf rata kanan</p>
    <p align="left">paragraf rata kiri</p>
</body>
</html>

Outputnya sebagai berikut :

Tag Pendukung Paragraf HTML

Seperti yang sudah admin infokan diatas, bahwa tag <p> memiliki beberapa tag pendukung. Berikut kita bahas dalam bentuk tabel berikut contoh penggunaannya:

Nama Tag	Fungsinya
<br>	Membuat baris baru
<ht>	Membuat garis lurus secara horizontal. Biasa digunakan untuk memisahkan paragraf yang satu dengan yang lain.
<pre>	Hampir mirip dengan tag <br> bedanya tag <pre> biasanya digunakan untuk membuat lebih banyak baris baru.
<div>	Membuat paragraf seperti tag <p>. hanya saja tag <div> tidak punya space untuk paragraf berikutnya.

Contoh Penggunaan :

<!DOCTYPE html>
<html>
<head>
    <title>Mengenal Tag Paragraf</title>
</head>
<body>
    <!--Contoh Tag <br> -->
    <p>contoh penggunaan paragraf pada html dengan tag 'br'. <br/> www.sinikak.com Kita Ngoding</p>
    <p>contoh penggunaan paragraf pada html dengan tag 'hr'. garis horizontal seperti dibawah ini</p>
    <!--Contoh Tag <hr> -->
    <hr/>
    <p>dibawah ini adalah contoh penggunaan tag pre</p>
    <!--Contoh Tag <pre> -->
    <pre>
        katakanlah ini adalah puisi
        dengan bentuk dan ciri khasnya
        tidak tau harus berpuisi apa
        mudah-mudahan sahabat paham
            ini adalah penggunaan tag pre
            semoga paham ya
            please paham dong
            ntar aku permen kalo ketemu
        kira-kira bentuknya sudah mirip puisi belum?
        miripkan.. miripkan ....?
        mirip dong.... 
        udah iya in aja bias cepet..
    </pre>
    <!--Contoh Tag <div> -->
    <div>Tag div hampir sama dengan Tag paragraf</div>
    <div>Bedanya untuk Tag div tidak ada spasi setelah diberikan paragraf baru</div>
    <p>Tag div hampir sama dengan Tag paragraf</p>
    <p>Bedanya untuk Tag div tidak ada spasi setelah diberikan paragraf baru</p>
</body>
</html>