Can I use <section> tag inside unordered list?
I know, that <section> represent a generic section of document. Usually we find heading inside.
So... I have list of products. Usually about 20 per page. Each element have:
heading,
short description (max 255 chars),
thumbnail, some details, button.
So each list item is something like section, "is a thematic grouping of content, typically with a heading".
Of course I don't use, <section> to styling purpose.
I think, <section> also could be here a wrapper for a list, and each element of list <article>.
What is your opinion?
Using a <section> tag inside an <li> tag validates (you can try this using the “Text Field” option on http://html5.validator.nu/), and the spec doesn’t seem to suggest you shouldn’t use it in this way (see http://dev.w3.org/html5/spec-author-view/the-section-element.html#the-section-element), so that seems fine to me.
The <article> tag is meant for “self-contained compositions”. I’ve never been entirely clear what that means outside of several blog posts being listed on a single page, but I think product summaries sound like a decent fit for that too. So your second idea of a <section> containing the entire list, and an <article> for each product, probably sounds best.
A List of DOs…
DO use section for each individual section of a tab switcher or content slider (if an unordered list isn’t needed)
DO use section to divide a lengthy “terms and conditions” (or similar) page into numbered sections
DO nest section elements if necessary (as you might do with the “terms and conditions” page)
A List of DON’Ts…
DON’T use section to divide content from the header and footer; use div instead (see the doctor)
DON’T use section to wrap a tab switcher for DOM manipulation or styling
DON’T use section for sidebar or other tangentially-related content boxes; use aside instead
DON’T use section just to add a border or drop shadow around something; use div instead
DON’T use section for the wrapper when implementing faux columns; again, use div instead
DON’T use section to nest elements when trying to avoid IE6′s float double-margin bug (or a similar layout-related issue); again, use div
DON’T use section to hold an individual author bio on a blog post or news article; use aside instead
Stolen from When to Use the HTML5 “section” Element
Related
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.
Is having a single section within the main tag acceptable or is redundant?
<main>
<section>
<section>
...
</section>
<section>
...
</section>
</section>
</main>
Or should I just put the two section tags within the main... even though all the content within it is relatable.
Also, is having a <header> within every single section acceptable? It is classified as “a group of introductory or navigational aids”. But seems like if I were to use it as I've described, it'd be just like using <h1>-<h6>.
The <section> element is used to represent a group of related content. There shouldn't be any issue in nesting these tags. You could also make use of other tags like <article>, <aside> etc.. The idea behind using these elements is to give more semantic meaning to your pages, allowing computer browser to understand your content better.
There are no restrictions on how to nest them and what tags to use in them. You can have the whole set of html tags with in them (you can use h1-h6, or other elements).
You might want to have a look at these articles:
How to Use The HTML5 Sectioning Elements
http://html5doctor.com/the-section-element/
Question: is the single section inside main redundant?
It depends on the semantic meaning of your page. Describe your
desired page layout in natural language. If you say "the main area
has a section that contains many sub-sections", then your HTML is
right on the money. If you say "the main area is broken down into a
few sections", then your single section sounds like an evolved form
of the div-itis virus - the one that left a lot trash behind: wrappers,
containers, container-wrappers, content-wrappers, main-content-wrappers,
wrapping-containers, containing-wrappers...
Question: is header within every section acceptable?
Yes. But again, do the above natural language litmus test to
determine if it is suitable.
There's also some confusion between <h1>-<h6> vs <header>. Think of header as an "introductory part" within a section. It may or may not be necessary in your markup. If your introductory part of the section consists of, say, only a <h1>, you should probably omit use of the <header>; but if your introductory part includes a few items, e.g. a heading, a logo, a nav bar, then it's probably a good idea to wrap them in a <header> tag.
I am working on a new blog's design and markup right now and I have found a place where I'm tempted to nest two anchor tags within a single heading tag:
<h3><a>Popular<a/>|<a>Recent</a></h3>
Which looks like this:
(source: autochemky.com)
The purpose of doing this would (obviously) be to enable "POPULAR" as a link to display popular articles and "RECENT" a link to display recent articles. . . clicking one or the other would only change the visible content (article list) on the sidebar and not link to a new page (either via ajax or having them both already loaded and one being a hidden div).
Doing this is a measure to avoid additional potentially unnecessary code involving more than one h3 element or more than one visible list of articles.
I suppose my questions to go along with this are (in order of importance and assuming HTML5):
Is the markup valid/acceptable?
Would this have any realistic/noticeable effect on SEO?
Would you prefer to achieve the same result in a different way?
Assuming HTML5 - it's acceptable, HTML5 introduced that any element can be inside an <a> tag (pretty sure)
Changes in HTML5
Although previous versions of HTML restricted the a element to only containing phrasing content (essentially, what was in previous versions referred to as “inline” content), the a element is now transparent; that is, an instance of the a element is now allowed to also contain flow content (essentially, what was in previous versions referred to as “block” content)—if the parent element of that instance of the a element is an element that is allowed to contain flow content.
Not a noticeable effect on SEO, it's a minor detail, as minor as you probably should be using a <h1> tag if that is the header of a section seeing as that is the base in the new HTML5 semantics.
I'd stick to what you have there definitely.
Well, yes, it's valid to have several a elements inside a heading (as long as you don't nest the a elements).
But I think your heading doesn't make sense. It's either "Popular" or "Recent", not both at the same time, right? So your heading is missing its purpose: describing the content of its section.
You should use a content toggler that is not part of the heading:
<section>
<h1>Popular</h1>
<nav>Or see recent content</nav>
<ul>
<li>…</li>
<li>…</li>
</ul>
</section>
(If you wish, you could change the wording and style it that way that it looks like your example, by positioning the link to the other content next to the heading.)
Clicking at "recent content" should change the heading from "Popular" to "Recent", and changing the link to popular content
If you don't use the URL anchor + CSS to hide/show the corresponding content, and you don't have a fallback for users/bots without JS, you should display both at the same time, popular and recent content, for users with disabled JavaScript.
Regarding:
The h3 is because it is one of the sections in the sidebar and my sidebar sections are all headed by h3. I have seen some sites that use h2 and some that use h3, I chose h3.
Just to get sure: You are not free to use any heading level you like. You need to follow your document outline. If the use of h3 is correct depends on your whole page structure.
Is it necessary to have a heading of <section> in HTML5 like mentioned here http://blog.whatwg.org/is-not-just-a-semantic
Sometime on a page we have some elements which are related and can be combined in a <section id="semantic name"> instead <div id="semantic name"> But we don't have any Heading for that..
Is it OK to use <section> without having <h1>, <h2>, <h3> inside
According to the HTML5 Doctor, you should not use <section> if there is no natural heading for it. Also, they say:
The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
Also, check out this nifty flowchart to decide what element is best to use in your situations.
No, it is not required.
You can easily check this by reading the definition of the section element ("should" is not "must") or by validating your HTML.
The W3C validator will report a warning when no heading is used, but a warning is not an error.
Its only necessary if it wont [validate] (http://validator.w3.org)
The use of section tags is to convey the structure of your content, like a book is split into chapters, paragraphs, etc
If your page is mash of images to look like a magazine cover you may not have a need for adding any sections. You'll most likely still want structure for navigation but that's not done using sections.
I would say any page containing chunks of text (most pages) should use a section tag rather than a div. keep the divs for controlling layout only.
My best advice is to see how your site looks in a text only browser, or other accessible client. It amazing how rubbish most sites are designed for accessibility. My take is that section tags are an attempt to improve that.
I'm learning about HTML5, and honestly I can't say I'm really impressed. Semantics are nice and all, but I think that they introduced new elements with a very thin line between them, and a even thinner line between them and the old divs.
Everything is very clear if you do a generic purpose site, like a blogging engine, news publishing portal, and similar, but web apps... I'm having a lot of dilemmas about new html elements.
Here is my situation. I'm developing an ordering system. On the sellers interface I have 3 columns (inline), which represent the status of the order. When the status is changed element is moved from one column into another (background ajax, and js manipulation).
In Html4 I would use 3 divs and put a heading with a title on top of each one. Elements inside the columns would also be divs.
But what about HTML5? I have been looking at the section element, but I'm not really sure how to use it. Here are the options:
Put everything inside one section - I don't think that is the way to go
Put a section around each of the column divs, and heading inside the section
Replace the divs with sections
Put sections inside column divs
So, which way to go?
EDIT: first of all thanks everyone for your quick replies. In the end I'll probably go with Ian Devlins suggestion, and put each column as section. Anyway, just to point out my dissatisfaction with html5, multiple permitted options aren't always a good thing. I'm afraid what will the html5 web look like in a few years, when we can't fully agree on a simple question like this.
EDIT2: one more thing. I'll ask it here so I don't have to open another question. In addition to these 3 columns I have another div which contains order details, when any of the orders are selected. Should it be an article since its self-contained content, or to use an aside tag?
div is a perfectly valid HTML5 tag. If the new tags don't make any sense in your project, don't feel forced to use them.
To quote the w3.org spec:
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
And another quote from the w3.org people:
The section element is not a generic container element. When an element is needed 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.
Given the definition for section by w3 we can conclude that your example would be a good use of section because:
The elements have a header
It is a thematic grouping of content
It is a part of the document outline.
EDIT:
To expand upon your comment below, the new HTML5 elements are NOT supposed to replace the old HTML4 elements. For example, going through a page and replacing all the div elements with section elements would be flat out wrong. The section element was, in my opinion, intended to make it easier for machines to parse certain pages (think: feedburners) by giving a more semantic structure to a page. After all, what's easier to parse, a page with 30 div elements, or a page with 10 div 5 header 5 section 5 article and 5 footer elements?
In this particular case I would have an overall div around them, and then each column as a section as each one has a different meaning, each of which I assume has a heading indicating its status.
e.g.
<div>
<section id="col1">
<header><h1>Column 1</h1></header>
content....
</section>
<section id="col2">
<header><h1>Column 2</h1></header>
content....
</section>
<section id="col3">
<header><h1>Column 3</h1></header>
content....
</section>
</div>