Understanding Divs, Tables, and Comments in HTML

Nikesh · Apr 12, 2025

In this beginner-friendly article, you'll learn how to use three important parts of HTML: <div>, <table>, and HTML comments. These tags help structure your webpage and make your code more readable.

1. What is a div?

The <div> tag is short for "division." It’s used to group HTML elements together. By itself, it doesn't add any visual style, but it’s very useful when styling sections with CSS or organizing content logically.

Code:

<div>
  <h2>This is inside a div</h2>
  <p>Paragraph content grouped using a div.</p>
</div>

2. How to Use HTML Tables

Tables are used to display data in rows and columns. You start with <table>, and then use rows (<tr>) and cells (<td>) or header cells (<th>).

Here’s a basic example of a table with a border:

Code:

<table border="1">
  <tr>
    <th>Item</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Bread</td>
    <td>2</td>
    <td>$4</td>
  </tr>
  <tr>
    <td>Milk</td>
    <td>1</td>
    <td>$2</td>
  </tr>
</table>

Each row goes inside a <tr>, and each column inside it is either <td> (for data) or <th> (for header).

3. Adding Comments in HTML

HTML comments are a great way to add notes or reminders in your code. These won’t appear on the webpage — only in the source code.

Code:

<!-- This is a comment -->
<p>This is a visible paragraph.</p>
<!-- Another comment -->

Comments are helpful when you want to explain parts of your code or hide certain elements temporarily.

4. Full Example: index.html

Here’s how all of this comes together. Save this as index.html and open it in your browser:

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Example with Div, Table and Comments</title>
  </head>
  <body>

    <!-- This is a section using div -->
    <div>
      <h2>Welcome!</h2>
      <p>This section is wrapped inside a div.</p>
    </div>

    <!-- Here is a simple table -->
    <h3>Grocery List</h3>
    <table border="1">
      <tr>
        <th>Item</th>
        <th>Quantity</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>Apples</td>
        <td>5</td>
        <td>$3</td>
      </tr>
      <tr>
        <td>Oranges</td>
        <td>3</td>
        <td>$2.50</td>
      </tr>
    </table>

    <!-- End of content -->
    <p>Thank you for visiting!</p>

  </body>
</html>

Conclusion

- Use <div> to group sections of HTML.
- Use <table> for organized data presentation.
- Use  to explain or hide code.

Practice writing these elements on your own, and you'll be much more confident working with HTML layouts!

Search

Search

Understanding Divs, Tables, and Comments in HTML

Nikesh

Administrator