I’m writing an article on using SVG for site decoration and backgrounds. Since SVG is now allowed in HTML via HTML5, it seemed a good time to introduce people to the concept. Especially since the nightly build of Firefox 3.7 has a configuration option (“about:configure”) where you can enable HTML5.

To test the new option in the Firefox nightly, I created a simple file, with a SVG red circle that can be resized with JavaScript. (HTML5 version and XHTML version).

Clicking on the circle will resize it, but also throws up some alerts outputting information about metadata in the element, including namespace, prefix, and element tag name. I wanted to see how Firefox parsed the SVG via HTML, as compared to XHTML. After all, it’s not unusual for SVG files to have namespaced entities in them, for metadata (Creative Commons RDF/XML), or even placed by a tool (Inkscape).

The results are about what I expected. The namespace, prefix, and tag element name all displayed according to their namespace goodness in XHTML, but the namespace didn’t work with the HTML parsing.

To me, this isn’t a showstopper. People who have been working with the DOM and JavaScript have had to deal with differences through the years, such as event handling differences between IE and the rest of the browser world. You just check to see MIME type of page, and either expect to look for the localname as a mashup between prefix and local name, or it’s handled properly.

It’s a little *challenging because prefixes aren’t always going to be the same. However, for the most part, if you need to access the data, you can either control the prefix used, or you can work through the differences without having to resort to rocket science. I rather expect both Dojo and jQuery to incorporate this functionality, once HTML5 gets wider use.

I also have been trying the new SVGWeb product from Google, and fine folks like Brad Neuberg, which enables SVG in HTML for all browsers, including IE. It does this by incorporating a JavaScript library that implements most of the SVG in Flash. Since Flash is pretty much ubiquitous, folks won’t have to install something new for the page to work.

I’ve used SVGWeb to manage the background image for The SVG Feed, which is now formatted as HTML5, and served as HTML. It works nicely in Safari, Opera, Firefox, and even SVG-challenged Chrome, but IE has a problem. Unfortunately, height and width are handled differently with IE as compared to the other browsers, so the values are coming up null in IE. However, Brad has added this as a bug, and I expect this page will work in the next iteration of the product.

Now, there are some differences between SVG parsed by an HTML5-enabled browser, and using SVGWeb. My earlier example embedded SVG directly in the page, but SVGWeb expects an inline SVG element to be enclosed in a script tag:

<script script type="image/svg+xml">

Embedded SVG in a script tag won’t work if you’re only dependent on HTML5 parsers. However, SVGWeb also works with HTML5 parsers, so you’re set, either way.

Until all browsers support SVG, in HTML or XHTML, SVGWeb provides the first real breakthrough in using SVG on the web. And here you thought that SVG was only good for **Scrapbooking.

*It’s a little more challenging for server-side applications parsing the web page, but again, the differences aren’t insurmountable.

**The background SVG I’m using for my site originated as a scrapbook pattern for the cutting machine, Cricut.

HTML5 Specs W3C

If the Web were the petroleum industry

Ian Hickson, sole author of the HTML 5 specification, on standards in a recent #whatwg IRC discussion:

i think standards bodies are an outdated concept

Using the Firefox nightly, I was able to open an HTML5 document that contains a SVG graphic, and see it rendered, though the page was served as HTML. Wonderful! Unfortunately, running it through the HTML 5 conformance validator was less than joyful, which I’ll cover in more detail later.

For now, returning to Ian’s quote at the beginning of this post, I find it ironic that not only do we welcome, we demand that the browser companies be given free and unfettered reign to define the future of web standards, as they will.

Ironic, because if the web were any other industry—petroleum, pharmaceutical, airline, auto, electrical utility, and so on— allowing the companies who produce products in the industry, free and unfettered reign to define the standards for their industries, would draw howls of protests, and a demand for accountability.

Technology Weblogging

WordPress attacks

I’m usually good about reminding (nee nagging) my friends about updating their WordPress weblogs, but in case any of you missed the last upgrade, there’s a good chance your weblog may have been seriously compromised. Lorelle covers the exploit and how you can tell if your site has been compromised.

