HTM-000070 | The Element
The section element is used for grouping together thematically-related content. That sounds a lot like the div element, which is often used as a generic content container. Which you will learn more about in a future lesson. The difference is that div has no semantic meaning; it doesn’t tell you anything about the content within. The section element, on the other hand, is used explicitly for grouping related content.
You might be able to replace some of your div elements with section elements, but remember to always ask yourself, “Is all of the content related?”
- Each
<section>should be identified, typically by including a heading title <h1>is the most important and<h6>is the least.- A heading element briefly describes the topic of the section it introduces.
- Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.
- If it makes sense to separately syndicate the content of a
<section>element, use an<article>element instead. - Do not use the
<section>element as a generic container; this is what<div>is for, especially when the sectioning is only for styling purposes. - A rule of thumb is that a section should logically appear in the outline of a document.
Click here to view the 1st <section> example
Click here to view the 2nd <section> example
Tasks to Complete
- Complete all available resources found in lesson resources.
- Read all content on this page.
- Follow any links and complete quick review.
- There are no assignments associated with this section of the lesson that must be submitted.
{post_title}
{post_content}
{associated_insight_resource.post_title}
{associated_insight_resource.resource_link}
{associated_insight_resource.insight_type }
