#HTML

Belajar HTML Dasar #4 - Heading dan List

Fahras Nur Hidayat
blog thumbnails

Mengenal Tag Heading dan List

Tag Heading

Tag Heading biasa dikenal dengan tag <h..>, biasanya setiap artikel yang ada di sebuah website kebanyakan diberikan judul.

kali ini kita menggunakan tag <h..> untuk membuat judul pada artikel yang kita buat di website kita.

Cara untuk membuatnya adalah dengan cara menuliskan nama atau judul yang dihimpit oleh tag h tersebut. Seperti tag pada umumnya tag h juga memilikin tag penutupnya seperti ini </h..>.

Titik titik setelah tag h maksudnya adalah tag ini memiliki beberapa versi dari <h1> - <h6>.

Isi element yang ditulis antara <h1> ... </h1> memiliki ukuran yang lebih besar dari pada ukuran pada tag <h6> ... </h6>.

Coba kita liat perbandingan versi tag h dibawah ini.

  
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Belajar mengenali Tag Heading (Kodingnesia)</title>
      </head>
      <body>
        <header>
          Versi pada tag h
        </header>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
      </body>
    </html>
  

Jadi, biasanya tag h ini digunakan untuk menuliskan nama judul.

Image Tag Heading

Semoga paham perkenalan mengenai tag h, ayo kita lanjut mengenal tag list pada html.

Tag List

Dalam bahasa HTML kita dapat membuat urutan data atau dibuat menjadi "List".

Tipe list itu sendiri dibagi menjadi 2, yaitu ada Ordered List (<ol>) dan juga ada list yang bernama Unordered List (<ul>).

Seperti tag lainnya ol dan ul membutuhkan tag pembuka dan tag penutup.

Setelah dideklarasikan tipe pengurutannya, selanjutnya adalah mengisi urutannya dengan menggunakan tag List Item (<li>), sebagai tanda per data.

  
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Belajar mengenali Tag List (Kodingnesia)</title>
      </head>
      <body>
        <header>
          Tag List
        </header>

        <!-- Tag Ordered List -->
        <ol>
          <li>Mangga</li>
          <li>Jambu</li>
          <li>Strawberry</li>
        </ol>

        <!-- Tag Unordered List -->
        <ul>
          <li>Mangga</li>
          <li>Jambu</li>
          <li>Strawberry</li>
        </ul>
      </body>
    </html>
  

Seperti contoh diatas itu adalah sebuah code list sederhana, dan berikut ini hasil dari render code diatas :

Image Tag List

Simbol atau angka yang digunakan untuk tanda pengurutan pun dapat kita ganti atau kita hilangkan menggunakan atribut "Type" dan bisa juga kita style di Css.

Sampai sini dulu yaa artikel kita mengenai Tag Header dan Tag List semoga bermanfaat. Sampai jumpa lagi, bagi yang belum melihat artikel kita sebelumnya silahkan kunjungi :

  1. Belajar HTML Dasar #1 - Mengenal HTML
  2. Belajar HTML Dasar #2 - Struktur HTML
  3. Belajar HTML Dasar #3 - Tag HTML