Day 5: Advanced HTML and Best Practices

Welcome to our lesson on advancedd HTML and Best Practices.

So far, we have explored many HTML content tags, including text formatting tags, list elements, media elements, and form elements.

n today's lesson, we will take things a step further by looking at tabular data with the HTML <table> tag. We will also explore common structural elements such as <main>, <header>,<hgroup>,<aside>, <section>,<nav>,<footer>, <address>, and <article>.

By the end of this lesson, you will:

• Understand the purpose and structure of HTML tables.
• Explore HTML structural elements for better document organization.

1. Tables in HTML

A table in HTML is like a big grid where you can put information in rows and columns, similar to a school timetable or a shopping list. The <table> tag in HTML is used to represent tabular data. Tables are especially useful for displaying data that is organized into rows and columns.

Just like the<ul> and <ol> tages for lists, the <table> tag has some sub-tags to help organize its content:

• <thead>: Groups the header content in a table, usually containing the column headings.
• <tbody>: Groups the body content in a table, which includes the main data.
• <tfoot>: Groups the footer content in a table, often used for summary rows or footnotes.
• <tr>: Defines a row in the table.
• <th>: Defines a header cell in the table, which is typically bold and centered.
• <td>: Defines a standard cell in the table.

The basic structure of a table is define by the <tr> and the <td> tags. The <tr> stands for "table row", It draws a horizontal row like bellow.

Then, the <td> tag is used to cut cell along the raw as columns:

|---------|------------|-----------|-----------|
| Cell1   |   Cell 2   | Cell 3    |  Cell 4   |
|---------|------------|-----------|-----------|

Each vertical line is represented by a paid of <td> and </td>; The following is the same table written in HTML:

<table>
    <tr>
        <td> Cell 1 </td>
        <td> Cell 2 </td>
        <td> Cell 3 </td>
        <td> Cell 4 </td>
    </tr>
  </table>  

This is an example of a table of one raw, and four columns.

It happens that sometimes we get tables that have heading such as a list of product. This list coul have a "Name" column for the products names, a "price" column for their respective prices, and a "quantity" column" for the quantities. The first raw to contain these labels is designated as the table header and set using the <thead> tag. Here is an example:

<table>
  <thead>
      <tr>
          <th> Name </th>
          <th> Price </th>
          <th> Quantity </th>
      </tr>
    </thead>
    <tr>
      <td> Yam  </td>
      <td> $10.00  </td>
      <td> 120  </td>
    </tr>
    <tr>
      <td> Tomatoes  </td>
      <td> $9.00  </td>
      <td> 10  </td>
    </tr>
  </table>

Result:

In this case, the area that will contain the rows of the actual products(the Yam and Tomato rows) represent the body of the table. HTML offers the <tbody> tag to enclose the tables body within:

<table>
  <thead>
      <tr>
          <th> Name </th>
          <th> Price </th>
          <td> Quantity </th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td> Yam  </td>
        <td> $10.00  </td>
        <td> 120  </td>
      </tr>
      <tr>
        <td> Tomatoes  </td>
        <td> $9.00  </td>
        <td> 10  </td>
      </tr>
    </tbody>

  </table>

Result:

So after this, if we decide to close the table with a line of total, that will will become the table's footer, and HTML offers us the <tfoot> to help us represent that.

<table>
  <thead>
      <tr>
          <th> Name </th>
          <th> Price </th>
          <td> Quantity </th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td> Yam  </td>
        <td> $10.00  </td>
        <td> 120  </td>
      </tr>
      <tr>
        <td> Tomatoes  </td>
        <td> $9.00  </td>
        <td> 10  </td>
      </tr>
    </tbody>

    <tfoot>
    <tr>
        <td> TOTAL  </td>
        <td> 130  </td>
        <td> $19.00  </td>
      </tr>
    </tfoot>

  </table>

Result:

2. HTML Structure Elements

HTML5 introduced several new elements to help organize and structure webpages better. These elements make it easier to create well-organized and semantic HTML documents.

1. <header>: Represents introductory content or navigational links, similar to the title page of a book.

2. <nav>: Defines a set of navigation links, like a table of contents.

3. <main>: Represents the main content of the page, excluding repeated content like headers and footers.

4. <section>: Groups related content into sections, similar to chapters in a book.

5. <article>: Represents a self-contained piece of content, like a blog post or news article.

6. <aside>: Contains content that is tangentially related to the surrounding content, like a sidebar.

7. <footer>: Represents the footer of a document or section, typically containing copyright and contact information.

8. <address>: Provides contact information for the author or owner of the document.

9. <hgroup>: Groups multiple headings together, but this tag is deprecated and should generally be avoided.

Let's create an example of a structured web document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Webpage</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>About Us</h2>
            <article>
                <h3>Our Story</h3>
                <p>We started our journey in 2020 with a mission to make the web a better place.</p>
            </article>
            <article>
                <h3>Our Team</h3>
                <p>Meet our amazing team who work hard every day to bring you the best service.</p>
            </article>
        </section>
        <aside>
            <h4>Latest News</h4>
            <p>Check out our latest updates and news in this section.</p>
        </aside>
    </main>
    <footer>
        <address>
            Contact us at <a href="mailto:info@example.com">info@example.com</a>
        </address>
        <p>&copy; 2024 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

In this lesson, you learned how to create tables for organizing data and how to use various HTML structural elements to make your webpages more organized and easier to navigate. By using these elements effectively, you can create well-structured and accessible web content. Happy coding!

3. Assignment 5

To apply your knowledge of advanced HTML techniques, including the use of tables and structural elements, to create a well-organized and semantically correct HTML document.

1. Create an HTML Table:

   • Design an HTML table to display a list of books. The table should include columns for:

     • Book Title
     • Author
     • Genre
     • Price
     • Year Published

   • The first row of the table should be a header row, including appropriate column headings.

   • Populate the table with at least five entries (books).

2. Incorporate Table Sections:

   • Use the <thead>, <tbody>, and <tfoot> tags to organize the table into sections.
   • Add a footer row to display the total number of books listed in the table.

3. Create a Structured Webpage:

   • Design a simple webpage using HTML5 structural elements.
   • Include the following sections:
     • <header>: With a title and a navigation menu containing links to "Home," "About," and "Contact" sections.
     • <main>: Containing a <section> for "About Us" with a brief description and an <article> detailing the history of the website.
     • <aside>: Featuring a sidebar with recent updates or announcements.
     • <footer>: Including contact information and copyright details.

4. Write a Short HTML Document:

   • Combine the table and the structured webpage into a single HTML document.
   • Ensure that the table is included within the <main> section of your webpage.
   • Use semantic HTML5 elements appropriately to enhance the organization and accessibility of the content.

5. Validation and Review:

   • Validate your HTML code using the W3C HTML Validator.
   • Review your document for correct usage of HTML tags, proper nesting, and overall structure.

Deliverables:

1. HTML File: Submit the HTML file containing both the table and the structured webpage.
2. Screenshot (Optional): Provide a screenshot of how the webpage renders in a browser, demonstrating proper layout and organization.