Categories
Learn HTML

HTML: section tag

HTML: <section> tag

In this series of learning HTML, we will teach you how to use HTML section tag with proper syntax and lots of examples. Let’s start on the HTML section tag.

Description for HTML section tag

The HTML <section> tag is a semantic element that is used to define a section of content within a document. The purpose of the <section> tag is to help organize the content and to provide a clearer structure for both the human reader and search engine bots.

The <section> element can be used to group related content together, such as articles, chapters, or sections of a web page. The content within a <section> element should be thematically related, and it should have a heading that describes the content of the section.

Here is an example of how the <section> tag can be used in HTML:

<body>
<header>
<h1>My Website</h1>
</header>
<nav>
<!-- Navigation links -->
</nav>
<section>
<h2>About Me</h2>
<p>Here is some information about me.</p>
</section>
<section>
<h2>My Projects</h2>
<p>Here is a list of my recent projects.</p>
</section>
<footer>
<!-- Footer content -->
</footer>
</body>

In this example, the <section> element is used to group related content together. The first <section> element contains information about the website owner, and the second <section> element contains a list of recent projects. By using the <section> tag, the content is organized into meaningful sections, which makes it easier for the user to navigate the page and understand the content.

 

Syntax for HTML section  tag

The HTML <section> tag is a semantic tag used to group together related content within a document or webpage. The syntax of the <section> tag is as follows:

<section>
<h2>Section Title</h2>
<p>Some content here...</p>
</section>

In this example, the <section> tag is used to group together a heading and a paragraph of related content. The <section> tag can be used to group any type of content, such as text, images, videos, and other HTML elements.

The <section> tag is often used in conjunction with other semantic tags, such as <article>, <header>, <footer>, and <nav>, to help provide structure and meaning to the content of a webpage.

Note that the <section> tag should not be used to apply styling to the content, but rather to provide structure and meaning to the content. The styling should be applied using CSS.

Global Attributes

The <section> tag is used to define sections of content within an HTML document. It is a semantic element that helps to structure the document and make it more meaningful for both humans and machines.

Some of the global attributes that can be used with the <section> tag are:

  1. class – This attribute is used to specify one or more classes for the section element. Classes are used to apply CSS styles to the element.
  2. id – This attribute is used to specify a unique identifier for the section element. It can be used to create anchors or to target the element with JavaScript.
  3. style – This attribute is used to apply inline styles to the section element. Inline styles take precedence over styles defined in an external stylesheet.
  4. title – This attribute is used to provide additional information about the section element. It is typically displayed as a tooltip when the user hovers over the element.
  5. data-* – This attribute is used to store custom data attributes that can be accessed with JavaScript. The * can be replaced with any name for the custom data attribute.

For example, the following code defines a section element with a class and an id attribute:

<section class=”main-content” id=”section1″>
<h2>Section Title</h2>
<p>Section content goes here.</p>
</section>

 

.

Event Attributes

HTML event attributes allow you to specify JavaScript code to be executed when a specific event occurs on an element. However, it is generally considered a better practice to separate the HTML and JavaScript code by using event listeners in a separate JavaScript file.

The <section> tag does not have any specific event attributes. However, it can inherit event attributes from its parent elements, such as <body>, <html>, or <document>.

Here are some common event attributes that can be used with the parent elements of the <section> tag:

  1. onload – This attribute is used to execute JavaScript code when the page is fully loaded.
  2. onclick – This attribute is used to execute JavaScript code when the element is clicked.
  3. onmouseover – This attribute is used to execute JavaScript code when the mouse pointer is moved over the element.
  4. onmouseout – This attribute is used to execute JavaScript code when the mouse pointer is moved out of the element.
  5. onkeydown – This attribute is used to execute JavaScript code when a key is pressed down while the element has focus.
  6. onkeyup – This attribute is used to execute JavaScript code when a key is released while the element has focus.

For example, the following code executes a JavaScript function when the <body> element is loaded:

<body onload=”myFunction()”>
<section>
<h2>Section Title</h2>
<p>Section content goes here.</p>
</section>
</body>

It is worth noting that using inline event attributes like this is generally considered bad practice, as it can make your code harder to read and maintain. Instead, it’s recommended to use event listeners in a separate JavaScript file.

Other Attributes

In addition to global attributes and event attributes, HTML elements can also have specific attributes that are unique to the element. The <section> tag doesn’t have any unique attributes of its own, but it can inherit and use attributes from its parent elements and other related elements.

Here are some related elements and their attributes that can be used with the <section> tag:

  1. <article> – The <section> tag can be used inside an <article> tag to represent a standalone piece of content. The <article> tag has a cite attribute that can be used to provide a URL that references the source of the article.
  2. <nav> – The <section> tag can be used inside a <nav> tag to represent a section of navigation links. The <nav> tag has a role attribute that can be used to describe the purpose of the navigation.
  3. <aside> – The <section> tag can be used inside an <aside> tag to represent a section of content that is related to the main content but not central to it. The <aside> tag has a role attribute that can be used to describe the purpose of the aside content.
  4. <header> and <footer> – The <section> tag can be used inside <header> and <footer> tags to represent the header and footer of a section of content. The <header> and <footer> tags have a role attribute that can be used to describe the purpose of the header and footer.

