Utilizing HTML Section Tag

Introduction

In HTML, the <section> tag is used to divide a document into several sections for clarity and distinction. It is a semantic element that can be used for stand-alone sections or nested sections within a document. This lab will guide you through the simple steps to use the <section> tag in an HTML file.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

Add a Basic Section

First, create an index.html file in your preferred code editor. This file will contain the HTML code that we will work with.

Start by adding a basic section using the <section> tag. This can be done as follows:

<section>
  <h1>Section Title</h1>
  <p>Section content goes here.</p>
</section>

In the code above, h1 and p are HTML tags for heading and paragraph, respectively. The h1 tag defines a top-level header for the section and p tag is used to add text content to the section.

Add a Subsection

You can also create a subsection within a section using the nesting of <section> tags. For example:

<section>
  <h1>Section Title</h1>
  <p>Section content goes here.</p>

  <section>
    <h2>Subsection Title</h2>
    <p>Subsection content goes here.</p>
  </section>
</section>

In the code above, we have a section containing another nested section that serves as a subsection. The h2 tag within the nested section defines the header for the subsection, and the p tag adds text content to the subsection.

Styling with CSS

By default, the <section> tag is a block-level element in HTML. You can use CSS to style the <section> element, just like with any other HTML element. Here’s an example:

<style>
  section {
    border: 2px solid black;
    padding: 10px;
    margin-bottom: 20px;
  }
</style>

In the code above, a style tag is used to contain the CSS for the <section> tag. The CSS code adds a border, padding, and margin to the <section> element. You can adjust these properties based on your preferences.

Add More Sections

Finally, you can add more sections to your HTML file as needed. Remember to follow the structure of opening and closing section tags.

<section>
  <h1>Section 1</h1>
  <p>Content goes here.</p>
</section>

<section>
  <h1>Section 2</h1>
  <p>Content goes here.</p>
</section>

<section>
  <h1>Section 3</h1>
  <p>Content goes here.</p>
</section>

Summary

The <section> tag in HTML is a semantic element used for dividing a document into several sections for clarity and distinction. It allows for the creation of standalone sections and nested subsections within a document. With the steps provided in this lab, you can now add <section> tags to your HTML files, customize them with CSS, and improve the organization and readability of your documents.