OL, UL and LI

HTML provides several elements for creating lists. The most common types of lists are ordered lists (<ol>), unordered lists (<ul>), and list items (<li>). Here’s an in-depth explanation of these elements:

Unordered List (<ul>)

An unordered list creates a list of items where the order does not matter. It typically displays items with bullet points. The syntax for an unordered list is:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Key Points:

• <ul>: The container element for an unordered list.

• <li>: Represents a single list item within the list. Multiple <li> elements can be nested inside the <ul> element.

• Default Style: The default bullet style is a solid circle, but this can be changed using CSS.

Example using CSS:

<ul style="list-style-type: square;">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

In the above example, list-style-type: square; changes the bullet points to squares.

Ordered List (<ol>)

An ordered list creates a list of items where the order does matter. Items are typically displayed with numbers. The syntax for an ordered list is:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Key Points:

• <ol>: The container element for an ordered list.

• <li>: Represents a single list item within the list. Multiple <li> elements can be nested inside the <ol> element.

• Default Style: The default numbering is decimal (1, 2, 3, ...), but this can be changed using the type attribute or CSS.

Example with Different Types:

<ol type="A">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

In the above example, type="A" changes the numbering to uppercase letters (A, B, C, ...).

List Item (<li>)

The list item element (<li>) is used within both <ul> and <ol> elements to define each item in the list.

Key Points:

• Can Contain Other HTML: <li> elements can contain other HTML elements, such as text, links, images, or even other lists (nested lists).

• Styling: Individual list items can be styled using CSS to change their appearance.

Example with Nested List:

<ul>
  <li>First item
    <ul>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ul>
  </li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

In the above example, the first item contains a nested unordered list.

Customizing Lists with CSS

Lists can be heavily customized using CSS. Here are some common properties used:

• list-style-type: Changes the bullet or numbering style (e.g., disc, circle, square, decimal, upper-roman, etc.).

• list-style-image: Uses an image as the bullet point.

• list-style-position: Defines whether the bullet is inside or outside the content flow (e.g., inside or outside).

• padding and margin: Adjusts the spacing around list items.

Example with CSS Customization:

<style>
  ul.custom-list {
    list-style-type: none;
    padding-left: 0;
  }

  ul.custom-list li::before {
    content: "\2022"; /* Unicode for bullet */
    color: red;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
  }
</style>

<ul class="custom-list">
  <li>Custom bullet item 1</li>
  <li>Custom bullet item 2</li>
  <li>Custom bullet item 3</li>
</ul>

In the above example, the list uses a custom bullet style, with red bullets created using CSS.

<img> Tags And Attributes

The HTML <img> tag is used to embed images into a webpage. This tag is self-closing, meaning it does not require a closing tag. The <img> tag supports various attributes that control its behavior and appearance. Here’s an in-depth explanation:

The basic syntax is:

<img src="image.jpg" alt="Description of the image">

Required Attributes:

1. src (Source)

• Description: Specifies the URL of the image file.

• Usage: The value can be a relative path (relative to the current page) or an absolute URL (a full web address).

• Importance: Without the src attribute, the browser will not know which image to display.

• Example: it shown above on img basic syntax explanation.

2. alt (Alternative Text)

• Description: Provides alternative text for the image if it cannot be displayed. This text is also used by screen readers to describe the image for visually impaired users and by search engines to understand the content of the image.

• Usage: Should be descriptive and relevant to the image content.

• Example: it again has already been shown on the basic syntax explanation.

Optional Attributes

1. title

• Description: Provides additional information about the image, often displayed as a tooltip when the mouse hovers over the image.

<img src="icon.png" alt="Application Icon" title="This is the app icon">

2. width and height

• Description: Specifies the width and height of the image in pixels or as a percentage of its containing element.

• Usage: Can help control the display size and maintain the aspect ratio of the image.

• NOTE: While setting up width or height, make sure to pick either one of them. Else it will make the image get squished up since the aspect ratio will be messed up.

<!-- Using width -->
<img src="photo.jpg" alt="Landscape Photo" width="600" >
<!-- Or by using height -->
<img src="photo.jpg" alt="Landscape Photo" height="400">

• If you paid attention on the value of the width and height, I did not specify any kinds of values (e.g. px or %), it's because by default HTML takes the value as px's if not specified in the value.

3. srcset and sizes

• Description: Used for responsive images. srcset provides multiple image sources for different screen resolutions or sizes, and sizes specifies the display size for each screen size.

