Étude de cas

Vous venez de finir votre première page, hélas même si le résultat est satisfaisant certaines erreurs vont trahir vos mauvaises pratiques et vos ignorances partielles.

Nettoyer le HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="icon" type="image/jpg" href="http://example.com/img/A.jpg">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=BioRhyme" rel="stylesheet">
<link rel="stylesheet" href="style_besign.css">
    <meta charset="UTF-8">
    <title>Jonh Foo</title>    
</head>
 
<body>
 
<header>
    <nav class="menu">
      <a class="lien-menu" href="http://example.com">H O M E</a>
    </nav>
</header>
 
<nav>
  <div class="travaux">
    <ul>
      <li>
        <a class="lien-travaux" href="http://example.com/Design/design.html">D E S I G N</a>
      </li>
      <li>
        <a class="lien-travaux" href="http://example.com/Generik/generik.html">G E N E R I K A R T</a>
      </li>
      <li>
        <a class="lien-travaux" href="http://example.com/Picard/picard.html">P I C A R D</a>
      </li>
      <li>
        <a class="lien-travaux" href="http://example.com/Legende/legende.html">L E G E N D E S</a>
      </li>
    </ul>
  </div>
</nav>   
 
 
<article class="welcome">
  <img src="http://example.com/img/b0.jpg" alt="Design_01">
 
     <p>
       <span class="title">Éthymologie</span>
        <br><br>
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>
        Quas culpa similique ea accusamus reprehenderit? Cumque corrupti, <br>
        voluptatem eligendi veritatis explicabo harum adipisci consequuntur,<br>
        voluptatum facere perspiciatis, doloremque rerum nulla vel!,<br>
        la création d’un nouveau langage.</p>
  <img src="http://example.com/img/b1.jpg" alt="Design_01.5">
 
      <p>
        <span class="title">Titrage</span>
        <br><br>
 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>
        Quas culpa similique ea accusamus reprehenderit? Cumque corrupti, <br>
        voluptatem eligendi veritatis explicabo harum adipisci consequuntur,<br>
        voluptatum facere perspiciatis, doloremque rerum nulla vel!,<br>
        sous forme de pochoirs.</p>
  <img src="http://example.com/img/b2.jpg" alt="Besign_02">
 
    <p>
      <span class="title">Modules</span>
      <br><br>
 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>
        Quas culpa similique ea accusamus reprehenderit? Cumque corrupti, <br>
        voluptatem eligendi veritatis explicabo harum adipisci consequuntur,<br>
        voluptatum facere perspiciatis, doloremque rerum nulla vel!,<br>
        en jouant avec l’approche des caractères.</p>
  <img src="http://example.com/img/b3.jpg" alt="Besign_03">
</article>
 
</body>
 
</html>

Avec l’extension beautify.io sur Brackets :

<!DOCTYPE html>
<html lang="fr">
 
<head>
  <link rel="icon" type="image/jpg" href="http://example.com/img/A.jpg">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=BioRhyme" rel="stylesheet">
  <link rel="stylesheet" href="style_besign.css">
  <meta charset="UTF-8">
  <title>Jonh Foo</title>
</head>
 
<body>
  <header>
    <nav class="menu"> <a class="lien-menu" href="http://example.com">H O M E</a> </nav>
  </header>
  <nav>
    <div class="travaux">
      <ul>
        <li> <a class="lien-travaux" href="http://example.com/Design/design.html">D E S I G N</a> </li>
        <li> <a class="lien-travaux" href="http://example.com/Generik/generik.html">G E N E R I K A R T</a> </li>
        <li> <a class="lien-travaux" href="http://example.com/Picard/picard.html">P I C A R D</a> </li>
        <li> <a class="lien-travaux" href="http://example.com/Legende/legende.html">L E G E N D E S</a> </li>
      </ul>
    </div>
  </nav>
  <article class="welcome"> <img src="http://example.com/img/b0.jpg" alt="Design_01">
    <p> <span class="title">Éthymologie</span>
      <br>
      <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      <br> Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
      <br> voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
      <br> voluptatum facere perspiciatis, doloremque rerum nulla vel!,
      <br> la création d’un nouveau langage.</p> <img src="http://example.com/img/b1.jpg" alt="Design_01.5">
    <p> <span class="title">Titrage</span>
      <br>
      <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      <br> Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
      <br> voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
      <br> voluptatum facere perspiciatis, doloremque rerum nulla vel!,
      <br> sous forme de pochoirs.</p> <img src="http://example.com/img/b2.jpg" alt="Besign_02">
    <p> <span class="title">Modules</span>
      <br>
      <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      <br> Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
      <br> voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
      <br> voluptatum facere perspiciatis, doloremque rerum nulla vel!,
      <br> en jouant avec l’approche des caractères.</p> <img src="http://example.com/img/b3.jpg" alt="Besign_03"> </article>
</body>
 
</html>

Un bon départ, le document est en français lang=‘fr’ !

<!DOCTYPE html>
<html lang="fr">

Anticiper les problèmes

<link rel="icon" type="image/jpg" href="http://example.com/img/A.jpg">

