Code Snippets, Tips & Tricks: October 2012

Your HTML5 Questions 20:
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.

XMLHttpRequest #

Kieran asked:

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:

<!DOCTYPE html><html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>JS file reading</title>
  <!--<link href="layout.css" rel="stylesheet" type="text/css">-->
</head>
<body>
  <script type="text/javascript">
    var oRequest = new XMLHttpRequest();
    var sURL = "http://dl.dropbox.com/u/34358808/test1.pkl";

    oRequest.open("GET",sURL,false);
    oRequest.setRequestHeader("User-Agent",navigator.userAgent);
    oRequest.send(null)

    if (oRequest.status==200) alert(oRequest.responseText);
    else alert("Error executing XMLHttpRequest call!");
  </script>
  Reading files with javascript
</body>
</html>

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.

— Remy

Defining Sections on Home Page and Category Pages #

Özer asked:

An example website is www.kahome.com. I have no problem with header footer aside etc. However, I am confused while using article on 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?

Second: <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.

Hi Özer,

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 <section> rather than <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 <section> containing <article>s”).

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 <section>, <article>, and other elements.

Hope this helps! Mike

Outline View #

Tarun asked:

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 :)

I think <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.

— Bruce

HTML5 Element for a Social Bar #

Ibo asked:

I was wondering what HTML5 tag to use for the a social bar (Facebook and Twitter links, etc). Is there a common practice for sectioning social links? Should a social bar be defined as a section or should it be as grouping links? Has a tag like <social></social> ever been considered for the HTML5 standard? Could a tag like this be beneficial to SEO?

Even though I might be a rookie at coding html, I take great pride and comfort in coding semantically correct html.

A design I made has a social bar on the very top of the page. Should I include it the header section like I do with the main navigation tags? In coding html, is this the best practice?
<header>
  <div id="social">...</div>
  <h1>...</h1>
  <nav>...</nav>
<header>

Seems to me that a social bar is peripheral to your content rather than introductory or navigation, and therefore shouldn’t be in the <header>. As it’s peripheral, I’d probably put in in <aside> — most likely just a plain old <div>, but either way not in a header.

— Bruce

HTML5 with an Older Site #

Clodagh asked:

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.

Solution #2

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.

— Bruce

Hidden Headings for Accessibility #

Tim asked:

I have been seeing more of these pointers popping up lately advising to place a heading (h1 etc.) before each section in our document telling what the section is. For example, <h1>Site Navigation</h1> placed immediately before the nav that outlines your main site navigation. The presumption in these cases is that you would then be hiding the text via text-indent so that it didn’t appear to visual site visitors, but would be available for sight-disabled users so they know what the section is and so that the document outline is correct and sections. This seems odd to me and I’ve struggled with why. Is this a good practice?

See Webcredible and About.com.

Good question, and I’m considering writing an article about it. It’s come about because it’s well-known that people with screenreaders often navigate a page (or derive a preliminary mental map of its structure) via its heading structure. Here’s a YouTube video by a blind web developer explaining how he does this. In JAWS, for example, a user can hit the H key to jump from heading to heading, hit “2″ to go to the next <h2>, “3″ to go to the next <h3>, and so on. (This is why I recommend that you don’t make all headings into <h1>s in the hope that the HTML5 Outlining algorithm will deal with it, because until browsers actually understand that, screenreader users will get a completely flat hierarchy. That’s changing, though; Jaws 13 supports the h1-only technique in Internet Explorer 9 and Firefox. See Accessible culture for more).

However, power users of screenreaders have other mechanisms to navigate a page. Since the Webcredible article you cite (dated 2007), many assistive technologies now allow navigation via ARIA landmark roles. HTML5 mints new elements like <nav> and <aside> that have similar semantics to those ARIA roles (ARIA can be used in any markup language, including HTML4 and SVG).

Thus, because a user can get to the <nav> through other means, it can be argued that having a heading “navigation” is redundant. Or not: my own blog has headings for navigation types such as “categories” and “recent comments”, but I don’t have a heading “main nav”, “main content”, or “footer”.

I don’t do it for two reasons. First, it feels redundant to me. The structural semantics are there for user agents to consume. Second, I dislike using CSS to hide content from the view, not because of worries about SEO penalties, but simply because it feels wrong to me.

But your mileage may vary.

— Bruce

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.

Your HTML5 Questions 20 originally appeared on HTML5 Doctor on October 9, 2012.

11 Must Have Free WordPress Plugins For Every WordPress Installation:
WordPress does not need any introduction; it has become one of the most commonly used blogging platforms. It comes with a plethora of plugins to make your blogging experience even more interesting and enjoyable. WordPress plugins not only add additional functionality to your blog but will also make them look visually appealing. If you look into WordPress Plugin Directory, you will find more than six thousands plugins to choose from.
In this round up, we are sharing a collection of 11 extremely important WordPress plugins that are required for every WordPress installation. This list contains some important plugins to let you secure your blog from spam and help you attain good ranking on different search engines.
Akismet
Akismet Possibly the best way in the world to protect you from web spam.

Contact Form 7
It allows you to flexibly design the form and mail. You can manage multiple contact forms as well. In addition, it supports many features including AJAX submitting, CAPTCHA, Akismet spam filtering, file uploading, etc.

Google (XML) Sitemaps Generator for WordPress
This plugin generates a XML-Sitemap compliant sitemap of your WordPress blog. This format is supported by Ask.com, Google, YAHOO and MSN Search.

WP Google Analytics
This plugin allows you to use the powerful Google Analytics to track your WordPress stats. It’s easily configurable to:

All in One SEO Pack
WordPress SEO plugin to automatically optimize your WordPress blog for Search Engines.

White Label CMS
The White Label CMS plugin is for developers who want to give their clients a more personalised and less confusing CMS.

WP-DB Manager
Allows you to optimize database, repair database, backup database, restore database, delete backup database, drop/empty tables and run selected queries. Supports automatic scheduling of backing up, optimizing and repairing of database.

cformsII
cforms is a powerful and feature rich form plugin for WordPress, offering convenient deployment of multiple Ajax driven contact forms throughout your blog or even on the same page.