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.
Related
On my web page, I present mathematical theorems and the page design is very close to the style used in academic math papers (LaTeX).
The heading structure might be as follows:
Geometry
Plane geometry
Theorem.
We have that a²+b²=c².
Question: Should I use the <h3> tag to enclose Theorem,
or should I style it with <span>, or <b>?
In some sense, it acts as a small heading for a section, but there might be several headings with the exact same title (Theorem) on the page, which might be considered strange for a SEO perspective.
You may use multiple <h3> tags. Go with makes the most sense semantically. If "Theorem" is being used as a section header, then use the <h3> (make sure you're not skipping one or more section header elements) as many times as you need to.
See the examples used at MDN - The HTML Section Heading elements, it's not a stretch to see your desired use in their examples.
I have a main image at the top of the page. For simplicity working with my stylesheet/layout, I have it in it's own section:
<section class="container page-intro boxed-none">
<figure>
<img class="width100" src="article-image.png" alt="Template Article" />
</figure>
</section>
When I use the W3C validator, it suggests that a section have a heading. Is it proper markup to have my HTML like this, or should it be modified?
It's suggested that you always use a heading in your <section> but if you want you don't have why to use it.
Here is some basic information on how each of the major HTML5 tags can/should be used (I suggest reading the full source linked at the bottom):
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.
Source:
http://www.w3schools.com/html/html5_semantic_elements.asp
I'm trying to create a site that has quite a few articles and wanting to have forewords in the more important ones, I've had a search and can't find anything that seems to identify what to do for this. All I can think of is using bold tags...
Is there an html tag for foreword and if not, what's the most semantic way to tag this?
EXAMPLE
<p>
<foreword>
The start of the article would go in here, typically the first sentence of the article.
</foreword>
Rest of the text for the article would go here.
</p>
No there isn't.
If you are looking to create a visually distinct lead paragraph then simply add a class that you can use to apply that styling, e.g.:
<p class="foreword">
I apply a visual intro style on my blog posts, using just a little CSS, eg:
.intro,
.post p:first-of-type {font-size: 1.3125em;}
The first paragraph in any post, or any element that I give the class .intro then adopts this visual style. Here's an example: http://internet-inspired.com/wrote/load-disqus-on-demand/
Semantically it's no different to any other paragraph though.
You should certainly not use bold tags, they do carry a semantic meaning and should not simply be used for the purpose of adding weight to your copy. To alter the visual appearance you should use only css.
Of course, html5 won't freak out of you do use a foreword tag, it wouldn't cause an error, but it just won't do anything. And it would carry less semantic value than a p tag, making it utterly pointless.
By forward do you mean introductory text? One option is to put it in a header element.
<article>
<header>
<h1>My Title</h1>
<h5>A really dull article on organic gardening</h5>
</header>
<section>
Organic gardening is.....etc. etc. etc.
</section>
</article>
According to HTML5 CR, the header element “represents introductory content for its nearest ancestor sectioning content or sectioning root element”, and a foreword can obviously be regarded as introductory. The description adds: “A header typically contains a group of introductory or navigational aids.” However, this is not meant to restrict the use to such “aids”, whatever that might mean. There is an example of a header element containing a greeting:
<header>
<p>Welcome to...</p>
<h1>Voidwars!</h1>
</header>
However, a header element is a collective element, typically containing a heading and something else. If that something else is (or contains) a foreword, there is no dedicated element for the foreword. It can be made a section element, but that’s general thematic grouping and not specifically any particular content. So you would use something like this:
<article>
<header>
<h2>Treatise on human misunderstanding</h2>
<section class=foreword>
The foreword goes here. It typically consists of a few paragraphs and a footer.
</section>
</header>
<section>The first section of the article.</section>
<section>The second section of the article.</section>
<section>And so on.</section>
</article>
However, since you say you considered using “bold tags” and show the dummy content of the “foreword” as “The start of the article would go in here, typically the first sentence of the article.”, it seems that you don’t actually mean a foreword at all. According to Merriam-Webster description, a foreword is “a section at the beginning of a book that introduces the book and is usually written by someone other than the book's author”.
I think you actually meant a headline. However, this really does not change much structurally. It could still be wrapped in a header element and even marked up as section, though that would not be very natural. A single-sentence “section” isn’t much of a section; rather, it could be a p element or just a div element, e.g. <div class=headline>...</div>.
This is all somewhat theoretical. The header element has no known impact on anything except being a block element (and its content normally causes block rendering anyway). The same applies to section. Use them if you like, but don’t expect them to “do” anything. You can use them in styling, but you could style div elements just as well.
Do you mean using forward links from one page to other? If yes, then use following anchor tag:
Name_You_Want_To_Give_To_The_Link
Eg-->
Click here
or
Click here
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>