Ressources utiles pour un meilleur web

HTML

Structure de base de l'HTML

  • Balises de premier niveau : <doctype>, <html>, <head>, <body>
  • Ecriture d'une balise HTML paire : <balise atrribut1="valeur1" attribut2="valeur2">contenu</balise>
  • Ecriture d'une balise HTML orpheline : <balise atrribut1="valeur1" attribut2="valeur2" />
  • Termes supplémentaires utilisés : chevrons ("<, >"), balise ouvrante, balise fermante
  • Eléments block : <h1> à <h6>, <p>, <ul>, <ol>, <li>,<table>, <blockquote>, <form>, <iframe>, <div> -> Toutes les balises "block"
  • Eléments en ligne : <input>, <a>, <strong>, <em>, <img>, <br />, <hr />, <abbr>, <span> -> Toutes les balises "inline" (en ligne)
  • Balise Meta (ici description) : <meta name="description" content="description de votre site" />
  • Noms de fichiers et répertoires :
    • uniquement lettres de A à Z et chiffres (majuscule ou minuscules)
    • tiret (-) et underscore (_)
    • pas d'espace, pas d'accents
    • pas de caractère spéciaux (ponctuation, cabalistiques,...)

Structure HTML5

  • Doctype strict : <!DOCTYPE html>
  • Déclaration HTML : <html>
  • Déclaration charset (encodage caractères) : <meta charset="utf-8" />
  • Principales nouvelles balises de contenu depuis html 4 : <header>, <footer>, <nav>, <aside>, <section>, <article>, <figure>, <figcaption>, <canvas>
  • Code conditionnel html5 pour rendre compatible les nouvelles balises HTML5 avec IE6, 7, 8. A mettre dans <head> : <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

HTML5 balises

  • header : logo, bannière pub, slogan,
  • nav : liens comprenant votre navigation principale
  • footer : auteur, copyright, lien de contact, mentions légales,…
  • section : bloc de contenus par thématique (particuliers, pro,…) et une seule si c'est juste le contenu de la page
  • aside : informations relatives au sujet principal de la page -> ex wikipedia saturne, caractéristiques en aside -> si on retire aside, est-ce que l'on comprend tus aussi bien le contenu principal ? si oui alors ce n'est pas aside
    (au passage, système d'ancre pour saturne)
  • article : peut-être extrait du contenu et être compris de manière autonome, il se suffit à lui-même. C'est notamment le cas pour l'article complet d'un blog, il peut avoir un <header> pour préciser une introduction et par exemple un <aside> pour les tags et mots-clés
  • main : contenu principal de la page, 1 seule balise de ce type et ne peut être enfant d'une autre. A utiliser en opposition aux sections. Pratique pour isoler le contenu de la page à l'impression (one ne veut pas le reste comme l'en-tête, la navigation,…). Le validateur ne le reconnait pas encore.