Theory
Theory
Comments

The section tag, which is used for semantic sections

Wouldn’t it be nice to add something other than your introductory text to the main page? Let’s add another section to our template about your skills, since it is currently filled with just placeholder text. Now your main content, meaning content that is enclosed with <main> tags, should consist of two semantic sections: “Welcome” and “Skills”. They need to be separated from each other somehow.

The special tag <section>, which is used to mark major semantic (or “logical”) sections, can help us do that. Use it for content that forms a meaningful thematic group. A name that describes the group’s shared topic or purpose can help you recognise such a section. For example:

<section>
  The “About our company” section Hmm, this is probably a section that contains a description of the company
</section>
<section>
  The “Edit profile” section Aha, this is where I can manage my personal data
</section>

Think of <section> as a chapter in a book: its heading identifies a topic within a larger work. Our main page has similar sections, each with a distinct purpose. A section belongs to the page’s structure; it can still make sense when read separately.

It is useful to learn how to distinguish semantic or logical sections from structural sections. You can give a meaningful single-word name or a complex phrase to a logical section, such as “training program”, “catalog” or “our benefits”.

A purely structural grouping is based on layout rather than a topic. Labels such as “Header”, “Footer” or “Left column” can be clues, but a compound name such as “News and gallery” or “Filters and products” does not decide the issue by itself. Use <section> for a meaningful thematic group of content. Sharing a position or layout alone is not enough.

index.html

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>The website of a beginning coder</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header> Website header </header> <main> Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found interactive courses in HTML and CSS and I have set myself the goal of becoming one. I was even assigned an instructor, Muffin, who won’t let me slack off and will track my progress. My first assignment is to keep a diary and honestly write about all of my accomplishments. </main> <footer> Website footer </footer> </body> </html>

Goalscompleted

Enclose the entire text in <main> in <section> tags.
Add the second section with the text Skills section after the first section.

The section tag, which is used for semantic sections

Comments

Log in

Sign up

Restore access