background preloader

HTML5 : 20 Conseils et astuces pour coder proprement ses pages

HTML5 : 20 Conseils et astuces pour coder proprement ses pages
Voici une liste de 20 astuces pour coder vos pages proprement en HTML5. Tous ces conseils, mis bout à bout, vous serviront à améliorer votre référencement, respecter certaines normes W3C ou encore optimiser la compatibilité. Efforcez-vous de suivre le plus rigoureusement ces règles en fonction de votre projet. 1. Le Doctype à subit un rajeunissement avec l’arrivé du HTML5. 2. Vous avez déjà du l’entendre, mais pensez toujours à bien fermer vos balises. 3. Il existe de nombreuses raisons pour qu’une page soit accessible à différentes adresses à la fois. 4. Bien qu’il existe d’autres solutions plus complète, vous pouvez néanmoins régler certain aspect du cache du navigateurs de vos visiteurs. Suivant votre cas, il peut être préférable de définir le cache. En revanche si, par exemple, votre site à accès régulièrement à des bases de données qui le maintiennent à jour le cache ne dois pas fonctionner. 5. 6. Le respect de la sémantique est primordiale pour un bon référencement naturel. 7. 8. Related:  HTML5 & CSS3

10 CSS3 Properties you Need to be Familiar with We've already covered the thirty CSS selectors that we should all memorize; but what about the new CSS3 properties? Though most of them still require a vendor-specific prefix, you can still use them in your projects today. In fact, it's encouraged! The key is to first determine whether or not you're okay with a slightly different presentation from browser to browser. Are you okay with, say, IE displaying 90 degree corners, rather than slick rounded ones? View Demo Easily the most popular CSS3 property in the bunch, border-radius was sort of the flagship CSS3 property. The irony is that we're all perfectly fine with the idea of providing an alternate viewing experience for mobile browsers. Please note that both Safari 5 and IE9 implement the official `border-radius` syntax. Some readers may not be aware that we can also create circles with this property. View Demo View Demo Next, we have the ubiquitous box-shadow, which allows you to immediately apply depth to your elements. View Demo

The History of CSS Resets When artists begin a new painting, they don’t immediately reach for the cadmium red and the phthalo blue. They first prime the canvas . Why? Many web designers prefer to use a CSS "reset" to "prime" the browser canvas and ensure that their design displays as uniformly as possible across the various browsers and systems their site visitors may use. This is Part 1 of a three-part series of articles on the topic of CSS resets. What Is CSS Reset? When you use a CSS "reset," you’re actually overriding the basic stylesheet each individual browser uses to style a web page. The problem is that every browser’s stylesheet has subtle but fundamental differences. Some of the most common elements that are styled differently among different browsers are hyperlinks ( <a> ), images ( <img> ), headings ( <h1>through <h6>), and the margins and padding given to various elements. So which browser is right, Firefox or IE? It might be useful to peruse this chart showing the various browser defaults. The Yahoo!