From other discussions, I gather that if your site has been compromised, it’s going to be a mess to try to fix the problem, because the hacked software is now a part of the database, so exporting your data and re-building won’t help.

It’s not unusual for CMS to develop security problems that need fixing, but I am a little surprised that there’s been no official statement from the WordPress folks and the parent company, Automattic about this issue. Regardless of notification, it’s really important to always update your sites when security releases are issued, no matter what software you use. When I get an update notice for my Drupal sites, I update immediately. If updating is too much of a hassle, or you’re intimidated by the process, then you need to hire someone to help you with upgrades, go with a hosted solution, or change your software.

update Robert Scoble’s site was one that was hacked. There’s an interesting discussion on this at FriendFeed though how long that link will be viable, is hard to say.

I found it disingenuous of Matt Mullenweg to blame Rackspace for the problem Scoble had because of the WordPress exploit. Having said that, security updates rarely impact on plug-ins, and if a plug-in is broken, disable it and do the security update, anyway. I don’t know of any module in Drupal, outside of core, that I am so dependent on that I can’t upgrade Drupal based on a security release. But then, the modularization architecture with Drupal is different than that for WordPress.

As for Scoble, I feel for him, but he’s got plenty of free support. I feel worse for the folks who have to go it alone when trying to fix their sites. Hopefully some of the new articles on this story will provide the help you need, including one just released by Matt at WordPress. I’d offer to help, but I don’t run WordPress now, and I’m becoming less familiar with the tool with each new release. Still, if you’re desperate, holler, and I’ll see what I can do.

HTML5 Specs

This is your site. This is your site on HTML5.

Recently, a group of well known web designers issued a “Super Friends” declaration of support or HTML5, with an attached set of concerns. Most of the concerns had to do with the new “semantic markup” elements included in HTML5, such as section, article, and so on. I’ve not previously discussed these new semantic page markup elements, because I had other fish to fry. However, I decided to take a closer look at the elements, particularly at how I would use them for my Drupal sites.

Current Setup

Currently my page has a header, a footer, one sidebar, and the main content area. I have an H1 title for the page, and use H2 for weblog post titles, and H3 for sidebar titles.

I have a main navigation bar at the top of the page in the header, with a skip link for screenreaders. I also display an exploded view of my site navigation in the footer, in addition to copyright/about links. The sidebar contains additional navigational aids, such as links for monthly archives, recent writings, popular items, images, and so on.

All of the content areas are structured using a variety of unordered list items and DIV elements—all of which is typical, not only for a Drupal site, but also WordPress sites, and other CMS themed variations. I also use inline SVG for decoration.

Conversions: header, nav, and hgroup

Starting from the top, according to the HTML5 specification, I would use a header element to encapsulate the content that is currently contained within my DIV element given a class name of headwrap. This would include the top-level navigation, as well as the site title, which remains as an H1 header. According to the spec, the header doesn’t take part in the web page’s outline, which would map to what I would expect, both as a web designer and as a book author. In particular, as a book author, I wouldn’t expect the book title and subtitle to be part of the outline, nor would I expect the Table of Contents to actually display as part of the outline given in the TOC, and a book’s TOC, and a site’s navigation menu are synonymous.

In addition, I would also convert the DIV containing my site’s navigation to using the new nav element, wrapping it around the existing list items. From a Drupal perspective, the nav element maps to the Primary Links block that is standard with all Drupal installations. If I used the Secondary Links block, I would wrap also it in a nav element, and place it just below the main navigation menu.

Though I’ve seen several articles that list the nav element separate from the header, I would embed the nav element within the header, because I consider the main navigation to be part of the introductory text that the page header is supposed to contain. I think you could have them separate, but the key to determining whether they should be combined or separate is if the header part changes separately from the navigation section. If they’re not consistent with each other, they probably shouldn’t be grouped. If they are, they’re grouped. My main navigation and header contents never change, so I’m grouping them within header. Regardless of choice, the HTML5 specification does seem to support both variations of grouped and ungrouped header and nav.

My main navigation menu contains a skip link, which is a link that’s intended to take the person to the content area directly. There’s no harm in the link, and until screenreaders adapt fully to HTML5, I’ll keep the link.

Drupal also provides for a secondary title, or tagline area, which I don’t use. If I did, though, I would use the hgroup to group the H1 for the title and the H2 used for the secondary title. I know folks have had problems with hgroup, but as a book author, I’m aware of title and subtitle, and how they’re treated as one single entity, though with differing formatting. It really wasn’t a stretch to extend this concept to a web page, and the fact that hgroup just allows me to use two different heading element types, but treated as one unit. The element also ranks the headings within the hgroup by highest *header value, which is what I would expect.

Next comes the main content.

Conversion: Main content area, article and section

The main content is a little tricker, but again, I found if I looked at the HTML5 specification more as a book author, and less as a web designer, I felt a little more comfortable with the new elements.

Currently, all of my content, including header, sidebar, and footer, is wrapped in one big DIV element with a class name of rap. I wouldn’t change this, primarily because the overall wrapping has nothing to do with semantics, and everything to do with overall structure and presentation. It is actually synonymous with the body element, and used primarily to manage the margins of the content. Since the body element is, by definition, its own semantic element, defining the rap element using semantic markup is redundant.

For the actual content area, currently I have a DIV element wrapping all of the postings, and then list of one or more postings, each with an H2 header, a metadata section, the main content, and an inner footer containing other links, such as those for adding comments, number of page views, and so on.

After careful reading of both the section and article elements, as well as looking at past articles on the elements [1][2][3][4], I decided I would wrap the entire content area in a section element, though I’m ambivalent on this, and think that keeping it wrapped in a DIV would also work. The reason why I could keep the section as a DIV, is there is nothing about this section that is inherently useful, other than being a group of content. For each individual page, it’s actually redundant, because the main content area, and the article, would be synonymous. Since, there’s nothing semantically useful about the main content, the use of a DIV element would be acceptable, even preferred.

However, I thought about my use of the skip link, and the fact that it goes to the main content area. This, in a way, provides semantic justification to actually use a section element—it’s meaning extends beyond styling. The section is, according to the HTML5 spec, a thematic grouping of content, typically with a heading, possibly with a footer. One could even add a header, with “Main Content”, and there wouldn’t be anything out of the ordinary about it.

Converting the markup for the weblog post was a somewhat simpler task. It’s a given that each weblog post would be wrapped in an article element, especially since this type of element is used with content that can be stand alone, or pulled directly from the page and reproduced elsewhere. Think of syndication feeds, and what works for the web page, works for the feed, and hence, using article is a natural choice. How I would mark up the content within the article, though, gets a bit tricker. I had to put my web designer hat away, and put on my book author beanie with the rest of the content conversion.

Within the article element then, I would add a header for the title, and the address element for the author name. Since address is really meant for “contact” information, I would also wrap the author name in a link for the author’s contact page, or email address, I’m not sure which at the moment.

I have other material at the beginning of a weblog post that doesn’t seem to fit within any element, such as publish date, and taxonomy. And this is where things really get tricky.

Should I continue using a DIV element for this data? Or is this where I would use a new section? There is a time element, but it is described as a machine readable element for adding information to a calendar, and not appropriate for my date, at all. Plus, I use **RDFa for marking up all of my metadata such as this, and I’m not sure how Dublin Core data will work with the time element.

But hold on folks…the time element has a second definition, which is semantically different. There is an attribute, pubdate, associated with time. This is a boolean value. If set to false, then time is a calendar event; if set to false, then time is an actual publication date, if the time element is contained within and article. So I would use time but make sure that pubdate is set to true. I would also add my RDFa annotation to the time element.

I’m not entirely happy about the overloaded semantics of the time element, but grudgingly willing to use it. I’m not so bugged about the overloading to actually protest against the element, or refuse to use it, primarily because I really depend on RDFa to record my meaningful semantics in the web page.

