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.