A great article by Susan on getting started with creating a styleguide for any project.
I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.
Funny because it’s true:
The thing I regret the most is how my class addiction affected my relationship with HTML.
A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.
A-mer-ica! Fuck yeah!
A fascinating look at the early history of HTML, tracing its roots from the dialect of SGML used at CERN.
Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!
A nice bit of markup archeology, tracing the early development of HTML from its unspecced roots to the first drafts.
I recognise some of the extinct elements from the line-mode browser hack days at CERN e.g. HP1, HP2, ISINDEX, etc.
A fascinating snapshot from 1995, arguing for the growing power of HTML instead of the siren song of proprietary formats.
I’m very happy that this is still available to read online 18 years later.
The authors of the Extensible Web Manifesto explain the thinking behind their …uh… thinking.
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.
Hot on the heels of the Mailchimp styleguide, here’s the collection of patterns used by Mapbox. I’m not keen on some of their markup choices, but again, it’s great to see organisations publicly documenting this stuff.
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.
A love letter to HTML, prompted by the line-mode browser hack event at CERN.
Once you get past the cheesy intro music, there are some gems from Robert Cailliau in here.
Jason provides some instruction in using the correct quotation marks online.
Go, Dan, go!
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 very, very clever hack to provide fallback images to browsers that don’t support SVG. Smart.
A very handy starting point for creating a front-end style guide.
I kind of love the interaction design of this site.
A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.
This is wonderful stuff! I’m a big fan of the
datalist element but I hadn’t realised how it could be combined with
input types like
Here are some nice patterns that Paul uses for starting points in his own projects.
Related to my rant on links that aren’t actually links: buttons that aren’t actually buttons.
You’re probably doing each of these already but just in case your’e not, Andy has listed six quick wins you can get from HTML5.
Bruce takes a look at the tricky issue of styling native form controls. Help us, Shadow DOM, you’re our only hope!
A good explanation of HTML5’s sectioning content and outline algorithm.
Bruce sits down for a chat with Hixie. This is a good insight into the past and present process behind HTML.
Here’s a treasure trove of web history: an archive of the www-talk list dating back to 1991. Watch as HTML gets hammered out by a small group of early implementors: Tim Berners-Lee, Dave Raggett, Marc Andreessen, Dan Connolly…
I love that Tantek is as pedantic as I am …although I don’t think “pedantic” is exactly the right word.
Tantek has put together a wiki page to document the arguments for and against adding a new “main” element to HTML.
A handy step-by-step guide to scraping HTML to get data out. Useful for services (—cough—Twitter—cough—) that keep changing the rules of their API use.
The Guardian’s front-end patterns library. The modules section contains their equivalent of a pattern primer. Very nice!
Less wireframing, more prototyping.
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.
A really great markup and CSS pattern for “content first, navigation second” from Aaron.
An interesting approach to squishing down large data tables for small-screen viewing …though I wonder if there isn’t a “Mobile First” approach that could scale up, say, lists to become tables on large screens.
Have you thought “There must be a good reason for the blink element.” Well, read on.
Anna goes through some of her favourite pattern libraries. It’s really, really great to see this stuff getting documented.
I met one of the guys from the Starbucks team at South by Southwest and he mentioned that they had a markup pattern library. I encouraged them to make it public, and it here it is!
I really hope that more companies and agencies will start sharing stuff like this.
An in-depth look at naming patterns for classes to help streamline CSS.
Richard gives the lowdown on the new translate attribute in HTML.
A great pattern library from Dan.
Some valuable musings from Ben on how browsers could be better — and I don’t mean the usual moaning about performance or device APIs.
A superb rallying cry from Mandy on the importance of markup literacy for professionals publishing on the web: writers, journalists, and most importantly, editors.
A really nice pattern for data tables in responsive designs. Just as with conditional loading, the key point is making a distinction between essential and optional content.
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.
This is such a great idea: magnetic HTML elements. And now Cameron is sharing the source files so that we can all print our own.
Good design and good markup provide structure to content. Good markup is a fundamental part of good design: beautiful on the inside, beautiful on the outside. HTML and CSS give another venue to provide structure to content in the native language of the web, and learning these guides decisions by surfacing the affordances of the medium.
Insanely in-depth look at how browsers work, right down to the nitty gritty. You’d think there’d be a lot of engineering talk, but actually a lot of it is more about linguistics and language parsing.
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.
A really nice little primer on getting started with HTML5.
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.
Everything you ever needed to know about adding HTML5 audio and video to your site, courtesy of the mighty John Allsopp.
A fascinating examination by Hixie of web technologies that may have technically been “better” than HTML, but still found themselves subsumed into the simpler, more straightforward, good ol’ hypertext markup language.
The follow-on comments are definitely worth a read too.
I agree 100% with Mark’s thoughts on what a Content Management System should and shouldn’t attempt to do.
I think that markup is too important to be left in the hands of the people who make content management systems. They all too often don’t care enough about it, and they can never know the context that you will be using it in, and so in my opinion they shouldn’t be trying to guess.
An excellent explanation from Richard of the bdi element (bi-directional isolate) for handling a mixture of left to right and right to left languages in HTML5.
I agree with Oli’s conclusion:
A handy list of regular expressions that you can use in the new pattern attribute on the input element in HTML5.
Mike takes on the very tricky task of explaining the new outline algorithm—definitely one of the hardest features of HTML5 to explain, in my opinion.
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.
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.
This dovetails nicely with my recent post about the spirit of distributed collaboration. Here’s a great little bit of near-history spelunking from Paul, all about styling new HTML5 elements in pesky older versions of Internet Explorer.
Buy. This. Book.
I mean it.
A good round-up by Jack Osborne of where things currently stand with the hgroup group.
Ben Buchanan has a nice round-up of some of the options available when you’re switching over to HTML5.
A browser-based ePub reader. ‘Cause it’s (X)HTML all the way down, baby.
A nice succinct description of the placeholder attribute, with an emphasis on accessibility.
Some musings from Norman Walsh. I have to say, I’m still not entirely sure why the HTML/XML Task Force exists. The “use cases” described here are vague and handwavey.
A great round-up of some of the humbler new elements in HTML.
Good advice for generating markup with jQuery. As usual, there’s more than one way to do it.
A nice, neat, short introduction to microformats from Ben.
Bobbie is publishing the interviews he conducted with various HTML5 bods when he was researching his Technology Review article. First up: Hixie.
A quick run-through of some of the new HTML5 form features coming in Firefox 4.
Here's a little piece of web history: the proposal that was presented and rejected at the 2004 W3C workshop that led to the formation of the WHATWG.
A handy table of new HTML5 elements and whether or not they are exposed to assistive technology.
I couldn't agree more with this rant from Remy. He took the words right out of my mouth.
A very handy page for showing HTML5 form element support in your browser.
Cute illustration of different content types in HTML (though, personally, I would put sectioning content — section, article, nav, aside — into their own group).
HTML5 resources, gathered together in one place.
A great post from the frontline of markup. This is just a taste of the confusion to come.
Another set of default HTML/CSS/JS templates with some very clever ideas built in (courtesy of the always-brilliant Paul Irish).
Barebones templates for HTML5 documents. It needs a bit of work but it's a nifty idea.
A great bit of research from Emily. She correctly values data more than opinion.
A wonderful document outlining the earliest history of the tags we know and love today.
An interesting performance proposal from mozilla that will degrade nicely in legacy browsers.
An all-in-one validator from the W3C: markup, CSS and feed validation.
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.
Anne explains exactly why the HTML parser defined in HTML5 is A Very Good Thing for everyone.
Henri Sivonen gives the lowdown on the HTML5 parser that will ship with the next version of Firefox. This is a huge development ...and yet users won't even notice it (by design).
I wasted my time writing HTML5 For Web Designers when clearly, this is the best tutorial on HTML5 ever.
The origins of the blink element are fascinating. To nobody's surprise, alcohol was involved.