Section element

Hello, students! In this lesson, we will learn about the section element.

Structural elements are HTML elements that provide information about the meaning of the content they contain.

The section element is a top-level structural element that can be used to group related content.

Topics

• What is the section element?
• How to use the section element?
• Code examples

What is the section element?

The section element is a top-level structural element that can be used to group related content.

The section element is usually used to divide the content of a page into smaller sections.

For example, a web page about a product may have a section for product information, a section for customer reviews, and a section for frequently asked questions.

How to use the section element?

To use the section element, simply wrap it around the content you want to group.

Here is an example of code to use the section element:

<section>
  <h2>Product Information</h2>
  <p>This is the content about the product.</p>
</section>

This code will create a section with a title and a paragraph.

Code examples

Here are some code examples to use the section element:

<section>
  <h2>Product Information</h2>
  <p>This is the content about the product.</p>
  <img src="image.jpg" alt="Image">
</section>

<section>
  <h2>Customer Reviews</h2>
  <ul>
    <li>Customer 1: "The product is great!"</li>
    <li>Customer 2: "The product is very useful."</li>
    <li>Customer 3: "The product is a bit expensive."</li>
  </ul>
</section>

<section>
  <h2>Frequently Asked Questions</h2>
  <ul>
    <li>Question 1: "How to use the product?"</li>
    <li>Question 2: "Where can I buy the product?"</li>
    <li>Question 3: "Is the product covered by warranty?"</li>
  </ul>
</section>

These codes will create three sections with titles and relevant content.

Exercises

• Create a web page with three sections: product information, customer reviews, and frequently asked questions.
• Include relevant content in each section.
• Save the document and open it in a browser.

Observe how the browser displays the page.

Good luck!

Conclusion

The section element is a useful tool for grouping related content.

Understanding how to use the section element is essential for creating well-structured and informative web pages.

Ready to learn more?

In the next topic, we will learn about the aside element.