Problème w3c

Fermé

kaisersose - 8 avril 2021 à 23:42
Totox - 15 avril 2021 à 08:17

Bonjour à tous, je suis novice en programmation et j'ai un problème au niveau du w3c.
J'ai une page web qui s'affiche comme je le désire mais le problème c'est que quand je veux la valider dans un checker w3c, j'ai 4 erreurs qui reviennent et je n'arrive pas à les corriger.
Au début j'en avais 11 dont 7 qui étaient dues aux images. Maintenant les seules viennent des 3 <article> et du <section class="articles">.
On me dit " Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections " sauf que je ne sais plus quoi modifier et où placer. Pourriez vous m'aider?

ps : le site que j'utilise est w3 validator

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Tintin</title>
    <link rel="stylesheet" href="css/style.css" />
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- En-tête de page -->
    <header>
      <img src="img/film-tintin-le-secret-de-la-licorne.png" alt="Titre de couleur jaune avec écrit les aventures de Tintin, et un sous-titre de couleur gris avec écrit Le secret de la licorne." />
      <h1>le monde de tintin</h1>
      <!-- Barre de navigation -->
      <nav>
        <img src="img/menu.png" alt="Barre lattérale de couleur bleu"/>
        <ul class="nav-liste">
          <li>tintin</li>
          <li>Capitaine Haddock</li>
        </ul>
      </nav>
    </header>
    <!-- Contenu de la page -->
    <div id="carrousel">
      <img src="img/Licorne2.jpg" alt="Dessin d'un navire de pirate naviguant sur l'eau" />
      <!-- Section d'articles -->
      <section class="articles">
        <article>
          <div class="prez"><img src="img/html.jpg" alt="Photo de profil d'un commentateur représentant un masque de type africain de couleur orange, couvert par une main d'ours."/><span>HTML</span></div>
          <p>
            L’HyperText Markup Language, généralement abrégé HTML, est le format
            de données conçu pour représenter les pages web. C’est un langage de
            balisage permettant d’écrire de l’hypertexte, d’où son nom.
          </p>
        </article>
        <article>
          <div class="prez"><img src="img/ajax.jpg" alt="Photo de profil d'un commentateur répresentant un zéro de couleur rouge illuminé par deux spots."/><span>AJAX</span></div>
          <p>
            L'architecture informatique ajax permet de construire des
            applications Web et des sites web dynamiques interactifs sur le
            poste client en se servant de différentes technologies ajoutées aux
            navigateurs web entre 1995 et 2005.
          </p>
        </article>
        <article>
          <div class="prez">
            <img src="img/js.jpg" alt="Photo de profil d'un commentateur représentant un ordinateur."/><span>Javascript</span>
          </div>
          <p>
            JavaScript (qui est souvent abrégé en « JS ») est un langage de
            script léger, orienté objet, principalement connu comme le langage
            de script des pages web. Mais il est aussi utilisé dans de nombreux
            environnements extérieurs aux navigateurs web
          </p>
        </article>
      </section>
      <!-- Pied de navigation-->
      <footer>
        <p>Palier</p>
        <p>Thomas</p>
        <p>1°2</p>
      </footer>
    </div>
  </body>
</html>

A voir également:

Problème w3c
Amaya w3c - Télécharger - HTML

1 réponse

Réponse 1 / 1

Totox
Modifié le 12 avril 2021 à 08:10

Salut,
simplement traduire la phrase vous indique l'erreur:

" Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections "

Section(les balises) manquent d'un header(en-tête).
Les ent-tête ce sont des titres (h1,h2,...,h6) et un titre est nécessaire pour chaque section.

Exemple:

<section>
  <h1>Articles</h1>
<!-- notez que c'est mieux si un titre H1 est unique dans une page, il est censé indiquer le titre principal relatif au contenu de la page-->
    
  <article>
       ...
<section>
  <h3>article de sous section</h3>
  <article></article>
</section>
  </article>

</section>
<section>
<h2>un autre article</h2>
<article>
...
</article>
</section>

explications détaillés sur comment organiser ça:
https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html

Ça permet aussi d'avoir une table des matières d'utiliser cette structure qui est recommandée pour toutes les pages web.

évidemment il est aussi recommandé de virer les <DIV> comme celui ci(qui serait alors remplacé par <article>.

<div class="prez">
<!--est faux ou plutôt incomplet car n'indique pas la qualité de son contenu donc -->
<article class="prez">
...
<!--ou si c'est uniquement un repère de texte :-->
<p class="prez">
...
<!--voire -->
<span class="prez">
<!-- mais clairement pas DIV -->

Un div est réservé pour les contenus non désignés(et non référencés avec un type de contenu/sémantique ).

Au passage:

"je suis novice en programmation"
Le langage HTML n'est absolument pas de la programmation.
Il sert à indiquer les contenus et leur structure(comme une liste de courses peut le faire) sur lesquels on peut/doit rajouter le CSS pour la présentation/mise en page.
CSS non plus n'est pas de la programmation, il est uniquement descriptif tout comme HTML.

kaisersose
12 avril 2021 à 20:34

Merci beaucoup :) j’ai mieux compris grâce à vous.

Totox > kaisersose
Modifié le 15 avril 2021 à 08:18

Pas de soucis, mettez en résolu alors :)

Bon j'avais pas lu alors je corrige:

"JavaScript (qui est souvent abrégé en « JS ») est un langage de script léger"

Un langage de script. Pourquoi léger? Ça dépendras de la taille des scripts et je peut vous assurer que si on rajoute certaines bibliothèques le poids commence à avoir des conséquences(temps de chargement, vitesse d'interprétation).
", orienté objet,"
Oui mais vite fait en résumé. Disons qu'il permet le paradigme objet car en JS tout les objets sont des fonctions et toutes les fonctions sont des objets. Ce qui est loin d'être courant et y apporte quelques spécificités et empêche toutes les possibilités de l'objet des langages compilés même si ça y est remédié par des astuces et que JavaScript à des avantages que les autres langages n'ont pas(principalement ses inconvénients d'ailleurs).

"Mais il est aussi utilisé dans de nombreux environnements extérieurs aux navigateurs "

C'est surtout ça qui m'a fait réagir. Euh nombreux, vous êtes sûr? Dans quels autres environnements que le navigateur? A part avec node.js qui est utilisé sur serveur(pour le web soi dit en passant) et par Rhino en phase de développement poussé c'est plutôt rare de trouver JavaScript ailleurs que sur navigateur.
Ne confondriez vous pas avec Java qui avec la JVM est connu pour être multi-plateforme voire sur des machines à laver...
Donc non JS n'est pas utilisé dans de nombreux environnements hors du web.
Il y à mieux et il est difficile de mettre en place un interpréteur JavaScript hors d'un navigateur ou de node.js
D'ailleurs avant que ce langage ne s'impose pour le web chez Microsoft(Internet Explorer) avait sa propre version(DHTML) et rendait compliqué d'utiliser JavaScript(popularisé par feu Netscape).

Discussions similaires

validation W3C PHP

correction avec w3c s''est l'enfer

question sur w3c

erreur sur w3c

Validation W3C

Discussions similaires

Newsletters