Jenis-Jenis Tags Pada Bahasa HTML

Jenis-jenis tags pada HTML sangat banyak macamnya. Dimana setiap tags mempunyai fungsi masing-masing sesuai dengan kebutuhan.

Pada setiap file HTML yang digunakan untuk membuat halaman web tentu menggunakan tags. Macam-macam tags pada HTML sangat banyak jenisnya seperti Heading, Paragraph, Break, dan lain – lain.

1. Paragraph Tags pada HTML

Paragraf merupakan gabungan dari beberapa kalimat. Penggunaan tag <p> bisa dipakai struktur teks untuk membedakan paragraf. Setiap paragraf dari teks diletakan diantara tags <p> dan diakhiri dengan tag </p>.

Contoh tag paragraf HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Paragraf</title>
    </head>
    <body>
        <p>Ini contoh teks paragraf pertama.</p>
        <p>Ini contoh teks paragraf kedua.</p>
        <p>Ini contoh teks paragraf ketiga.</p>
    </body>
</html>

Hasilnya:

2. Heading Tags pada HTML

Pada setiap dokumen pasti dimulai dengan sebuah Heading. Anda bisa menggunakan ukuran heading yang berbeda, pada HTML terdapat 6 level yakni elemen <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Ketika anda menambahkan heading, pada browser akan menambahkan satu baris sebelum dan satu baris setelah heading.

Contoh tags Heading HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Penggunaan Heading</title>
    </head>
    <body>
        <h1>Teks dengan Heading 1</h1>
        <h2>Teks dengan Heading 2</h2>
        <h3>Teks dengan Heading 3</h3>
        <h4>Teks dengan Heading 4</h4>
        <h5>Teks dengan Heading 5</h5>
        <h6>Teks dengan Heading 6</h6>
    </body>
</html>

Hasilnya:

heading HTML

3. Nonbreaking Spaces Tag pada HTML

Untuk menggunakan tags ini bisa dengan  , yang akan memberikan spasi normal.

Contoh Nonbreaking Spaces HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Nonbreaking Spaces</title>
    </head>
    <body>
        <p>Beli: "30&nbsp;Ayam&nbsp;Goreng."</p>
    </body>
</html>

Hasilnya:

4. Line Break Tag pada HTML

Untuk memberikan spasi satu baris ke bawah bisa menggunakan element <br />. Tag ini menggunakan forward slash />, dan anda bisa menggunakan <br> saja namun tidak valid jika digunakan pada XHTML.

Contoh Tag Line Break HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Line Break HTML</title>
    </head>
    <body>
        <p>Halo,<br />
        Selamat Datang Bro.<br />
        Terima kasih<br />
        Mas Paijo</p>
    </body>
</html>

Hasilnya:
Tutorial Pemrograman HTML

5. Horizontal Lines Tag pada HTML

Tag ini digunakan untuk memberikan breakup section pada sebuah dokumen, bisa seperti garis pemisah antara kalimat. Sama seperti Line break, Horizontal Line Tag merupakan elemen kosong sehingga tidak perlu pembuka dan penutup elemen.

Untuk menggunakan tag ini perlu tanda <hr /> yang akan memberikan sebuah pemisah. Bisa menggunakan <hr> namun tidak valid untuk XHTML.

Contoh Horizontal Lines Tag:

<!DOCTYPE html>
    <html>
    <head>
        <title>Contoh Horizontal Line</title>
    </head>
    <body>
        <p>Ini paragraf pertama (letak atas).</p>
        <hr />
        <p>Ini paragraf kedua (letak bawah).</p>
    </body>
</html>

Hasilnya:
Tutorial Pemrograman HTML

6. Centering Content Tag pada HTML

Untuk menempatkan tulisan pada bagian tengah, anda bisa menggunakan tag <center> dari sebuah halaman atau pada tabel.

Contoh Tags Centering:

<!DOCTYPE html>
<html>
	<head>
		<title>Contoh Teks Centering</title>
	</head>
	<body>
		<p>Teks ini tidak berada di tengah.</p>
		<center>
		<p>Teks ini letaknya ditengah.</p>
		</center>
	</body>
</html>

Hasilnya:
Tutorial Pemrograman HTML

7. Preserve Formatting Tag pada HTML

Kadang-kadang ketika menulis teks dalam HTML perlu sesuai dengan format aslinya. Maka anda bisa menggunakan preformatted tag dengan diawali <pre> dan ditutup dengan </pre>.

Contoh Preserve Formatting:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Preserve Formatting</title>
</head>
<body>
    <pre>
    function myFunction( text ){
    alert ( text )
    }
    </pre>
</body>
</html>

Hasilnya:
Tutorial Pemrograman HTML

Demikian belajar tutorial HTML tentang jenis-jenis tags pada HTML. Semoga berguna dan bermanfaat, terima kasih.