HTML5 Un article de Wikipédia, l'encyclopédie libre. HTML5 (HyperText Markup Language 5) est la dernière révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version est en développement en 2013. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été lancé par le WHATWG. Dans le langage courant, HTML5 désigne souvent un ensemble de technologies Web (HTML5, CSS3 et JavaScript) permettant notamment le développement d'applications (cf. Contexte historique[modifier | modifier le code] Changements par rapport à HTML 4.X et XHTML 1.X[modifier | modifier le code] Spécifications[modifier | modifier le code] Les spécifications sont publiées par le W3C Voir aussi : html5-profile <?

HTML5 se dévoile - Alsacréations Le brouillon officiel (working draft) de HTML5 a été publié officiellement le 23 avril 2009 et depuis de nombreuses avancées ont été accomplies, les navigateurs supportant toujours plus de fonctionnalités et de nouveautés. La nouvelle génération du langage de balisage HTML remplacera à long terme HTML 4, XHTML 1.x et XHTML 2 qui a été abandonné. Profitons de cette occasion pour faire un tour d'horizon de cette nouvelle version de HTML. Consultez également toutes nos autres ressources HTML5 Qu'est-ce que c'est HTML5 ? Comme son nom l'indique, HTML 5 est le successeur de HTML 4. Le W3C c'est quoi déjà ? Le World Wide Web Consortium, abrégé W3C, est un organisme de standardisation à but non-lucratif, fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Quelles sont les nouveautés ? <aside> Welcome! Les balises principales Doctype Le doctype est simplifié : Section Article Aside Nav

Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development community. The design used as of 2014 was largely created by Lennart Schoors. May I use your data in my presentation/article/site, etc? Yes, the support data on this site is free to use under the CC BY 4.0 license. Is there a way to see the support data in colors other than red/green? Yes, you can enable accessible colors from this link or from the option under Settings. Do you have the data available in a raw format? Yes, the raw support data is available on GitHub and is updated regularly. Could you add feature X to the site? Adding features takes quite some time and there are many requests for additions. If you've done the research yourself already, you can also submit a feature on GitHub. Which features do you choose to add to this list?

Slideshow en CSS3 - Alsacréations Beaucoup de Webdesigners en rêvent : utiliser les CSS plutôt que le JavaScript ou le Flash pour animer leur page web. Ce rêve devient petit à petit concret avec les nouvelles implémentations des modules CSS en cours de travail (Working Draft), notamment CSS3 Animations. Celui-ci équipé des keyframes devient fort intéressant pour un contrôle avancé des animations. Nous verrons donc comment utiliser cette nouveauté, mais aussi comment combiner intelligemment la pseudo-classe target pour réaliser un slideshow. Présentation et compatibilité Cette partie du tutoriel va légèrement reprendre le contenu d'une publication d'Antoine Cailliau, Tutoriel sur les Transitions CSS3, que je vous conseille de lire au préalable. Ce tutoriel repose sur les spécifications du W3C concernant la pseudo-classe target du module "Selectors Level 3 (:target)" passée il y a peu en W3C Recommandation et sur le module "CSS Animations Module Level 3" actuellement en Working Draft. La pseudo-classe target Voir l'exemple

A Comprehensive Guide to CSS Resets This guide examines the infinite-like variety of CSS resets created by web developers and designers across the world. While almost all of these CSS resets are generally provided free for public use (many through Creative Commons licensing), it is incumbent upon you to check the terms of use before putting them to use in your projects. This guide follows Part 1, where the history of CSS resets was discussed; you’re advised to read that before this one to get the most out of this guide. This is Part 2 of a three-part series of articles on the topic of CSS resets. In putting together this guide, the 2007 collection of resets by Jeff Starr — who, as an aside, has contributed articles on Six Revisions — was used as a jumping-off point. "Hard" Reset As discussed in Part 1 of this series, the original version of the "hard" reset was by web designer Andrew Krespanis: It wasn’t long before folks added border: 0; and outline: 0; to the list of properties, giving us: Poor Man’s Reset Siolon Reset

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along. Before we get started, consider using one of our HTML5 Templates or CSS Themes for your next project—that is, if you need a quick and professional solution. Otherwise, it's time to dig into these techniques. HTML 5 is the next major version of HTML. Before we begin marking up the page we should get the overall structure straight: In HTML 5 there are specific tags meant for marking up the header, navigation, sidebar and footer. It still looks like HTML markup, but there are a few things to note: In HTML 5, there is only one doctype. Instead of using divs to contain different sections of the page we are now using appropriate, semantic tags. "What?! That's all!

2020 : Les métiers de la communication et du marketing dans dix ans du mois d'Août propose un dossier complet et très intéressant sur la France de 2020. Au programme, analyses et prédictions économiques, supputations sur les maladies que nous auront vaincu d'ici là, zoom sur la mutation des services publics (ça honnêtement ça fait rêver ! La Poste, la SNCF et la Police bardés de High Tech et tournés vers l'efficacité : de la Science-fiction !), les inventions qui bouleverseront notre quotidien et beaucoup d'autres aspects de la vie future sont abordés, avec pas mal de précision et d'optimisme. Une partie de ce dossier concerne les métiers qui auront la cote dans dix ans, et j'imagine que ça va intéresser certains d'entre vous... Pour vous mettre l'eau à la bouche, la partie communication / marketing commence ainsi : "Les pros du marketing Internet devraient trouver des emplois à la pelle". "Encore embryonnaire, ce drôle de métier va connaître un développement spectaculaire. NETERGONOME"Tous les sites d'e-commerce en France vont devoir en embaucher"

DOCTYPE 1 — Qu'est-ce-que c'est ? On parle de «doctype» pour faire court, mais il s'agit en fait d'une ligne de déclaration du type de document, qui indique au navigateur dans quel type de HTML la page a été écrite (HTML-3.2 «classique», HTML-4 de transition ou strict, XHTML, etc...). Dans une écriture plus complète, cette ligne a l'allure suivante : où type_de_HTML est l'identificateur de la version du HTML utilisé. Ces doctypes sont généralement mis en place par l'éditeur HTML utilisé. 2 — A quoi ça sert ? Pour beaucoup d'entre nous, ça sert avant tout à faire passer nos pages au validateur du consortium W3C, afin de vérifier qu'on n'a pas fait d'erreur sur la syntaxe du HTML. Côté navigateur, d'abord, cette ligne n'est prise en compte que par les navigateurs les plus récents (comme Mozilla, NN7, Opera7, IE5 sur Mac ou IE6 sur Windows). 3 — Le cas particulier des Explorer : du mode natif «microsoft» au mode conforme W3C Il en va différemment avec les Explorer. 5 - Compléments

Related: