HTML: The Markup Language
This specification defines the 5th major version, first minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features continue to be introduced to help Web application authors, new elements continue to be introduced based on research into prevailing authoring practices, and special attention continues to be given to defining clear conformance criteria for user agents in an effort to improve interoperability. This section describes the status of this document at the time of its publication. Other documents may supersede this document. Errata for this document are recorded as issues. All interested parties are invited to provide implementation and bug reports and other comments through the Working Group's Issue tracker. The implementation report produced for this version demonstrates that in almost every case changes are matched by interoperable implementation.
HTML5 : Éléments <figure> et <figcaption>
L'élément <figure> ne devrait pas vous être inconnu puisque son rôle est pareil à celui qu'il joue dans les supports papiers tels que les livres ou magazines afin d'illustrer et de légender des photos, des diagrammes, ou encore des schémas. Illustration légendée Inaugurés avec HTML5, les éléments <figure> et <figcaption> fonctionnent de concert pour associer une légende à une illustration ou un autre élément média. <figure> <img src="image.jpg" alt="" /> <figcaption>Légende associée</figcaption></figure> Élément <figure> <figure> est une unité de contenu, c'est-à-dire que cet élément sert de conteneur dans lequel s'insèrent divers éléments comme des images, des schémas, des vidéos, des tableaux ou encore des blocs de code. Élément <figcaption> Enfant direct de <figure>, son rôle est de légender son parent, sous forme de texte et/ou de liens. Quelques applications dans le monde du livre Compatibilité navigateur des éléments <figure> et <figcaption> Applications sur le web Démonstration Une vidéo
Cross Browser HTML5 Progress Bars In Depth
Update (March 9, 2012): I have updated this document to include styling information for Internet Explorer 10. Screenshots of HTML5 progress bars with different styles applied. Details given below. As a web application developer, progress bars are great when you want to show the user that some action is happening, especially when it can take a long time. They can be animated (like the one in Gmail does when it shows the user how long it is going to take for it to load and initialize), or static (like some shopping cart applications have to show the user how many pages it will take to check out an order). The HTML: Simple The HTML for a Progress bar is dead simple: <progress max="100" value="60"><strong>Progress: 60% done. Note that the HTML inside the <progress> tag is the fallback for browsers that do not support it. Note that: A progress bar can also have an “indeterminate” state, which happens when there is no value attribute. <progress max="100"><strong>Progress: 60% done. That’s Too Basic!
CSS3 Demos @ Grains of Sand
HTML 5 : Div et span, différences d'usage pratique
Ces deux balises sont des conteneurs qui sont destinés à structurer le contenu, mais ils ont un rôle complémentaire et des règles de rendu différentes. Span sert surtout à associer un style à une partie d'un texte tandis que div sert à agencer le contenu de la page. Les deux balises doivent avoir une balise de début et de fin, la forme réduite n'est pas reconnue évidemment. N'est pas valide par exemple ceci: Le format seul valide est celui-ci: La balise peut être vide. Div La balise <div> est un bloc, donc un objet rectangulaire qui ne peut être réparti sur plusieurs lignes. Par exemple, le texte suivant: <div>0000000<div>111111</div>222222</div> s'affiche ainsi: Span La balise <span> est inline, elle s'inscrit dans le flux du contenu, peut être répartie sur plusieurs lignes. <span> n'a pas de saut de ligne et le texte suivant: <p><span>0000000<span>111111</span>222222</span></p> s'affiche donc ainsi: Margin On ne peut pas attribuer une marge externe avec l'attribut margin. Height et width Padding
HTML 5, plateforme de sites et applications en ligne
Pour succéder à HTML 4 qui est le format des pages Web actuel, le W3C qui établit les standards du Net à repris une spécification en cours du WHATWG. Ce nouveau format qui est implémenté progressivement par tous les navigateurs y compris Internet Explorer, est conçu pour les applications Web et ajoute à la fois des balises et des fonctionnalités nouvelles, c'est devenu une alternative à Flash et Silverlight. Steve Jobs a dit pour Apple: "Apple ne supporte pas Flash parce qu'il est trop bogué. HTML 5 contre Flash et Silverlight Des capacités très étendues pour les applications Web Utiliser les applications Web hors ligne est la tendance majeure dans ce domaine depuis 2008. De nouveaux composants graphiques ont été ajoutés, voir la liste des objets de formulaire en HTML 5 et leur implémentation dans les navigateurs. Les balises section, article, header, footer sont destinées à donner une structure à un document. Une plateforme d'applications Web Les applications de HTML 5
L'élément <mark> pour attirer l'attention
Sortez votre feutre jaune Nouveau venu en HTML5, l'élément <mark> est un surligneur de texte. Il marque un , que l'on souhaite mettre en valeur d'une façon particulière, pour attirer l'attention. Son style par défaut est celui d'un texte surligné en jaune (dans les navigateurs qui le reconnaissent). Pour les anciens navigateurs qui ne comprendraient pas ce style par défaut, il suffit de l'ajouter à votre feuille CSS, voire de le personnaliser en choisissant d'autres couleurs. Usages Que peut-on imaginer comme usages pratiques à cette balise ? Démonstration de l'élément mark Marquer les mots trouvés dans des résultats de recherche Par exemple sur la page de résultats, les passages surlignés seront ceux qui correspondent exactement aux termes recherchés. <p>5 résultats pour le mot "HTML"</p><ul><li>... Marquer une portion de texte Marquer une portion de code source Un passage spécifique peut être surligné pour s'y référer ultérieurement. Marquer le jour actif d'un calendrier Prise en charge
HTML5 Best Practices for Designers | Web Design
HTML5 is sure to be a big hit this year as far as web design trends go, and rightfully so. It’s new, exciting, easy to understand and better than anything that has come before it. Up until recently, we have had to navigate a grey area in terms of compatibility and definition, and as a result, many of the early adoptions of HTML5 have been partial or complete disasters. The first thing to understand is where HTML5 ends and CSS3 begins. Learning as much as you can about HTML5 and following these basic practices will help you produce websites with high quality markup and improve your overall design and development process without running into the common pitfalls that have plagued the web for over a decade. 1. As someone that designs visually and doesn’t have a huge arsenal of coding know-how, frameworks and "boilerplates" give you the opportunity to build a project using a consistently formatted code base that has been tested, validated and in most cases, developed by an industry leader.
