Cara membuat list box html

Cara membuat list box html

Contoh:


<html lang="en">
<head>
    <title>Membuat Ordered Listtitle>
head>

<body>
 <h1>Buah Favoritku:h1>
 <ol>
 <li>Jerukli>
 <li>Durianli>
 <li>Pisangli>
 <li>Pepayali>
 <li>Manggali>
 ol>
body>
html>

Hasilnya:

Cara membuat list box html

List diatas diurutkan berdasarkan angka dari


<html lang="en">
<head>
    <title>Membuat Ordered Listtitle>
head>

<body>
    <h1>Buah Favoritku:h1>
    <ol>
        <li>Jerukli>
        <li>Durianli>
        <li>Pisangli>
        <li>Pepayali>
        <li>Manggali>
    ol>
body>
html>
0,

<html lang="en">
<head>
    <title>Membuat Ordered Listtitle>
head>

<body>
    <h1>Buah Favoritku:h1>
    <ol>
        <li>Jerukli>
        <li>Durianli>
        <li>Pisangli>
        <li>Pepayali>
        <li>Manggali>
    ol>
body>
html>
1,

<html lang="en">
<head>
    <title>Membuat Ordered Listtitle>
head>

<body>
    <h1>Buah Favoritku:h1>
    <ol>
        <li>Jerukli>
        <li>Durianli>
        <li>Pisangli>
        <li>Pepayali>
        <li>Manggali>
    ol>
body>
html>
2, sampai

<html lang="en">
<head>
    <title>Membuat Ordered Listtitle>
head>

<body>
    <h1>Buah Favoritku:h1>
    <ol>
        <li>Jerukli>
        <li>Durianli>
        <li>Pisangli>
        <li>Pepayali>
        <li>Manggali>
    ol>
body>
html>
3.

Lalu bagaimana kalau kita ingin menggunakan huruf seperti


<html lang="en">
<head>
    <title>Membuat Ordered Listtitle>
head>

<body>
    <h1>Buah Favoritku:h1>
    <ol>
        <li>Jerukli>
        <li>Durianli>
        <li>Pisangli>
        <li>Pepayali>
        <li>Manggali>
    ol>
body>
html>
4,

<html lang="en">
<head>
    <title>Membuat Ordered Listtitle>
head>

<body>
    <h1>Buah Favoritku:h1>
    <ol>
        <li>Jerukli>
        <li>Durianli>
        <li>Pisangli>
        <li>Pepayali>
        <li>Manggali>
    ol>
body>
html>
5,

<html lang="en">
<head>
    <title>Membuat Ordered Listtitle>
head>

<body>
    <h1>Buah Favoritku:h1>
    <ol>
        <li>Jerukli>
        <li>Durianli>
        <li>Pisangli>
        <li>Pepayali>
        <li>Manggali>
    ol>
body>
html>
6 atau angka romawi seperti

<html lang="en">
<head>
    <title>Membuat Ordered Listtitle>
head>

<body>
    <h1>Buah Favoritku:h1>
    <ol>
        <li>Jerukli>
        <li>Durianli>
        <li>Pisangli>
        <li>Pepayali>
        <li>Manggali>
    ol>
body>
html>
7,

<html lang="en">
<head>
    <title>Membuat Ordered Listtitle>
head>

<body>
    <h1>Buah Favoritku:h1>
    <ol>
        <li>Jerukli>
        <li>Durianli>
        <li>Pisangli>
        <li>Pepayali>
        <li>Manggali>
    ol>
body>
html>
8,

<html lang="en">
<head>
    <title>Membuat Ordered Listtitle>
head>

<body>
    <h1>Buah Favoritku:h1>
    <ol>
        <li>Jerukli>
        <li>Durianli>
        <li>Pisangli>
        <li>Pepayali>
        <li>Manggali>
    ol>
body>
html>
9?

Gampang..

Untuk membuat yang seperti itu, kita bisa menggunakan atribut


<html>

<head>
    <title>Ordered List dengan Atribut Typetitle>
head>

<body>
    <h3>List dengan type alfabeth3>
    <ol type='a'>
        <li>Tutorial List di HTMLli>
        <li>Tutorial Link di HTMLli>
        <li>Tutorial Tabel di HTMLli>
    ol>
    <h3>List dengan type alfabet kapital (huruf besar)h3>
    <ol type='A'>
        <li>Tutorial List di HTMLli>
        <li>Tutorial Link di HTMLli>
        <li>Tutorial Tabel di HTMLli>
    ol>
    <h3>List dengan type romawih3>
    <ol type='i'>
        <li>Tutorial List di HTMLli>
        <li>Tutorial Link di HTMLli>
        <li>Tutorial Tabel di HTMLli>
    ol>
    <h3>List dengan type romawi kapitalh3>
    <ol type='I'>
        <li>Tutorial List di HTMLli>
        <li>Tutorial Link di HTMLli>
        <li>Tutorial Tabel di HTMLli>
    ol>
body>

html>
0 pada tag

<html>

<head>
    <title>Ordered List dengan Atribut Typetitle>
head>

<body>
    <h3>List dengan type alfabeth3>
    <ol type='a'>
        <li>Tutorial List di HTMLli>
        <li>Tutorial Link di HTMLli>
        <li>Tutorial Tabel di HTMLli>
    ol>
    <h3>List dengan type alfabet kapital (huruf besar)h3>
    <ol type='A'>
        <li>Tutorial List di HTMLli>
        <li>Tutorial Link di HTMLli>
        <li>Tutorial Tabel di HTMLli>
    ol>
    <h3>List dengan type romawih3>
    <ol type='i'>
        <li>Tutorial List di HTMLli>
        <li>Tutorial Link di HTMLli>
        <li>Tutorial Tabel di HTMLli>
    ol>
    <h3>List dengan type romawi kapitalh3>
    <ol type='I'>
        <li>Tutorial List di HTMLli>
        <li>Tutorial Link di HTMLli>
        <li>Tutorial Tabel di HTMLli>
    ol>
body>

