Your HTML5 Questions 19

by .

As you may have noticed, we’ve not written one of these posts in a while. That’s not down to us not receiving them, though. Government cutbacks have hit health services hard, so decisions had to be made. Well, that and the fact that we’ve all just been manically busy with our day jobs.

Enough waffle, though. We’ll try to get these posts going regularly again. This time, we cover marking up poems, how to add an element to HTML5, using target="_blank", adding text to <canvas>, and which element to use for price or money.

Poem Markup

Gergő asked:

Hi there Doc,

On this site should I mark up the poems as sections or articles?

Thank you so much for your mighty wisdom and super helping hand.

Cheers, Greg from Hungary

I can’t read Hungarian so can’t tell in detail, but I’d use one <article> per poem. If it’s a long poem — e.g. The Waste Land — divide it into sections:

<article>
  <h1>The Waste Land</h1>
  ...
  <section>
    <h2>The Burial of the Dead</h2>
    <p>April is the cruellest month<br>
  Breeding lilacs out of the dead land<br>
  Mixing memory with desire.</p>
    <p>Winter kept us warm ... </p>
  </section>

  <section>
    <h2>The Game of Chess</h2>
    ...
  </section>
  ...
</article>

— Bruce

Adding a New Element to HTML5

Ian asked:

I want to propose adding a new HTML5 element. Do you know who I should write email to?

Join the WHATWG mailing list, and carefully search the archive to see if your idea has already been discussed. If it hasn’t, email the list. Be sure to state a problem and give use cases.

Read more at the WHATWG Wiki.

— Bruce

target="_blank"

Juniper asked:

Howdy Docs,

Just wondering if you’d like to tackle the age old question: now that we have HTML5 and it’s not as fussy as XHTML was, what with it’s fancy X and all, is target="_blank" okay to use again instead of rel="external" and JavaScript?

What was the big deal in the first place?

The answer to the first bit is “yes”.

Regarding What was the big deal in the first place?, target="_blank" assumes a windowed environment and XHTML didn’t want to make any assumptions. Also, opening in this window or that window is behavioural, not semantic, so it should be in the JavaScript layer and not the HTML layer.

— Bruce

Placing Text on <canvas>

Naresh asked:

How can I place HTML text on a canvas? Actually, I have an editable text area where I can add/edit/modify the text like a text editor. Now I want to place this customized text on the canvas. This is the HTML text example:

<p style="text-align: center;"><span style="color: rgb(255, 0, 0);">EVERYDAY SPENT WITH YOU IS A GIFT.</span></p>
<p style="text-align: center;"><span style="color: rgb(255, 0, 0);">ALL MY LOVE</span></p>
<p style="text-align: center;"><span style="color: rgb(255, 0, 0);">Della</span></p>

Thanks in advance.

If you like, you can read the full specification for the 2D drawing API.

But placing text is relatively simple, so long as what you’re doing is straightforward. It gets trickier when you have multiple bits of text, as you need to measure the height of the text and ensure the subsequent lines are clearing the previous lines. For example:

// code goes here!
ctx.fillStyle = 'rgb(255, 0, 0)'; // red

// comic sans == the new black
ctx.font = 'italic 400 18px/2 comic sans ms, sans-serif';
ctx.fillText('Comic sans will always bring funs to dull content', 25, 50); // not

Here’s a working example.

Good luck. — Remy

Marking Up a Price

Fabrizio asked:

I asked this question on Stack Overflow and so far the tag var was proposed. What do you think?

Thanks in advance.

I disagree with using <var> for prices based on the examples you provided. I’ve posted an answer on Stack Overflow and repeated it below.

The HTML spec for <var> states:

The var element represents a variable. This could be an actual variable in a mathematical expression or programming context, an identifier representing a constant, a function parameter, or just be a term used as a placeholder in prose.

To me, this means that <var> is not suitable for the prices in your examples. It depends on what you’re trying to accomplish, but it seems your options are:

  1. Use microdata — for example, Schema.org’s offer vocabulary for a product’s price.
  2. Use the <b> element if you’d like to draw attention to the price without indicating that it’s more important.
  3. Use <strong> if the price is important, such as the total price of an itemised receipt.
  4. Use <span> with a class if you need an element to style the price differently but <b> and <strong> are not appropriate.
  5. If nothing above is suitable and you don’t want to style the price, don’t do anything.

