HTML and CSS Reference
The <section> element is used to identify a thematic grouping of content, which gener-
ally, but not always, includes a heading. The grouping of content within the <section>
element may be generic in nature, but it's useful to identify all of the content as related.
The <section> element is commonly used to break up and provide hierarchy to a page.
Deciding Between <article> , <section> , or <div> Elements
At times it becomes fairly difficult to decide which element— <article> ,
<section> , or <div> —is the best element for the job based on its semantic
meaning. The trick here, as with every semantic decision, is to look at the content.
Both the <article> and <section> elements contribute to a document's
structure and help to outline a document. If the content is being grouped solely for
styling purposes and doesn't provide value to the outline of a document, use the
If the content adds to the document outline and it can be independently redistrib-
uted or syndicated, use the <article> element.
If the content adds to the document outline and represents a thematic group of
content, use the <section> element.
The <aside> element holds content, such as sidebars, inserts, or brief explanations, that
is tangentially related to the content surrounding it. When used within an <article> ele-
ment, for example, the <aside> element may identify content related to the author of the
We may instinctively think of an <aside> element as an element that appears off to the
left or right side of a page. We have to remember, though, that all of the structural elements,
including the <aside> element, are block-level elements and as such will appear on a
new line, occupying the full available width of the page or of the element they are nested
within, also known as their parent element.