Snook has been on a roll lately, sharing lots of great insights into front-end development. This is a particularly astute post about that perennial issue of naming things.
There is one truism that has been constant throughout my career on the web, and it’s this: naming things is hard.
Trent talks about the strategies out there for naming things. He makes specific mention of Atomic Design, which as Brad is always at pains to point out, is just one way of naming things: atoms, molecules, organisms, etc.
In some situations, having that pre-made vocabulary is perfect. In other situations, I’ve seen it cause all sorts of problems. It all depends on the project and the people.
Personally, I like the vocabulary to emerge from the domain knowledge of the people on the project. Building a newspaper website? Use journalism-related terms. Making a website about bicycles? Use bike-related terms.
The best ARIA role is the one you don’t need to use.
This is such an incredibly useful resource by Steve and Léonie: documenting how multiple screen readers handle each and every element in HTML.
It’s a work in progress, but it’s definitely one to remember the next time you’re thinking “I wonder how screen readers treat this markup…”
Here’s a classic. David Siegel—of Creating Killer Websites fame—outlines exactly why he turned his back on that 1×1 spacer .gif trick he invented.
A superb piece by Ross Penman on the importance of being true to the spirit of the web.
With all my talk about extending existing elements instead of making new ones, I was reminded of one of my favourite examples of custom elements in action: Github’s extensions of the
A great presentation on web components by Marcy, with an emphasis on keeping them accessible.
Remember when I was talking about refactoring the markup for Code for America? Well, it turns out that Heydon Pickering is way ahead of me.
He talks about the viewpoint of a writer (named Victoria) who wants to be able to write in Markdown, or HTML, or a textarea, without having to add classes to everything. That’s going to mean more complex CSS, but it turns out that you can do a lot of complex things in CSS without using class selectors.
There are slides.
I really hope that this is the kind of usage we’ll see for web components: enhancements for the browsers that support them without a good ol’ fashioned fallback for older browsers.
Funny because it’s true:
The thing I regret the most is how my class addiction affected my relationship with HTML.
Alex starts with a bit of a rant about the phrase “semantic HTML”, which should really just be “well-written HTML, but there then follows some excellent thoughts on the emergence of meaning and the process of standardising on vocabularies.
The definition of the cite element (and the blockquote element) has been changed for the better in HTML5 …at least in the W3C version anyway.
The semantics of the cite element are up for discussion again. Bruce, like myself, still thinks that we should be allowed to mark up names with the cite element (as per HTML 4), and also that cite elements should be allowed inside blockquotes to indicate the source of the quote.
Let’s pave that cowpath.
A good explanation of HTML5’s sectioning content and outline algorithm.
Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes - Tantek
I love that Tantek is as pedantic as I am …although I don’t think “pedantic” is exactly the right word.
Bruce’s thoughts on the proposed inclusion of a “content” or “maincontent” element in HTML5.
Personally, I don’t think there’s much point in adding a new element when there’s an existing attribute (role=”main”) that does exactly the same thing.
Also, I don’t see much point in adding an element that can only be used once and only once in a document. However, if a “content” or “maincontent” element could be used inside any sectioning content (section, article, nav, aside), then I could see it being far more useful.
This is a well-reasoned, thoughtful article on avoiding class names in CSS …but I don’t agree with it. That said, perhaps there’s a reasonable middle ground to be found between this extreme stance and the opposite (but in some ways just as extreme) stance of OOCSS.
An in-depth look at naming patterns for classes to help streamline CSS.
The thought process behind trying to abstract class names that are used for layout in responsive designs (and can therefore refer to different widths depending on the context). Here, the author settles on letters. In the past, I’ve approached the same kind of abstraction by using latinised names.
This helps to clarify the difference between native semantics and ARIA additions.
This is a great response to my recent post about semantics in HTML. Steve explores the accessibility implications. I heartily concur with his rallying cry at the end:
A very even-handed look at the time and data debacle in HTML5.
A single-serving website expressing the frustration and bewilderment at Hixie’s unilateral decision to drop the time element from HTML.
Nicole provides a step-by-step explanation of why it will probably benefit you to add classes to your headings to ensure consistent styling without writing overly-verbose CSS.
A brave attempt to explain the new outline algorithm in HTML (although it inaccurately states that no browsers have support for it—Firefox shipped with it a while back).
You can safely skip the comments: most of them are discouraging, ignorant, and frankly, just plain stupid.
Leonie points to a change in the semantics of the a element in HTML5 that could be very handy for accessible navigation.
A great round-up by Richard of some of the most common semantic pitfalls encountered with HTML5.
I’m getting behind Oli’s proposal to allow non-quoted footers within blockquotes in HTML. Here’s where I quote the design principles to support his case.
Now this is how you make progress on getting changes made to a spec: by documenting real-world use cases.
An excellent article from Oli on markup patterns for quotations …though I still think that the cite element can be used for people’s names.
A good round-up by Jack Osborne of where things currently stand with the hgroup group.
HTML(5) and text-level semantics — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts
A great round-up of some of the humbler new elements in HTML.
A great little jQuery script to automatically assign ARIA roles to HTML5 elements with the corresponding semantics.
A nice, neat, short introduction to microformats from Ben.
A great post from the frontline of markup. This is just a taste of the confusion to come.
A great bit of research from Emily. She correctly values data more than opinion.
Frances takes issue with the hgroup element in HTML5.
Dan has an idea for a possible application of the HTML5 mark element in navigation lists.
An excellently written zero-edit change proposal from Edward O'Connor and others, refuting issues raised by Shelley Powers (I offered to help with this change proposal but I never followed through).
Bruce gives a good explanation of the difference between section and article in HTML5.
My buddies and I express our support for HTML5 ...with caveats ...and unicorns.
A thoughtful piece on the question of extensibility in HTML5.
Oli gives a nice hands-on tutorial on using the new structural elements in HTML 5.
A nice description of RDFa ...but once, just once, I would like to see someone use an example that *isn't* contact details or events—situations already handled by microformats.
There's a new rel value in town: "canonical". It looks like an awful lot like "bookmark".
A good, detailed hands-on article about implementing hCalendar.
A great article by Emily Lewis on the microformats that make use of the rel attribute (rel-tag, rel-license, XFN, etc.).
An excellent passionate call to action by Eric explaining why the href attribute should be freed from the shackles of the anchor element.
About freakin' time! The FONT element, whose presence until now in HTML5 was an utter embarrassment to all concerned, is finally gone. Thanks, Hixie.
Great article from Brian ranging from introducing microformats right up to the current state of play.
microformatique - a blog about microformats and “data at the edges” : Semantics in HTML Part III - Towards a semantic web
John Allsopp has posted the third and final part of his superb series, Semantics in HTML. Read them all.
Semantics in HTML Part II - standardizing vocabularies at microformatique - a blog about microformats and “data at the edges”
The second part of John Allsopp's superb series on semantics, philosophy and markup. Don't miss it! And be sure to go back and read the first part, too.
Ben's thoughts on RDF and microformats, prompted by last weekend's BarCamp shenanigans.
Semantics in HTML - 1.”traditional semantic HTML” at microformatique - a blog about microformats and “data at the edges”
A superb article by John Allsopp on semantics in the broad sense, from philosophy and linguistics right through to markup. And this is just part one! Read, enjoy, and prepare for part two.
Like Flickr, but without the photos. This, I like.
Derek hits the nail on the head. User-generated content is such a cold, cold term.
Joe asked a bunch of us to define semantics. Mine is the facetious definition.