A section, on the other hand, is more generic and is used for grouping related content together, even if that content would not make sense on its own. A single article could be broken up into multiple sections, but a section is not necessarily a full article.
element is also used to group content together, but it is a generic container tag that doesn‘t convey any semantic meaning about its contents. Before HTML5 introduced more semantic options, div was commonly overused to create the illusion of structure.
With semantic elements like section now available, div should only be used when there isn‘t a more specific semantic element that applies. Div remains useful for purely stylistic grouping and for compatibility with older browsers.
For example, you might use a div to wrap a section and apply some CSS formatting:
Section Heading
Section content…
Nesting Sections
Sections can be nested inside other sections to create a hierarchy of related content, like an outline. For example:
Types of Content
Text
Paragraph, lists, tables, etc.
Media
Images, video, audio, etc.
When nesting sections, each inner section should relate to the theme of its parent section. Don‘t use nested sections just for styling purposes – that‘s a job for div or other markup.
Styling Sections with CSS
By default, sections have no visual styling and just appear in the normal document flow. You can use CSS to style your sections in any way you want.
Some common ways to visually set off or format sections include:
- Adding a border or background color
- Adjusting padding and margins
- Controlling the width (e.g. max-width for readability)
- Applying a grid or flexbox layout to inner content
- Setting a fixed height or making sections equal height with flexbox
For example:
section {
padding: 20px;
margin-bottom: 30px;
background-color: #f5f5f5;
border: 1px solid #ddd;
max-width: 800px;
}
Hiding Sections
Sometimes you may want to hide a section from view, either temporarily or permanently. There are two main ways to do this with CSS:
display: none
Setting display:none on a section will completely hide it and remove it from the document flow, as if it didn‘t exist on the page. This is useful for content you want to completely disable.
section.inactive {
display: none;
}
visibility: hidden
Setting visibility:hidden will hide the section content visually, but the section will still take up space on the page. This can be used for content you want to temporarily hide without disrupting the layout.
section.hidden {
visibility: hidden;
}
Accessibility Considerations
Using semantic elements like section makes your content more accessible to users with disabilities and assistant technologies like screen readers.
Screen readers allow users to quickly jump between major page sections. Using proper heading levels within sections helps clarify the content hierarchy.
However, be cautious about nesting sections too deeply, as an overly complex hierarchy can become difficult to navigate for assistive tech users. In most cases, aim for a relatively flat section structure.
Also ensure sufficient color contrast between section text and background colors to maintain readability.
Best Practices for Using HTML Sections
To recap, here are some best practices to keep in mind when using the section element in your web pages:
- Use sections to group related content that belongs to a single theme
- Give each section a clear, descriptive heading
- Don‘t use sections for content that would make sense as a complete, standalone article
- Use CSS for styling sections, not just for the sake of dividing up content
- Avoid deeply nested sections that could create accessibility issues
- Consider the semantic meaning of sections in the context of the whole page
By following these guidelines, you can leverage the power of the HTML section element to create web pages that are well-structured, semantically meaningful, and accessible to all users. The section element is a valuable tool in any web developer‘s toolkit.
Related
