Are custom elements created by Angular components sectioning elements? - html

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.

Related

Main tag in Main tag

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?

In HTML, why put a sectioning element inside a list?

Let's say there is a list which every li element has an article element inside.
Since the article element is a sectioning content element, would it split the list explicitly? If so, does the list conserve its purpose?
The specification says li element accepts any flow content so any sectioning content would be allowed, and it would be validated, but won't it be better to put links to the articles instead of the articles?
The example uses the article element but I think It could be applied to every sectioning content element.
The question here is what would be the purpose of putting multiple <article> elements inside a <li>. I think that whatever you're trying to accomplish can be done in other ways. An article can contain lists; lists can contain links to articles; why put a sectioning element inside a list?
Your lists and articles certainly have CSS styles assigned to them. If you like the way your lists display content, you can arrange for your articles to look that way with CSS, without putting the latter inside the former. Inside of lists, <p> elements would be more appropriate, if you wanted to include more copy than just article links.
Here's a good reason why articles inside lists are semantically bogus. An article tag "specifies independent, self-contained content." If you put that inside a list, it is no longer independent or self-contained; it is either related to, or dependent on, the other list items.

HTML5 Philosophy: Omission of certain semantic elements?

I am wondering if this applies.
Examples:
main tag
The HTML5 specification says:
The main element represents the main content section of the body of a
document or application. The main content section consists of content
that is directly related to or expands upon the central topic of a
document or central functionality of an application.
Does this, therefore, imply that:
If the only content that lives within your page is the main content and only the main content, you should exclude the tag since there is nothing to relate it to but itself?
section tag
The HTML5 specification says:
The section element represents a generic section of a document or
application. A section, in this context, is a thematic grouping of
content.
If the only content that lives within your page is within a section, then does that mean that your page should not be sectioned, but rather be a single element, and therefore you should not use a section tag?
My thoughts:
I think the main tag should be omitted in the case provided, however, the section tag should be required since a page can be sectioned off into a single section. The word section can be used to describe a single part of a whole regardless of whether that part is the only one of the whole.
The Layout I was thinking about:
doctype html
html
head
...
body
header
main
section
nav
footer
becomes:
doctype html
html
head
...
body
header
section
nav
footer
I think the main tag should be omitted in the case provided, however,
the section tag should be required since a page can be sectioned off
into a single section.
There was a similar suggestion in an earlier candidate recommendation (see https://www.w3.org/TR/2012/CR-html5-20121217/common-idioms.html#the-main-part-of-the-content) which recommended implicit marking of the main content OR having body mark up the main content with elements (like header, nav, footer) exclude the other (non main content) bits (as you suggested).
BUT, this section was later dropped (see https://lists.w3.org/Archives/Public/public-html/2013Feb/0037.html or just search for Re: Week 4/5: Staged WHATWG patches for HTML5.1 / HTML5.0 CR in the public-html list at https://www.w3.org/Search/Mail/Public/advanced_search). To quote
I do not think this section should be included, as it states that
there is not a dedicated element for marking up the main part of the
content of a page.This contradicts the definition of main in HTML 5.1
Additionally, if you look at https://www.w3.org/html/wg/wiki/User:Sfaulkne/main-usecases#Introduction, there are use cases where not using a main tag would necessitate an alternative (like role="main" for ARIA or some structure based CSS for styling), so IMO it would be preferable to have the main tag even if you were just going by the use cases.
Note - it's still recommended that you use role="main" even if you the main tag (until all browsers automatically map the main element to role="main")
Under the main tag, you could have a section tag if you want to indicate that it forms part of something else (see https://www.w3.org/TR/html5/sections.html#article-or-section?)
And on a related note, while you can markup content with an article tag when the main content of the page (excluding all the extra bits) is self contained, the spec says that it is technically redundant (see https://www.w3.org/TR/html5/sections.html#the-article-element). To quote
...the content should be marked up with a main element and the content
may also be marked with an article, but it is technically redundant in
this case (since it's self-evident that the page is a single
composition, as it is a single document).
To summarize
You need the main tag.
You don't need the section tag unles you want to indicate that it forms part of something else.

HTML 5 Section and Main semantic tags use

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.

<Header> tag HTML5 inside div

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>