Blogger Jateng

Tag HTML Umum dan Penggunaannya

HTML atau (Hypertext Markup Language) adalah blok bangunan paling dasar dari Web. Ini mewakili konten halaman web dan memberi tahu elemen apa pada posisi mana yang harus terlihat di browser. Hai, jika Anda seorang pemula, dan mencoba membuat atau mengedit halaman web, maka di bawah ini disebutkan beberapa daftar tag html dengan deskripsi singkat yang harus Anda ketahui. Dalam posting ini, kita akan mempelajari beberapa tag html yang paling umum dan berguna.

1. <html>

Tag html- Tag html digunakan sebagai elemen akar dari dokumen HTML. Singkatnya, tag ini merupakan wadah yang membungkus semua elemen HTML lainnya dan memerintahkan browser untuk menginterpretasikan konten sebagai - ya, Anda dapat menebaknya dengan benar - HTML. Tag ini sering kali menyertakan beberapa atribut seperti lang untuk mendefinisikan bahasa dokumen.

Contoh:

<html lang="en">

    <head>

        <title>My Website</title>

    </head>

    <body>

        <!-- Content goes here -->

    </body>

</html>

2. <head>

Semua informasi meta dari dokumen seperti judul, kumpulan karakter dan daftar gaya atau skrip biasanya didefinisikan di bawah bagian. Meskipun informasi ini tidak muncul di halaman itu sendiri, namun penting untuk mesin pencari dan perilaku browser.

Contoh:

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Page Title</title>

</head>

Sumber: revou.co

3. <title>

Tag <title> menentukan judul halaman web, yang muncul di tab browser dan sering digunakan oleh mesin pencari sebagai judul halaman dalam hasil pencarian.

Contoh:

<title>Welcome to My Website</title>

4. <body>

Tag <body> berisi semua konten yang akan ditampilkan di halaman web, termasuk teks, gambar, tautan, dan media lainnya. Di sinilah Anda meletakkan elemen-elemen utama situs Anda.

Contoh:

<body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
</body>

5. <h1> to <h6>

Tag ini menentukan judul pada halaman, dengan <h1> sebagai level tertinggi dan <h6> terendah. Judul membantu menyusun konten dan meningkatkan keterbacaan.

Contoh:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

6. <p>

Tag <p> digunakan untuk mendefinisikan paragraf teks. Tag ini secara otomatis menambahkan ruang di atas dan di bawah konten, menjadikannya tag fundamental untuk pemformatan teks.

Contoh:

<p>This is a paragraph of text.</p>

7. <a>

Tag <a> membuat hyperlink, yang memungkinkan pengguna untuk menavigasi dari satu halaman ke halaman lain atau ke situs eksternal. Atribut href menentukan URL tautan.

Contoh:

<a href="https://www.example.com">Visit Example</a>

8. <img>

Tag <img> digunakan untuk menyematkan gambar dalam halaman web. Tag ini membutuhkan atribut src untuk menentukan file gambar dan atribut alt untuk mendeskripsikan gambar agar dapat diakses.

Contoh:

<img src="image.jpg" alt="A description of the image">

9. <ul>, <ol>, and <li>

Tag ini digunakan untuk membuat daftar <ul> membuat daftar yang tidak berurutan (berpoin), saat <ol> membuat daftar yang terurut (bernomor). Tag <li> mendefinisikan setiap item daftar.

Contoh:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

10. <div> and <span>

Tag <div> adalah elemen tingkat blok yang digunakan untuk mengelompokkan dan menata konten. Sebaliknya, tag <span> adalah elemen sebaris yang digunakan untuk menata bagian kecil teks

Contoh:

<div>
    <p>This is a paragraph inside a div.</p>
</div>
<span>This is a span element.</span>

Kesimpulan

Ini adalah hal yang wajib diketahui oleh siapa pun yang bekerja pada pengembangan web atau pekerjaan desain. Mereka adalah tingkat tertinggi dari halaman web yang memungkinkan pengembang untuk menambahkan konten yang terstruktur, semantik & menarik secara visual. Anda dapat terus belajar dan berlatih HTML, Anda akan menemukan lebih banyak tag yang membantu dalam membuat atau menentukan lebih banyak fungsionalitas halaman web Anda.