What is <section> element?

I just started to learn html form today and I’m doing exercise that creates form element. But I found that there was new element, which was <section>, and there was no explanation about it. So, can anyone explain to me? Thank you.

Hi there.

<section> is a semantic HTML tag. What I mean by “semantic” is that the tag is intended to convey some information about its purpose through its name.

If you consider the <div> tag, all you know about it is it’s a block of content.

We can use semantic HTML tags in the same way as we would use <div>, but also provide contextual information about the content at the same time.

For example, if we were creating a navigation bar for our site we could use a <nav> element. It behaves like a <div>, and we can style it with CSS just the same, but it makes it obvious that “this is my navigation section”.

Same with <main>; it behaves like a <div>, but you know that it contains the main content for the page.

With <section>, we’re simply marking out that this is a section of our website. If you had, say, a “Welcome” part, an “About Me” part, and a “Contact” part of a single webpage you could wrap each of these into a <section> element.

As well as providing information to someone reading the source, semantic HTML is also helpful for those who use assistive technologies - like a screen reader - because they can interpret the semantic tags the same way. It’s why it’s suggested that you use <strong> over <b>, for example. :slight_smile:

2 Likes

Thank you so much, I understand now! Thank you for giving me amazing answer :slight_smile: