<section>: The Generic Section element
The <section> HTML element represents a generic standalone section of a document, which doesn’t have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
Try it
Attributes
This element only includes the global attributes.
Usage notes
As mentioned above, <section> is a generic sectioning element, and should only be used if there isn’t a more specific element to represent it. As an example, a navigation menu should be wrapped in a <nav> element, but a list of search results or a map display and its controls don’t have specific elements, and could be put inside a <section> .
Also consider these cases:
- If the contents of the element represent a standalone, atomic unit of content that makes sense syndicated as a standalone piece (e.g. a blog post or blog comment, or a newspaper article), the <article> element would be a better choice.
- If the contents represent useful tangential information that works alongside the main content, but is not directly part of it (like related links, or an author bio), use an <aside> .
- If the contents represent the main content area of a document, use <main> .
- If you are only using the element as a styling wrapper, use a <div> instead.
To reiterate, each <section> should be identified, typically by including a heading (h1 — h6 element) as a child of the <section> element, wherever possible. See below for examples of where you might see a <section> without a heading.
Examples
Simple usage example
Before
Result
After
Result
Using a section without a heading
Circumstances where you might see <section> used without a heading are typically found in web application/UI sections rather than in traditional document structures. In a document, it doesn’t really make any sense to have a separate section of content without a heading to describe its contents. Such headings are useful for all readers, but particularly useful for users of assistive technologies like screen readers, and they are also good for SEO.
Consider however a secondary navigation mechanism. If the global navigation is already wrapped in a <nav> element, you could conceivably wrap a previous/next menu in a <section> :
Or what about some kind of button bar for controlling your app? This might not necessarily want a heading, but it is still a distinct section of the document:
Make sure to use some assistive technology and screen-reader-friendly CSS to hide it, like so:
Result
Depending on the content, including a heading could also be good for SEO, so it is an option to consider.
HTML5
The body element represents the content of the document.
In conforming documents, there is only one body element. The document.body IDL attribute provides scripts with easy access to a document’s body element.
Some DOM operations are defined in terms of «the body element». This refers to a particular element in the DOM, as per the definition of the term, and not any arbitrary body element.
The body element exposes as event handler content attributes a number of the event handlers of the Window object. It also mirrors their event handler IDL attributes.
The onblur , onerror , onfocus , onload , onresize , and onscroll event handlers of the Window object, exposed on the body element, replace the generic event handlers with the same names normally supported by HTML elements.
Thus, for example, a bubbling error event dispatched on a child of the body element of a Document would first trigger the onerror event handler content attributes of that element, then that of the root html element, and only then would it trigger the onerror event handler content attribute on the body element. This is because the event would bubble from the target, to the body , to the html , to the Document , to the Window , and the event handler on the body is watching the Window not the body . A regular event listener attached to the body using addEventListener() , however, would be run when the event bubbled through the body and not when it reaches the Window object.
This page updates an indicator to show whether or not the user is online:
4.3.2 The element
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
Author information associated with an article element (q.v. the address element) does not apply to nested article elements.
When used specifically with content to be redistributed in syndication, the article element is similar in purpose to the entry element in Atom. [ATOM]
When the main content of the page (i.e. excluding footers, headers, navigation blocks, and sidebars) is all one single self-contained composition, the content should be marked up with a main element and the content may also be marked with an article , but it is technically redundant in this case (since it’s self-evident that the page is a single composition, as it is a single document).
This example shows a blog post using the article element, with some schema.org annotations:
Here is that same blog post, but showing some of the comments:
Notice the use of footer to give the information for each comment (such as who wrote it and when): the footer element can appear at the start of its section when appropriate, such as in this case. (Using header in this case wouldn’t be wrong either; it’s mostly a matter of authoring preference.)
4.3.3 The element
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading ( h1 — h6 element) as a child of the section element.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.
Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
In the following example, we see an article (part of a larger Web page) about apples, containing two short sections.
Here is a graduation programme with two sections, one for the list of people graduating, and one for the description of the ceremony. (The markup in this example features an uncommon style sometimes used to minimize the amount of inter-element whitespace.)
In this example, a book author has marked up some sections as chapters and some as appendices, and uses CSS to style the headers in these two classes of section differently. The whole book is wrapped in an article element as part of an even larger document containing other books.
4.3.4 The element
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.
Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).
In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.
Notice the main element being used to wrap the main content of the page. In this case, all content other than the page header and footer.
You can also see microdata annotations in the above example that use the schema.org vocabulary to provide the publication date and other metadata about the blog post.
In the following example, there are two nav elements, one for primary navigation around the site, and one for secondary navigation around the page itself.
A nav element doesn’t have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:
4.3.5 The element
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
It’s not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.
The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.
The following example shows how an aside is used to mark up a pull quote in a longer article.
The following extract shows how aside can be used for blogrolls and other side content on a blog:
4.3.6 The , , , , , and elements
These elements represent headings for their sections.
The semantics and meaning of these elements are defined in the section on headings and sections.
These elements have a given by the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.
h1 – h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the Common idioms without dedicated elements section of the specification.
As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent:
Authors might prefer the former style for its terseness, or the latter style for its convenience in the face of heavy editing; which is best is purely an issue of preferred authoring style.
4.3.7 The element
The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.
When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.
A header element is intended to usually contain the section’s heading (an h1 – h6 element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.
Here are some sample headers. This first one is for a game:
The following snippet shows how the element can be used to mark up a specification’s header:
4.3.8 The element
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.
Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer . Bylines and other information that could be suitable for both a header or a footer can be placed in either (or neither). The primary purpose of these elements is merely to help the author write self-explanatory markup that is easy to maintain and style; they are not intended to impose specific structures on authors.
Footers don’t necessarily have to appear at the end of a section, though they usually do.
When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.
The footer element is not sectioning content; it doesn’t introduce a new section.
Here is a page with two footers, one at the top and one at the bottom, with the same content:
Here is an example which shows the footer element being used both for a site-wide footer and for a section footer.
Some site designs have what is sometimes referred to as «fat footers» — footers that contain a lot of material, including images, links to other articles, links to pages for sending feedback, special offers. in some ways, a whole «front page» in the footer.
This fragment shows the bottom of a page on a site with a «fat footer»:
4.3.9 The element
The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.
For example, a page at the W3C Web site related to HTML might include the following contact information:
The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)
The address element must not contain information other than contact information.
For example, the following is non-conforming use of the address element:
Typically, the address element would be included along with other information in a footer element.
The contact information for a node node is a collection of address elements defined by the first applicable entry from the following list:
If node is an article element If node is a body element
The contact information consists of all the address elements that have node as an ancestor and do not have another body or article element ancestor that is a descendant of node .
If node has an ancestor element that is an article element If node has an ancestor element that is a body element
The contact information of node is the same as the contact information of the nearest article or body element ancestor, whichever is nearest.
The contact information of node is the same as the contact information of the body element of the Document .
There is no contact information for node .
User agents may expose the contact information of a node to the user, or use it for other purposes, such as indexing sections based on the sections’ contact information.
In this example the footer contains contact information and a copyright notice.
The h1 – h6 elements are headings.
The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.
h1 – h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the Common idioms without dedicated elements section of the specification.
Certain elements are said to be , including blockquote and td elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.
- blockquote
- body
- fieldset
- figure
- td
Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created.
For the following fragment:
. the structure would be:
- Foo (heading of explicit body section, containing the «Grunt» paragraph)
- Bar (heading starting implied section, containing a block quote and the «Baz» paragraph)
- Quux (heading starting implied section with no content other than the heading itself)
- Thud (heading of explicit section section)
Notice how the section ends the earlier implicit section so that a later paragraph («Grunt») is back at the top level.
Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section’s nesting level.
Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.
For example, the following is correct:
However, the same document would be more clearly expressed as:
Both of the documents above are semantically identical and would produce the same outline in compliant user agents.
This third example is also semantically identical, and might be easier to maintain (e.g. if sections are often moved around in editing):
This final example would need explicit style rules to be rendered well in legacy browsers. Legacy browsers without CSS support would render all the headings as top-level headings.
4.3.10.1 Creating an outline
There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank ( h1 — h6 ) to convey document structure.
This section defines an algorithm for creating an outline for a sectioning content element or a sectioning root element. It is defined in terms of a walk over the nodes of a DOM tree, in tree order, with each node being visited when it is entered and when it is exited during the walk.
The for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections. A is a container that corresponds to some nodes in the original DOM tree. Each section can have one heading associated with it, and can contain any number of further nested sections. The algorithm for the outline also associates each node in the DOM tree with a particular section and potentially a heading. (The sections in the outline aren’t section elements, though some may correspond to such elements — they are merely conceptual sections.)
The following markup fragment:
. results in the following outline being created for the body node (and thus the entire document):
Section created for body node.
Associated with heading «A».
Also associated with paragraph «B».
Section implied for first h2 element.
Associated with heading «C».
Also associated with paragraph «D».
No nested sections.
Section implied for second h2 element.
Associated with heading «E».
Also associated with paragraph «F».
No nested sections.
The algorithm that must be followed during a walk of a DOM subtree rooted at a sectioning content element or a sectioning root element to determine that element’s outline is as follows:
Walk over the DOM in tree order, starting with the sectioning content element or sectioning root element at the root of the subtree for which an outline is to be created, and trigger the first relevant step below for each element as the walk enters and exits it.
When exiting an element, if that element is the element at the top of the stack
The element being exited is a heading content element or an element with a hidden attribute.
Pop that element from the stack.
If the top of the stack is a heading content element or an element with a hidden attribute
Do nothing. When entering an element with a hidden attribute
Push the element being entered onto the stack. (This causes the algorithm to skip that element and any descendants of the element.)
When entering a sectioning content element
Run these steps:
If current outline target is not null, run these substeps:
Run these steps:
Run these steps:
Run these steps:
The current outline target is the element being exited, and it is the sectioning content element or a sectioning root element at the root of the subtree for which an outline is being generated.
If the current section has no heading, create an implied heading and let that be the heading for the current section .
Skip to the next step in the overall set of steps. (The walk is over.)
When entering a heading content element
If the current section has no heading, let the element being entered be the heading for the current section .
Otherwise, if the element being entered has a rank equal to or higher than the heading of the last section of the outline of the current outline target , or if the heading of the last section of the outline of the current outline target is an implied heading, then create a new section and append it to the outline of the current outline target element, so that this new section is the new last section of that outline. Let current section be that new section. Let the element being entered be the new heading for the current section .
Otherwise, run these substeps:
Heading loop: If the element being entered has a rank lower than the rank of the heading of the candidate section , then create a new section, and append it to candidate section . (This does not change which section is the last section in the outline.) Let current section be this new section. Let the element being entered be the new heading for the current section . Abort these substeps.
Push the element being entered onto the stack. (This causes the algorithm to skip any descendants of the element.)
Recall that h1 has the highest rank, and h6 has the lowest rank.
In addition, whenever the walk exits a node, after doing the steps above, if the node is not associated with a section yet, associate the node with the section current section .
The tree of sections created by the algorithm above, or a proper subset thereof, must be used when generating document outlines, for example when generating tables of contents.
The outline created for the body element of a Document is the outline of the entire document.
When creating an interactive table of contents, entries should jump the user to the relevant sectioning content element, if the section was created for a real element in the original document, or to the relevant heading content element, if the section in the tree was generated for a heading in the above process.
Selecting the first section of the document therefore always takes the user to the top of the document, regardless of where the first heading in the body is to be found.
The of a heading content element associated with a section section is the number of sections that are ancestors of section in the outermost outline that section finds itself in when the outlines of its Document ‘s elements are created, plus 1. The outline depth of a heading content element not associated with a section is 1.
User agents should provide default headings for sections that do not have explicit section headings.
Consider the following snippet:
Although it contains no headings, this snippet has three sections: a document (the body ) with two subsections (a nav and an aside ). A user agent could present the outline as follows:
- Untitled document
- Navigation
- Sidebar
These default headings («Untitled document», «Navigation», «Sidebar») are not specified by this specification, and might vary with the user’s language, the page’s language, the user’s preferences, the user agent implementor’s preferences, etc.
The following JavaScript function shows how the tree walk could be implemented. The root argument is the root of the tree to walk (either a sectioning content element or a sectioning root element), and the enter and exit arguments are callbacks that are called with the nodes as they are entered and exited. [ECMA262]
4.3.10.2 Sample outlines
This section is non-normative.
The following document shows a straight-forward application of the outline algorithm. First, here is the document, which is a book with very short chapters and subsections:
This book would form the following outline:
- The Tax Book
- Earning money
- Getting a job
- Cheap things
- Expensive things
- Poor judgement
Notice that the title element does not participate in the outline.
Here is a similar document, but this time using section elements to get the same effect:
This book would form the same outline:
- The Tax Book
- Earning money
- Getting a job
- Cheap things
- Expensive things
- Poor judgement
A document can contain multiple top-level headings:
This would form the following simple outline consisting of three top-level sections:
- Apples
- Bananas
- Carambola
Effectively, the body element is split into three.
Mixing both the h1 – h6 model and the section / h1 model can lead to some unintuitive results.
Consider for example the following, which is just the previous example but with the contents of the (implied) body wrapped in a section :
The resulting outline would be:
- (untitled page)
- Apples
- Bananas
- Carambola
This result is described as unintuitive because it results in three subsections even though there’s only one section element. Effectively, the section is split into three, just like the implied body element in the previous example.
(In this example, «(untitled page)» is the implied heading for the body element, since it has no explicit heading.)
Headings never rise above other sections. Thus, in the following example, the first h1 does not actually describe the page header; it describes the header for the second half of the page:
The resulting outline would be:
- (untitled page)
- A plea from our caretakers
Thus, when an article element starts with a nav block and only later has its heading, the result is that the nav block is not part of the same section as the rest of the article in the outline. For instance, take this document:
The resulting outline would be:
- Ray’s blog
- Untitled article
- Untitled navigation section
Also worthy of note in this example is that the header and main elements have no effect whatsoever on the document outline.
4.3.11 Usage summary
This section is non-normative.
4.3.11.1 Article or section?
This section is non-normative.
A section forms part of something else. An article is its own thing. But how does one know which is which? Mostly the real answer is «it depends on author intent».
For example, one could imagine a book with a «Granny Smith» chapter that just said «These juicy, green apples make a great filling for apple pies.»; that would be a section because there’d be lots of other chapters on (maybe) other kinds of apples.
On the other hand, one could imagine a tweet or reddit comment or tumblr post or newspaper classified ad that just said «Granny Smith. These juicy, green apples make a great filling for apple pies.»; it would then be article s because that was the whole thing.
A comment on an article is not part of the article on which it is commenting, therefore it is its own article .
HTML: The Living Standard
The body element represents the contents of the document.
In conforming documents, there is only one body element. The document.body IDL attribute provides scripts with easy access to a document’s body element.
The body element exposes as event handler content attributes a number of the event handlers of the Window object. It also mirrors their event handler IDL attributes.
The event handlers of the Window object named by the Window -reflecting body element event handler set, exposed on the body element, replace the generic event handlers with the same names normally supported by HTML elements.
Thus, for example, a bubbling error event dispatched on a child of the body element of a Document would first trigger the onerror event handler content attributes of that element, then that of the root html element, and only then would it trigger the onerror event handler content attribute on the body element. This is because the event would bubble from the target, to the body , to the html , to the Document , to the Window , and the event handler on the body is watching the Window not the body . A regular event listener attached to the body using addEventListener() , however, would be run when the event bubbled through the body and not when it reaches the Window object.
This page updates an indicator to show whether or not the user is online:
4.3.2 The element
Support in all current engines.
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
Author information associated with an article element (q.v. the address element) does not apply to nested article elements.
When used specifically with content to be redistributed in syndication, the article element is similar in purpose to the entry element in Atom. [ATOM]
The schema.org microdata vocabulary can be used to provide the publication date for an article element, using one of the CreativeWork subtypes.
When the main content of the page (i.e. excluding footers, headers, navigation blocks, and sidebars) is all one single self-contained composition, that content may be marked with an article , but it is technically redundant in that case (since it’s self-evident that the page is a single composition, as it is a single document).
This example shows a blog post using the article element, with some schema.org annotations:
Here is that same blog post, but showing some of the comments:
Notice the use of footer to give the information for each comment (such as who wrote it and when): the footer element can appear at the start of its section when appropriate, such as in this case. (Using header in this case wouldn’t be wrong either; it’s mostly a matter of authoring preference.)
In this example, article elements are used to host widgets on a portal page. The widgets are implemented as customized built-in elements in order to get specific styling and scripted behavior.
4.3.3 The element
Support in all current engines.
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A web site’s home page could be split into sections for an introduction, news items, and contact information.
Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
In the following example, we see an article (part of a larger web page) about apples, containing two short sections.
Here is a graduation programme with two sections, one for the list of people graduating, and one for the description of the ceremony. (The markup in this example features an uncommon style sometimes used to minimize the amount of inter-element whitespace.)
In this example, a book author has marked up some sections as chapters and some as appendices, and uses CSS to style the headers in these two classes of section differently.
4.3.4 The element
Support in all current engines.
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).
In the following example, there are two nav elements, one for primary navigation around the site, and one for secondary navigation around the page itself.
In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.
You can also see microdata annotations in the above example that use the schema.org vocabulary to provide the publication date and other metadata about the blog post.
A nav element doesn’t have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:
In this example, nav is used in an email application, to let the user switch folders:
4.3.5 The element
Support in all current engines.
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
It’s not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.
The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.
The following example shows how an aside is used to mark up a pull quote in a longer article.
The following extract shows how aside can be used for blogrolls and other side content on a blog:
4.3.6 The , , , , , and elements
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
These elements represent headings for their sections.
The semantics and meaning of these elements are defined in the section on headings and outlines.
These elements have a heading level given by the number in their name. The heading level corresponds to the levels of nested sections. The h1 element is for a top-level section, h2 for a subsection, h3 for a sub-subsection, and so on.
As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent:
Authors might prefer the former style for its terseness, or the latter style for its additional styling hooks. Which is best is purely an issue of preferred authoring style.
4.3.7 The element
Support in all current engines.
The hgroup element represents a heading and related content. The element may be used to group an h1 – h6 element with one or more p elements containing content representing a subheading, alternative title, or tagline.
Here are some examples of valid headings contained within an hgroup element.
4.3.8 The element
Support in all current engines.
The header element represents a group of introductory or navigational aids.
A header element is intended to usually contain a heading (an h1 – h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.
Here are some sample headers. This first one is for a game:
The following snippet shows how the element can be used to mark up a specification’s header:
The header element is not sectioning content; it doesn’t introduce a new section.
In this example, the page has a page heading given by the h1 element, and two subsections whose headings are given by h2 elements. The content after the header element is still part of the last subsection started in the header element, because the header element doesn’t take part in the outline algorithm.
4.3.9 The element
Support in all current engines.
The footer element represents a footer for its nearest ancestor sectioning content element, or for the body element if there is no such ancestor. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
When the footer element contains entire sections, they represent appendices, indices, long colophons, verbose license agreements, and other such content.
Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer . Bylines and other information that could be suitable for both a header or a footer can be placed in either (or neither). The primary purpose of these elements is merely to help the author write self-explanatory markup that is easy to maintain and style; they are not intended to impose specific structures on authors.
Footers don’t necessarily have to appear at the end of a section, though they usually do.
When there is no ancestor sectioning content element, then it applies to the whole page.
The footer element is not itself sectioning content; it doesn’t introduce a new section.
Here is a page with two footers, one at the top and one at the bottom, with the same content:
Here is an example which shows the footer element being used both for a site-wide footer and for a section footer.
Some site designs have what is sometimes referred to as «fat footers» — footers that contain a lot of material, including images, links to other articles, links to pages for sending feedback, special offers. in some ways, a whole «front page» in the footer.
This fragment shows the bottom of a page on a site with a «fat footer»:
4.3.10 The element
Support in all current engines.
The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.
For example, a page at the W3C web site related to HTML might include the following contact information:
The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)
The address element must not contain information other than contact information.
For example, the following is non-conforming use of the address element:
Typically, the address element would be included along with other information in a footer element.
In this example the footer contains contact information and a copyright notice.
4.3.11 Headings and outlines
h1 – h6 elements have a , which is given by the number in the element’s name.
These elements represent . The lower a heading’s heading level is, the fewer ancestor sections the heading has.
The is all headings in a document, in tree order.
The outline should be used for generating document outlines, for example when generating tables of contents. When creating an interactive table of contents, entries should jump the user to the relevant heading.
If a document has one or more headings, at least a single heading within the outline should have a heading level of 1.
Each heading following another heading lead in the outline must have a heading level that is less than, equal to, or 1 greater than lead ‘s heading level.
The following example is non-conforming:
It could be written as follows and then it would be conforming:
4.3.11.1 Sample outlines
The following markup fragment:
. results in 3 document headings:
<h1>HTML: Living Standard</h1>
<h2>Table of contents</h2> .
A rendered view of the outline might look like:
First, here is a document, which is a book with very short chapters and subsections:
Its outline could be presented as follows:
- The Tax Book
- Earning money
- Getting a job
- Cheap things
- Expensive things
- Poor judgement
Notice that the title element is not a heading.
A document can contain multiple top-level headings:
The document’s outline could be presented as follows:
- Apples
- Bananas
- Carambola
header elements do not influence the outline of a document:
The document’s outline could be presented as follows:
- Ray’s blog
- We’re adopting a child!
The following example is conforming, but not encouraged as it has no heading whose heading level is 1:
The document’s outline could be presented as follows:
-
- Apples
- Bananas
- Carambola
The following example is conforming, but not encouraged as the first heading’s heading level is not 1:
The document’s outline could be presented as follows:
-
- A plea from our caretakers
4.3.11.2 Exposing outlines to users
User agents are encouraged to expose page outlines to users to aid in navigation. This is especially true for non-visual media, e.g. screen readers.
For instance, a user agent could map the arrow keys as follows:
Shift + ← Left Go to previous heading Shift + → Right Go to next heading Shift + ↑ Up Go to next heading whose level is one less than the current heading’s level Shift + ↓ Down Go to next heading whose level is the same as the current heading’s level
4.3.12 Usage summary
4.3.12.1 Article or section?
A section forms part of something else. An article is its own thing. But how does one know which is which? Mostly the real answer is «it depends on author intent».
For example, one could imagine a book with a «Granny Smith» chapter that just said «These juicy, green apples make a great filling for apple pies.»; that would be a section because there’d be lots of other chapters on (maybe) other kinds of apples.
On the other hand, one could imagine a tweet or reddit comment or tumblr post or newspaper classified ad that just said «Granny Smith. These juicy, green apples make a great filling for apple pies.»; it would then be article s because that was the whole thing.
A comment on an article is not part of the article on which it is commenting, therefore it is its own article .
HTML <section> class Attribute
The class attribute assigns one or more classnames to the <section> tag.
Classnames are defined in a stylesheet or in a local <style> element.
Classes, i.e. classnames, are used to style elements.
Example
A class attribute styling a <section> element.
The Night Watch
The Night Watch (Dutch: De Nachtwacht), is a 1642 painting by Rembrandt van Rijn. It is in the collection of the Amsterdam Museum but is prominently displayed in the Rijksmuseum (State Museum) as the best-known painting in its collection. The Night Watch is the most famous Dutch Golden Age painting.
Using class
Classes (i.e. classnames) are used for styling the section element.
Multiple classnames are separated by a space.
JavaScript uses classes to access elements by classname.
Tip: class is a global attribute that can be applied to any HTML element.
Syntax
Values
Value Description classnames One or more space-separated class names. More Examples
A class attribute styling a <section> element.
Clicking the button toggles a classname that adds a rounded border to the section.The Night Watch
The Night Watch (Dutch: De Nachtwacht), is a 1642 painting by Rembrandt van Rijn. It is in the collection of the Amsterdam Museum but is prominently displayed in the Rijksmuseum (State Museum) as the best-known painting in its collection. The Night Watch is the most famous Dutch Golden Age painting.
Code explanation
Two CSS classes are defined in the <style> element.
The class attribute in <section> assigns one classname.
Repeatedly clicking the button toggles another class, toggling the rounded border of the section.
- Earning money
- Untitled article
- Earning money
- Earning money