In this MDN doc, it is said:
Heading content is a subset of flow content, which defines the title
of a section, whether marked by an explicit sectioning content
element, or implicitly defined by the heading content itself. Heading
content can be used everywhere flow content is expected.
What do they mean by "the heading content itself"?
Related
I am working with an eBook. For the Copyright page, the Details page containing general information about the book and other publication notes I am using the footer element.
Now, I have two basic options. One of them is using a single footer element containing multiple section elements to accommodate all of the pages (4 in total). The other option is to have multiple footer elements, each containing the specific pages.
The first option (only one footer with multiple section) seems better to me, except that when I validate the HTML, it says that I need to have heading (h1, h2, etc.) for each of the section elements. The problem with this is that I do not want to have to use headings for these secondary sections, since they are not as important as the main content of the book and yet, these headings will be prominent and be placed on top of the page outline, making them appear more important than they are.
Can I have multiple footer elements that are adjacent siblings from each other? Is this semantically valid?
The other question/answer that I could find related to this one was html5: using header or footer tag twice?, but it just discusses the use of multiple footer within a page, but not necessarily having them next to each other as adjacent siblings (multiple footer for the same section).
The HTML5 standard specifies that nested footer elements are not permitted. Adjacent would not be nested though. Adjacent would mean multiple footer elements for a single parent element, or side-by-side footers which seems sloppy. See MDN.
It really boils down to keeping it simple. Ask yourself, what is the use case for adjacent or side-by-side, or double, footer elements?
Is semantically correct to use a header, footer o main elements inside a dialog component in Html5?.
I want to build a complex modal view with options about articles in my main page content. I am wondering if is correct use html5 as follows
<dialog>
<header>
<h1>Title</h1>
<button> Save </button>
</header>
<main>
<!--modal view options-->
</main>
</dialog>
Only the <main> tag shouldn't be there.
As copied from W3schools:
The header element represents a container for introductory content or a set of navigational links.
And:
You can have several header elements in one document.
This applies to the header and the footer.
but then there is this:
There must not be more than one main element in a document. The main element must NOT be a descendant of an article, aside, footer, header, or nav element.
So, to say it in a short way:
you can use multiple <header> and <footer> tags in your document, but you're better of using a <div> instead of your <main>
Tl;dr
Using header, footer or main in the dialog element for the purpose of describing this dialog's content is not semantically correct.
About header and footer
Only Sectioning content elements (or body) define a semantic scope that is applied to header and footer. dialog is not a sectioning content (source). So, header and footer placed within dialog will describe the closest sectioning content or body, not a dialog itself.
About main element
There are 3 important rules to remember when using main element (source):
it should be used only to represent the dominant contents of the document (dialog's content is not likely to be the dominant content),
there can be only one main element without hidden attribute on the webpage at the same time (which means you would need to add hidden attribute on your general main page element),
main element ancestors can only be html, body, div or form elements without an accessible name. main cannot be contained within anything else, including autonomous custom elements.
So, 3rd point makes it impossible to use main element inside of a dialog. And 1st and 2nd make it really hard.
Solution
Good solution in this case would be to either drop using of those elements or to wrap dialog's content with a section element to be able to provide semantic header and footer.
<dialog>
<section>
<header><!-- header content --></header>
<div>
<!-- modal content -->
</div>
<footer><!-- footer content --></footer>
</section>
</dialog>
I have an article template in which I want the title to run the full width of the page (12 cols), and then the text itself to fall in below with an adjacent sidebar (8 and 4 cols respectively). The problem is that I can't get the sidebar to nest alongside the article body without placing it within the article section.
My question is: is it bad practice to move the sidebar element up so it falls within the article section, and thus sits nicely on the right next to the main content, but below the title?
The markup would look something like this:
<article>
<header>
PAGE/POST TITLE
</header>
PAGE/POST CONTENT
<div class="sidebar">
SIDEBAR CONTENT
</div>
</article>
The article element, just like any other HTML element, should only contain content that conforms to the element’s definition.
Including navigation doesn’t seem to be appropriate, unless it’s the navigation for the article itself (like a table of contents or similar), in which case you should use the nav element.
While there is the aside element, which would allow to markup separate content inside of article, this content still has to be
[…] tangentially related to the content around the aside element
As the title says, do I have to use these new tags in a DIV or are they basically DIVs themselves?
This is how each of the major HTML5 tags can/should be used:
section – Used for grouping together thematically-related content. Sounds like a div element, but it’s not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself: “Is all of the content related?”
aside – Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.
header – There is a crucial difference between the header element and the general accepted usage of header (or masthead). There’s usually only one header or ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”
nav – Intended for major navigation information. A group of links grouped together isn’t enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.
footer – Sounds like its a description of the position, but its not. Footer elements contain informations about its containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.
<header>
The <header> element represents a container for introductory content or a set of navigational links.
A element typically contains:
one or more heading elements ( - ) logo or icon authorship information You can have several elements in one document.
Note: A <header> tag cannot be placed within a , or another element.
<nav>
The <nav> tag defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.
<aside>
The <aside> tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.
<section>
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
I have a <nav> element where its title is wrapped in a <header>. However, this <header> is the last element in the <nav>. Is this a good practice?
I looked at the W3C's definition of <header>, and it has this to say:
The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.
When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.
This doesn't explicitly say where in its nearest ancestor it should be placed, but implies it should be the first (or topmost) element.
Here's a screenshot of my current mockup:
Note that this is not the final design and the element is position: fixed to the top of the viewport
If you take a look at the standard it doesn't say you cant do this. It only says the header element cant be a decendant of an address or footer element. So go for it.
header - http://www.w3.org/TR/html-markup/header.html
nav - http://www.w3.org/TR/html-markup/nav.html
Generally speaking it would make sense for the nav element to be a child of the header element, or for the two to be separate.