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 #
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>
Adding a New Element to HTML5 #
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.
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
What was the big deal in the first place?
The answer to the first bit is “yes”.
What was the big deal in the first place?,
Placing Text on
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 #
I asked this question on Stack Overflow and so far the tag
varwas 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
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:
- Use microdata — for example, Schema.org’s
offervocabulary for a product’s price.
- Use the
<b>element if you’d like to draw attention to the price without indicating that it’s more important.
<strong>if the price is important, such as the total price of an itemised receipt.
<span>with a class if you need an element to style the price differently but
<strong>are not appropriate.
- 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”
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.
Poems with unusual use of white space and other formatting can be represented with a
<pre>element. See the third example in the spec.
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?
Hi. Yes I have a question, most HTML5 advocates seem to avoid!
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.
@Lawrence Cope: Easy – change your doctype to the new one (
<!DOCTYPE html>) 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.
Oli answered this question for me back then, thought I’d post it here for you, cause it coveres the whole topic:
* 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:
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:
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.
peace – oli studholme
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.
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.
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.
My last post should refer to tags like , etc.
Oh man, sort the comments out!
, , etc.
Oh man, sort the comments out!
<header>, <aside>, etc.
Leave a Reply to Tim Arnold