html>
1 dan berikut ini nilai yang bisa diberikan:

  • 
    <html lang="en">
    <head>
        <title>Membuat Ordered Listtitle>
    head>
    
    <body>
        <h1>Buah Favoritku:h1>
        <ol>
            <li>Jerukli>
            <li>Durianli>
            <li>Pisangli>
            <li>Pepayali>
            <li>Manggali>
        ol>
    body>
    html>
    4 untuk alfabet
    
    <html lang="en">
    <head>
        <title>Membuat Ordered Listtitle>
    head>
    
    <body>
        <h1>Buah Favoritku:h1>
        <ol>
            <li>Jerukli>
            <li>Durianli>
            <li>Pisangli>
            <li>Pepayali>
            <li>Manggali>
        ol>
    body>
    html>
    4,
    
    <html lang="en">
    <head>
        <title>Membuat Ordered Listtitle>
    head>
    
    <body>
        <h1>Buah Favoritku:h1>
        <ol>
            <li>Jerukli>
            <li>Durianli>
            <li>Pisangli>
            <li>Pepayali>
            <li>Manggali>
        ol>
    body>
    html>
    5,
    
    <html lang="en">
    <head>
        <title>Membuat Ordered Listtitle>
    head>
    
    <body>
        <h1>Buah Favoritku:h1>
        <ol>
            <li>Jerukli>
            <li>Durianli>
            <li>Pisangli>
            <li>Pepayali>
            <li>Manggali>
        ol>
    body>
    html>
    6, dan seterusnya;
  • 
    <html>
    
    <head>
        <title>Ordered List dengan Atribut Typetitle>
    head>
    
    <body>
        <h3>List dengan type alfabeth3>
        <ol type='a'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type alfabet kapital (huruf besar)h3>
        <ol type='A'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type romawih3>
        <ol type='i'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type romawi kapitalh3>
        <ol type='I'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
    body>
    
    html>
    6 untuk alfabet
    
    <html>
    
    <head>
        <title>Ordered List dengan Atribut Typetitle>
    head>
    
    <body>
        <h3>List dengan type alfabeth3>
        <ol type='a'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type alfabet kapital (huruf besar)h3>
        <ol type='A'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type romawih3>
        <ol type='i'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type romawi kapitalh3>
        <ol type='I'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
    body>
    
    html>
    6,
    
    <html>
    
    <head>
        <title>Ordered List dengan Atribut Typetitle>
    head>
    
    <body>
        <h3>List dengan type alfabeth3>
        <ol type='a'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type alfabet kapital (huruf besar)h3>
        <ol type='A'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type romawih3>
        <ol type='i'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type romawi kapitalh3>
        <ol type='I'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
    body>
    
    html>
    8,
    
    <html>
    
    <head>
        <title>Ordered List dengan Atribut Typetitle>
    head>
    
    <body>
        <h3>List dengan type alfabeth3>
        <ol type='a'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type alfabet kapital (huruf besar)h3>
        <ol type='A'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type romawih3>
        <ol type='i'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type romawi kapitalh3>
        <ol type='I'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
    body>
    
    html>
    9, dan seterusnya;
  • 
    <html lang="en">
    <head>
        <title>Membuat Unordered Listtitle>
    head>
    
    <body>
        <h1>Bahasa Pemrograman untuk dipelajari:h1>
        <ul>
            <li>Javascriptli>
            <li>PHPli>
            <li>Javali>
            <li>Pythonli>
            <li>Kotlinli>
        ul>
    body>
    html>
    0 untuk angka romwari
    
    <html lang="en">
    <head>
        <title>Membuat Unordered Listtitle>
    head>
    
    <body>
        <h1>Bahasa Pemrograman untuk dipelajari:h1>
        <ul>
            <li>Javascriptli>
            <li>PHPli>
            <li>Javali>
            <li>Pythonli>
            <li>Kotlinli>
        ul>
    body>
    html>
    0,
    
    <html lang="en">
    <head>
        <title>Membuat Unordered Listtitle>
    head>
    
    <body>
        <h1>Bahasa Pemrograman untuk dipelajari:h1>
        <ul>
            <li>Javascriptli>
            <li>PHPli>
            <li>Javali>
            <li>Pythonli>
            <li>Kotlinli>
        ul>
    body>
    html>
    2,
    
    <html lang="en">
    <head>
        <title>Membuat Unordered Listtitle>
    head>
    
    <body>
        <h1>Bahasa Pemrograman untuk dipelajari:h1>
        <ul>
            <li>Javascriptli>
            <li>PHPli>
            <li>Javali>
            <li>Pythonli>
            <li>Kotlinli>
        ul>
    body>
    html>
    3, dan seterusnya;
  • 
    <html lang="en">
    <head>
        <title>Membuat Ordered Listtitle>
    head>
    
    <body>
        <h1>Buah Favoritku:h1>
        <ol>
            <li>Jerukli>
            <li>Durianli>
            <li>Pisangli>
            <li>Pepayali>
            <li>Manggali>
        ol>
    body>
    html>
    7 untuk angka romwari
    
    <html lang="en">
    <head>
        <title>Membuat Ordered Listtitle>
    head>
    
    <body>
        <h1>Buah Favoritku:h1>
        <ol>
            <li>Jerukli>
            <li>Durianli>
            <li>Pisangli>
            <li>Pepayali>
            <li>Manggali>
        ol>
    body>
    html>
    7,
    
    <html lang="en">
    <head>
        <title>Membuat Ordered Listtitle>
    head>
    
    <body>
        <h1>Buah Favoritku:h1>
        <ol>
            <li>Jerukli>
            <li>Durianli>
            <li>Pisangli>
            <li>Pepayali>
            <li>Manggali>
        ol>
    body>
    html>
    8,
    
    <html lang="en">
    <head>
        <title>Membuat Ordered Listtitle>
    head>
    
    <body>
        <h1>Buah Favoritku:h1>
        <ol>
            <li>Jerukli>
            <li>Durianli>
            <li>Pisangli>
            <li>Pepayali>
            <li>Manggali>
        ol>
    body>
    html>
    9, dan seterusnya.

Contoh:


<html>

<head>
    <title>Ordered List dengan Atribut Typetitle>
head>