Here’s an example of using the <section> tag with related elements:

<article>
<header>
<h1>Article Title</h1>
</header>
<section>
<h2>Section Title</h2>
<p>Section content goes here.</p>
</section>
<footer>
<p>Article footer goes here.</p>
</footer>
</article>

In this example, the <section> tag is used to represent a section of content inside an <article> tag, with a <header> and <footer> to provide additional context for the content.

 

 

Note

Here are some important notes on using the <section> tag in HTML:

  1. The <section> tag is a semantic element that should be used to define sections of content that are thematically related. It should not be used for purely presentational purposes.
  2. The <section> tag can be used in conjunction with other semantic elements, such as <article>, <nav>, and <aside>, to create a well-structured document that is easy to understand and maintain.
  3. The <section> tag does not have any specific attributes or event attributes of its own, but it can inherit and use attributes from its parent and related elements.
  4. The <section> tag can be styled with CSS to create a unique look and feel for each section of content. It is recommended to use classes or IDs to target specific <section> elements for styling purposes.
  5. The <section> tag is supported in all modern browsers and is considered to be a stable and reliable element to use in HTML.

Overall, the <section> tag is a useful element for organizing and structuring content on a web page. By using it appropriately and in conjunction with other semantic elements, you can create a well-organized and easily navigable website that is accessible to all users.

 

Browser Compatibility

The HTML section tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

Example for HTML section tag

We will discuss the HTML section tag below, with some examples of how to use the section tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

 

HTML5 Document

Here’s an example of how you can use the HTML5 <section> tag to create a simple web page:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>My Web Page</title>
<style>
/* Example styles for the <section> tag */
section {
background-color: #f0f0f0;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
}
h2 {
margin-top: 0;
}
</style>
</head>
<body>
<header>
<h1>My Web Page</h1>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in augue vitae nisi rhoncus laoreet. Nam euismod euismod velit, eu lobortis purus finibus id. Morbi eget euismod turpis, et convallis augue. Fusce quis ex massa. Sed ultrices quis sem vel feugiat. Duis vestibulum tortor nulla, quis laoreet nibh bibendum sit amet.</p>
</section>
<section>
<h2>Section 2</h2>
<p>Nulla vel felis lectus. Vivamus nec mauris eu turpis semper molestie a in velit. Sed bibendum turpis at tellus blandit, quis molestie turpis tristique. Aenean efficitur, nisl eu finibus laoreet, enim velit sollicitudin nibh, nec imperdiet purus odio eget leo. Vivamus vel nunc diam. Sed volutpat nisi vel enim rutrum, in maximus dolor tempor.</p>
</section>
<section>
<h2>Section 3</h2>
<p>Donec vitae nibh ut felis tristique iaculis a non sem. Proin non libero non metus euismod fringilla. Duis pellentesque sodales metus, sit amet molestie eros venenatis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent volutpat tellus eget eros faucibus lacinia.</p>
</section>
</main>
<footer>
<p>&copy; 2023 My Web Page</p>
</footer>
</body>
</html>

In this example, we’ve used the <section> tag to divide the content of the web page into three thematic sections. We’ve also used CSS to style the <section> elements with a background color, padding, margin, and border.

Note that we’ve also used other semantic elements, such as <header>, <nav>, <main>, and <footer>, to create a well-structured and accessible web page.

By using semantic elements like <section> appropriately, you can create a website that is easy to understand and maintain, and that provides a good user experience for all visitors.

HTML 4.01 Transitional Document

The HTML 4.01 Transitional doctype does not include the <section> tag as it is a new element introduced in HTML5. However, you can still create sections of content using the older <div> element and apply appropriate styling to achieve a similar effect. Here’s an example:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>My Web Page</title>
<style>
/* Example styles for the <div> tag used as a section */
.section {
background-color: #f0f0f0;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
}
h2 {
margin-top: 0;
}
</style>
</head>
<body>
<div id=”header”>
<h1>My Web Page</h1>
<ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
<div id=”main”>
<div class=”section”>
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in augue vitae nisi rhoncus laoreet. Nam euismod euismod velit, eu lobortis purus finibus id. Morbi eget euismod turpis, et convallis augue. Fusce quis ex massa. Sed ultrices quis sem vel feugiat. Duis vestibulum tortor nulla, quis laoreet nibh bibendum sit amet.</p>
</div>
<div class=”section”>
<h2>Section 2</h2>
<p>Nulla vel felis lectus. Vivamus nec mauris eu turpis semper molestie a in velit. Sed bibendum turpis at tellus blandit, quis molestie turpis tristique. Aenean efficitur, nisl eu finibus laoreet, enim velit sollicitudin nibh, nec imperdiet purus odio eget leo. Vivamus vel nunc diam. Sed volutpat nisi vel enim rutrum, in maximus dolor tempor.</p>
</div>
<div class=”section”>
<h2>Section 3</h2>
<p>Donec vitae nibh ut felis tristique iaculis a non sem. Proin non libero non metus euismod fringilla. Duis pellentesque sodales metus, sit amet molestie eros venenatis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent volutpat tellus eget eros faucibus lacinia.</p>
</div>
</div>
<div id=”footer”>
<p>&copy; 2023 My Web Page</p>
</div>
</body>
</html>

