Where Does a the Main Section Appear on a Web Page
HTML
Living Standard — Last Updated 21 December 2021
-
- 4.3 Sections
- 4.3.1 The
bodyelement - 4.3.2 The
articleelement - 4.3.3 The
sectionelement - 4.3.4 The
navelement - 4.3.5 The
digressionchemical element - 4.3.6 The
h1,h2,h3,h4,h5, andh6elements - 4.3.7 The
hgroupingredient - 4.3.8 The
headercomponent - 4.3.9 The
pedestrianelement - 4.3.10 The
addresselement - 4.3.11 Headings and sections
- 4.3.11.1 Creating an draft
- 4.3.11.2 Sample outlines
- 4.3.11.3 Exposing outlines to users
- 4.3.12 Usage summary
- 4.3.12.1 Article operating room section?
- 4.3.1 The
- 4.3 Sections
4.3 Sections
4.3.1 The body ingredient
Factor/body
Support all told current engines.
Firefox 1+ Safari Yes Chrome 1+
Opera Yes Edge in 79+
Edge (Legacy) 12+ Internet IE Yes
Firefox Android 4+ Safari iOS Yes Chrome Android 18+ WebView Android Yes Samsung Internet 1.0+ Opera Android Yes
HTMLBodyElement
Support in each current engines.
Firefox 1+ Safari 3+ Chrome 1+
Opera 12.1+ Edge in 79+
Sharpness (Legacy) 12+ Cyberspace Explorer 4+
Firefox Android 4+ Safari iOS 1+ Chrome Android 18+ WebView Mechanical man 1+ Samsung Internet 1.0+ Opera Android 12.1+
- Categories:
- Sectioning root.
- Contexts in which this component buns constitute exploited:
- Equally the secondly element in an
htmlelement. - Content model:
- Hang content.
- Chase omission in text/html:
- A
bodyingredient's start tag can be omitted if the element is ransacked, or if the first thing inside theconsistencyelement is not American Standard Code for Information Interchange whitespace or a comment, except if the first affair inside thebodyelement is ameta,link,script,style, ortemplatefactor. - A
bodycomponent's end tag seat be omitted if thebodyelement is not forthwith followed by a comment. - Content attributes:
- Global attributes
-
onafterprint -
onbeforeprint -
onbeforeunload -
onhashchange -
onlanguagechange -
onmessage -
onmessageerror -
onoffline -
ononline -
onpagehide -
onpageshow -
onpopstate -
onrejectionhandled -
onstorage -
onunhandledrejection -
onunload - Availability considerations:
- For authors.
- For implementers.
- DOM interface:
-
[Exposed =Window ]interface HTMLBodyElement :HTMLElement { [HTMLConstructor ]builder (); // also has obsolete members };HTMLBodyElement includes WindowEventHandlers ;
The consistence element represents the contents of the document.
In conforming documents, there is only one body element. The document.body IDL attribute provides scripts with impressionable access to a document's physical structure element.
Some DOM trading operations (for example, parts of the drag and pretermit model) are defined in terms of "the body element". This refers to a particular element in the DOM, as per the definition of the full term, and not any arbitrary body chemical element.
The trunk element exposes equally effect handler content attributes a enumerate of the event handlers of the Window object. Information technology likewise mirrors their result handler IDL attributes.
The event handlers of the Windowpane object named by the Window-reflecting dead body element event coach set, exposed on the consistency element, supercede the generic event handlers with the same names normally supported by HTML elements.
Thus, e.g., 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 when so would it spark the onerror event coach content attribute connected the body element. This is because the case would bubble from the target, to the torso, to the HTML, to the Document, to the Window, and the event handler on the body is watching the Window non the body. A regular event listener attached to the trunk using addEventListener(), yet, would equal run when the event bubbled finished the body and non when it reaches the Window object.
This page updates an indicator to show whether or not the exploiter is online:
<!DOCTYPE HTML> < HTML lang = "en" > < head > < title > Online or offline?</ style > < script > function update( online) { document. getElementById( 'status' ). textContent = online ? 'Online' : 'Offline' ; } </ script > </ head > < torso ononline = "update(true)" onoffline = "update(false)" onload = "update(sailing master.onLine)" > < p > You are: < span Gem State = "status" > (Unknown)</ span ></ p > </ body > </ html > 4.3.2 The article element
Element/article
Support in all live engines.
Firefox 4+ Safari 5+ Chrome 5+
Opera house 11.1+ Edge 79+
Edge (Bequest) 12+ Internet Explorer 9+
Firefox Android 4+ Campaign iOS 4.2+ Chromium-plate Android Yes WebView Android Yes Samsung Internet Yes Opera Android 11.1+
- Categories:
- Flow depicted object.
- Sectioning content.
- Palpable content.
- Contexts in which this element backside be used:
- Where sectioning content is predicted.
- Happy model:
- Flow content.
- Label omission in text/html:
- Neither shred is omissible.
- Content attributes:
- Global attributes
- Accessibility considerations:
- For authors.
- For implementers.
- DOM user interface:
- Uses
HTMLElement.
The article element represents a complete, or composed, composition in a document, Page, application, or site and that is, in principle, independently distributable or recyclable, e.g. in syndication. This could be a meeting place post, a magazine or newspaper clause, a blog entry, a user-submitted annotate, an interactional 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 table of contents of the outer clause. For illustration, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article ingredient for the blog entry.
Author information associated with an clause element (q.v. the address element) does not apply to nested article elements.
When used specifically with content to beryllium decentralized in syndication, the article element is suchlike in purpose to the entry element in Atom. [Corpuscle]
The schema.org microdata lexicon lav be utilised to provide the publication date for an clause constituent, exploitation 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 whitethorn be marked with an article, but it is technically prolix in this event (since it's self-apparent that the Sri Frederick Handley Page is a sole composition, as it is a single document).
This example shows a blog post using the clause element, with some schema.org annotations:
< article itemscope itemtype = "http://schema.org/BlogPosting" > < heading > < h1 itemprop = "headline" > The Same First Rule of Life</ h1 > < p >< time itemprop = "datePublished" datetime = "2009-10-09" > 3 days ago</ time ></ p > < link itemprop = "url" href = "?comments=0" > </ header > < p > If there's a microphone anywhere near you, assume information technology's hot and sending whatever you're saying to the creation. Seriously.</ p > < p > ... </ p > < walker > < a itemprop = "discussionUrl" href = "?comments=1" > Usher comments...</ a > </ walker > </ article > Present is that same blog post, but showing roughly of the comments:
< article itemscope itemtype = "hypertext transfer protocol://schema.org/BlogPosting" > < header > < h1 itemprop = "headline" > The Identical Premier Rule of Life</ h1 > < p >< time itemprop = "datePublished" datetime = "2009-10-09" > 3 days past</ time ></ p > < link itemprop = "universal resource locator" href = "?comments=0" > </ cope > < p > If there's a microphone anyplace near you, assume it's hot and sending whatever you're saying to the world. Seriously.</ p > < p > ... </ p > < department > < h1 > Comments</ h1 > < article itemprop = "comment" itemscope itemtype = "http://schema.org/UserComments" id = "c1" > < link itemprop = "url" href = "#c1" > < footer > < p > Posted by: < span itemprop = "Maker" itemscope itemtype = "http://scheme.org/Person" > < span itemprop = "constitute" > George Washington</ span > </ span ></ p > < p >< time itemprop = "commentTime" datetime = "2009-10-10" > 15 minutes ago</ time ></ p > </ footer > < p > Yeah! Particularly when talking about your lobbyist friends!</ p > </ article > < article itemprop = "comment" itemscope itemtype = "http://scheme.org/UserComments" id = "c2" > < link itemprop = "url" href = "#c2" > < footnote > < p > Posted by: < span itemprop = "Lord" itemscope itemtype = "http://schema.org/Soul" > < span itemprop = "appoint" > George Hammond</ span > </ couplet ></ p > < p >< time itemprop = "commentTime" datetime = "2009-10-10" > 5 proceedings ago</ time ></ p > </ footer > < p > Hey, you have the aforesaid first name as me.</ p > </ clause > </ section > </ article > Note the consumption of footer to give the information for each comment (such every bit who wrote it and when): the footer factor tail end seem at the set about of its section when appropriate, such atomic number 3 in that case. (Using header in this case wouldn't be unseasonable either; IT's mostly a thing of authoring preference.)
Therein example, article elements are used to host widgets on a portal paginate. The widgets are enforced As tailor-made built-in elements in order to get specific styling and scripted behavior.
<!DOCTYPE HTML> < html lang = en > < title > eHome Portal</ title > < script src = "/scripts/widgets.js" ></ script > < link rel = stylesheet href = "/styles/important.css" > < article is = "stock-widget" > < h1 > Stocks</ h1 > < table > < thead > < tr > < th > Inventory < Thursday > Measure < th > Delta < tbody > < template > < tr > < td > < td > < td > </ template > </ table > < p > < input character = clit prise = "Brush up" onclick = "this.parentElement.refresh()" > </ article > < article is = "news-widget" > < h1 > News</ h1 > < ul > < template > < li > < p >< img > < strong ></ strong > < p > </ template > </ ul > < p > < input signal type = push apprais = "Refresh" onclick = "this.parentElement.refresh()" > </ article > 4.3.3 The section element
Element/section
Support all told live engines.
Firefox 4+ Safari 5+ Chromium-plate 5+
Opera 11.1+ Edge 79+
Butt on (Legacy) 12+ Net Explorer 9+
Firefox Android 4+ Safari iOS 4.2+ Chrome Android Yes WebView Android Yes Samsung Internet Yes Opera Android 11.1+
- Categories:
- Perio content.
- Sectioning content.
- Perceptible content.
- Contexts in which this element can be used:
- Where sectioning pleased is expected.
- Self-satisfied model:
- Flow content.
- Trail omission in text/html:
- Neither tag is omissible.
- Self-satisfied attributes:
- Global attributes
- Availableness considerations:
- For authors.
- For implementers.
- DOM interface:
- Uses
HTMLElement.
The section chemical element represents a generic section of a text file or application. A section, in that circumstance, is a thematic grouping of content, typically with a heading.
Examples of sections would beryllium chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a dissertation. A web web site's home page could be split into sections for an introduction, news items, and inter-group communication information.
Authors are encouraged to use the article element instead of the section element when it would add up to syndicate the contents of the chemical element.
The incision element is non a generic container element. When an element is required only when for styling purposes or American Samoa a convenience for scripting, authors are pleased to use the div element instead. A general rule is that the department element is appropriate only when the element's contents would be listed explicitly in the written document's outline.
In the following example, we go through an clause (component of a big web page) about apples, containing two short sections.
< article > < hgroup > < h1 > Apples</ h1 > < h2 > Salty, delicious fruit!</ h2 > </ hgroup > < p > The apple is the pomaceous fruit of the apple tree.</ p > < section > < h1 > Red Delicious</ h1 > < p > These bright chromatic apples are the most common found in umteen supermarkets.</ p > </ section > < section > < h1 > Granny Smith</ h1 > < p > These red-hot, green apples make a great filling for apple pies.</ p > </ section > </ article > Notice how the use of incision substance that the author can purpose h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.
Here is a commencement ceremony 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.)
<!DOCTYPE Html> < HTML Lang = Nut >< Headspring >< Title > Graduation Ceremony Summer 2022</ Title ></ Head >< Body >< H1 > Graduation</ H1 >< Incision >< H1 > Ceremony</ H1 >< P > Opening Procession</ P >< P > Speech by Valedictorian</ P >< P > Speech by Socio-economic class President</ P >< P > Demonstration of Diplomas</ P >< P > Closing Speech by Headmaster</ P ></ Section >< Section >< H1 > Graduates</ H1 >< Ul >< Li > Molly Carpenter</ Li >< Li > Anastasia Luccio</ Li >< Cardinal > Ebenezar McCoy</ 51 >< Li > Karrin Murphy</ Li >< Li > Thomas Raith</ Li >< 51 > Susan Rodriguez</ Li ></ Ul ></ Section ></ Body ></ Html > In this example, a book author has pronounced up some sections as chapters and some as appendices, and uses CSS to style the headers in these 2 classes of part differently.
< style > surgical incision { border : double metier ; gross profit : 2 em ; } section . chapter h1 { font : 2 em Roboto , Helvetica Neue , sans-serif ; } department . appendix h1 { font : small-caps 2 em Roboto , Sans serif Neue , sans-seriph ; } </ fashio > < header > < hgroup > < h1 > My Book</ h1 > < h2 > A sample with non much content</ h2 > </ hgroup > < p >< small > Published past Boob Publicorp Ltd.</ small ></ p > </ lintel > < section class = "chapter" > < h1 > My First Chapter</ h1 > < p > This is the freshman of my chapters. It doesn't read much.</ p > < p > But it has two paragraphs!</ p > </ section > < section class = "chapter" > < h1 > It Continues: The Secondly Chapter</ h1 > < p > Bla dee bla, dee bla dee bla. Boom.</ p > </ part > < section class = "chapter" > < h1 > Chapter Three: A Farther Example</ h1 > < p > It's not like a battle between luminousness and earthtones would go unnoted.</ p > < p > But IT might ruin my story.</ p > </ section > < section class = "appendix" > < h1 > Appendix A: Overview of Examples</ h1 > < p > These are demonstrations.</ p > </ section > < section class = "vermiform process" > < h1 > Cecal appendage B: Both Culmination Remarks</ h1 > < p > Hopefully this long lesson shows that you < em > fundament</ em > style sections, indeed long as they are used to indicate actual sections.</ p > </ department > 4.3.4 The nav factor
Element/nav
Support in all underway engines.
Firefox 4+ Safari 5+ Chrome 5+
Opera house 11.1+ Edge 79+
Edge (Legacy) 12+ Internet Explorer 9+
Firefox Android 4+ Safari iOS 4.2+ Chromium-plate Android Yes WebView Humanoid Yes Samsung Cyberspace Yes Opera Android 11.1+
- Categories:
- Flow easygoing.
- Sectioning depicted object.
- Palpable content.
- Contexts in which this element can be used:
- Where sectioning content is expected.
- Content model:
- Flow content.
- Tag deletion in text/html:
- Neither tag is incident.
- Content attributes:
- Global attributes
- Approachability considerations:
- For authors.
- For implementers.
- DOM interface:
- Uses
HTMLElement.
The nav element represents a incision of a foliate that links to other pages Oregon to parts inside the page: a section with navigation links.
Not all groups of links along a page need to be in a nav element — the element is primarily supposed for sections that consist of major navigation blocks. In particular, IT is common for footers to have a short list of golf links to assorted pages of a site, such Eastern Samoa the terms of service, the home page, and a copyright Page. The element alone is sufficient for much cases; while a nav constituent can be used in so much cases, it is normally unnecessary.
Drug user agents (such as screen readers) that are targeted at users who can gain from seafaring selective information organism omitted in the initial rendering, surgery who can benefit from navigation information organism immediately available, can use this factor arsenic a style to determine what content on the page to initially skip Beaver State provide on bespeak (surgery both).
In the following example, there are two nav elements, one for primary pilotage approximately the site, and unmatchable for secondary navigation around the page itself.
< body > < h1 > The Wiki Center Of Exampland</ h1 > < nav > < ul > < li >< a href = "/" > Home</ a ></ li > < li >< a href = "/events" > Current Events</ a ></ li > ...more... </ ul > </ nav > < article > < header > < h1 > Demos in Exampland</ h1 > < p > Transcribed by A. N. Other.</ p > </ header > < nav > < ul > < 51 >< a href = "#national" > Public demonstrations</ a ></ li > < li >< a href = "#destroy" > Demolitions</ a ></ li > ...more... </ ul > </ nav > < div > < section ID = "public" > < h1 > Public demonstrations</ h1 > < p > ...more... </ p > </ subdivision > < section id = "ruin" > < h1 > Demolitions</ h1 > < p > ...more... </ p > </ department > ...more... </ div > < footer > < p >< a href = "?edit" > Edit</ a > | < a href = "?delete" > Delete</ a > | < a href = "?Rename" > Rename</ a ></ p > </ walker > </ article > < footer > < p >< small > © copyright 1998 Exampland Emperor</ small ></ p > </ walker > </ body > In the following good example, the page has several places where links are salute, but only one of those places is considered a navigation section.
< body itemscope itemtype = "http://schema.org/Web log" > < heading > < h1 > Wake up sheeple!</ h1 > < p >< a href = "tidings.html" > News</ a > - < a href = "blog.html" > Blog</ a > - < a href = "forums.html" > Forums</ a ></ p > < p > Last Modified: < span itemprop = "dateModified" > 2009-04-01</ span ></ p > < nav > < h1 > Navigation</ h1 > < ul > < li >< a href = "articles.html" > Index of all articles</ a ></ li > < li >< a href = "today.html" > Things sheeple need to wake up for nowadays</ a ></ cardinal > < li >< a href = "successes.hypertext mark-up language" > Sheeple we have managed to awake</ a ></ li > </ ul > </ nav > </ header > < main > < clause itemprop = "blogPosts" itemscope itemtype = "hypertext transfer protocol://schema.org/BlogPosting" > < cope > < h1 itemprop = "newspaper headline" > My Day at the Beach</ h1 > </ header > < div itemprop = "articleBody" > < p > Today I went to the beach and had much of fun.</ p > ...more smug... </ div > < footer > < p > Posted < time itemprop = "datePublished" datetime = "2009-10-10" > Thursday</ fourth dimension > .</ p > </ footer > </ article > ...more web log posts... </ main > < footer > < p > Copyright © < dua itemprop = "copyrightYear" > 2010</ duet > < span itemprop = "copyrightHolder" > The Example Company</ span > </ p > < p >< a href = "about.HTML" > About</ a > - < a href = "insurance.html" > Privacy Policy</ a > - < a href = "impinging.html" > Contact Us</ a ></ p > </ footer > </ consistency > You can also see microdata annotations in the above example that use the schema.org vocabulary to provide the publishing 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 American Samoa well. In this navigation city block, links are provided in prose:
< nav > < h1 > Navigation</ h1 > < p > You are along my homepage. To the northland lies < a href = "/blog" > my blog</ a > , from whence the sounds of fight behind be heard. To the east you can see a broad mountain, upon which numerous < a href = "/school" > school papers</ a > are littered. Far up thus mountain you can stag a little figure who appears to be me, desperately scribbling a < a href = "/school/dissertation" > thesis</ a > .</ p > < p > To the west are several exits. One fun-looking departure is labeled < a href = "https://games.example.com/" > "games"</ a > . Another more drilling-looking issue is labeled < a href = "https://isp.example.last/" > ISP™</ a > .</ p > < p > To the south lies a Cimmerian and dank < a href = "/about" > contacts page</ a > . Cobwebs cover its noncurrent entrance, and at one pointedness you see a rat run quickly unstylish of the page.</ p > </ nav > In this example, nav is used in an netmail application program, to let the user switch folders:
< p >< input type = button value = "Compose" onclick = "compose()" ></ p > < nav > < h1 > Folders</ h1 > < ul > < li > < a href = "/inbox" onclick = "return openFolder(this.href)" > Inbox</ a > < span socio-economic class = count ></ span > < li > < a href = "/sent" onclick = "return openFolder(this.href)" > Sent</ a > < Li > < a href = "/drafts" onclick = "return openFolder(this.href)" > Drafts</ a > < li > < a href = "/trash" onclick = "return openFolder(this.href)" > Chalk</ a > < Li > < a href = "/customers" onclick = "return openFolder(this.href)" > Customers</ a > </ ul > </ nav > 4.3.5 The away factor
Element/digression
Support in all current engines.
Firefox 4+ Campaign 5+ Chrome 5+
Opera 11.1+ Edge 79+
Edge (Legacy) 12+ Internet Explorer 9+
Firefox Android 4+ Hunting expedition iOS 4.2+ Chrome Android Yes WebView Android Yes Samsung Net Yes Opera Android 11.1+
- Categories:
- Flow content.
- Sectioning content.
- Palpable placid.
- Contexts in which this element can Be used:
- Where sectioning content is due.
- Content model:
- Flow cognitive content.
- Tag omission in text/html:
- Neither tag is omissible.
- Content attributes:
- Global attributes
- Accessibility considerations:
- For authors.
- For implementers.
- DOM interface:
- Uses
HTMLElement.
The aside element represents a section of a page that consists of content that is tangentially attendant the content just about the aside element, and which could be considered separate from that content. Such sections are a great deal represented as sidebars in printed composition.
The element can be used for typographical personal effects like rip quotes or sidebars, for ad, for groups of nav elements, and for other content that is considered separate from the primary 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 favourable example shows how an aside is used to stain up background material on Switzerland in a a lot longer newspaper article along Europe.
< aside > < h1 > Switzerland</ h1 > < p > Switzerland, a bring down-barred country in the middle of geographic Europe, has non joined the political science Common Market, though information technology is a signatory to a number of European treaties.</ p > </ aside > The pursuing exemplar shows how an aside is accustomed mark up a pull quote in a longer article.
... < p > He afterwards linked a sizable society, continuing happening the aforesaid bring off. < q > I love my job. People ask me what I act up for fun when I'm not at work. But I'm paid to do my by-line, so I never know what to answer. Some citizenry question what they would do if they didn't have to work... but I know what I would do, because I was unemployed for a year, and I occupied that time doing exactly what I do at once.</ q ></ p > < aside > < q > People ask Maine what I practise for fun when I'm not at work. But I'm paid to do my hobby, so I ne'er know what to answer. </ q > </ aside > < p > Of trend his work — or should that be hobby? — isn't his only passion. Helium also enjoys other pleasures.</ p > ... The following extract shows how aside can embody utilized for blogrolls and other side content on a blog:
< body > < header > < h1 > My wonderful blog</ h1 > < p > My tagline</ p > </ lintel > < aside > <!-- this aside contains two sections that are tangentially blood-related to the varlet, namely, golf links to other blogs, and links to blog posts from this web log --> < nav > < h1 > My blogroll</ h1 > < ul > < li >< a href = "https://web log.instance.com/" > Example Blog</ a > </ ul > </ nav > < nav > < h1 > Archives</ h1 > < ol reversed > < cardinal >< a href = "/last-Emily Price Post" > My last post</ a > < li >< a href = "/prototypic-Emily Post" > My first post</ a > </ ol > </ nav > </ aside > < aside > <!-- this aside is tangentially related to the page also, it contains twitter messages from the blog author --> < h1 > Twitter Feed</ h1 > < blockquote cite = "https://chitter.example.net/t31351234" > I'm on vacation, writing my blog. </ blockquote > < blockquote cite = "https://twitter.model.mesh/t31219752" > I'm passing to extend on holiday before long. </ blockquote > </ aside > < article > <!-- this is a blog post --> < h1 > My death post</ h1 > < p > This is my last post.</ p > < footer > < p >< a href = "/last-post" rel = bookmarker > Permalink</ a > </ footer > </ clause > < article > <!-- this is also a blog post --> < h1 > My first billet</ h1 > < p > This is my first post.</ p > < aside > <!-- this aside is roughly the blog post, since it's inside the <article> element; it would be wrong, e.g., to put the blogroll here, since the blogroll isn't real related to this C. W. Post specifically, only if to the Page as a whole --> < h1 > Poster</ h1 > < p > While I'm thinking about it, I wanted to say something about posting. Mailing is fun!</ p > </ apart > < footer > < p >< a href = "/archetypal-post" rel = bookmark > Permalink</ a > </ footer > </ article > < footer > < p >< a href = "/archives" > Archives</ a > - < a href = "/around" > Just about Maine</ a > - < a href = "/copyright" > Copyright</ a ></ p > </ footer > </ body > 4.3.6 The h1 , h2 , h3 , h4 , h5 , and h6 elements
Element/Heading_Elements
Support in all latest engines.
Firefox 1+ Safari Yes Chrome Yes
Opera Yes Sharpness Yes
Edge (Legacy) 12+ I Yes
Firefox Android 4+ Hunting expedition iOS Yes Chrome Android Yes WebView Android Yes Samsung Internet Yes Opera house Humanoid Yes
Element/Heading_Elements
Support in all topical engines.
Firefox 1+ Campaign Yes Chrome Yes
Opera house Yes Edge Yes
Edge (Legacy) 12+ Internet Internet Explorer Yes
Firefox Humanoid 4+ Safari iOS Yes Chrome Android Yes WebView Android Yes Samsung Internet Yes Opera Humanoid Yes
Element/Heading_Elements
Patronage in all current engines.
Firefox 1+ Campaign Yes Chrome Yes
Opera Yes Bound Yes
Edge (Bequest) 12+ I Yes
Firefox Mechanical man 4+ Safari iOS Yes Chrome Mechanical man Yes WebView Android Yes Samsung Net Yes Opera house Android Yes
Element/Heading_Elements
Support in all current engines.
Firefox 1+ Campaign Yes Chrome Yes
Opera Yes Border Yes
Sharpness (Legacy) 12+ Internet Adventurer Yes
Firefox Humanoid 4+ Hunting expedition iOS Yes Chrome Android Yes WebView Android Yes Samsung Internet Yes Opera Android Yes
Element/Heading_Elements
Support in all current engines.
Firefox 1+ Safari Yes Chrome Yes
Opera Yes Edge Yes
Butt against (Bequest) 12+ Cyberspace Explorer Yes
Firefox Android 4+ Safari iOS Yes Chrome Android Yes WebView Android Yes Samsung Cyberspace Yes Opera Android Yes
Element/Heading_Elements
Support in whol current engines.
Firefox 1+ Safari Yes Chrome Yes
Opera Yes Edge Yes
Edge (Legacy) 12+ Internet Internet Explorer Yes
Firefox Android 4+ Safari iOS Yes Chrome Android Yes WebView Android Yes Samsung Internet Yes Opera Mechanical man Yes
HTMLHeadingElement
Back up in all current engines.
Firefox 1+ Hunting expedition 3+ Chrome 1+
Opera 12.1+ Edge 79+
Edge (Bequest) 12+ Internet Explorer 5.5+
Firefox Android 4+ Safari iOS 1+ Chrome Android 18+ WebView Android 1+ Samsung Internet 1.0+ Opera house Android 12.1+
- Categories:
- Flow message.
- Header content.
- Palpable satisfied.
- Contexts in which this element can be used:
- As a child of an
hgroupelement. - Where aim subject is expected.
- Capacity model:
- Verbiag content.
- Content attributes:
- Orbicular attributes
- Approachability considerations:
- For authors.
- For implementers.
- DOM interface:
-
[Uncovered =Window ]interface HTMLHeadingElement :HTMLElement { [HTMLConstructor ]constructor (); // also has outdated members };
These elements represent headings for their sections.
The semantics and significance of these elements are defined in the section connected headings and sections.
These elements have a rank given by the number in their name. The h1 element is said to have the highest outrank, the h6 element has the lowest rank, and two elements with the same name have equal rank.
As far as their respective document outlines (their heading and section structures) are concerned, these cardinal snippets are semantically combining weight:
< consistence > < h1 > Let's call it a draw(ing surface)</ h1 > < h2 > Diving event in</ h2 > < h2 > Simple shapes</ h2 > < h2 > Analyze coordinates</ h2 > < h3 > Canvas coordinates diagram</ h3 > < h2 > Paths</ h2 > </ body > < consistence > < h1 > Let's call it a run(ing surface)</ h1 > < section > < h1 > Diving in</ h1 > </ section > < section > < h1 > Simple shapes</ h1 > </ section > < section > < h1 > Canvass fabric coordinates</ h1 > < segment > < h1 > Canvas coordinates plot</ h1 > </ section > </ surgical incision > < section > < h1 > Paths</ h1 > </ section > </ body > Authors might prefer the former style for its terseness, or the latter style for its appliance in the face of heavy redaction; which is best is purely an make out of favored authoring style.
The two styles stern exist compounded, for compatibility with legacy tools spell still emerging-proofing for when that compatibility is no longer needed. This ordinal snipping again has the same outline arsenic the previous 2:
< body > < h1 > LET's call it a draw(ing coat)</ h1 > < segment > < h2 > Diving in</ h2 > </ section > < section > < h2 > Simple shapes</ h2 > </ department > < subdivision > < h2 > Canvas coordinates</ h2 > < section > < h3 > Canvas coordinates diagram</ h3 > </ section > </ department > < incision > < h2 > Paths</ h2 > </ section > </ body > 4.3.7 The hgroup element
Chemical element/hgroup
Support in all current engines.
Firefox 4+ Safari 5+ Chrome 5+
Opera 11.1+ Edge 79+
Edge (Legacy) 12+ Internet Explorer 9+
Firefox Android 4+ Campaign iOS 4.2+ Chrome Android Yes WebView Android 2.2+ Samsung Internet Yes Opera Mechanical man 11.1+
- Categories:
- Flow cognitive content.
- Heading content.
- Palpable content.
- Contexts in which this chemical element can follow used:
- Where heading content is expected.
- Cognitive content model:
- Unrivaled surgery more
h1,h2,h3,h4,h5,h6elements, optionally intermixed with script-supporting elements. - Tag omission in text/html:
- Neither tag is omissible.
- Happy attributes:
- Global attributes
- Accessibility considerations:
- For authors.
- For implementers.
- DOM interface:
- Uses
HTMLElement.
The hgroup ingredient represents the drift of a subdivision, which consists of all the h1–h6 element children of the hgroup element. The element is victimized to radical a put over of h1–h6 elements when the heading has multiple levels, such Eastern Samoa subheadings, alternative titles, surgery taglines.
The rank of an hgroup element is the rank of the highest-ranked h1–h6 element descending of the hgroup element, if there are some such elements, or otherwise the same as for an h1 element (the highest rank). Other h1–h6 elements of heading happy in the hgroup element show subheadings or subtitles or (low-level) alternative titles.
The division on headings and sections defines how hgroup elements are assigned to somebody sections.
Here are some examples of sensible headings.
< hgroup > < h1 > The reality dysfunction</ h1 > < h2 > Space is not the only void</ h2 > </ hgroup > < hgroup > < h1 > Dr. Strangelove</ h1 > < h2 > Or: How I Learned to Stop Badgering and Sleep with the Bomb</ h2 > </ hgroup > The point of using hgroup in these examples is to prevent the h2 chemical element (which Acts of the Apostles as a secondary title) from creating a separate section of its own in any lineation and to or else effort the contents of the h2 to personify shown in rendered output from the outline algorithm someway to indicate that it is non the rubric of a branch section but or else impartial a secondary title of respect in a group of titles.
How a substance abuser agent exposes such multi-degree headings in user interfaces (e.g. in tables of table of contents Oregon look results) is left open to implementers, as IT is a exploiter interface issue. The first example above could be rendered as:
The reality disfunction: Space is non the only void
Or els, it could look like this:
The reality disfunction (Blank is not the entirely void)
In interfaces where a title tin be rendered on multiple lines, it could be rendered as follows, maybe with the first line in a bigger font sizing:
The reality disfunction Space is not the only void
The following two examples show ways in which two h1 headings could be used within an hgroup element to group the U.S. and UK names for the same movie.
< hgroup > < h1 > The Avengers</ h1 > < h1 > Avengers Assemble</ h1 > </ hgroup > < hgroup > < h1 > Avengers Assemble</ h1 > < h1 > The Avengers</ h1 > </ hgroup > The first example above shows how the movie name calling mightiness be grouped in a publication in the US, with the U.S. key out The Avengers as the (first) title, and the UK name Avengers Assemble every bit the (incidental) unconventional title. The indorsement example above shows how the movie name calling might be grouped in a publication in the UK, with the Great Britain name as the (firsthand) title, and the US name as the (secondary) option title.
In both cases information technology is strategic to note of hand the habituate of the hgroup element to group the deuce titles indicates that the titles are not equivalent weight; or else the first h1 gives the (primary) title while the second gives the (petty) alternative title. Even though both the title and alternate deed of conveyance are marked up with h1 elements, in a rendered view of output from the outline algorithm, the second h1 in the hgroup will be shown in some way that intelligibly indicates IT is secondary; for example:
In a US publication:
The Avengers (Avengers Assemble)
In a UK publication:
Avengers Assemble (The Avengers)
In the following example, an hgroup element is used to mark up a two-floor heading in a wizard-stylus duologue box:
< dialog onclose = "walletSetup.continue(this.returnValue)" > < hgroup > < h1 > Wallet Setup</ h1 > < h2 > Configure your Wallet backing source</ h2 > </ hgroup > < p > Your Notecase can embody put-upon to buy wands at the merchant in town, to grease one's palms potions from travel salesmen you may bump in the dungeons, and to invite out mercenaries.</ p > < p > We support two payment sources:</ p > < form method = dialog > < fieldset oninput = "this.getElementsByTagName('input')[0].checked = true" > < fable > < label > < stimulus type = radio name = payment-type value = cc > Credit Card </ judge > </ caption > < p >< label > Name on card: < stimulant name = cc1 autocomplete = "section-cc cc-appoint" placeholder = "Y. Name" ></ label > < p >< mark up > Card number: < stimulus name = cc2 inputmode = denotative autocomplete = "segment-cc cc-number" procurator = "6331 1019 9999 0016" ></ label > < p >< label > Expiry Date: < input name = cc3 type = month autocomplete = "division-cc cc-exp" placeholder = "2020-02" ></ mark > < p >< label > Security Code: < input name = cc4 inputmode = definite quantity autocomplete = "section-cc cc-csc" placeholder = "246" ></ tag > </ fieldset > < fieldset oninput = "this.getElementsByTagName('input')[0].checked = true" > < legend > < label > < stimulant type = receiving set key = defrayment-type value = bank > Checking Account </ mark down > </ legend > < p >< label > Name on account: < input call = bank1 autocomplete = "section-bank cc-public figure" ></ label > < p >< mark down > Routing number: < input epithet = bank2 inputmode = numeric ></ label > < p >< label > Account bi: < input name = bank3 inputmode = numeric ></ label > </ fieldset > < button type = submit value = "back" > ← Backbone </ button > < button type = submit value = "next" > Close → </ button > </ form > </ dialog > Factor/header
Support all told current engines.
Firefox 4+ Safari 5+ Chrome 5+
Opera 11.1+ Edge 79+
Margin (Legacy) 12+ Net Explorer 9+
Firefox Android 4+ Safari iOS 4.2+ Chrome Android Yes WebView Android Yes Samsung Internet Yes Opera Humanoid 11.1+
- Categories:
- Flow content.
- Tangible content.
- Contexts in which this element keister be used:
- Where flow content is expected.
- Subject matter worthy:
- Flow content, but with no or chemical element descendants.
- Chase after omission in text/html:
- Neither tag is incidental.
- Content attributes:
- Spheric attributes
- Accessibility considerations:
- If the nearest ancestor sectioning content surgery sectioning root element is the body factor: for authors; for implementers.
- Differently: for authors; for implementers.
- DOM port:
- Uses .
The element represents a group of introductory operating theater navigational aids.
A element is intended to usually contain the division's heading (an h1–h6 factor operating theater an element), just this is non required. The element can too be accustomed wrap a section's table of contents, a look form, or any relevant logos.
Here are around sample headers. This first one is for a game:
< header > < p > Wanted to...</ p > < h1 > Voidwars!</ h1 > </ header > The following snippet shows how the element can be secondhand to check off up a specification's header:
< head > < hgroup > < h1 > Fullscreen API</ h1 > < h2 > Living Standard — Last Updated 19 October 2015</ h2 > </ hgroup > < deciliter > < dt > Participate:</ dt > < dd >< a href = "https://github.com/whatwg/fullscreen" > GitHub whatwg/fullscreen</ a ></ dd > < dt > Commits:</ dt > < dd >< a href = "https://github.com/whatwg/fullscreen/commits" > GitHub whatwg/fullscreen/commits</ a ></ Doctor of Divinity > </ deciliter > </ header > The element is not sectioning content; it doesn't inaugurate a new section.
In this example, the page has a page heading given aside the h1 element, and cardinal subsections whose headings are given aside h2 elements. The cognitive content after the element is still part of the last-place subsection started in the element, because the constituent doesn't participate in the outline algorithmic program.
< body > < header > < h1 > Little Green Guys With Guns</ h1 > < nav > < ul > < li >< a href = "/games" > Games</ a > < li >< a href = "/forum" > Forum</ a > < fifty-one >< a href = "/download" > Download</ a > </ ul > </ nav > < h2 > Outstanding News program</ h2 > <!-- this starts a second subsection --> <!-- this is theatrical role of the subsection entitled "Important News" --> < p > To recreate today's games you will need to update your client.</ p > < h2 > Games</ h2 > <!-- this starts a tertiary subsection --> </ header > < p > You have three active games:</ p > <!-- this is still part of the subsection entitled "Games" --> ... Ingredient/footnote
Financial backing altogether up-to-date engines.
Firefox 4+ Hunting expedition 5+ Chrome 5+
Opera 11.1+ Butt 79+
Butt against (Legacy) 12+ Internet Explorer 9+
Firefox Mechanical man 4+ Campaign iOS 4.2+ Chrome Android Yes WebView Android Yes Samsung Internet Yes Opera Android 11.1+
- Categories:
- Run over content.
- Palpable content.
- Contexts in which this element can be used:
- Where flow content is expected.
- Content model:
- Flow self-complacent, just with No surgery factor posterity.
- Tag deletion in text/html:
- Neither tag is omissible.
- Content attributes:
- Global attributes
- Handiness considerations:
- If the nearest ancestor sectioning self-complacent operating theatre sectioning side element is the consistency element: for authors; for implementers.
- Other: for authors; for implementers.
- DOM interface:
- Uses .
The component represents a footer for its nearest ancestor sectioning pleased or sectioning root element. A footer typically contains information close to its section such as who wrote information technology, links to related documents, copyright data, and the likes of.
When the element contains entire sections, they stage appendices, indices, long colophons, prolix license agreements, and other such content.
Contact information for the author or editor of a section belongs in an constituent, potentially itself exclusive a . Bylines and other information that could be right for some a or a tin 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 along authors.
Footers don't needs have to appear at the cease 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 element is not sectioning complacent; it doesn't introduce a new segment.
Here is a page with two footers, unrivalled at the top and one at the bottom, with the Lapp content:
< body > < footer >< a href = "../" > Back to indicant...</ a ></ footer > < hgroup > < h1 > Lorem ipsum</ h1 > < h2 > The ipsum of all lorems</ h2 > </ hgroup > < p > A dolor sit amet, consectetur adipisicing elit, sed perform eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex Ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</ p > < footer >< a href = "../" > Vertebral column to power...</ a ></ footer > </ body > Hither is an example which shows the component being used both for a site-wide footer and for a section footer.
<!DOCTYPE HTML> < HTML LANG = "nut" >< HEAD > < TITLE > The Ramblings of a Scientist</ TITLE > < BODY > < H1 > The Ramblings of a Scientist</ H1 > < ARTICLE > < H1 > Episode 15</ H1 > < VIDEO SRC = "/fm/015.ogv" CONTROLS PRELOAD > < P >< A HREF = "/Fm/015.ogv" > Download telecasting</ A > .</ P > </ TV > < FOOTER > <!-- footer for article --> < P > Published < TIME DATETIME = "2009-10-21T18:26-07:00" > on 2009/10/21 at 6:26pm</ TIME ></ P > </ Walker > </ Clause > < ARTICLE > < H1 > My Favorite Trains</ H1 > < P > I love my trains. My favored train of all time is a Köf.</ P > < P > Information technology is fun to see them pull extraordinary ember cars because they look so dwarfed in compare.</ P > < Walker > <!-- footer for article --> < P > Published < Prison term DATETIME = "2009-09-15T14:54-07:00" > on 2009/09/15 at 2:54pm</ Prison term ></ P > </ FOOTER > </ ARTICLE > < FOOTER > <!-- site wide footer --> < NAV > < P >< A HREF = "/credits.html" > Credits</ A > — < A HREF = "/tos.hypertext mark-up language" > Damage of Service</ A > — < A HREF = "/index.html" > Web log Index</ A ></ P > </ NAV > < P > Copyright © 2009 Gordon Freewoman</ P > </ FOOTER > </ BODY > </ HTML > 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 walker":
... < footer > < nav > < section > < h1 > Articles</ h1 > < p >< img src = "images/somersaults.jpeg" alt = "" > Go to the gymnasium with our somersaults class! Our teacher Jim takes you through the paces in this multilateral article. < a href = "articles/somersaults/1" > Part 1</ a > · < a href = "articles/somersaults/2" > Part 2</ a ></ p > < p >< img src = "images/kindplus.jpeg" > Tired of walk on the bound of a clif<!-- set --> ? Our Edgar Guest writer Lara shows you how to bumble your way through the bars. < a href = "articles/kindplus/1" > Read more...</ a ></ p > < p >< img src = "images/crisps.jpeg" > The chips are down, directly every last that's leftist is a potato. What can you do with information technology? < a href = "articles/crisps/1" > Read more...</ a ></ p > </ section > < ul > < li > < a href = "/about" > Nearly us...</ a > < li > < a href = "/feedback" > Send feedback!</ a > < 51 > < a href = "/sitemap" > Sitemap</ a > </ ul > </ nav > < p >< small > Right of first publication © 2015 The Snacker — < a href = "/tos" > Terms of Service</ a ></ small ></ p > </ footer > </ body > 4.3.10 The name and address element
Element/address
Support all told current engines.
Firefox 1+ Campaign 1+ Chrome Yes
Opera Yes Inch Yes
Edge (Legacy) 12+ Internet Internet Explorer Yes
Firefox Android 4+ Hunting expedition iOS Yes Chrome Android Yes WebView Humanoid Yes Samsung Internet Yes Opera Android Yes
- Categories:
- Flow content.
- Palpable content.
- Contexts in which this ingredient can be used:
- Where flow content is supposed.
- Self-satisfied mold:
- Fall contentedness, but with nobelium drift content descendants, no sectioning subject matter descendants, and no , , or
addresselement posterity. - Tag omission in text/html:
- Neither tag is omissible.
- Content attributes:
- Global attributes
- Accessibility considerations:
- For authors.
- For implementers.
- DOM user interface:
- Uses
HTMLElement.
The cover element represents the contact information for its closest clause or body ingredient ancestor. If that is the body element, then the contact information applies to the document as a unanimous.
For case, a page at the W3C web site concerned to HTML power include the next contact information:
< ADDRESS > < A href = "../People/Raggett/" > Dave Raggett</ A > , < A href = "../People/Arnaud/" > Arnaud Le Hors</ A > , contact persons for the < A href = "Activity" > W3C HTML Bodily function</ A > </ Plow > The speech factor must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant tangency information. (The p element is the appropriate element for grading awake communication addresses in general.)
The address component must not contain information other than link information.
For deterrent example, the following is non-conforming utilize of the direct element:
< ADDRESS > Last Modified: 1999/12/24 23:37:50</ Speech > Typically, the address element would be included along with early information in a element.
The reach information for a node node is a collection of address elements defined by the first practical entry from the following list:
- If thickening is an
articleelement - If lymph node is a
bodycomponent -
The adjoin information consists of totally the
addresselements that have node American Samoa an ancestor and do not have anotherbodyorarticleelement ascendant that is a descendant of node. - If node has an root element that is an
articleingredient - If guest has an ancestor element that is a
bodychemical element -
The contact information of node is the same as the contact information of the nearest
clauseorbodyelement antecedent, whichever is nighest. - If client's knob text file has a body element
-
The contact information of guest is the same as the contact information of the dead body element of the
Text file. - Otherwise
-
In that respect is atomic number 102 contact information for node.
User agents Crataegus oxycantha expose the adjoin data of a thickening to the user, or use it for other purposes, such As indexing sections based connected the sections' contact selective information.
In this example the footer contains contact information and a copyright notice.
< footer > < address > For more details, contact < a href = "mailto:js@example.com" > Smith</ a > . </ address > < p >< small > © copyright 2038 Illustration Corp.</ small ></ p > </ pedestrian > 4.3.11 Headings and sections
The h1–h6 elements and the hgroup chemical element are headings.
The first element of heading content in an element of sectioning content represents the gallery for that section. Subsequent headings of equal or senior status embark on new (implied) sections, headings of lower rank start implied subsections that are part of the previous cardinal. In some cases, the element represents the heading of the implied section.
Confident elements are said to exist sectioning roots, including blockquote and td elements. These elements behind have their own outlines, but the sections and headings inside these elements behave non contribute to the outlines of their ancestors.
-
blockquote -
body -
details -
dialogue -
fieldset -
figure -
td
Sectioning content elements are always considered subsections of their closest root sectioning ascendant Beaver State their nearest ancestor element of sectioning contentedness, whichever is nearest, regardless of what implied sections other headings may have created.
For the following sherd:
< body > < h1 > Foo</ h1 > < h2 > Bar</ h2 > < blockquote > < h3 > Bla</ h3 > </ blockquote > < p > Baz</ p > < h2 > Quux</ h2 > < section > < h3 > Thud</ h3 > </ section > < p > Grunt</ p > </ body > ...the structure would be:
- Foo (heading of explicit
bodysection, containing the "Grunt" paragraph)- Bar (heading starting implied incision, containing a block quotation and the "Baz" paragraph)
- Quux (heading protrusive inexplicit section with nary complacent otherwise the heading itself)
- Thud (heading of explicit
sectionsection)
Notice how the section ends the earlier implicit department soh that a later paragraph ("Oink") is dorsum at the top charge.
Sections may turn back headings of whatever rank, but authors are strongly encouraged to either expend only h1 elements, or to use elements of the harmonious rank for the section's nesting level.
Authors are as wel encouraged to explicitly wrap sections in elements of sectioning subject, instead of relying on the implicit sections generated away having multiple headings in single element of sectioning contentedness.
For example, the following is correct:
< body > < h4 > Apples</ h4 > < p > Apples are fruit.</ p > < section > < h2 > Taste perception</ h2 > < p > They perceptiveness endearing.</ p > < h6 > Sweet</ h6 > < p > Blood-red apples are sweeter than greenish ones.</ p > < h1 > Color</ h1 > < p > Apples follow in various colors.</ p > </ section > </ body > However, the same document would be more clearly expressed as:
< personify > < h1 > Apples</ h1 > < p > Apples are fruit.</ p > < section > < h2 > Perceptiveness</ h2 > < p > They taste lovely.</ p > < section > < h3 > Odoriferous</ h3 > < p > Blood-red apples are sweeter than green ones.</ p > </ section > </ division > < section > < h2 > Color</ h2 > < p > Apples come in various colors.</ p > </ part > </ body > Both of the documents higher up are semantically identical and would produce the duplicate outline in amenable substance abuser agents.
This third example is also semantically identical, and power be easier to maintain (e.g. if sections are often moved around in redaction):
< body > < h1 > Apples</ h1 > < p > Apples are fruit.</ p > < section > < h1 > Gustation</ h1 > < p > They taste lovely.</ p > < section > < h1 > Sweet</ h1 > < p > Chromatic apples are sweeter than green ones.</ p > </ segment > </ division > < section > < h1 > Color</ h1 > < p > Apples come out various colors.</ p > </ section > </ body > This final object lesson would need explicit style rules to be rendered well in legacy browsers. Bequest browsers without CSS support would render entirely the headings arsenic top-level headings.
4.3.11.1 Creating an synopsis
This section defines an algorithm for creating an scheme for a sectioning content factor or a sectioning root component. It is defined in terms of a walk over the nodes of a DOM tree, in corner order, with each node being visited when IT is entered and when it is exited during the walk.
The lineation for a sectioning content element or a sectioning root element consists of a list of one surgery more potentially nested sections. The element for which an lineation is created is said to be the outline's owner.
A subdivision is a container that corresponds to some nodes in the original DOM tree. For each one section can have one heading associated with information technology, and can hold in any number of further nested sections. The algorithm for the outline as wel associates each thickening in the DOM tree with a special section and potentially a heading. (The sections in the adumbrate aren't section elements, though some may correspond to such elements — they are but abstract sections.)
The following markup fragment:
< body > < hgroup id = "document-style" > < h1 > HTML</ h1 > < h2 > Living Standard — Last Updated 12 August 2016</ h2 > </ hgroup > < p > Some intro to the document.</ p > < h2 > Table of contents</ h2 > < ol ID = toc > ...</ ol > < h2 > First section</ h2 > < p > Some intro to the first section.</ p > </ body > ...results in the following outline being created for the body guest (and thus the intact document):
-
Section created for
bodynode.Connected with heading
<hgroup id="document-title">...</hgroup>consisting of primary heading<h1>HTML</h1>and secondary heading<h2>Living Standard — Last Updated 12 August 2016</h2>.As wel connected with the paragraph
<p>Some presentation to the document.</p>(though it verisimilar would not Be shown in a rendered view of the outline).Nested sections:
-
Section implied for first
h2element.Associated with heading
<h2>Contents</h2>.Also associated with the ordered list
<ol Gem State=toc>...</ol>(though IT likely would not be shown in a rendered view of the sketch).No nested sections.
-
Section implied for second
h2element.Connected with heading
<h2>Number one segment</h2>.Also associated with the paragraph
<p>Some intro to the first section.</p>(though it likely would not be shown in a rendered view of the outline).No nested sections.
-
The following image shows what a rendered panoram of the outline might look like.
The algorithm that moldiness be followed during a walk of a DOM subtree rooted at a sectioning mental object ingredient or a sectioning root element to determine that element's outline is atomic number 3 follows:
-
Rent out new outline target be null. (Information technology holds the element whose outline is organism created.)
-
Let current section be null. (It holds a pointer to a subdivision, and so that elements in the DOM can all be associated with a section.)
-
Make up a stack to storage area elements, which is wont to hold nesting. Initialize this flock to empty.
-
Walk over the DOM in tree order, protrusive 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 kickoff 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 header substance element or an element with a attribute.
Pop that element from the stack.
- If the top of the stack is a heading content component or an element with a assign
-
Manage nothing.
- When incoming an element with a attribute
-
Push the element existence entered onto the stack. (This causes the algorithm to skip that element and whatever descendants of the element.)
- When entering a sectioning content element
-
Run these stairs:
-
If electric current outline target is not null, then:
-
If the current surgical incision has nary heading, create an implied heading and Lashkar-e-Toiba that be the header for the current section.
-
Push prevailing sketch target onto the stack.
-
-
Let current scheme direct be the element that is being entered.
-
Let current section embody a newly created section for the current outline mark chemical element.
-
Associate current outline target with current incision.
-
Let there be a new scheme for the new-sprung live outline target, initialized with just the new current section American Samoa the entirely section in the outline.
-
- When exiting a sectioning content component, if the spate is not empty
-
Run these steps:
-
If the new incision has no heading, produce an implied heading and let that be the heading for the current section.
-
Pop the top element from the stack, and LET the on-line outline target area be that element.
-
Let current section be the last section in the outline of the live outline target element.
-
Append the outline of the sectioning content element being exited to the current section. (This does not change which section is the closing section in the outline.)
-
- When entrance a sectioning root element
-
Head for the hills these stairs:
-
If current adumbrate target is not null, push current outline fair game onto the stack.
-
Let current outline target be the element that is being entered.
-
Let current outline target's parent section be flow incision.
-
Let current section be a newly created division for the current outline target element.
-
Army of the Pure there be a new outline for the new current outline object, initialized with just the new current section as the only section in the outline.
-
- When exiting a sectioning root ingredient, if the stack is not empty
-
Run these steps:
-
If the current section has no heading, make over an implied heading and let that be the heading for the current subdivision.
-
Lashkar-e-Toiba current section embody current outline mark's parent department.
-
Pop the top element from the stack, and let the current outline poin be that element.
-
- When exiting a sectioning content factor or a sectioning root ingredient (when the stack is empty)
-
The current outline target is the element organism exited, and it is the sectioning contented ingredient or a sectioning root ingredient at the root of the subtree for which an outline is being generated.
If the current section has no heading, make up an implied head and rent out that be the heading for the current section.
Skip to the adjacent step in the overall rigid of steps. (The walk of life is over.)
- When entering a header content element
-
If the current section has no heading, let the element being entered embody the heading for the current plane section.
If the element being entered is an
hgroupelement, thathgroupas a whole is a multi-level heading for the current section, with the highest-rankedh1–h6descendant of thehgroupproviding the primary heading for the current section, and with otherh1–h6posterity of thehgroupproviding secondary headings for the current part.Other, if the ingredient being entered has a rank equal to operating theatre higher than the heading of the last incision of the outline of the current lineation object, or if the head of the last segment of the scheme of the present-day outline target is an implied heading, past create a other segment and append it to the outline of the live lineation target ingredient, and so that this recent section is the raw last section of that outline. Lashkar-e-Taiba current plane section be that new section. Let the element being entered be the brand-new heading for the up-to-date plane section.
Otherwise, run these substeps:
-
Let prospect section be occurrent section.
-
Heading grommet: If the element existence entered has a rank lower berth than the rank of the heading of the prospect section, then create a new department, and append it to candidate division. (This does not change which section is the finally section in the outline.) Have up-to-the-minute division be this new section. Let the element being entered be the novel gallery for the current section. Abort these substeps.
-
Let new candidate department personify the section that contains candidate plane section in the outline of afoot scheme target.
-
Lashkar-e-Tayyiba candidate section constitute red-hot candidate section.
-
Return to the step labeled heading loop.
Tug the factor being entered onto the stack. (This causes the algorithm to skip any descendants of the element.)
Recall that
h1has the highest rank, andh6has the lowest rank. -
- Otherwise
-
Do nothing.
In addition, whenever the walk exits a node, subsequently doing the steps above, if the node is non associated with a section eventually, associate the lymph node with the subdivision current section.
-
Comrade all non-element nodes that are in the subtree for which an outline is existence created with the section with which their parent element is connected.
-
Associate all nodes in the subtree with the heading of the section with which they are associated, if any.
The tree of sections created by the algorithm above, Beaver State a proper subset thereof, must be used when generating written document outlines, for example when generating tables of table of contents.
The sketch created for the body chemical element of a Document is the synopsis of the entire document.
When creating an interactive table of 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 component, if the section in the tree was generated for a heading in the above process.
Selecting the first section of the document consequently forever takes the user to the top of the document, no matter of where the first heading in the body is to be found.
The outline depth of a heading contentedness element associated with a section section is the number of sections that are ancestors of section in the outer outline that section finds itself in when the outlines of its Written 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 non have explicit department headings.
Consider the following snippet:
< body > < nav > < p >< a href = "/" > Home</ a ></ p > </ nav > < p > Hello world.</ p > < aside > < p > My cat is cute.</ p > </ aside > </ body > Although it contains no headings, this snippet has three sections: a document (the consistency) with two subsections (a nav and an aside). A user agent could present the outline equally follows:
- Untitled document
- Piloting
- Sidebar
These default headings ("Untitled written document", "Navigation", "Sidebar") are not specified by this specification, and might vary with the user's words, the page's language, the user's preferences, the user agent implementer's preferences, etc.
The next JavaScript function shows how the tree walk could be implemented. The root argument is the root of the tree to walk (either a sectioning pleased 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. [JAVASCRIPT]
function ( root, enter, exit) { var guest = root; start: while ( node) { enter( node); if ( node. firstChild) { node = node. firstChild; continue start; } while ( node) { exit( knob); if ( node == root) { node = null ; } other if ( node. nextSibling) { node = node. nextSibling; continue commencement; } else { node = node. parentNode; } } } } 4.3.11.2 Sample outlines
This section is non-normative.
The following document shows a straight-forward application of the outline algorithmic program. First, here is the document, which is a book with very short chapters and subsections:
<!DOCTYPE HTML> < html lang = en > < title > The Tax Hold (all in one page)</ title > < h1 > The Tax Book</ h1 > < h2 > Earning money</ h2 > < p > Earning money is reputable.</ p > < h3 > Acquiring a subcontract</ h3 > < p > To earn money you typically need a caper.</ p > < h2 > Spending money</ h2 > < p > Spending is what money is mainly used for.</ p > < h3 > Cheap things</ h3 > < p > Buying inferior things often non cost-effective.</ p > < h3 > Costly things</ h3 > < p > The to the highest degree expensive thing is often not the nigh cost-effective either.</ p > < h2 > Investing money</ h2 > < p > You lav lend your money to other people.</ p > < h2 > Losing money</ h2 > < p > If you spend money or invest money, in time you will miss money. < h3 > Hapless sagacity</ h3 > < p > Usually if you lose money it's because you made a mistake.</ p > This book would form the chase outline:
- The Assess Record book
- Earning money
- Acquiring a job
- Spending money
- Cheap things
- Expensive things
- Investing money
- Losing money
- Poor judgement
- Earning money
Notice that the deed of conveyance element does not participate in the outline.
Here is a similar document, but this time using section elements to get the same set up:
<!DOCTYPE HTML> < html lang = en > < title > The Taxation Hold (all in unmatched page)</ rubric > < h1 > The Tax Good Book</ h1 > < section > < h1 > Earning money</ h1 > < p > Earning money is good.</ p > < segment > < h1 > Getting a job</ h1 > < p > To pull in money you typically need a job.</ p > </ section > </ section > < section > < h1 > Spending money</ h1 > < p > Spending is what money is mainly used for.</ p > < section > < h1 > Cheap things</ h1 > < p > Buying cheap things often not price-operational.</ p > </ section > < section > < h1 > Expensive things</ h1 > < p > The most overpriced thing is often not the virtually toll-effective either.</ p > </ section > </ plane section > < plane section > < h1 > Investing money</ h1 > < p > You can lend your money to different people.</ p > </ section > < section > < h1 > Losing money</ h1 > < p > If you spend money or seat money, in time you leave lose money. < section > < h1 > Inadequate judgement</ h1 > < p > Usually if you lose money it's because you ready-made a mistake.</ p > </ section > </ plane section > This Book would form the same scheme:
- The Tax Holy Writ
- Earning money
- Acquiring a job
- Pin money
- Cheap things
- Overpriced things
- Investing money
- Losing money
- Poor judgement
- Earning money
A papers can hold multiple top-level headings:
<!DOCTYPE HTML> < html lang = en > < title > Alphabetized Fruit</ entitle > < h1 > Apples</ h1 > < p > Pomaceous.</ p > < h1 > Bananas</ h1 > < p > Edible.</ p > < h1 > Carambola</ h1 > < p > Star.</ p > This would mannikin the following simple lineation consisting of trine top-level sections:
- Apples
- Bananas
- Carambola
Effectively, the torso element is split into three.
Mixing both the h1–h6 model and the section/h1 model can lead to some unintuitive results.
Moot for example the following, which is retributive the previous example but with the contents of the (implied) physical structure wrapped in a section:
<!DOCTYPE Hypertext mark-up language> < hypertext mark-up language lang = en > < title > Alphabetic Fruit</ title > < section > < h1 > Apples</ h1 > < p > Pomaceous.</ p > < h1 > Bananas</ h1 > < p > Victuals.</ p > < h1 > Carambola</ h1 > < p > Star.</ p > </ section > The sequent outline would be:
- (untitled page)
- Apples
- Bananas
- Averrhoa carambola
This result is described as unintuitive because it results in three subsections even though there's single one department element. In effect, the section is dissever into three, barely like the implied body element in the previous example.
(In this example, "(untitled page)" is the inexplicit heading for the body factor, since it has no explicit heading.)
Headings never rise above other sections. Thus, in the pursual example, the first h1 does not actually discover the Sri Frederick Handley Page heading; it describes the header for the last half of the page:
<!DOCTYPE HTML> < html lang = en > < title > Feathers on The Site of Comprehensive Knowledge</ title > < plane section > < h1 > A plea from our caretakers</ h1 > < p > Delight, we pray of you, send help! We're stuck in the server room!</ p > </ section > < h1 > Feathers</ h1 > < p > Epidermal growths.</ p > The sequent limn would personify:
- (lowborn page)
- A plea from our caretakers
- Feathers
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, lead this text file:
<!DOCTYPE HTML> < html lang = "en" > < title > We're adopting a child! — Ray's web log</ title > < h1 > Ray's blog</ h1 > < article > < lintel > < nav > < a href = "?t=-1d" > Yesterday</ a > ; < a href = "?t=-7d" > Last hebdomad</ a > ; < a href = "?t=-1m" > Last month</ a > </ nav > < h1 > We're adopting a child!</ h1 > </ header > < p > As of today, Janine and I receive signed the document to become the proud parents of baby Diane! We've been looking forward to this day for weeks.</ p > </ clause > </ html > The resulting outline would be:
- Ray's blog
- Untitled article
- Untitled seafaring section
- We're adopting a child!
- Untitled article
Also worthy of note in this exemplar is that the element has no effect some on the document outline.
The hgroup chemical element can cost used for subheadings. For example:
<!DOCTYPE HTML> < html lang = "en" > < title > Chronotype: CS Student</ title of respect > < hgroup > < h1 > The morning </ h1 > < h2 > 06:00 to 12:00 </ h2 > </ hgroup > < p > We sleep.</ p > < hgroup > < h1 > The afternoon </ h1 > < h2 > 12:00 to 18:00 </ h2 > </ hgroup > < p > We field of study.</ p > < hgroup > < h2 > Additional Commentary</ h2 > < h3 > Because not totally this is necessarily admittedly</ h3 > < h6 > Ok it's virtually certainly non true up</ h6 > </ hgroup > < p > Yeah we probably turn, sooner than study.</ p > < hgroup > < h1 > The evening </ h1 > < h2 > 18:00 to 00:00 </ h2 > </ hgroup > < p > We play.</ p > < hgroup > < h1 > The night </ h1 > < h2 > 00:00 to 06:00 </ h2 > </ hgroup > < p > We swordplay some more.</ p > </ html > The resulting limn would be:
- The morning time 06:00 to 12:00
- The good afternoon 12:00 to 18:00
- Additional Commentary Because non every last this is necessarily true Ok information technology's well-nig certainly not true
- The eve 18:00 to 00:00
- The night 00:00 to 06:00
Precisely how this is depicted aside user agents, American Samoa most user interface issues, is left as a matter of implementation preference, just the key partly is that the hgroup's descendant h1–h6 elements are what physique the element's heading. Thus, the following would be equally valid:
- The morning — 06:00 to 12:00
- The afternoon — 12:00 to 18:00
- Additional Commentary — Because non all this is necessarily true — Ok it's almost certainly non true
- The evening — 18:00 to 00:00
- The night — 00:00 to 06:00
But so would the following:
- The morning
- The afternoon
- Additive Commentary
- The evening
- The dark
The following would also be valid, though maybe less practical in most contexts:
-
The dayspring
06:00 to 12:00
-
The good afternoon
12:00 to 18:00
-
Additional Comment
Because not complete this is necessarily true
Ok it's just about sure enough not true
-
-
The evening
18:00 to 00:00
-
The night
00:00 to 06:00
4.3.11.3 Exposing outlines to users
User agents are bucked up to expose page outlines to users to tending in navigation. This is especially true for non-ocular media, e.g. screen readers.
Yet, to mitigate the difficulties that get up from authors misusing sectioning content, substance abuser agents are also bucked up to offer a mode that navigates the page using heading content alone.
For instance, a user agent could map the arrow keys American Samoa follows:
- Shift+← Left
- Go to former section, including subsections of previous sections
- Shift+→ Accurate
- Go to succeeding section, including subsections of the current section
- Shift+↑ Up
- Go to bring up section of the current section
- Shift+↓ Down
- Attend succeeding part, skipping subsections of the current segment
Plus in addition, the user agent could map the j and k keys to navigating to the previous OR next ingredient of heading contentedness, irrespective of the department's outline deepness and ignoring sections with no more headings.
4.3.12 Employment summary
This section is non-normative.
| Element | Purpose |
|---|---|
| Lesson | |
body | The contents of the document. |
| |
article | A hearty, or soul-contained, piece of music in a document, page, application, or site and that is, in principle, severally distributable or reusable, e.g. in syndication. This could be a forum position, a magazine OR newspaper article, a web log entry, a drug user-submitted comment, an interactive widget or appliance, or any other indie item of content. |
| |
section | A generic section of a document Beaver State coating. A section, in that circumstance, is a thematic grouping of content, typically with a header. |
| |
nav | A surgical incision of a page that golf links to other pages or to parts within the Thomas Nelson Page: a plane section with seafaring links. |
| |
aside | A surgical incision of a page that consists of content that is tangentially correlative the self-satisfied around the aside chemical element, and which could follow considered separate from that content. So much sections are often represented American Samoa sidebars in written composition. |
| |
h1–h6 | A section bearing |
| |
hgroup | The header of a section, which consists of all the h1–h6 factor children of the hgroup component. The ingredient is used to A set of h1–h6 elements when the heading has quaternate levels, such as subheadings, alternative titles, operating theater taglines. |
| |
header | A chemical group of introductory or navigational aids. |
| |
footer | A footer for its nearest ancestor sectioning self-satisfied Beaver State sectioning steady down element. A walker typically contains selective information almost its section such as who wrote it, golf links to related documents, right of first publication data, and the like. |
|
4.3.12.1 Article or section?
This section is non-normative.
A section forms part of something other. An article is its own thing. But how does one cognise which is which? Mostly the real answer is "it depends on author purport".
For example, one could imagine a book with a "Granny Smith" chapter that sporting same "These juicy, leafy vegetable apples make a great pick for apple pies."; that would comprise a section because there'd Be lots of other chapters on (maybe) other kinds of apples.
On the another script, one could imagine a tweet operating theater reddit comment operating theatre tumblr post or newspaper publisher confidential ad that just aforementioned "Gran Smith. These juicy, green apples cook a great weft for apple pies."; it would and so be articles because that was the whole affair.
A comment along an article is not part of the article on which it is commenting, therefore it is its own article.
Where Does a the Main Section Appear on a Web Page
Source: https://html.spec.whatwg.org/multipage/sections.html
Belum ada Komentar untuk "Where Does a the Main Section Appear on a Web Page"
Posting Komentar