We need the list and table elements to build structured and informative web pages. List is used to organize information in sequential or non-sequential order, while table is used to present data in rows and columns. In this article, we will discuss both elements and how to use them properly in HTML.

What is a List in HTML?

In HTML, lists are used to display information in bullet point form. There are two types of lists that are most commonly used: unordered lists and ordered lists. An unordered list can be defined with the tag <ul>, which stands for unordered list. Each item in the list is defined using the tag <li> (list item). Here is an example of its use.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

The result is a list with bullet points. However, if you want to present information that has an order or steps, then you should use an ordered list with the <ol> tag. Just like <ul>, each item still uses the <li> tag. Here is an example.

<ol>
  <li>Install Code Editor</li>
  <li>Learn HTML Basic in NganggurDev</li>
  <li>Congrats, you're website developer right now</li>
</ol>

Using lists appropriately will improve the readability of the page and help search engines understand the structure of the information we display.

Tables in HTML

Tables are an effective and efficient way to present data in a structured format. HTML provides the <table> element for creating tables and displaying them in a browser. Here is a complete example of its use.

<table>
  <tr>
    <th>Name</th>
    <th>Website</th>
    <th>Job</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Web Developer</td>
    <td>Not Found</td>
  </tr>
</table>

Explanation of the code above.

• <table> opening and closing tags to display a table.
• <tr> is an abbreviation for table row to arrange rows.
• <th> is an abbreviation for table header to create a title for each column.
• <td> is an abbreviation for table data to display data in the table. The above code will generate a table with three columns and one row of data. Tables like this are very effective for presenting information such as student data, product data, schedule data, and so on.

Conclusion

Using lists or tables is not only used to enhance the appearance of content, but also helps visitors and search engines better understand the structure of information.

Thankyou, see you in the next article.