We’re back again to answer some more of your questions. This time we’ve included a bonus answer so you’ve got six to go at, rather than the usual five!
In this post, we’ll cover an
XMLHttpRequest query, how to define sections, understanding outlines, which markup to use for a social bar, using HTML5 with a legacy site, and hidden headings for accessibility.
I have a test web page where I read the contents of a text file in my dropbox public folder using XMLHttpRequest. However my code works fine in IE but does not work in firefox. I thought XMLHttpRequest2 would work with HTML5. Can you help? Here is the code:
I wouldn’t recommend running that as a synchronous request.
That said, I can’t see how your code would work. You’re making a cross-domain request, and Dropbox hasn’t enabled CORS (as far as I can see — and I did a couple of initial checks).
Maybe give XHR2 a better read and check out CORS, which is what I think you want.
Bottom line, since you’re hitting Dropbox, unless you do something like a JSONP request (and modify the content appropriately), I don’t think you’re going to be able to achieve what you’re shooting for here.
Defining Sections on Home Page and Category Pages #
An example website is www.kahome.com. I have no problem with header footer aside etc. However, I am confused while using
articleon homepage and category pages.
The homepage contains main menu, an important image, a brief information text, some important seasonal category links (changing seasonally), news section (dynamically changing) and secondary categories at the bottom.
First: Centered main image
<div id="orta">should be tagged as article or not?
<div id="sidebar-2">with brief company information should tagged as an article or aside? (it is currently aside because of CMS layout but i can change it)
Third: seasonal category links
<div id="ana">is tagged as article. Is it true?
Fourth: for the category page, there is a collection of products and they are completely tagged in
<article>. Should each product link be tagged as sub articles (they have just title, image, 3 words description) or is it better to use
<section>for each product box?
Last question is about your sectioning system: In html5doctor.com homepage sectioning, “article id=opener” contains a featured article (sub article) and an aside section with recent comments. However there is no top level article in “opener” section.
For “more posts from HTML5 doctor” section,
<section>is used as main frame and
<article>s are nested in it.
What is the difference between of those two sections and what is the purpose of such usage? (Probably detailed answer to this question will also answer my questions above.) Thank you for your kind interest.
- The image in the center of your homepage is not an
article, it isn’t a standalone piece of content (like a news post or shop product) and appears to be just a nice image to spruce up the homepage. However, if the photo of the table was one of your products and you were using that space to advertise that product with a link through to the product, perhaps some text content like a name and description, that could be considered an article.
- If that company information box was just on the homepage as a little introduction, I would consider it just part of the homepage and therefore not an
<article>. If it had a heading, I would probably use
<div>and make it part of the document outline. See our article on document outlines for more on this.
- I would consider the seasonal categories area a
<section>, if you added a heading like “Seasonal Categories” to the document outline, and then each category within that could be an article as they summarise the standalone content that is a category page.
- I personally don’t see a problem with using
<article>for each of your products in a listing. If you think of it like a news feed, perhaps even via RSS, each product is a standalone entity and should be treated as such. We have examples of this in our post about
<article>(see the section entitled “A
Finally, even though you aren’t marking up a blog, Dr Bruce’s article Designing a Blog with HTML5 may prove useful in helping you understand how and when to use
<article>, and other elements.
Hope this helps! Mike
Outline View #
I have a very small question, regarding outline view in html5.
Problem is in HTML5 we need a heading tag in each section, article, nav etc. for outline view. But in a document there are many places where we do not need to display any heading for an article, section or nav etc.
So there are two solution i know are below:
- Set display none to heading not need to show. But the problem is it’s not good for SEO purpose. Search engine may blacklist if they find lot of sections with display none property.
- Set a big value to text-indent so that they will not display, but again same problem. it’s not good for SEO.
Please give me a proper solution for that. Thanks in advance :)
<article>s often need a heading (but not necessarily if the
<article> is a comment, nested in a parent article). Whether or not you have heading on sections,
<nav> is entirely up to your content authors and designers.
If you don’t need them, don’t add them.
HTML5 with an Older Site #
I have been requested to build a HTML5 area within the confines of a site that is not HTML5. Is this possible and how would it work with doctypes? I would greatly appreciate any advice you can give on this.
Solution #1 (preferred)
Change the doctype for the whole site. Assuming it already has some kind of doctype (and therefore works in standards mode rather than quirks mode), all existing content and functionality will be unchanged and new stuff will be fine.
If you can’t change the doctype, you can use an obsolete permitted doctype — that is, just add the HTML5 areas and leave the doctype alone.
Got a question for us? #
That wraps up this round of questions. If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.
5 Responses on the article “Your HTML5 Questions 20”
The social bar element:
I think I prefer a
<nav>element for this. The bar is just a navigation group to the social profiles of the website.
And what do you think of a
<menu>element if you put ‘like’ and ‘tweet’ boxes? (I’m not sure of this)
Will there be more questions?
I have a small question, regarding “section” in html5.
I have known “section” is not a wrapper. But can i apply styles directly to elements such as “header”,”nav”and “footer”?
Thanks for helping me!
Yes, you can style any element, just as always.
@Dr.Bruce Lawson:ha！Thank you very much ，Doctor！
Leave a Reply to qinhan