Retrofit Your Website as a Progressive Web App
How You Can Use HTML5 Custom Data Attributes and Why
CSS Architecture: CSS File Organization
HTML5 Video and Audio: The Markup
HTML5 Forms: Input Types (Part 2)
Top 5 jQuery UI Alternatives
Golden Guidelines for Writing Clean CSS
How to Order and Align Items in Grid Layout
Learn about CSS Architecture: Atomic CSS
HTML5 Forms: Input Types (Part 1)
Introducing Portfolio WordPress Theme – and the Design Decisions Behind it
How We Built EQCSS & Why You Should Try Building Your Own Polyfills Too
CSS Architecture Block-Element-Modifier (BEM)
How to Choose the Best Fonts for Your Next Project with Fontcloud
Learning about HTML5 Form Attributes (Part 2)
Front-End Tooling Trends for 2017
How to Build Your Own Progressive Image Loader
HTML5 Form Attributes (Part 1)
The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.
required attribute tells the browser to only submit the form if the field in question is filled out. Obviously, this means that the field can’t be left empty, but it also means that, depending on other attributes or the field’s type, only certain types of values will be accepted. Later in the chapter, we’ll be covering different ways of letting browsers know what kind of data is expected in a form.
HTML5 Forms: New Controls
Open Your Data Up to Bots Using Microdata
Microdata is another technology that’s rapidly gaining adoption and support, but, unlike WAI-ARIA, it’s technically part of HTML5. Although still early in development, it’s worth mentioning the Microdata specification here, because the technology provides a peek into what may be the future of document readability and semantics.
In the spec, Microdata is defined as a mechanism that “allows machine-readable data to be embedded in HTML documents in an easy-to-write manner, with an unambiguous parsing model.”
With Microdata, page authors can add specific labels to HTML elements, annotating them so that they can be read by machines or bots. This is done by means of a customized vocabulary. For example, you might want a script or other third-party service to be able to access your pages and interact with specific elements on the page in a certain manner. With Microdata, you can extend existing semantic elements (such as
figure) to allow those services to have specialized access to the annotated content.
This can appear confusing, so let’s think about a real-world example. Let’s say your site includes reviews of movies. You might have each review in an
article element, with a number of stars or a percentage score for your review. But when a machine comes along, such as Google’s search spider, it has no way of knowing which part of your content is the actual review—all it sees is a bunch of text on the page.
Why would a machine want to know what you thought of a movie? It’s worth considering that Google has started displaying richer information in its search results pages, in order to provide searchers with more than just textual matches for their queries. It does this by reading the review information encoded into those sites’ pages using Microdata or other similar technologies. An example of movie review information is shown below.