As for the other material, such as the taxonomy items, I decided I would leave them in a DIV element, each with its own RDFa to annotate with the metadata information. I imagine I could use a section element, but frankly, it doesn’t feel right. The information really isn’t a new section, it’s just annotative data about the article. But since it is annotative about the article, I believe it, like the time element should be in the article’s header.

HTML Conversion: Aside, Figure and Legend

The rest of the article will be marked up with the usual mix of unordered lists, paragraphs, block quotes, and so on. Another change, though, will be the use of the new aside element. As a book author, I am aware of what a sidebar is, and how it’s used: it’s used to annotate text that doesn’t have to be included within the flow of the page, but could be pulled out and placed elsewhere, depending on page layout. The text itself is related to the main chapter topic, but it’s additional information that isn’t necessary in order to follow the flow of the main text.

It’s unfortunate that sidebar has another meaning in web page design, being use to refer to the a secondary column within the page flow that could contain navigational items, images, ads, and so on. What makes it doubly unfortunate is that the term sidebar is used to describe aside in the HTML5 specification, but the term is used as a book author or publisher would use the term, not a web designer.

Regardless, it could be a handy element, and I have no confusion about how it’s meant to be used, though I’m concerned that current discussions will redefine it’s use—to that of web design sidebar—in which case I won’t use it.

Another main content element impacted by HTML5 is how to annotate images. Currently, I use the img element to mark images. However, HTML5 introduces the figure element, which can be used to wrap the img element, and also a legend element, which provides the image’s caption. It’s meant to be used when the figure is such that it could be pulled, along with its caption, to a separate space within the web site, such as an appendix.

Again, thinking more like a book author and less like a web design person, figure makes perfect sense. You wouldn’t use it to wrap decorative images that you insert into an article to add a bit of color or flair, but you should use it when you reference the image from the text, or it serves an illustrative purpose.

There has been some pushback on figure primarily because legend has been redefined from HTML 4, where it was used with a form fieldset. However, I think of it less as a redefinition, and more of a extension of the same capability to new areas. My main concern is how existing browsers would handle the element when they parse it. That’s the real issue when you redefine or extend the purpose of an element in HTML5 that existed in prior HTML versions. Still, unless I find browsers throw a hissy fit, I would probably use figure and legend. I would also continue using the alt attribute to mark up the image for accessibility purposes. Speaking of accessibility…

HTML Conversion: Accessibility and ARIA

I am committed to making my pages as accessible as possible, and that also includes the use of the summary attribute for data tables, as well as using the newly defined ARIA annotation of HTML5 elements [5]. The changes to accommodate the new attributes, role and aria-* are extensive, and will require a careful perusal of their purposes, to ensure I understand how best to use them.

However, it shouldn’t be overly difficult to incorporate the ARIA annotation, especially with a tool like Drupal, and especially with Drupal 7, when we’ll have a much finer control of the page generation.

HTML Conversion: Article and Footer, Article and Comments

At the end of my weblog posts is more information, such as a link to add comments, comment count, page views, and so on. This data is currently enclosed in a DIV element. From my understanding of the HTML5 description, I should be using footer to encapsulate this information.

In addition, from my understanding of the HTML5 specification, I should use a section element to wrap the entire comment area, and then use article for each comment, each with its own little header and footer. It seems like a lot of elements, but all of these items are currently wrapped in DIV elements, so the number of elements will end up virtually the same after conversion.

This ends the description of the main content area. Other elements will be used in the main content, including SVG, possibly MathML, and video, code, pre, and ***dialog, but I’ll leave these for another time. Next up, is a discussion on the remaining two sections of the web page: the sidebar and the main page footer.

HTML Conversion: Sidebar and main page Footer

One thing I would definitely not do, is use aside for the web document’s sidebar. Not as it is currently defined, and if it gets redefined, I still wouldn’t use it.

The use of section to enclose the sidebar makes sense. If you think on it, my current document isn’t main content and sidebar—it’s two columns, with different data in each. So, if you use section for one column, you should use section for the other column(s).

