0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>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.</p>
1
<p>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.</p>
2
<p>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:</p>
2
<p>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:</p>
3
<section> The “About our company” section<i>Hmm, this is probably a section that contains a description of the company</i></section> <section> The “Edit profile” section<i>Aha, this is where I can manage my personal data</i></section><p>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.</p>
3
<section> The “About our company” section<i>Hmm, this is probably a section that contains a description of the company</i></section> <section> The “Edit profile” section<i>Aha, this is where I can manage my personal data</i></section><p>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.</p>
4
<p>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”.</p>
4
<p>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”.</p>
5
<p>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.</p>
5
<p>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.</p>