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. How are you able to tell if a section is semantic? If you can give it a name that describes its content or purpose, then it is semantic for sure. 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>

One good example of how to use <section> is where you divide a book into chapters. After all, a chapter name describes its content. In addition, a single chapter cannot be understood independently of the other ones and taken out of context. The same applies to the content of the main page. The semantic sections consist of page content, but these “sections” cannot be considered by themselves and apart from the rest page without losing their meaning.

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”.

It is harder to name a structural section. The labels that will pop into your head will refer to its position on the page (“Header”, “Footer” or “Left column”) or they will be compound phrases (“News and gallery”, “Filters and products”). If you run into such a section, it means that this section is structural and <section> is not a suitable tag to use for it.

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 even was assigned an instructor, Muffin, who does not allow me to 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