Within the sidebar, though, I use DIV elements to manage the different display blocks. Technically I suppose I could use the section element for these, but I use DIV elements specifically to control the spacing, layout, and presentation of the data in the sidebar. To me, this fits the semantic purpose of DIV, which is a perfectly acceptable element. I will continue to use the DIV element when I’m grouping content specifically because I want to group them for a specific reason, and that reason is more to do with styling or ease of access than because of any semantic meaningfulness.

However, I will annotate the contents of the sidebar (or second column, if you will), with ARIA annotations, as well as RDFa, and make use of unordered lists to display lists of items. I’m not throwing semantics to the wind.

As for the page footer, it is odd to have a footer associated with each article, and then have a page footer. However, the content already has class names to mark the differences (including how each is styled), and I will continue with those class names. As a book author, I think of article footer as footnotes for a page, and web page footer as end notes for a chapter, or book. Gets me through the web designer angst with multiple footers in a page.

Currently my web pages have an exploded site menu contained in the footer. I suppose one should wrap this in a nav element also. Originally, the footer was defined in such a way that it couldn’t contain a nav element, but I gather that feedback on this item has changed the HTML5 author’s mind, and we can now use a nav element in footer. Hard to say, the information isn’t readily apparent to a web page author from the HTML5 document.

The footer will contain an address element with contact information, and probably a section to enclose the other data, such as copyright.

The overall page footer does make me wonder, though, whether I shouldn’t convert the overall DIV element identified as “rap” to a section because the footer element is associated with sectioned content, which includes articleasidesection, and nav. Actually, the more I think on this one, the more I think I’ll convert “rap” to a section element, too.

HTML Conversion: the remaining issues

I still have other content that I need to convert. This includes the page level navigation that’s at the end of a Drupal book, or at the bottom of archive and main pages. One would think to use the nav element, but the description of the element seems to preclude its use:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. 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. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.

This also makes me wonder about the use of nav to wrap my exploded site map in the footer, as described in the last section. The same goes for the sidebar links for archives, popular content, and recent writings: these are, technically navigation aids. However, they don’t seem to fit the constraints surrounding nav. In fact nav seems to be more about a site’s main menu than necessarily navigation, provided more as a way of eliminating the skip link than actually annotating navigation. The nav element definitely needs more clarification about its use. Right now, the description of when to use it is too vague.

I’ll have to think more on the use of nav, not to mention sectionarticleheader, and so on. But I think I’ve made a good start on converting to an XHTML5 document. To continue, I would do what others are currently doing, and rename class and identifiers on my DIV elements to what their HTML5 equivalents will be, just to test out how it all works together, and still ensure proper CSS support in all browsers.

I’m not ready to convert to XHTML5 yet, though, not while there are unanswered questions, and unresolved issues. For instance, I did an HTML5 page with an inline SVG graphic served as HTML, which should be valid, though no browser currently renders inline SVG in HTML. However the HTML5 validator throws numerous errors. There are deep gaps in understanding between web page author and implementors, and among web page authors and implementors, about what is “valid” or “conforming” HTML5. Too deep, and too many to roll out for a production site. Perhaps after Last Call.

*The biggest problem I have with the new HTML5 elements is their names. Prior to HTML5, when we talk about header we were talking about a generic entity, page fragment, or concept. Now, when I mention header in context with HTML5, am I mentioning the element? Or am I referencing the concept? The same applies to section, article, and footer. Sometimes using common names is not the best solution when it comes to designing a new markup language. Still, we’ll have to hope that the context of use will be enough to differentiate between generic concept and specific element.

**Currently, I serve my pages up as application/xhtml+xml, so it’s no problem incorporating RDFa into the content. Contrary to the persistent rumor, XHTML is alive an well in HTML5 (though the encapsulation of XHTML within a document labeled “HTML5” has been caused considerable confusion). However, the RDFa community is currently working on a new draft of RDFa that will allow RDFa annotation in documents served up as plain HTML, too. This is important, because RDFa is incorporated, by default, into Drupal 7, as well as being the format most used for Creative Commons licenses, and some of Google’s new metadata search efforts. In many cases the documents involved are served as HTML, not XHTML. Whatever happens, and by whom, RDFa will exist in HTML5, regardless of whether the document is served as HTML or XHTML, and regardless of whether such use is deemed “conforming” or not.

