How to Create a List or List in HTML
In writing activities, sometimes you need to use lists to convey information to readers. The use of lists helps you so that information can be conveyed easily, for example, a list of events, a list of restaurant menus, a list of jobs and so on. To meet these needs, HTML provides some special tags for it.
In this discussion, I will explain about how to create a list in HTML using an ordered list and an unordered list. In short, an ordered list is used to create an ordered list using the tag
- while the unordered list is used to create an unordered list using the tag
- ……
- Latar Belakang
- Rumusan Masalah
- Tujuan Penulisan
- Manfaat Penulisan
- Yunda Andriyani
- Sarah Hafiza
- Ratih Annisa
- Afni Medirti
- Ridho
- Johanes
- Zakaria
- Zain
- Hendra
- Aqil
- Septia
- Anggraeni
- Rahmah
- Sabrina
- Mauludiah
- Aisyah
- Firman
- Arifin
- Andi
- as list items.
In general, the use of unordered lists is indicated by a black circle, circle , and box at the beginning of the list item. Tags
- has several attributes including:
Attribute Function type=”disc” Create a black circle for the item (default if the type attribute is not specified) type=”circle” Make white circle marks for items type=”square” Make checkboxes for items You need to know, by default if you don’t write list type in tag
- then the type of list that will appear is a black circle (disc). The following is an example of writing code and using an unordered list in HTML:
Penggunaan Unordered List Di HTML ICT Project Management
- Manajemen Stakeholder
- Manajemen Biaya
- Manajemen Ruang Lingkup
- Manajemen Waktu
- Lainnya
- Manajemen Kualitas
- Manajemen Pengadaan Barang
After you run the code above in the browser it will appear as shown below:
Similar to ordered lists, to create unordered lists in CSS you can use the list-style-type property but with value different:
Attribute Function list-style-type: disc; Make black circle marks for items list-style-type: circle; Make white circle marks for items list-style-type: square; Make checkboxes for items Here’s an example of using the list-style-type property in CSS to create an unordered list:
Penggunaan properti list-style-type Membuat list atau daftar menggunakan properti list-style-type
- Ridho
- Johanes
- Zakaria
- Zain
- Hendra
- Aqil
- Septia
- Anggraeni
- Rahmah
If you run it in a browser, it will look like this:
C. How to Create a List in a List
Usually we also want to create a list within a list. For how to make it actually easy, just pay close attention to which one is the opening tag and the closing tag. Here’s an example code for creating a list inside a list in HTML:
Membuat List di dalam List Nama Jurusan di SMK Nusa Bangsa
- Teknik Komputer dan Jaringan
- Busana Butik
- Multimedia
- Elektronika
- Lainnya
- Mekatronik
- Otomotif
- RPL
If you run it in a browser, the result will be like this:
That’s how to make a list in HTML along with an explanation of the attributes in it. If you already understand well about this material, please proceed to the material on how to create links in HTML.
“If you’re doing your best, you won’t have any time to worry about failure.” H. Jackson Brown, Jr.
- .
For more details, let’s see the explanation below:
A. Ordered List
An ordered list is a list where the items in it have an order number. Using an ordered list starts with the tag
- and ends with the tag
where between the two tags there is a tag
as list items. Inside tags
- , there are several attributes, namely:
| Attribute | Function |
| type=”A” | Create an ordered list with uppercase letters ( A, B, C, D, ….. ) |
| type=”a” | Create an ordered list with lowercase letters ( a, b, c, d, …. ) |
| type=”I” | Make a list in uppercase Roman letters ( I, II, III, IV, ….. ) |
| type=”i” | Create an ordered list in lowercase roman letters ( i, ii, iii, iv, ……. ) |
| type=”1″ | Create a sequential list with numbers ( 1, 2, 3, 4, …… ) |
| compact | Indicates that the items in the list are short so that the browser displays them in a more compact form (this attribute is not supported in many browsers) |
| start=”n” | Specifies the initial value of the item in the list where n = initial value |
You need to know, by default if you don’t write list type in tag
- then the type of list that will appear in a lift format such as 1, 2, 3, and so on. The following is an example of writing code and using an ordered list:
Penggunaan Ordered List Di HTML Struktur Penulisan Makalah Bagian Pendahuluan
Nama Ketua Setiap Kelompok
After you run the code above in the browser it will appear as shown below:
You can also create an ordered list in CSS by using the list-style-type property as shown below:
| Attribute | Function |
| list-style-type: upper-alpha; | Create an ordered list with uppercase letters ( A, B, C, D, ….. ) |
| list-style-type: lower-alpha; | Create an ordered list with lowercase letters ( a, b, c, d, …. ) |
| list-style-type: upper-roman; | Make a list in uppercase Roman letters ( I, II, III, IV, ….. ) |
| list-style-type: lower-roman; | Create an ordered list in lowercase roman letters ( i, ii, iii, iv, ……. ) |
| list-style-type: decimal; | Create a sequential list with numbers ( 1, 2, 3, 4, …… ) |
Here’s a sample code for using the list-style-type property to create an ordered list:
Penggunaan properti list-style-type Membuat list atau daftar menggunakan properti list-style-type
When run in a browser, it will look like this:
B. Unordered List
An unordered list is a list where the items in it are not given a sequence number, in other words the items appear arbitrary. The use of an unordered list is indicated by the use of the tag
- as prefix and tag
as a suffix and between the two there is a tag
Post a Comment for "How to Create a List or List in HTML"