In this example, we’ve used the <div> element with a class of “section” to create three thematic sections of content within the <div> with an ID of “main”. We’ve also used CSS to style the <div> elements with a background color, padding, margin, and border.

 

XHTML 1.0 Transitional Document

XHTML 1.0 Transitional is similar to HTML 4.01 Transitional in that it does not include the <section> tag. However, we can still use the <div> element to create sections of content and apply appropriate styling with CSS. Here’s an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Webpage</title>
</head>
<body>
<section>
<h1>Welcome to my webpage</h1>
<p>This is some introductory text for my webpage.</p>
<h2>Section One</h2>
<p>This is the first section of my webpage.</p>
<h3>Subsection One</h3>
<p>This is the first subsection of section one.</p>
<h3>Subsection Two</h3>
<p>This is the second subsection of section one.</p>
<h2>Section Two</h2>
<p>This is the second section of my webpage.</p>
<h3>Subsection Three</h3>
<p>This is the first subsection of section two.</p>
<h3>Subsection Four</h3>
<p>This is the second subsection of section two.</p>
</section>
</body>
</html>

In this example, the section tag is used to group related content on the webpage. The h1 tag is used to indicate the main heading of the page, and h2 and h3 tags are used for subsections. The p tag is used to represent paragraphs of text.

Note that the XHTML 1.0 Transitional Doctype is used to indicate that the document conforms to the XHTML 1.0 Transitional specification. The meta tag is used to specify the character encoding of the document as UTF-8.

XHTML 1.0 Strict Document

You can not use the <section> tag in XHTML 1.0 Strict.

Here’s an example of an XHTML 1.0 Strict Document using the HTML section tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Webpage</title>
</head>
<body>
<section>
<h1>Welcome to my webpage</h1>
<p>This is some introductory text for my webpage.</p>
<h2>Section One</h2>
<p>This is the first section of my webpage.</p>
<h3>Subsection One</h3>
<p>This is the first subsection of section one.</p>
<h3>Subsection Two</h3>
<p>This is the second subsection of section one.</p>
<h2>Section Two</h2>
<p>This is the second section of my webpage.</p>
<h3>Subsection Three</h3>
<p>This is the first subsection of section two.</p>
<h3>Subsection Four</h3>
<p>This is the second subsection of section two.</p>
</section>
</body>
</html>

In this example, the section tag is used to group related content on the webpage, just like in the previous example. However, this time we are using the XHTML 1.0 Strict Doctype, which means that the document conforms to a stricter set of rules than the Transitional version.

The main difference between the two doctypes is that Strict disallows the use of certain elements and attributes that are allowed in Transitional. In this example, we haven’t used any elements or attributes that are disallowed in Strict, so the document looks pretty much the same as the previous example.

Again, the h1 tag is used to indicate the main heading of the page, and h2 and h3 tags are used for subsections. The p tag is used to represent paragraphs of text. Note that the meta tag is used to specify the character encoding of the document as UTF-8, just like in the previous example.

XHTML 1.1 Document

You can not use the <section> tag in XHTML 1.1.

Here’s an example of an XHTML 1.1 Document using the HTML section tag:

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=utf-8″ />
<title>My Webpage</title>
</head>
<body>
<section>
<h1>Welcome to my webpage</h1>
<p>This is some introductory text for my webpage.</p>
<h2>Section One</h2>
<p>This is the first section of my webpage.</p>
<h3>Subsection One</h3>
<p>This is the first subsection of section one.</p>
<h3>Subsection Two</h3>
<p>This is the second subsection of section one.</p>
<h2>Section Two</h2>
<p>This is the second section of my webpage.</p>
<h3>Subsection Three</h3>
<p>This is the first subsection of section two.</p>
<h3>Subsection Four</h3>
<p>This is the second subsection of section two.</p>
</section>
</body>
</html>

In this example, we are using the XHTML 1.1 Doctype, which is the most recent version of XHTML. The section tag is used to group related content on the webpage, just like in the previous examples.

There are a few differences between XHTML 1.1 and the previous versions. For example, in XHTML 1.1, the img tag must be closed with a slash, like this: <img src="example.png" alt="Example Image" />. Additionally, in XHTML 1.1, the a tag must include an href attribute, even if it’s empty: <a href="#">Link Text</a>.

Another important difference in this example is the meta tag. We are using the content type application/xhtml+xml instead of text/html. This tells the browser that the document is an XHTML document and should be parsed accordingly. This content type is not compatible with older browsers, so it’s important to include a fallback for these browsers if needed.