How To Create The Copyright Symbol In Html

HTML is the foundation of most web pages. It's how browsers know to structure content into headings, paragraphs, images, forms, and other elements we expect to see on websites.

Some HTML elements tell browsers only how the elements should appear. Other HTML elements tell browsers how they should appear and what they do. The latter is known as semantic HTML.

One example of a semantic HTML element is the section element. In this post, we'll go over what this element is, how it's different from other container elements, and how to use and hide it.

Download Now: Free Intro Guide to HTML & CSS

What is a section in HTML?

In HTML, a section is a semantic element for creating standalone sections in a web page. These sections should be made up of related content, like contact information.

The section element should only be used if there isn't a more specific element to represent the related content. For example, you wouldn't use a section element to group navigational links together — you'd use the nav element instead. But you would use the section element to divide up a one-page website or a lengthy terms and conditions agreement.

To better understand when to use the section element, let's compare it to another semantic element: the article.

What is the difference between article and section in HTML5?

An article and section element are both semantic elements in HTML5. That means they both convey the meaning of the elements they contain. This helps search engines, browsers, assistive technologies, and other developers understand the different parts of a web page. So when does it make sense to use an article over a section element?

An article should be used to represent a unit of content on a web page that could, in principle, exist on its own or be reused. For example, a blog post, forum post, or magazine or newspaper article should be marked up with the article element.

A section, on the other hand, should be used to represent a section of a document that is related to the same theme but is not independently distributable or reusable. The introduction, news items, and contact information on a homepage, for example, should be marked up with section elements.

Now let's take a closer look at the difference between a section and another container element in HTML: the div.

What is the difference between div and section in HTML5?

A div and section element are both used to divide a web page into sections. But the div is a semantically neutral element, whereas the section element is not.

What does that mean exactly? Basically, a div doesn't describe the content it contains. Other elements like the article, nav, header, and footer clearly describe the content they contain and are known as semantic elements. A section element is also considered a semantic element because it represents a section of a document that is related to the same general concept.

Since a div has no semantic meaning, it is called a generic container element and should only be used to group elements together for styling, or presentational, purposes. Otherwise, you should use a section, or another semantic element, to explain what that part of the page is about to search engines, browsers, assistive technologies, and other developers. This will make your code more accessible and easier to maintain.

How to Use Section in HTML

To use sections in HTML, wrap the related elements you want to group together in section tags. Most sections should contain a heading.

Let's look at a few common examples below.

Homepage Example

In the example below, the body of the HTML doc is split into two sections. Each contains a heading and paragraph.

See the Pen The Section element example by Christina Perricone (@hubspot) on CodePen.

Article Example with Nested Sections

In the example below, an article element contains three nested sections. Each section contains a heading and paragraph.

See the Pen by Christina Perricone (@hubspot) on CodePen.

How to Hide a Section in HTML

Rather than permanently delete a section on your site, you might be interested in hiding it. That way, if you change your mind, you don't have to recreate it from scratch.

There are two options for hiding a section (or any element) in HTML. If you'd like the page to be displayed as if the section element is not there, then use the display property and set it to "none." Here's an example:

See the Pen by Christina Perricone (@hubspot) on CodePen.

If you'd like to hide the section but have it take up the same space in the layout, then use the visibility property and set it to "hidden." Here's an example:

See the Pen by Christina Perricone (@hubspot) on CodePen.

Sectioning Your HTML

The section element can be used to divide up a web page into standalone sections of related content. Using the section element over a generic container element like div can help make your code more accessible and understandable to search engines, browsers, assistive technologies, and other developers.

New Call-to-action

css introduction

Originally published Sep 7, 2021 7:00:00 AM, updated September 07 2021