background preloader

HTML5 Custom Data Attributes (data-*)

HTML5 Custom Data Attributes (data-*)
Have you ever found yourself using element class names or rel attributes to store arbitrary snippets of metadata for the sole purpose of making your JavaScript simpler? If you have, then I have some exciting news for you! If you haven't and you're thinking, Wow, that's a great idea! Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements. Attribute Name The data attribute name must be at least one character long and must be prefixed with 'data-'. Attribute Value The attribute value can be any string. Using this syntax, we can add application data to our markup as shown below: <ul id="vegetable-seeds"> <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li> <li data-spacing="30cm" data-sowing-time="February to March">Celery</li> <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li></ul> We can now use this stored data in our site’s JavaScript to create a richer, more engaging user experience. A word of warning Summary Related:  HTML/CSS/Web DesignOutils de développement web

The Best Way to Learn HTML Learning a new skill is often intimidating at first; knowing where to start, who to listen to, what to ignore - it can be a difficult process to get moving. That's what this post is for. It will help you plan out what to learn and in what order, hopefully making what seems like a big hurdle much lower, keeping you interested and encouraging you to carry on learning! Before all Else: Take the Jump This is the most crucial part of any learning process - once you've made the decision to broaden your horizons by learning a new skill you're over the first hurdle! Perhaps you're a designer and looking to move beyond pen, paper and Photoshop, maybe you've previously had nothing to do with the web, it doesn't matter. To begin with we'll talk very literally about the basics of HTML, after which we'll look at resources and assignments to keep the ball rolling. Grasping the Basics: Your First HTML File HTML is the publishing language of the World Wide Web. The end. Grasping the Basics: HTML Tags Bonus!

CSS Media Queries & Using Available Space We've covered using CSS media queries to assign different stylesheets depending on browser window size. In that example, we changed the layout of the entire page based on the space available. It isn't required that we make such drastic changes with this technique though, so in this tutorial we'll go over a design tweak with a smaller scope. We'll also cover the syntax for using media queries within a single stylesheet and more examples of that. The CSS media query syntax for calling an external stylesheet is like this: You may be familiar with the media attribute, normally being "screen" or "print" or even a comma separated list, like "screen, projection". Likewise, you can use more advanced CSS media queries like: You may use as many media queries as you would like in a CSS file. Example Let's say we have a fluid width design where the sidebar is 35% of the width of the page. In our example sidebar, we are going have a list of names of the Super Team which function as email links. Types

CSS Pseudo-classes HTML 5 data- Attributes A new feature being introduced in HTML 5 is the addition of custom data attributes. This is a, seemingly, bizarre addition to the specification – but actually provides a number of useful benefits. Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation). This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. <li class="user" data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon"> <b>John says:</b><span>Hello, how are you? The above will be perfectly valid HTML 5. Using HTML, but with a custom DTD.Using XHTML, with a specific namespace. The addition of this prefix completely routes around both issues (including any extra markup for validation or needing to be valid XHTML) with this effective addition.

yepnope.js | A Conditional Loader For Your Polyfills! Elements & Semantics - A Beginner's Guide to HTML With a basic understanding of HTML and CSS in hand it is time to dig a little deeper and see what actually assembles these two languages. In order to start building web pages you need to learn a little about which HTML elements are used to display different types of content. You will also want to know how these different elements behave, to help ensure you achieve your desired outcome. Additionally, once you begin writing code you want to make sure that you are doing so semantically. Writing semantic code includes keeping your code organized and making well informed decisions. Semantics Overview Semantics have been mentioned a number of times thus far, so exactly what are semantics? Divisions & Spans Divisions, or divs, and spans are HTML elements that act as a container for different content. A div is a block level element commonly used to identify large sections of a website, helping build the layout and design. Block vs. All elements are either block or inline level elements. Typography

Media Queries Abstract HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Status of This Document This section describes the status of this document at the time of its publication. A W3C Recommendation is a mature document that has been widely reviewed and has been shown to be implementable. This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. Please see the Working Group's implementation report and the Media Queries Test Suite. Also see the Disposition of comments and a list of changes relative to the previous Proposed Recommendation. 1. 3.

95 typos gratuites et indispensables pour vos designs C’est souvent un sacré casse-tête de trouver la typo idéale pour un projet. Il faut dire que les possibilités ne manquent pas ! Dans la foule de typos qui existent, comment faire rapidement le tri entre celles qui apporteront une véritable valeur ajoutée à vos designs et celles qui vous feront uniquement perdre votre temps ? Nous avons voulu vous donner un petit coup de pouce en commençant à faire le tri pour vous ! Voici 95 typos gratuites et indispensables qui vous permettront de mettre une claque à vos futurs designs. 1. par Shrenik Ganatra 2. par Veronica di Biasio 3. par Adilson Gonzales de Oliveira Jr. 4. par Simon Stratford 5. par Slava Kirilenko 6. par Jean Wojciechowski 7. par Osama El Khalfaoui 8. par Atipo 9. par Matthias Henri 10. par Pier Paolo 11. par Free Goodies for Designers 12. par Krisjanis Mezulis et Gatis Vilaks 13. par Ion Lucin 14. par Timo Kuilder 15. par Axel Bizon 16. par Lucas Almeida et Dmiti Goloub par Titus Prod 18. par Antonio Rodrigues Jr. 19. par Mikrojihad Inc. 20. 21.

Should you be using HTML5 today? Despite all the hype about HTML5, there are still many people (mainly web developers!) out there who are wondering whether or not they should use it in their next site. The main issues seem to be browser compatibility and the myth that HTML5 won’t be ready for mainstream usage until 2022. To begin with, let’s bust this myth once and for all. For any specification to be deemed “ready”, it supposedly needs to be fully implemented in two browsers. If this rule was true, CSS2.1 also wouldn’t be “ready”, and do you hear people advising you to hold off on using that? As for browser compatibility, the latest versions of browsers such as Firefox, Chrome, Safari and Opera all support various parts of the HTML5 specification, and older versions of these browsers support bits of the spec. Pretty well, actually, and there are a lot of things you can do to ensure browser compatibility. New elements Whilst all of these browsers will happily accept the HTML5 doctype (<! Styling HTML5 Reset Modernizr

Initializr - Start your HTML5 project in 15 seconds!

Related: