<archive for="tags">

HTML 5 Visual Cheat Sheet

WOORK - HTML 5 Cheat Sheet

Woork brings us a very handy and nicely designed HTML 5 cheat sheet:

This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.

You can download the cheat sheet in PDF or PNG format, both in black or white background, on Woork.

What other new types of elements is HTML 5 missing?

I know that a lot of developers have their own ideas and opinions on new elements that could be added to the HTML 5 specification. And, although there is a lot of qualified people involved in the WHATWG or the HTML Working Group, I think that the rest of us can also come up with some interesting pointers, theories or ideas, seeing this from a completely different point of view.

So I thought, why not write a post to ask for your ideas and opinions?

For instance, the first thing that came to my mind when thinking about writing this post was a simple one: <advertising>. And I bet I’m not the first one to think about it.

Advertising on a website is something that is totally objective (there’s no doubt, at least for the developer, on what is and what isn’t advertising) and there isn’t a standard way to include it. Reading the definition of the new elements in HTML 5, I even feel that advertising doesn’t fit in any of them (though it crossed my mind that, if aside should be used to identify something related to the main content, contextual advertising could somehow be considered an aside).

A specific element could help not only to identify advertising on a site, but maybe help to standardize the way it’s used or showed in browsers. The obvious con, and the reason that I think this would never really work, is that using a standard tag for all advertising would lead to an easier way for users to hide it or block it, so most advertisers would always choose to include advertising using the same tags specified for common content.

Anyway, that was my little idea. Maybe not that helpful, but I think at least it could point to some other ideas about dealing with advertising using HTML 5.

What other new types of elements is HTML 5 missing?

12 common problems with HTML 5

Oli Studholme talks about some common misunderstandings about HTML 5 (and their explanations).

aside is not a sidebar

Something that I’ve seen in some of the sites that are starting to work with HTML5 is the use of the aside element as a sidebar. Maybe this comes from the misinterpretation of the current definition?

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.

The element can also be used for typographical effects like pull quotes.

The definition uses the word “sidebar”, but I think that the meaning is something closer to the “pull quotes” part than to what we know as a website’s sidebar. From what I understand about that definition, I would use it to wrap some content that is related to the current article or section, but with information that’s not essential to understand it, like complementary information, trivia, etc.

This is the example from the definition. The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe:

<aside>
 <h1>Switzerland</h1>
 <p>Switzerland, a land-locked country in the middle of geographic
 Europe, has not joined the geopolitical European Union, though it is
 a signatory to a number of European treaties.</p>
</aside>

But I haven’t seen a clear definition to know for sure what would be the ideal element for a standard sidebar. If a sidebar is just navigation, it could be wrapped in a nav element. Maybe it could even be a footer.

Since not everything is related to the main content and not everything is navigation, I thought that the best fit for this site (the one you’re in right now) would be a separate section element, but I’m not completely sure that there’s not a better alternative.

What do you think would be the best element for a sidebar in HTML 5?

The status of the video tag

The video element colud allow us to include a video or movie without the need of a plugin such as Adobe Flash, which seems to be the de facto standard nowadays. But one of the main problems for a massive implementation is the lack of an agreement for a common video codec on all browsers.

The two most popular candidates seem to be Ogg Theora (open source) and H.264 (proprietary) but…

  • Apple refuses to implement Ogg Theora because of the lack of hardware support and patent issues.
  • Google implemented both options in Chrome but, due to licensing issues, cannot allow the use of the H.264 codec to third-party applications and stated that they believe Ogg Theora’s quality-per-bit is not yet suitable for the volume handled by YouTube.
  • Opera won’t implement H.264 because of the license costs.
  • Mozilla stands in the same place as Opera, due to the costs to downstream distributors.
  • Microsoft has not yet commented about the issue.

So, what could be the future of the video implementation? Ian Hickson, editor of the HTML 5 specification, sees to possible solutions:

1. Ogg Theora encoders continue to improve. Off-the-shelf hardware Ogg Theora decoder chips become available. Google ships support for the codec for long enough without getting sued that Apple’s concern regarding submarine patents is reduced. => Theora becomes the de facto codec for the Web.

2. The remaining H.264 baseline patents owned by companies who are not willing to license them royalty-free expire, leading to H.264 support being available without license fees. => H.264 becomes the de facto codec for the Web.

It seems that, for now, there’s no chance for a standard solution. For the time being, we can see some beta implementations of the video tag in sites like Dailymotion or Youtube, each with their own approach to the subject.

“NSFW” tag in HTML 5?

Via Zeldman I found out that a “NSFW” (“Not Safe For Work”) tag has been proposed for HTML 5. This is what the suggestion says:

One of the most common descriptive notes people have to write using text when they post links or images to blogs, comments or anywhere in HTML is to say “this link is not safe for work” or simply “NSFW”. By adding the <NSFW> tag, this could be made much simpler and standardized. Browsers could then have an option to automatically hide all <NSFW> content. A tag is preferred to an attribute since it could then also be used around content and not just links.

The idea is not that new, I’ve read about similar suggestions to implement this in HTML or in Microformats, but I always thought that it wouldn’t really work, or would end up being misused.

The idea to use a tag to somehow hide content goes back to the discussion of separating content from presentation and behavior, and the fact that something could be “NSFW” is mostly an opinion, so I don’t see a proper way to standardize this.

What do you think?