Soyons prévoyants, les navigateurs sont fourbes, les choses les plus simples sont parfois complexes.
Une icône est normalement constituée de peu de couleurs, un format gif ou png est plus pertinent.
A.jpg est un nom pratique, mais je préfère favicon-32x32.png.
Solution : http://realfavicongenerator.net/
c’est plus long, mais compatible avec les smartphones, tablettes, Apple, Android, Windows…

Google Font

  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=BioRhyme" rel="stylesheet">

Google permet d’appeler les feuilles de styles en un seul lien :

<link href="https://fonts.googleapis.com/css?family=BioRhyme|Open+Sans:300,400,600,700,800" rel="stylesheet">

Même si c’est confortable d’avoir cinq graisses d’Open Sans, est‐ce indispensable ?

Valider le code

Un outil existe pour éviter certaines erreurs : https://validator.w3.org/#validate_by_input

Warning: Article lacks heading. Consider using h2‐h6 elements to add identifying headings to all articles.
From line 27, column 3; to line 27, column 27

Ici, il n’y a pas d’erreur importante, néanmoins les articles n’ont pas de titre, cela rend difficile l’analyse de la page par Google et autres. De plus si vous partagez votre article sur Feedly, Facebook, Twitter… il sera moins bien présenté.

Corrections

<link rel="stylesheet" href="style_besign.css">

J’imagine qu’il y a une feuille de styles par page… à bannir.

<header>
  <nav class="menu"> <a class="lien-menu" href="http://example.com">H O M E</a> </nav>
</header>

Je préconise une sémantique autre :

<header class="header">
  <h1 class="header-logo"><a href="http://example.com">nom du site</a></h1>
</header>

Toujours nommer « block‐element » et plutôt en anglais pour une lecture homogène. Mettre un h1 dans le body améliore le référencement.

Beaucoup de sites web utilisent le bloc <header> pour regrouper l’identité du site et la navigation ; c’est assez judicieux. Une fois finalisé, vous pouvez normalement reproduire ce bloc sur toutes les pages de votre site.

<header class="header">
  <h1 class="header-logo"><a href="http://example.com">nom du site</a></h1>
  <nav class="header-nav">
    <ul>
        <li><a href="/">home</a></li>
        <li><a class="current" href="http://example.com/design/design.html">design</a></li>
        <li><a href="http://example.com/generik/generik.html">generikart</a></li>
        <li><a href="http://example.com/picard/picard.html">picard</a></li>
        <li><a href="http://example.com/legende/legende.html">légende</a></li>
     </ul>
   </nav>
</header>

Si vous comparez, j’ai supprimé la div, enlevé quelques class, supprimé les capitales sur les chemins et les liens (on peut reproduire l’effet en CSS). Les effets d’espaces entre les lettres sont à bannir si vous voulez être présent dans les moteurs de recherches !

Le contenu

    <article class="welcome"> <img src="http://example.com/img/b0.jpg" alt="Design_01">
    <p> <span class="title">Éthymologie</span>
      <br>
      <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      <br> Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
      <br> voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
      <br> voluptatum facere perspiciatis, doloremque rerum nulla vel!,
      <br> la création d’un nouveau langage.</p> <img src="http://example.com/img/b1.jpg" alt="Design_01.5">
    <p> <span class="title">Titrage</span>
      <br>
      <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      <br> Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
      <br> voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
      <br> voluptatum facere perspiciatis, doloremque rerum nulla vel!,
      <br> sous forme de pochoirs.</p> <img src="http://example.com/img/b2.jpg" alt="Besign_02">
    <p> <span class="title">Modules</span>
      <br>
      <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      <br> Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
      <br> voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
      <br> voluptatum facere perspiciatis, doloremque rerum nulla vel!,
      <br> en jouant avec l’approche des caractères.</p> <img src="http://example.com/img/b3.jpg" alt="Besign_03"> 
    </article>

La première erreur majeure est la balise neutre <span>, ici on peut mettre un h2 pour « étymologie » et idéalement un h1 avec le titre de la page ou du projet présenté.
Enfin, il faut trouver un compromis entre typographie et lecture à l’écran, dans cet exemple les retours à la ligne seront nuisibles sur un écran plus petit. Si vous voulez grouper des mots et contrôler votre drapeau, vous pouvez essayer l’espace insécable et&nbsp;voilà.

  <article class="project">
    <h1 class="project-title">Design</h1> 
 
    <img src="http://example.com/img/b0.jpg" alt="couverture">
    <h2 class="project-subtitle">Étymologie</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, ex quasi autem? Illo officia reiciendis magnam non, perferendis, repellendus molestias repudiandae harum ex omnis maiores voluptatem sunt provident, laborum quod.</p> 
 
    <img src="http://example.com/img/b1.jpg" alt="double page">
    <h2 class="project-subtitle">Titrage</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, ex quasi autem? Illo officia reiciendis magnam non, perferendis, repellendus molestias repudiandae harum ex omnis maiores voluptatem sunt provident, laborum quod.</p> 
 
    <img src="http://example.com/img/b2.jpg" alt="modules typohraphique">
    <h2 class="project-subtitle">Modules</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, ex quasi autem? Illo officia reiciendis magnam non, perferendis, repellendus molestias repudiandae harum ex omnis maiores voluptatem sunt provident, laborum quod.</p>
 
  </article>