HTML and CSS Reference
In-Depth Information
Section
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.
1.
<section>...</section>
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
<div>
element.
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.
Aside
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
article.
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.
1.
<aside>...</aside>
Search WWH ::
Custom Search