Creating a semantic breadcrumb using HTML5 microdata HTML5 is doing a lot for semantics and one of the key features I've been busy implementing in many of my projects is microdata. In this tip I'll share how to build a semantic breadcrumb that uses HTML5 microdata. Sites using microdata to markup their breadcrumbs also have their trail displayed on google search results like so: Marking up our breadcrumb is incredibly simple and in this tip I'll be making use of the ol list element as in my eyes your breadcrumb is an ordered list and should be marked up as such. Seems pretty easy right?
HTML5 Presentation In March 1936, an unusual confluence of forces occurred in Santa Clara County. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Then came the wind. It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley.
Modernizr to solve cross-browser challenges 1514Days 1514 days since this post was last revised. Specific details are likely out of date. This piece is intended to help users who are comfortable with HTML and CSS but not so confident using JavaScript. If you’re looking for some more advanced documentation on Modernizr, there are a few great tutorials out there. Before we start we’ll need two things: the latest jQuery and the latest Modernizr. Introduction If you build websites, you’ve probably heard of Modernizr. What Modernizr does: By default, Modernizr ‘feature tests’ the browser. Modernizr: “Oh, hi browser. Browser: “I got a head full of cache but other than that I’m good. Modernizr: “OK, fine. Browser: “Features?” Modernizr: “Yes, you know, can you show my text shadows?” Browser: “Please! Modernizr: “Box shadows?” Browser: “Eh?” Modernizr: “I’ve got some nice subtle CSS3 shadows to rock here with alpha transparency, think you can handle that?” Browser: “Sure, do I look like Internet Explorer?” Modernizr: “Fine. Modernizr: “What?”
HTML5 Tutorial - Welcome HTML5 for Creatives By now, professional web designers and developers have got a fairly good grip of “HTML5”. Yes, we know most of what is referred to as HTML5 is not strictly HTML5 at all, indeed a good deal is not even HTML, rather CSS and the DOM. But we know what it is, what we can do with it, what drawbacks and challenges exist. However when it comes to others we work with — clients, Creative Directors, CIOs and CTOs, well, let’s face it, there’s a good chance they’ve heard the term, perhaps some of the myths, and want to know more, but they aren’t as well versed in the nitty gritty. Don’t worry, we’re here to help. HTML5 for Creatives (a free PDF ebook) takes a high level, yet in depth, look at the capabilities, use cases, strengths and limitations of the whole suite of related technologies that are broadly referred to as “HTML5”. So if you need to know more about what HTML5 is, and what it can do for you, then grab a copy. In short we’ll cover: But first, why bother with HTML5 at all?
Add Telephone Number Links With HTML5 Posted at Paulund Normally telephone numbers are adding to web pages as just static text of digits which doesn't offer any interaction to your visitors. With more and more people using the internet on their mobile it's time to change your telephone numbers to clickable areas to call the number directly from your mobile phone. On your phone if you want to call a number of a web page you would have to copy and paste the number into your phone to dial it. With this new features you can make telephone numbers links to dial just like you can with emails. <a href="mailto:example@example.com">Example Email</a> Once clicked this link will open up your default mail client and create a new email with the to address populated with the email address is the href. To make telephone number clickable and to call the number from the link you use the tel: attribute with the number you want to dial.
Getting HTML5 Ready - ContentEditable In the prior editions of this series, we took a look at HTML5 parsing and CORS. This week, we'll take a look at a feature that, by itself, doesn't do anything terribly useful but, when combined with other features, can be used to do some interesting things. That feature is ContentEditable and it can be used to allow you to make any document regions editable, allowing a user to modify the text on the page. contenteditable and designmode There is really more than one aspect to contenteditable. On its own, this may not sound terribly useful since any changes you make to the page only last until you leave or refresh the page. Examining the spec The WHATWG spec for contenteditable is actually very short, but as I mentioned, both the designmode attribute and the editing API's are related and are covered within the same section of the document. designmode, on the other hand, is intended to be applied to the entire document and is set to either on or off. designmode Chrome, Firefox Opera
datalist Experiment Posted at *Chrome feature By using <datalist>, you can define a list of suggestions you want the user to select from. Users can optionally select from your suggestions as well as typing it by themselves. Options can be tagged with datalist and referenced from the input element using list attribute by its id. See examples below. input[type=text] datalist For text type, datalist simply suggests list of words. input[type=range] datalist For range type, datalist suggests recommended value as ticks. input[type=color] datalist For color type, datalist suggests the recommended color on the swatch palette. input[type=date] datalist For date type, datalist suggests a list of recommended dates. input[type=time] datalist For time type, datalist suggests a list of recommended times. input[type=month] datalist For month type, datalist suggests a list of recommended months. input[type=week] datalist For week type, datalist suggests a list of recommended weeks.
Responsive Tables A few smart folks have already put together their thoughts on responsive tables and, while I think the proposed methods are pretty good, I think there might be room for improvement. As such, I've been tinkering for a while and came up with the following strategy when it comes to tables. Step 1: Use data-* attributes to hold information about the column header(s) associated with the markup: Step 2: When the screen is below a certain threshold, set the table elements to display: block (thereby linearizing the table), hide the thead where assistive tech won't see it and use generated content to expose the data-* attributes. We’ve been using this approach on a number of sites currently in development and it works really well. Notes: View Demo
Introducing HTML’s new template element You may have heard of Web Components, a suite of emerging standards that make it possible to build secure reusable widgets using web platform technologies. One of the first specs to make its way into implementation is HTML Templates, embodied by the template element, which as I write this is implemented in Chrome Canary and Firefox Nightly. If you've used Mustache, Handlebars or any similar front-end templating library you'll be quite familiar with how the template element works: you just include it in your document (it's apparently legal inside head or body), perhaps with a unique id for easy reference and add some markup inside it; for example: The template element will be parsed by the browser but not rendered in the page; the markup inside is considered completely inert, meaning no style rules will be applied and no assets loaded. NB: After writing this post I found the article HTML's New Template Tag on HTML5 Rocks! View Demo
Customize an HTML5 Webpage using the Bootstrap Framework Many web developers are familiar with Twitter Bootstrap and have seen this library on a number of projects. The Bootstrap core is fantastic when you need a CSS reset along with other common layout features. It may not be the right fit on projects where you need a whole lot of customization. But for landing pages and smaller websites I think Bootstrap has become one of the easiest resources to start using. In this tutorial I want to demonstrate how we can build a simple homepage layout design using Bootstrap. Downloading Bootstrap Right from the hosted Github project page you should be able to download a copy of Bootstrap. I will also be using the two minified CSS documents named bootstrap.min.css and bootstrap-responsive.min.css. The HTML5 doctype is the best supported option for modern browsers. Heading Navigation Bar Directly after the opening body tag I have setup a fixed navigation menu. The header div contains another bit of code with a container and the class .text-center.
5 HTML5 Features you need to know Posted at daker.me HTML5 has been around for a while now, it introduces lots of new and exciting new JavaScript and HTML APIs for both mobile and desktop, so in this post you will discover some HTML5 features that will enhance your web apps and will save you a lot of time. DNS Prefetching DNS hostname resolution is one of the issues that can make any website slow. Modern browsers start to be very smart when it comes to DNS resolution, they try to resolve domain names then cache them before the user tries to follow any link on the webpage. With the dns-prefetch feature you are allowed to manually control this operation by telling the browser which domain names to resolve : Link Prefetching Download Attribute The HTML5 download attribute allows developers to force a file to download rather than go to that specific page, you no longer need to rely on server side code to do that: Regular Expressions Datalist Element Further reading datalist Experiment 7 HTML5 features that you may not know about