Elemen dan Tag HTML dan Contoh Penerapannya

Hiro Entertaiment December 12, 2024

HTML (HyperText Markup Language) artinya bahasa markup yg dipergunakan untuk menghasilkan struktur halaman web. Inti dari HTML merupakan elemen dan tag yang dipergunakan buat memilih banyak sekali bagian dan konten dari sebuah laman web. pada artikel ini, kita akan membahas elemen serta tag HTML dan contoh penerapannya buat menciptakan laman web yg terstruktur.

Pengertian Elemen dan Tag HTML

Elemen HTML terdiri dari tag pembuka, konten, serta tag epilog. menjadi model, elemen paragraf ditulis seperti ini:

<p>Ini adalah paragraf.</p>

pada pada model di atas:
  • <p> artinya tag pembuka.
  • Ini ialah paragraf. merupakan konten.
  • </p> adalah tag penutup.
Tag HTML ialah bagian dari elemen HTML yg digunakan buat menandai awal serta akhir dari elemen tadi. Sebagian besar  tag HTML memiliki pasangan pembuka dan  epilog, meskipun beberapa tag, mirip , bersifat self-closing (menutup diri).

Elemen HTML Dasar dan  model Penerapannya

Elemen Heading
Elemen heading dipergunakan buat menentukan judul atau subjudul dalam sebuah page web. ada enam tingkat heading, berasal  sampai , dengan  menjadi taraf tertinggi.

<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Sub-subjudul</h3>

Elemen Paragraf
Elemen paragraf digunakan untuk menampilkan teks dalam bentuk paragraf.

<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>

Elemen Tautan (Anchor)
Elemen tautan digunakan untuk membuat hyperlink yang mengarahkan pengguna ke halaman lain atau bagian lain dari halaman yang sama.

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

Elemen Gambar
Elemen gambar digunakan untuk menyisipkan gambar ke dalam halaman web. Elemen ini bersifat self-closing.

<img src="path/to/image.jpg" alt="Deskripsi Gambar">

Elemen Daftar
HTML memiliki dua jenis elemen daftar: daftar berurutan (<ol>) dan daftar tidak berurutan (<ul>). Masing-masing item dalam daftar ditandai dengan <li> (list item).

<ul>
  <li>Item Daftar 1</li>
  <li>Item Daftar 2</li>
  <li>Item Daftar 3</li>
</ul>

<ol>
  <li>Item Berurutan 1</li>
  <li>Item Berurutan 2</li>
  <li>Item Berurutan 3</li>
</ol>

Elemen Formulir
Elemen formulir digunakan untuk mengumpulkan data dari pengguna. Elemen ini mencakup berbagai elemen input seperti teks, email, dan tombol.

<form action="/submit-form" method="post">
  <label for="name">Nama:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Kirim">
</form>

Elemen Tabel
Elemen tabel digunakan untuk menampilkan data dalam format tabel.

<table>
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>25</td>
  </tr>
</table>

Contoh Penerapan Struktur Dasar HTML
Berikut adalah contoh struktur dasar HTML yang menggabungkan beberapa elemen di atas untuk membuat halaman web sederhana:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Halaman HTML</title>
</head>
<body>
    <header>
        <h1>Selamat Datang di Halaman Saya</h1>
        <nav>
            <a href="#home">Beranda</a> |
            <a href="#about">Tentang</a> |
            <a href="#contact">Kontak</a>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Beranda</h2>
            <p>Ini adalah halaman beranda.</p>
            <img src="path/to/image.jpg" alt="Gambar Beranda">
        </section>
        <section id="about">
            <h2>Tentang</h2>
            <p>Ini adalah halaman tentang.</p>
        </section>
        <section id="contact">
            <h2>Kontak</h2>
            <form action="/submit-form" method="post">
                <label for="name">Nama:</label>
                <input type="text" id="name" name="name"><br><br>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email"><br><br>
                <input type="submit" value="Kirim">
            </form>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Halaman Saya. Semua hak dilindungi.</p>
    </footer>
</body>
</html>

Dengan pemahaman tentang elemen dan tag HTML serta contoh penerapannya, Anda dapat mulai membangun halaman web yang terstruktur dan menarik. Semoga artikel ini membantu.

Sumber : Github.com

0 Comments