Ini adalah yang penulis pelajari berikutnya untuk menjadi seorang front end web developer. Masih pada materi HTML, lebih tepatnya mempelajari beberapa semantic dalam HTML. Dan semantic yang akan kita pelajari hari ini adalah tentang beberapa list tags yang ada dalam HTML.
Apa yang penulis tulis ini merupakan materi yang disampaikan dalam course online yang terdapat dalam udemy.com dengan judul foundation of front-end web development section ke 3 semantic web materi ke 24 presenting a list of elements: the list tags.
Ada 3 jenis list yang dijelaskan pada video diantaranya ordered list, unordered list dan description list.
Ordered list atau tag <ol> adalah tag dalam HTML yang digunakan untuk membuat list yang beraturan atau ada nomornya. Contoh dari tag <ol> adalah seperti ini
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Berikutnya ada unordered list atau list yang tidak beraturan atau tidak ada nomornya dengan tag HTML <ul>, jadi list tags ini hanya ada semacam titik saja sebelum list item atau isi dari list nya. Contohnya dari tag <ul> adalah sebagai berikut.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Dan yang terakhir ada description list <dl> yang berisi description title <dt> dan description data <dd>. Contoh dari penulisan tag HTML ini adalah sebagai berikut.
<dl>
<dt>Home Number</dt>
<dd>020 000 000</dd>
<dt>Office Number</dt>
<dd>020 111 111</dd>
</dl>
Terakhir untuk script lengkap berikut outputnya bisa dilihat dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Form Page</title>
</head>
<body>
<h2>List Items</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<dl>
<dt>Home Number</dt>
<dd>020 000 000</dd>
<dt>Office Number</dt>
<dd>020 111 111</dd>
</dl>
</body>
</html>
Outputnya adalah seperti ini
0 Komentar