***I dislike the dialog element. I do not like redefining the behavior for the dt and dd elements based on the container element (dialog or definition list element, dl). I understand about issues associated with redefining definition lists for dialogs, but the state isn’t improved when you redefine the semantics of dd and dt, depending on their container. Nothing is gained.



Where the healthcare reformers are failing…badly

aroli was talking about an incident in her neighborhood via Twitter that I later found out to have been at a Healthcare reform protest put on by MoveOn. Karoli recounts the pro-reformer’s side of the event, and there seems to be any number of people wanting to jump on that particular wagon. I’m not one of them.

The facts, if I understand them correctly, are that a group of about 150 pro-reform protestors showed up for a rally, and a much smaller anti-reform group formed across the street. Everything should have been fine if this state had been maintained. The worst that could happen is people going hoarse yelling at each other.

It didn’t remain the same though. Karoli writes that the anti-reform protestors were blocking access to the protest side, but her photo shows no one was blocked, and the anti-reform protest was too small to physically block anyone’s access to the cross walk. More importantly, the anti-reform people stayed on their side of the street. It was the pro-reform person who started this brouhaha, because they were the ones to cross the street, effectively busting into the other side’s territory. In Karoli’s words:

Several minutes later, there was another altercation. My best recollection is that this man saw what happened to the woman and reacted to it. I cannot say with certainty where he was when he saw it — he may have arrived and was navigating his way through that group, or he may have crossed the street to defend her. He was confronted by the same man. I could tell from where I was that the man was belligerent, angry, and confrontational.

The man in the orange shirt hit the pro-reform guy (I’m going to call him PR Guy just to keep the players straight). Hard. ( tweeted in real time) He punched him in the face, knocked him to the ground and into that thruway. As you can see from the photo, cars drive straight through that without stopping. The pro-reform guy could have been run over. He got up, tried to get back up on the curb, but Orange Shirt guy was in his face. Finger in his face, PR Guy standing, steps up to the curb, and there’s a scuffle. Orange shirt seemed to have PR Guy in a hold, but again, I was across the street, so won’t state that as absolute fact. Next thing I see is PR Guy’s hat being tossed into the street, both yelling at one another, then Orange shirt walks away, PR Guy picks up hat and crosses to our side.

When he gets to our side, he tells a story in one sentence: “He punched me hard, straight in the face, so I bit his finger off.”

The woman that Karoli references was someone handing out flyers, who went across the street for some reason. Supposedly while on the other side of the street the man in the orange shirt, whose finger was later bit off, shooed her back across the street, doing so in what Karoli calls an aggressive manner.

Fine. Dandy. If the woman felt threatened, she should have called the police. However, if the woman was across the street trying to hand out flyers to these people, which my spider sense tells me could have been a very real possibility, then it’s not surprising she triggered an angry response. You don’t bait people when emotions are high.

Regardless of why she was on the other side, the woman crossed back and she was in no danger. It was inappropriate for any other pro-reform protestor to cross back over, regardless of reason. This put the pro-reform movement squarely into acting as the aggressor in this event.

Regardless of who did what, the pro-reform movement was in the wrong. Worse, they allowed themselves to be set up in such a way that it could potentially help discredit what they’re supposedly protesting for.

I have to wonder what’s more important to the pro-reform movement at this time: the healthcare reform? Or the healthcare reform protests? Because from my seat, the latter has real potential to hurt the former, if more incidents like this occur.


update More information on the incident. It sounds like this was more of an altercation that came about because Code Pink also attended the protest. Why Code Pink felt they had to be there is anyone’s guess.

last update Corrections: the person who lost part of his finger was the first to actually cross the street and confront a pro-reform protestor, before crossing back over to his side. He was the man wearing Khaki, not the orange shirt guy. He also threw two punches at the guy who bit him, not one. The police are not actively looking for the guy who did the biting, probably because Khaki was the one to throw the first punch.

Frankly, no one was an innocent bystander in this. Time to move on to what really matters: healthcare reform.