<body>
    <h3>List dengan type alfabeth3>
    <ol type='a'>
        <li>Tutorial List di HTMLli>
        <li>Tutorial Link di HTMLli>
        <li>Tutorial Tabel di HTMLli>
    ol>
    <h3>List dengan type alfabet kapital (huruf besar)h3>
    <ol type='A'>
        <li>Tutorial List di HTMLli>
        <li>Tutorial Link di HTMLli>
        <li>Tutorial Tabel di HTMLli>
    ol>
    <h3>List dengan type romawih3>
    <ol type='i'>
        <li>Tutorial List di HTMLli>
        <li>Tutorial Link di HTMLli>
        <li>Tutorial Tabel di HTMLli>
    ol>
    <h3>List dengan type romawi kapitalh3>
    <ol type='I'>
        <li>Tutorial List di HTMLli>
        <li>Tutorial Link di HTMLli>
        <li>Tutorial Tabel di HTMLli>
    ol>
body>

html>

Hasilnya:

Cara membuat list box html

2.Unordered List di HTML

Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag


<html lang="en">
<head>
    <title>Membuat Unordered Listtitle>
head>

<body>
    <h1>Bahasa Pemrograman untuk dipelajari:h1>
    <ul>
        <li>Javascriptli>
        <li>PHPli>
        <li>Javali>
        <li>Pythonli>
        <li>Kotlinli>
    ul>
