I am trying to code a website in html and am looking for ways to structure my code (without spams of divs)
And I was wondering, are you able to have a <main> tag inside another <main> tag? If so, it is good pratice?
Thanks in advance.
According to the W3C specification of <main>:
The main element represents the dominant contents of the document.
A document must not have more than one main element that does not have the hidden attribute specified.
A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous custom elements. Each main element must be a hierarchically correct main element.
As per The main element (HTML.Spec)
See also a more simplified version of the above:
One important facet of is that it can only be used once per page.
As per The main element (HTML5 Doctor)
If you're still unclear why this matters, please read more on Semantic / Non-Semantic Elements in HTML:
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
In answer to your question:
You cannot nest <main> elements, as per the W3C specifications and also have valid HTML
You may only have one <main> tag per page
Does that answer your question?
Related
When I use angular.component() or angular.directive() to create a custom element, is that treated as sectioning content or not?
That is to say, is it semantically and syntactically appropriate to generate a single header and footer internally, or does that count as being part of the containing element tree?
For example if I have
angular.component('foo', {
template: `<header>Yay</header>`
})
And I use it so that the generated html is
<section>
<foo>
<header>Yay</header>
</foo>
<foo>
<header>Yay</header>
</foo>
</section>
Then what is the semantic? Is that a section which contains two header elements that are about the section? Or is it a section which contains zero header elements but two foo elements each with a header about the foo?
I don't think it would be correct to add the header footer unless it was wrapped by a sectioning element in the template or the custom element itself declared the correct ARIA role. My first thought was to see the rules in web components in which I think it would be valid if you were to extend a sectioning element
Angular components/directives can generate any HTML tag, including those that are defined as sectioning, for example angular.directive('article'...), or as phrasing, for example angular.directive('a'...), or custom elements, like foo in your example.
So it seems that your question is not so much about angular, but rather about custom elements and specifically what category they fall under. From reading the spec you linked, it depends on what your custom element is doing. If it's used for sectioning, and it has a header as in your example, I think it can be viewed as sectioning content. If your custom element is used for getting input from user, for example a div with contenteditable=true, then it can be treated as interactive content.
Then what is the semantic? Is that a section which contains two header
elements that are about the section?
It depends on what you intended it to be. But since it has header child element, I would view foo as sectioning content and would say that it's a section element without a header that contains two other sections with headers.
While studying the HTML 5 semantic tags, I've ran upon some doubts on how to proper utilize the main and section tags, and since the W3Schools reference seems a little vague and other references on the Web seems to diverge I would like to know if there is a proper guideline to the following questions or if its pretty much up to the programmer:
Does the main tag also has the meaning of grouping related elements or in that case should it be within a section tag?
Does it make sense to wrap single elements, such as an image, into a section tag?
It's pretty common to have a header and footer of the page (not inside any section), in that case, should the remaining in between those tags be wrapped inside a section tag, as if delimiting the "content" of the page?
Does the main tag also has the meaning of grouping related elements
Only to the same extent that <div> groups related elements. The primary purpose of <main> is to indicate where the dominant content of the page starts. (and additionally, according to the WHATWG spec but not the W3C one, where the dominant content of the page resumes).
or in that case should it be within a section tag?
A section tag is one way of grouping your content, to indicate that its contents are on a particular theme, in a way that differs from the content which is not in the section. Typically, you can and should give the section a heading using a <h[1-6]> element, which states what that theme is.
Does it make sense to wrap single elements, such as an image, into a
section tag?
Rarely. For one thing that would mean that the section didn't contain a heading. See above. It's unlikely that any new information would be conveyed by wrapping an image on its own in a section tag.
It's pretty common to have a header and footer of the page (not inside
any section), in that case, should the remaining in between those tags
be wrapped inside a section tag, as if delimiting the "content" of the
page?
No. The "content" of the section is the section less its header and footer. There's no need to add another sectioning element container.
just wondering, is it bad practice to place a <header> tag inside a div tag when designing a site that mostly uses html5 elements and the doctype is for html5? Thanks!
Also, should I place the Nav outside the header or inside, or does it really matter?
I do not believe that it is a bad practice. However, still make sure you have it placed int the general area where it should be.
Here is a link that might help you understand the location of your header.
No, as long as you respect the content semantics and that your header contains header information. You can wrap it in a div with no SEO drawbacks.
No, not strictly, but there are some contextual semantics that are implied by embedding the header under elements other than the body. Depending on how you structure the document, you may run into unexpected behaviours. See below.
HTML5, as far as I can tell, is a DTD-less document type. Which does not apply strict rules as it pertains to document structure validation. According to the W3C document on HTML5 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. [1]
Basically, what this seems to indicate is that, if the header element is directly under the body of the document, it applies to the page as a whole, but if contained under another element which identifies a section the header applies more specifically to the nearest ancestor.
Bear in mind though that a <div> is not a sectioning element as pointed out by Tomasz Zielinski. Originally I had thought it was. If you want your header to apply only to a specific section of the page, it is best to use one of the defined sectioning elements to encompass the header, as defined here: http://www.w3.org/TR/html5/sections.html
E.g.
<div>
<section>
<header>...</header>
</section>
</div>
For example, in HTML 4.01,
1) inline elements in general cannot include other block elements (example: a <span> or <a> should not include any <div>.) But this rule is more forgiving, as most browsers won't alter the HTML structure like in rule 2 below. (And many browsers nowadays will handle the desired result of a <div> being inside of an <a> tag.)
2) <p> elements cannot include any <p> element. If any <p> appears before the closing of a previous <p> element, then the previous one will be immediately closed. This rule seems more strict as it alters the structure of the HTML document.
Are the rules above accurate, and are there other rules stating an element cannot include other elements? (as offsprings).
Are you talking about HTML5? Since that spec is supposed to supersede any other at this time, we'll stick with that.
I'm not going to go through each individual element, but if you need to look something up, here is the reference:
http://www.w3.org/TR/html5-author/
The section that talks about "Content Models,"
a description of the element's expected contents
is here: http://www.w3.org/TR/html5-author/content-models.html
You can see some examples in the specs for specific elements:
http://www.w3.org/TR/html5-author/the-html-element.html#the-html-element (the html element):
A head element followed by a body element.
Specific Examples
http://www.w3.org/TR/html5-author/the-a-element.html#the-a-element
http://www.w3.org/TR/html5-author/the-span-element.html#the-span-element
http://www.w3.org/TR/html5-author/the-br-element.html#the-br-element
a
We learn from the first link (on the a element) that its content model is Transparent, but only if there is no Interactive Content descendant.
By looking at the definitions of "Transparent," a we see that a inherits its Content Model from its parent. That means that your initial definition is incorrect and a can indeed contain a div, but only if its parent can. The docs above even include an example of nested "Transparent" content model elements.
Since a cannot contain any "Interactive Content" model elements, it cannot contain a button element at all. This makes sense because there would be a conflict as to which element actively responded to a click.
span
When we take a look at the second link, span, we see that its Content Model is "Phrasing Content," which is basically text and markup for paragraph-level text. The definition is not entirely specific, but it does include a guideline:
Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.
Since div does not have a "Phrasing Content" model (it's "Flow Content,") span cannot contain it. This means that the span should follow the above rule and only contain any other "Phrasing Content" elements and/or embedded content or Text. If the above rule is broken, it will be listed specifically on the "Content Model" description of the element (remember the special rules for the a element about "Interactive Content.") span has none.
br
The third link, br, says that the Content Model is "Empty." Unfortunately, the W3C does not include a specific definition for that, but I think it's fairly obvious: it can contain no descendants at all. Not even text nodes. Any "Empty" Content Model element does not have a closing tag (you would write it as <br> not as <br></br>).
Your Questions
Are the rules above accurate?
First rule (inline vs. block)
What you've said is misleading. HTML has no concept of inline vs. block elements. These are CSS styles. Most browsers have a default setting for an element's display style as inline or block depending upon whether it is a "Phrasing" or "Flow" Content Model respectively (as a general rule; there is nothing hard and fast about that) or just traditionally.
If you want to say that "Phrasing Content" elements cannot contain "Flow Content" elements then you would be correct because that is in the spec specifically. This also works practically because span cannot contain div (as you indicate).
However, saying that a should not include any div is wrong. a can include div as long as its parents can. If a is contained in a span, it cannot contain div. However, if a is contained in body or another div, it can.
As for Browsers "being forgiving," this is all very convenient for many developers who cannot take the time to create valid HTML, but it can be a pain for those of us who do want to take the time. Browsers usually don't alter the "HTML structure" as you say -- what they alter is the DOM. Also node that the web vendor spec is a little different from the "Web author" spec I posted above, but we are the authors.
Second Rule (p containing p)
This is true because of an important point I left out: Context.
From the p element spec:
Contexts in which this element can be used:
Where flow content is expected.
Since p is "Phrasing Content," that means that another p cannot be put inside of a p because "Phrasing Content" is expected, not "Flow Content."
Any Other Rules?
The HTML5 spec has a huge number of elements, so I simply cannot go into all of those details here. I went into details about span and a contents vs. div as well as p because you brought those up specifically. Look at how long this answer is!
What you are going to need to do is take a look at whatever elements you have questions about in the spec itself. Take a look at the Context and Content Model sections to see whether or not your use of the element is valid.
In Summary
Refer to the spec when you have a question about how the element should work. To answer questions about how you should use the element (with respect to its container and contents), look at:
Contexts in which this element can be used:
Content model:
This tells you what can contain the element, what it can contain, and when.
If you have questions about whether your HTML is valid, you can always use the very nice W3C markup validation service:
http://validator.w3.org/
If you are using Chrome, you can take a look at the Chrome Inspector (F12) and compare the output DOM to the source HTML itself. You will notice for example that Chrome will automatically close nested p tags when it generates the DOM.
Regarding your second rule (in HTML 4.01) it's a little stronger: a P element cannot contain block-level elements (including P itself).
Based on your edited post --
<a> is now treated as a block-level element, as of html5 --
regardless of what standard you mark the page with, the browser will likely treat the element as if it's html5, so work from there, rather than backwards.
<a> can't contain <a> or any element which is meant to be interacted with (inputs/buttons).
<hX> cannot contain an <h_> tag of X or higher (in terms of hierarchy).
ie, <h3> cannot hold an <h1> or an <h2> or an <h3>
If you write it that way, the outline will close off the outline until it reaches the proper hierarchy-level.
<h1></h1>
<h2></h2>
<h3></h3>
<h2></h2> // starts a new branch of H2s, in terms of outline
<h1></h1>
<h2></h2>
<h3></h3>
<h1></h1> // closes the entire previous branch and all leaves, and starts a new outline
<ul> and <ol> can ONLY contain <li>s as immediate descendants.
<li>s can hold anything you want them to (except <li>s or other list-nodes), including other ordered/unordered/definition lists...
...but the <ul> and <ol> elements can only have <li> as their first-generation children.
Same deal with <dl>s with <dt> and <dd> nodes.
Most of the rest of it is either common-sense (don't put elements in <script> tags, <img> tags, <br> tags, <meta> tags, <legend> tags, et cetera)...
...or they're still having the kinks worked out (like what figure/figcaption can hold and the proper format for <picture>, et cetera).
What is the difference between <section> and <div> in HTML? Aren't we defining sections in both cases?
<section> means that the content inside is grouped (i.e. relates to a single theme), and should appear as an entry in an outline of the page.
<div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.
So no: using a <div> does not define a section in HTML.
From the spec:
<section>
The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. 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.
...
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.
(https://www.w3.org/TR/html/sections.html#the-section-element)
<div>
The <div> element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.
Note: Authors are strongly encouraged to view the <div> element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the <div> element leads to better accessibility for readers and easier maintainability for authors.
(https://www.w3.org/TR/html/grouping-content.html#the-div-element)
Sections are most relevant in landmark navigation for assistive technology. To appear in the document outline or landmark list, they need a name, which can be assigned by means of aria-label, aria-labelledby or title:
<section aria-labelledby="s3-h2">
<h2 id="s3-h2">Introduction</h2>
…
For example VoiceOver on Mac then can provide an outline to navigate directly to that section.
<section> marks up a section, <div> marks up a generic block with no associated semantics.
Just an observation - haven't found any documentation corroborating this
If a section contains another section, a h1-header in the inner section is displayed in a smaller font than a h1- header in outer section.
When using div instead of section the inner div h1-header is diplayed as h1.
<section>
<h1>Level1</h1>
some text
<section>
<h1>Level2</h1>
some more text
</section>
</section>
-- the Level2 - header is displayed in a smaller font than the Level1 - header.
When using css to color h1 header, the inner h1 were also colored (behaves as regular h1).
It's the same behaviour in Firefox 18, IE 10 and Chrome 28.
<div> Vs <Section>
Round 1
<div>: The HTML element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as <article> or <nav>) is appropriate.
<section>: The HTML Section element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.
Round 2
<div>: Browser Support
<section>: Browser Support
The numbers in the table specifies the first browser version that fully supports the element.
In that vein, a div is relevant only from a pure CSS or DOM perspective, whereas a section is relevant also for semantics and, in a near future, for indexing by search engines.
In the HTML5 standard, the <section> element is defined as a block of related elements.
The <div> element is defined as a block of children elements.
Take caution not to overuse the section tag as a replacement for a div element. A section tag should define a significant region within the context of the body. Semantically, HTML5 encourages us to define our document as follows:
<html>
<head></head>
<body>
<header></header>
<section>
<h1></h1>
<div>
<span></span>
</div>
<div></div>
</section>
<footer></footer>
</body>
</html>
This strategy allows web robots and automated screen readers to better understand the flow of your content. This markup clearly defines where your major page content is contained. Of course, headers and footers are often common across hundreds if not thousands of pages within a website. The section tag should be limited to explain where the unique content is contained. Within the section tag, we should then continue to markup and control the content with HTML tags which are lower in the hierarchy, like h1, div, span, etc.
In most simple pages, there should only be a single section tag, not multiple ones. Please also consider also that there are other interesting HTML5 tags which are similar to section. Consider using article, summary, aside and others within your document flow. As you can see, these tags further enhance our ability to define the major regions of the HTML document.
<div>—the generic flow container we all know and love. It’s a block-level element with no additional semantic meaning (W3C:Markup, WhatWG)
<section>—a generic document or application section. A normally has a heading (title) and maybe a footer too. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface. (W3C:Markup, WhatWG)
My suggestion:
div: used lower version( i think 4.01 to still) html element(lot of designers handled that).
section: recently comming (html5) html element.
Using <section> may be neater, help screen readers and SEO while <div> is smaller in bytes and quicker to type
Overall very little difference.
Also, would not recommend putting <section> in a <section>, instead place a <div> inside a <section>
The section tag provides a more semantic syntax for html. div is a generic tag for a section.
When you use section tag for appropriate content, it can be used for search engine optimization also. section tag also makes it easy for html parsing. for more info, refer. http://blog.whatwg.org/is-not-just-a-semantic
<section></section>
The HTML <section> element represents a generic section of a
document, i.e., a thematic grouping of content, typically with a
heading. Each <section> should be identified, typically by including
a heading (<h1>-<h6> element) as a child of the <section>
element. For Details Please following link.
References :
http://www.w3schools.com/tags/tag_section.asp
https://developer.mozilla.org/en/docs/Web/HTML/Element/section
<div></div>
The HTML <div> element (or HTML Document Division Element) is the
generic container for flow content, which does not inherently
represent anything. It can be used to group elements for styling
purposes (using the class or id attributes), or because they share
attribute values, such as lang. It should be used only when no other
semantic element (such as <article> or <nav>) is appropriate.
References:
- http://www.w3schools.com/tags/tag_div.asp
- https://developer.mozilla.org/en/docs/Web/HTML/Element/div
Here are some links that discuss more about the differences between them:
http://html5doctor.com/avoiding-common-html5-mistakes/
https://teamtreehouse.com/community/use-div-or-section-element
http://webdesign.about.com/od/html5tags/fl/div-vs-section.htm
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
whereas:
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with CSS.
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer. So <div> was used to define different parts of a web page in html4 but <div> doesn't mean anything particular therefore html5 introduced many semantic elements <section> is one of them which give enough information to screen readers, search engines and browsers etc, to identify the different part of websites.
the main difference is if you use only <div> to define website parts. it's less readable.
if you use semantic elements instead of div tag. they can help to improve readability of your website not only to humans for other programs(screen reader, search engine etc) also. we still can use <div> inside semantic elements as a container.