This decision tree describes how to use the
altattribute of the<img>element in various situations. For some types of images, there are alternative approaches, such as using CSS background images for decorative images or web fonts instead of images of text.
Jared shared a link to this very useful resource on Twitter.
A modern CSS showcase styled by community contributions.
Stephanie Eckles’ modern spin on the classic CSS Zen Garden. A single HTML page styled in dozens of unique and interesting ways!
Frend components are modest and dependency-free. They are built with web standards as a priority and aim to avoid assumptions about tooling or environment. Care has been taken to make sure each component is compliant, keyboard navigable and properly interpreted by assistive technologies.
The BBC Global Experience Language (GEL) Technical Guides are a series of framework-agnostic, code-centric recommendations and examples for building GEL design patterns in websites. They illustrate how to create websites that comply with all BBC guidelines and industry best practice, giving special emphasis to accessibility.
This technical companion to the BBC’s Global Experience Language serves as a reference for developers implementing GEL’s user experience recommendations.
Making the internal external.
Taylor Hunt goes deep on HTML’s surprisingly complex and powerful lang attribute:
There’s lots going on with lang, the global attribute that defines the language an element contains. Information about it is scattered, so I’ve collected here what I’ve found.
A list of everything that could go in the
<head>of your document.
This is a pretty comprehensive resource of all the stuff that you might put in the <head> of your HTML pages.
Jay Hoffmann on the origins of the HTML Editorial Review Board (which would later become the HTML Working Group):
In February of 1996, this new HTML ERB held their first meeting. The board had representation from all across the map, from browser vendors to software makers to standards advocates. And they each had a different idea of what HTML could do. What they needed was some uniform consensus. A common enemy to bring them together.
Which brings us back to
blinkandmarquee.
This document explains the various ways of hiding things and the implications that come with that.
Indeed it does! This is a very thorough, detailed article on the ins and outs of hiding content with markup and CSS.
htmlreference.io is a free guide to HTML. It features all elements and attributes.
This site—along with its sister site, cssreference.io—is an excellent, thorough, and well-designed resource.
The elements list is clearly alphabetized, but it’s some small pleasure seeing the almighty anchor listed first.
Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or stage in a project.
The team at Vox open-sourced their accessibility guidelines. Check the announcement blog post for more details on their process.
This book will assist frontend developers in building accessible e-commerce websites and components.
A tremendous living resource documenting eBay’s approach to building accessibly for the Web.
Zack Bloom, co-creator of the supremely useful You Might Not Need jQuery, returns with another helpful resource. Here he details some useful—and at times obscure—bits about the mighty <script> element.
This site aims to provide simplest possible examples of HTML, CSS and JavaScript.
Does what it says on the tin.
An exciting accessibility change is coming to Chrome 50. Google calls it “focus starting point” and it’s a small—but incredibly helpful—change to how their Web browser manages focused elements and tab order.
If something has focus, it’s also the focus navigation start point, just like before. Also, just like before, if nothing else has set the focus navigation start point, then it will be the current
documentor, if available and supported, the currently activedialog. If we navigate to a page fragment like in the example above, that will now set the focus start point. Also, if we click any element on the page, regardless of whether it is focusable, that will now set the focus navigation start point. Finally, if the element which was the focus start point is removed from the DOM, its parent becomes the focus start point. No more focus whack-a-mole!
As the article explains, prior to this change, focus management can be difficult when tabbing around and moving within a document (or into and out of modal dialog boxes). Take heed of the note in the article’s caveats section:
Sequential focus navigation starting point is currently only supported in Chrome 50, Firefox, and Opera. Until it is supported in all browsers you’ll still need to add
tabindex="-1"(and remove the focus outline) to your named anchor targets.
This document is a practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification [WAI-ARIA-1.1], which defines a way to make Web content and Web applications more accessible to people with disabilities. This document demonstrates how to use WAI-ARIA in [HTML51], which especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.
An invaluable resource compiled by The Paciello Group with example audio files from the JAWS screen reader.
Marking up and styling an effective donate form.
Responsive navigation plugin without library dependencies and with fast touch screen support.
The Open Web has never had as many capabilities as it has today. We’re seeing an explosion in new or updated specifications, and prototype and stable implementations to go with them. This blog post will look back as the platform we have had available (Called Open Web 0 here) and then looks forward at what we are beginning to get now and into the short and medium term future (which I’ve labelled Open Web 1).
Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!
Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.
The current HTML spec does not allow for multiple image URLs based on screen size, nessesitating the use of complex Javascript hacks to supply smaller images to mobile devices.
Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
You should take time to design your URL structure. If there’s one thing I hope you remember after reading this article it’s to take time to design your URL structure. Don’t leave it up to your framework. Don’t leave it up to chance. Think about it and craft an experience.
Way back in March of '09, Paul Irish laid forth a markup-based means of executing JavaScript on page load. I iterated on Paul's method, adding a touch of HTML5 and making use of some built-in Rails magic.
Another collection of templates for HTML, CSS, and JavaScript.
Boilerplate might be the wrong word for this, but it’s incredibly thorough and is great as a reference.
I just finished reading over the latest version of the "differences" document and thought it'd be helpful to jot down some thoughts on things I hadn't seen before when reading up on HTML5.
One of the most exciting new features of HTML5 is the inclusion of the <video> element, which allows developers to include video directly in their pages without the need for any plugin-based solution. This article gives you an introduction to <video> and some of its associated APIs. We look at why native video support in browsers is important, give an overview of the element’s markup, and outline the most important ways in which video can be controlled via JavaScript.
It’s great that HTML5 allows us to embed video into web pages that can then be displayed directly by browsers, without having to rely on third-party plugins. The elephant in the corner regarding all video — whether it be HTML5 or proprietary — is accessibility. What are conscientious developers to do to provide textual alternatives for those who can’t access the contents of the video?
CSS 3 introduces a brand new box model in addition of the traditional box model from CSS 1 and 2. The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space.
A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework.
This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular). It is to be readily available to anyone who wishes to check the iterative progress of our best practices.
Making sure your code looks good.
Add a link or button to your site to make it easier for your content to be shared on Facebook. Copy and paste the following code blocks into your site and replace <url> with the link you want to Share.
There are many ways to make websites run faster. In this section, you can discover performance best practices that real web professionals employ in their everyday work. These practices have improved the user experience for millions of users and we hope they are useful for other web developers.
Drag and drop in HTML 5 can operate across sites in different domains; so you can drag from one site and drop onto another. Also, the data transfer object that you move in a drag and drop operation can store multiple data values.
Along with an army of JavaScript APIs, HTML 5 comes with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up.
SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation.
This specification defines the fifth major version of the HTML vocabulary. It provides the details necessary for producers of HTML content to create conformant documents. By design, it does not define related APIs nor attempt to specify how consumers of HTML content are meant to process documents.
A demonstration of Superfish – a jQuery plugin that creates Suckerfish-style dropdown menus with added features.
Now you can style both in this super easy and light-weight solution.
The world of standards-based web design and development has been undergoing something of a shake-up these past few days.