From the examples you’ve given, there doesn’t seem to be any need to mark up prices. If the examples are from a table displaying financial information, make sure they’re in a column headed by <th scope="col">Income</th> or <th scope="col">Price</th>, respectively, for accessibility.

Hope that helps! — Oli

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.

12 Responses on the article “Your HTML5 Questions 19”

steve faulkner says

RE:

I want to propose adding a new HTML5 element. Do you know who I should write email to?

You can also join the W3C HTML working group or work through a W3C community group You can also simply write an email to public HTML comments. Also Have a look at the HTML/next wiki page for some of the new suggested HTML features.

Note: If you want to search the whatwg mail archives I suggest using the W3C copy of the WHATWG archives as the search facility is better.

Mathias Bynens says

Poems with unusual use of white space and other formatting can be represented with a <pre> element. See the third example in the spec.

Tim Arnold says

I know this is nit-picky, but shouldn’t the heading tags in each of those articles in the poem also be H1s? I believe that both SECTION and ARTICLE tags create a new outline node. Is there an advantage or disadvantage to using H1 vs. H2?

Laurence Cope says

Hi. Yes I have a question, most HTML5 advocates seem to avoid!

How can we use HTML5 considering may corporates and public bodies would have older browsers (e.g. IE7) and possibly Javascript turned off? I would guess that’s thousands of people in the UK.

We don’t use HTMl5 yet because we have not found an IE7/non-JS way of doing it, and we would like our customers websites to be accessible to everyone.

Thanks

Zámbó Gergő says

Tim,

Oli answered this question for me back then, thought I’d post it here for you, cause it coveres the whole topic:

http://html5doctor.com/html5-seo-search-engine-optimisation/

* multiple H1s have always been valid

* for a homepage showing a list of articles, using H1 for each
article heading is fine, as is H2

* check how it looks with CSS disabled

For WAI-ARIA, the HTML5 spec has a table of what the default implied.ARIA semantic is for each relevant element:

http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#wai-aria

For example, H1 has the default implied ARIA semantic of “heading role, with the aria-level property set to the element’s outline depth”.
So you could theoretically use <h1 aria-heading=”2″> for your article headings.
However if you’re going to do that, I think you
should just use H2s. I personally use ARIA roles to supplement
HTML’s native ones only when needed.

You can read more about document outlines here:
http://html5doctor.com/outlines/

TL;DR as long as you’re not gaming the system (doing dodgy stuff for better SEO) you’re fine. However if it’s just as easy to do, we
recommend using appropriate levels (H1, H2, H3 etc), at least
until things like screen readers catch up.

HTH

peace – oli studholme
@boblet

jared says

In regards to the var tag, I’ve used it before but have noticed that is has been causing me some problems for some reason.

Tim Arnold says

Thanks Zámbó,

I’ve recently leaned toward using H1 all ’round simply because of the types of projects I work on. Any little widget consisting of a heading, image, paragraph, and link could appear in any number of places on the page (main content, sidebar, syndication feeds, etc.). I’ve found that using H1 and wrapping it in an means that wherever I place it, my outline stays true.

I do see how your point about H2 both as a straight tag or an aria role makes sense and will adjust a bit to try, as much as possible, to let my H tags carry more of the responsibility to describe themselves.

-Tim

Laurence Cope says

Hi Olly

About this “Easy – change your doctype to the new one () and you’re now using HTML5. You don’t have to use any of the new elements, features or APIs until you and your customers are ready to do so. I wrote a bit more on this some time ago.”

But this does not work… I specifically refer to using tags like etc. Even with your DOCTYPE older browsers will not recognise these tags and the site breaks.

Laurence Cope says

My last post should refer to tags like , etc.

Laurence Cope says

Oh man, sort the comments out!
, , etc.

Laurence Cope says

Oh man, sort the comments out!
<header>, <aside>, etc.

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.