<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, 
small.jpg 320w" sizes="(max-width: 600px) 480px, 
800px" alt="Responsive Image">

• When the device width is 1024w it will load large image, same applies for 640w and 320w images. The max-width makes sure at which pixels it should load which image.

Example of an <img> Tag with Various Attributes

<img src="image.jpg" 
     alt="Descriptive text" 
     title="Tooltip text" 
     width="600" 
     height="400" 
     srcset="image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w" 
     sizes="(max-width: 640px) 320px, (max-width: 1280px) 640px, 1280px" >

TABLE

HTML tables are used to organize and display data in a tabular format, consisting of rows and columns. The primary elements involved in creating a table are <table>, <tr>, <th>, and <td>. Here’s an in-depth explanation of each:

Table Element (<table>)

The <table> element serves as a container for all the table-related elements.

<table>
  <!-- Table rows and cells will go here -->
</table>

Table Row (<tr>)

The <tr> element defines a table row. It contains table cells, which can be either header cells (<th>) or data cells (<td>).

<table>
  <tr>
    <!-- Table headers or data cells will go here -->
  </tr>
</table>

Table Header (<th>)

The <th> element defines a header cell in a table. Header cells are typically displayed in bold and centered by default. They are used to describe the type of data in the columns or rows.

Attributes:

• colspan: Specifies the number of columns a header cell should span.

• rowspan: Specifies the number of rows a header cell should span.

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
</table>

Table Data (<td>)

The <td> element defines a standard data cell in a table. Data cells contain the actual data you want to display.

Attributes:

• colspan: Specifies the number of columns a data cell should span.

• rowspan: Specifies the number of rows a data cell should span.

<table>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

Putting It All Together

A complete table consists of multiple rows, each containing header or data cells.

<table border="1">
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1.00</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>$0.50</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Cherry</td>
    <td>$2.00</td>
    <td>15</td>
  </tr>
</table>

• The <table> element encloses the entire table.

• The first <tr> element contains <th> elements, creating a header row with column titles.

• Subsequent <tr> elements contain <td> elements, creating rows of data.

Advanced Usage

Spanning Multiple Columns or Rows

You can use the colspan and rowspan attributes to make a cell span multiple columns or rows.

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Contact</th>
  </tr>
  <tr>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td>123-456-7890</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>jane@example.com</td>
    <td>987-654-3210</td>
  </tr>
</table>

• The Name header cell spans two rows using rowspan="2".

• The Contact header cell spans two columns using colspan="2".

Styling Tables with CSS

Tables can be styled using CSS to improve their appearance.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  th {
    background-color: #f2f2f2;
    text-align: center;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  tr:hover {
    background-color: #f1f1f1;
  }
</style>

In the CSS I have done:

• Make the table width 100% of the container.

• Collapse the borders between cells.

• Add padding and border to cells.

• Style header cells with a background color and center alignment.

• Apply alternating row colors and hover effects for better readability.

(BONUS) Semantic Table

HTML tables can be structured into three main sections using <thead>, <tbody>, and <tfoot> elements. These elements help organize and group table content for better readability and accessibility. Here’s an in-depth explanation of each:

<thead>: Table Header

The <thead> element is used to group the header content of a table. It typically contains one or more rows of header cells (<th>), which describe the type of data in the columns.

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
</table>

<tbody>: Table Body

The <tbody> element is used to group the main content of the table. It contains one or more rows of data cells (<td>).

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$1.00</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$0.50</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

<tfoot>: Table Footer

The <tfoot> element is used to group the footer content of a table. It is often used for summary or totals rows. Placing the footer at the bottom of the table makes it easier to access for long tables.

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$1.00</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$0.50</td>
      <td>20</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$11.00</td>
      <td>30</td>
    </tr>
  </tfoot>
</table>

Complete Example Using <thead> <tbody> <tfoot>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Table Example</title>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>$1.00</td>
        <td>10</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td>$0.50</td>
        <td>20</td>
      </tr>
      <tr>
        <td>Cherry</td>
        <td>$2.00</td>
        <td>15</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Total</td>
        <td>$3.50</td>
        <td>45</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

---

CSS:

<style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    th {
      background-color: #f2f2f2;
      text-align: center;
    }
    tfoot {
      font-weight: bold;
      background-color: #f9f9f9;
    }
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    tr:hover {
      background-color: #f1f1f1;
    }
  </style>