body>
html>
8 dan untuk item-nya dibuat juga dengan tag
  • .

    Cara membuat list box html

    Contoh:

    
    <html lang="en">
    <head>
        <title>Membuat Unordered Listtitle>
    head>
    
    <body>
        <h1>Bahasa Pemrograman untuk dipelajari:h1>
        <ul>
            <li>Javascriptli>
            <li>PHPli>
            <li>Javali>
            <li>Pythonli>
            <li>Kotlinli>
        ul>
    body>
    html>

    Hasilnya:

    Cara membuat list box html

    Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga bisa menggantinya dengan atribut

    
    <html>
    
    <head>
        <title>Ordered List dengan Atribut Typetitle>
    head>
    
    <body>
        <h3>List dengan type alfabeth3>
        <ol type='a'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type alfabet kapital (huruf besar)h3>
        <ol type='A'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type romawih3>
        <ol type='i'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type romawi kapitalh3>
        <ol type='I'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
    body>
    
    html>
    0.

    Berikut ini nilai yang bisa diberikan untuk atribut

    
    <html>
    
    <head>
        <title>Ordered List dengan Atribut Typetitle>
    head>
    
    <body>
        <h3>List dengan type alfabeth3>
        <ol type='a'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type alfabet kapital (huruf besar)h3>
        <ol type='A'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type romawih3>
        <ol type='i'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
        <h3>List dengan type romawi kapitalh3>
        <ol type='I'>
            <li>Tutorial List di HTMLli>
            <li>Tutorial Link di HTMLli>
            <li>Tutorial Tabel di HTMLli>
        ol>
    body>
    
    html>
    0:

    • 
      <html lang="en">
      <head>
          <title>Membuat Unordered Listtitle>
      head>
      
      <body>
          <h1>Bahasa Pemrograman untuk dipelajari:h1>
          <ul type="square">
              <li>Javascriptli>
              <li>PHPli>
              <li>Javali>
              <li>Pythonli>
              <li>Kotlinli>
          ul>
          <h1>Framework untuk dipelajari:h1>
          <ul type="circle">
              <li>Vuejsli>
              <li>Svelteli>
              <li>Reactjsli>
          ul>
          <h1>Tools untuk dipelajari:h1>
          <ul type="none">
              <li>Gulpli>
              <li>NPMli>
              <li>Js Lintli>
          ul>
          <h1>Pelajari juga:h1>
          <ul type="disc">
              <li>JSONli>
              <li>XMLli>
              <li>Markdownli>
          ul>
      body>
      html>
      2 untuk simbol persegi;
    • 
      <html lang="en">
      <head>
          <title>Membuat Unordered Listtitle>
      head>
      
      <body>
          <h1>Bahasa Pemrograman untuk dipelajari:h1>
          <ul type="square">
              <li>Javascriptli>
              <li>PHPli>
              <li>Javali>
              <li>Pythonli>
              <li>Kotlinli>
          ul>
          <h1>Framework untuk dipelajari:h1>
          <ul type="circle">
              <li>Vuejsli>
              <li>Svelteli>
              <li>Reactjsli>
          ul>
          <h1>Tools untuk dipelajari:h1>
          <ul type="none">
              <li>Gulpli>
              <li>NPMli>
              <li>Js Lintli>
          ul>
          <h1>Pelajari juga:h1>
          <ul type="disc">
              <li>JSONli>
              <li>XMLli>
              <li>Markdownli>
          ul>
      body>
      html>
      3 (default) untuk simbol lingkaran disc;
    • 
      <html lang="en">
      <head>
          <title>Membuat Unordered Listtitle>
      head>
      
      <body>
          <h1>Bahasa Pemrograman untuk dipelajari:h1>
          <ul type="square">
              <li>Javascriptli>
              <li>PHPli>
              <li>Javali>
              <li>Pythonli>
              <li>Kotlinli>
          ul>
          <h1>Framework untuk dipelajari:h1>
          <ul type="circle">
              <li>Vuejsli>
              <li>Svelteli>
              <li>Reactjsli>
          ul>
          <h1>Tools untuk dipelajari:h1>
          <ul type="none">
              <li>Gulpli>
              <li>NPMli>
              <li>Js Lintli>
          ul>
          <h1>Pelajari juga:h1>
          <ul type="disc">
              <li>JSONli>
              <li>XMLli>
              <li>Markdownli>
          ul>
      body>
      html>
      4 tidak memakai simbol;
    • 
      <html lang="en">
      <head>
          <title>Membuat Unordered Listtitle>
      head>
      
      <body>
          <h1>Bahasa Pemrograman untuk dipelajari:h1>
          <ul type="square">
              <li>Javascriptli>
              <li>PHPli>
              <li>Javali>
              <li>Pythonli>
              <li>Kotlinli>
          ul>
          <h1>Framework untuk dipelajari:h1>
          <ul type="circle">
              <li>Vuejsli>
              <li>Svelteli>
              <li>Reactjsli>
          ul>
          <h1>Tools untuk dipelajari:h1>
          <ul type="none">
              <li>Gulpli>
              <li>NPMli>
              <li>Js Lintli>
          ul>
          <h1>Pelajari juga:h1>
          <ul type="disc">
              <li>JSONli>
              <li>XMLli>
              <li>Markdownli>
          ul>
      body>
      html>
      5 untuk simbol lingkaran;

    Contoh:

    
    <html lang="en">
    <head>
        <title>Membuat Unordered Listtitle>
    head>
    
    <body>
        <h1>Bahasa Pemrograman untuk dipelajari:h1>
        <ul type="square">
            <li>Javascriptli>
            <li>PHPli>
            <li>Javali>
            <li>Pythonli>
            <li>Kotlinli>
        ul>
        <h1>Framework untuk dipelajari:h1>
        <ul type="circle">
            <li>Vuejsli>
            <li>Svelteli>
            <li>Reactjsli>
        ul>
        <h1>Tools untuk dipelajari:h1>
        <ul type="none">
            <li>Gulpli>
            <li>NPMli>
            <li>Js Lintli>
        ul>
        <h1>Pelajari juga:h1>
        <ul type="disc">
            <li>JSONli>
            <li>XMLli>
            <li>Markdownli>
        ul>
    body>
    html>

    Hasilnya:

    Cara membuat list box html

    Selain menggunakan type, kita juga bisa menggunakan gambar.

    Ini dilakukan dengan style CSS.

    Contohnya:

    
    <html lang="en">
    <head>
        <title>Membuat Unordered Listtitle>
    head>
    
    <body>
        <h1>Bahasa Pemrograman untuk dipelajari:h1>
        <ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico)">
            <li>Javascriptli>
            <li>PHPli>
            <li>Javali>
            <li>Pythonli>
            <li>Kotlinli>
        ul>
    body>
    html>

    Hasilnya:

    Cara membuat list box html

    3. Description List di HTML

    Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.

    Ada tiga tag yang digunakan untuk membuat description list:

    • 
      <html lang="en">
      <head>
          <title>Membuat Unordered Listtitle>
      head>
      
      <body>
          <h1>Bahasa Pemrograman untuk dipelajari:h1>
          <ul type="square">
              <li>Javascriptli>
              <li>PHPli>
              <li>Javali>
              <li>Pythonli>
              <li>Kotlinli>
          ul>
          <h1>Framework untuk dipelajari:h1>
          <ul type="circle">
              <li>Vuejsli>
              <li>Svelteli>
              <li>Reactjsli>
          ul>
          <h1>Tools untuk dipelajari:h1>
          <ul type="none">
              <li>Gulpli>
              <li>NPMli>
              <li>Js Lintli>
          ul>
          <h1>Pelajari juga:h1>
          <ul type="disc">
              <li>JSONli>
              <li>XMLli>
              <li>Markdownli>
          ul>
      body>
      html>
      6 (description list) tag untuk memulai description list;
    • 
      <html lang="en">
      <head>
          <title>Membuat Unordered Listtitle>
      head>
      
      <body>
          <h1>Bahasa Pemrograman untuk dipelajari:h1>
          <ul type="square">
              <li>Javascriptli>
              <li>PHPli>
              <li>Javali>
              <li>Pythonli>
              <li>Kotlinli>
          ul>
          <h1>Framework untuk dipelajari:h1>
          <ul type="circle">
              <li>Vuejsli>
              <li>Svelteli>
              <li>Reactjsli>
          ul>
          <h1>Tools untuk dipelajari:h1>
          <ul type="none">
              <li>Gulpli>
              <li>NPMli>
              <li>Js Lintli>
          ul>
          <h1>Pelajari juga:h1>
          <ul type="disc">
              <li>JSONli>
              <li>XMLli>
              <li>Markdownli>
          ul>
      body>
      html>
      7 (description term) tag untuk membuat kata yang akan dideskripsikan;
    • 
      <html lang="en">
      <head>
          <title>Membuat Unordered Listtitle>
      head>
      
      <body>
          <h1>Bahasa Pemrograman untuk dipelajari:h1>
          <ul type="square">
              <li>Javascriptli>
              <li>PHPli>
              <li>Javali>
              <li>Pythonli>
              <li>Kotlinli>
          ul>
          <h1>Framework untuk dipelajari:h1>
          <ul type="circle">
              <li>Vuejsli>
              <li>Svelteli>
              <li>Reactjsli>
          ul>
          <h1>Tools untuk dipelajari:h1>
          <ul type="none">
              <li>Gulpli>
              <li>NPMli>
              <li>Js Lintli>
          ul>
          <h1>Pelajari juga:h1>
          <ul type="disc">
              <li>JSONli>
              <li>XMLli>
              <li>Markdownli>
          ul>
      body>
      html>
      8 (description description) tag untuk membuat penjelasan dari kata.

    Format penulisannya seperti ini:

    Cara membuat list box html

    Contoh:

    
    <html lang="en">
    
    <head>
        <title>Membuat Description Listtitle>
    head>
    
    <body>
        <h1>Daftar istilah:h1>
        <dl>
            <dt>Kopidt>
            <dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.dd>
            <dt>Kopi Black Magicdt>
            <dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.dd>
            <dt>White Coffeedt>
            <dd>Kopi berwarna putih, kandungan kafeinnya sedikit.dd>
            <dt>Kopi++dt>
            <dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.dd>
        dl>
    body>
    
    html>

    Hasilnya:

    Cara membuat list box html

    List di dalam List (Nested List)

    List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list.

    Apa itu combo box HTML?

    Combo box atau disebut juga dengan drop down list merupakan sebuah kotak yang berisi beberapa opsi. Nantinya, kamu bisa memilih opsi yang telah disiapkan sebelumnya untuk mempermudah pekerjaan.

    Apa itu ul dan li di HTML?

    Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag
      dan untuk item-nya dibuat juga dengan tag
    • . Hasilnya: Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc).

    Apa itu option pada HTML?

    HTML element tag <option> merupakan tag pada HTML yang digunakan untuk menciptakan pilihan dalam bentuk menu drop down. Pilihan yang dapat dipilih oleh pengguna adalah satu.

    Atribut apakah yang digunakan agar dapat memilih lebih dari satu pilihan pada list box?

    Atribut Multiple: Untuk Memilih lebih dari 1 pilihan tag Select. Atribut multiple untuk tag select digunakan untuk memungkinkan user untuk dapat memilih lebih dari 1 nilai. Namun untuk dapat memilih lebih dari 1 nilai, user harus menekan tombol ctrl pada keyboard.