Your Questions #16

by .

Doctor treating a patient illustration The clinic is getting busy with more HTML5 ailments! This week, we’ll cover the separation of formatting and content, custom elements, using <aside> for social links, sections with no visible titles, and <canvas> in the DOM.

Separation of formatting and content

Graham asked:

When I first started learning html and CSS I was constantly told not to use b or i tags as the idea was to completely separate formatting from content. Is this now not the case?

In HTML 4 (and XHTML 1.x), the elements <b> and <i> (plus some others) were presentational — they only had visual meaning. This doesn’t work so well for blind users, for example.

In HTML5, presentational elements have either been cut or, as in the case of <b> and <i>, given semantic meanings to make them media-independent. You can find out more here: The <i>, <b>, <em>, and <strong> elements and The <small> and <hr> elements.

So to directly answer your question, in HTML5, <b> and <i> are now content (semantic), not formatting (presentational).

peace – Oli

Custom elements

Eric asked:

It is possible to use custom elements in HTML5 to be more semantic; however, is it ill-advised? For example:

<footer id="page-footer">
<copyright>Copyright ©...</copyright>
</footer>

Umm, no, HTML5 doesn’t allow “custom elements”. While browsers will try to recover gracefully if you do this, making stuff up is definitely ill-advised — something like <copyright> will have no meaning for browsers and could lead to problems in IE.

If you want an element for a copyright statement or other short legalese, there’s already a perfectly good one in <small>.

If you can’t find a more semantically appropriate element, use <span> for phrasing (inline) content, <p> for a block of phrasing content, or <div> for flow (block-level) content, and add a class name that indicates the semantics — e.g. <span class="lorem">Lorem ipsum</span>.

Hope that helps!

peace – Oli

Marking up social links

A reader asked:

Could a list of share icons (twitter, facebook, etc) be considered a candidate for use of the nav element? and do links in a nav element have to be into the same domain name”?

<nav> is for navigation around your content. On my personal site, I have a link to my Flickr photostream marked up in the same container as links to my own contact page, etc. I think the link to Flickr is conceptually no different to navigation within my personal site: it’s all my content. If my photos were on my own domain (as they used to be), I wouldn’t hesitate to include them in <nav>, and I wouldn’t hesitate to include this same content within <nav> today.

A list of share icons isn’t <nav> for two separate reasons.

First, they aren’t meant to take you somewhere else. They’re designed to perform an action of tweeting/”liking” a link to a page.

Second, and most importantly, they’re not navigation around your content. As the spec says “Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element.”

As a list of share icons is tangential to your content, I’d probably use the <aside> element: “The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography”. For more details, check out our <aside> revisited article.

Social links are the kind of thing that could be cut from a feed reader without diminishing the value of the content. As an additional note, remember that you can also place an <aside> at the end of an article, like a footer. In spite of its name, <aside> doesn’t have to be a sidebar.

Thanks, Bruce and Mike

Sections with no visible titles

Francesco asked:

I have some divs, in a page, that semantically would make more sense as sections as there are natural headings for them, but they’re not written *inside* them, they’re outside. There are tabs to switch the visibility of these sections, and the tab navigation is on their left… so the actual title is only there, and not repeated inside of the sections. But besides that they really are sections… they even had “class=section” in the old version. :-)

What would the best solution be? Put an h1 in there with display:none? It would make the outline correct, but it looks like a hack.

You should reorganise your markup to ensure the headings are within the section. Then you can use some CSS positioning trickery to move them into place. Don’t use display:none, though, as that’s invisible to everyone, including assistive technologies like screen readers.

Cheers, Rich

HTML5 <canvas> and the DOM

Elango asked:

Is it possible to get the elements i have drawn into the canvas using some API. Say for eg i draw 2 circle and 2 lines is that possible for me to get these information from Canvas by using DOM API’s

No. Think of a canvas like a canvas you would physically paint on. If you paint a red stroke and then paint over that in blue, you can’t get back to the original red stroke. The canvas API works the same way: once your pixels are committed, you can’t go back.

You want SVG (or try out Raphaël).

Cheers, Remy

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.

8 Responses on the article “Your Questions #16”

Ian Devlin says

Bruce, Mike,

I think the link to Flickr is conceptually no different to navigation within my personal site: it’s all my content.

I disagree with this as whilst the content might be yours, the target location is away from the site the user is currently on and therefore, to me, is not site navigation. You say as much yourself later with your first reason why social links shouldn’t be within a nav element: they aren’t meant to take you somewhere else, which a link to Flickr would be.

Bruce Lawson says

Ah, Ian, I definitely misexpressed myself. As far as I know, the social icons aren’t meant to take you anywhere (so they’re not nav). Instead, they’re meant to *do* something, like fart out a tweet, or a “like” or other such web detritius.

Things that go somewhere = links, and if they’re within your stuff, they’re nav. Things that *do* something should ideally be buttons.

Ian Devlin says

What about social icons that take you to someone’s Twitter, Facebook, or LinkedIn page? To me these aren’t suitable for nav, as they’re external.

I think we’ll have to agree to disagree on this one, although it begs the question which is the proper use?

Dale Cruse says

Good discussion of for use in “your content.” I like it.

Do you think the HTML5 Outliner at http://gsnedders.html5.org/outliner/ will ever NOT throw a Python error when uploading a file? Perhaps that could be fodder for a future column? ;-)

Paul says

As an additional note, remember that you can also place an aside at the end of an article, like a footer.

Could I use footer instead of aside there?

A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Louis Simoneau says

Regarding the question about sections with no visible titles: if the titles don’t need to be in the sections for the content to be understood, then there’s no need to reorganize the markup. The way I see it, the tabs to switch between sections are a <nav>, and the sections are fine on their own.

Mike Chambers says

On the question about Canvas / DOM, the EaselJS Library:

http://www.easeljs.com

provides just this sort of API / wrapper for the canvas element.

mike chambers

Richard Clark says

@Dale, I’m not sure that I’ve seen that error, which browser OS are you using? I’ve used it on Mac & PC in a few browsers & it’s always been fine for me.

@Paul, you could use a footer rather than aside, but social links aren’t really related documents or copyright. Plus, as you can drop an aside from an article and the article should still make sense, it seems correct to use an aside.

@Louis, they don’t need to be inside for us to understand the content, but to a search engine, screenreader or browser it would make more sense to have them inside to create a clear document outline. Maybe we’ll do an article or simplequiz on marking up this type of thing.

@Mike, thanks for pointing out EaselJS, I hadn’t seen it but not sure about Remy who answered that question.

Join the discussion.

Some HTML is ok

You can use these tags:
<a href="" title="">
<abbr title="">
<b>
<blockquote cite="">
<cite>
<del datetime="">
<em>
<i>
<q cite="">
<strong>

You can also use <code>, and remember to use &lt; and &gt; for brackets.