Forum : Création d'un document HTML

Bonjour ,
C''est vraiment tres bien ce que tu as fait
Les seules remarques que je peux te faire c'est de mettre une balise <ul> regroupant l'ensemble de tes <li> dans ta navigation et mettre les liens des ancres dans le titre et pas à l'exterieur.

Yeazus

Auteur

Bonjour,

Merci de votre retour. Voici le document modifié selon vos recommandations.

https://www.cjoint.com/c/KKji1koTLYL

Le document ne comporte aucune autre erreur ?

Merci d'avance

popotte

Alors c'est pas mal

Il y'a quelques erreurs:
https://validator.w3.org/nu/?showsource=yes&showoutline=yes&showimagereport=yes&doc=https%3A%2F%2Fwww.cjoint.com%2Fdoc%2F21_11%2FKKji1koTLYL_document-html.html

Ensuite il y a la structure du code a revoir

La balise title, sur une seule ligne
La nav doit se trouver dans le header
Pour tes liens, n'utilises pas la balises <br> (d'ailleurs tant que tu n'y est pas obligé, n'utilise JAMAIS la balise <br> :p)

Utilises une liste:

<nav>
    <ul>
        <li><a href="#">Rubrique 1</a></li>
        <li><a href="#">Rubrique 2</a></li>
        <li><a href="#">Rubrique 3</a></li>
    </ul>
</nav>

(avec le css tu pourras retirer le point tout moche ;))

Il ne faut pas de balise <section> dans une balise <article>, il y'a trois balises qui sont toujours des enfants de <main>:

section

article

aside

Bref remplaces tes section par des div ^^

Ne met pas les balises inline à la ligne, ce ne sont pas des blocks, tout ce qui est <span>, <abbr>, <b>, <i> etc... ça s'écrit inline

Bref faut pas faire:

L'
<abbr title="Intelligence Artificielle">IA</abbr>
(ou...

Faut faire:

L'<abbr title="Intelligence Artificielle">IA</abbr> (ou...

Pour la structure générale, alors ce ne sont pas des standards donc t'es pas obligé de le faire, mais je te conseilles de formatter ton code comme ça pour une meilleure lisibilité ^^ :

Les block du même niveau doivent avoir un saut de ligne

Les block parent-enfant doivent etres collées

Les balises inlines doivent etre collées

Par exemple:

<!-- Un block et un deuxieme au même niveau -->
<div>
    <div></div>
</div>

<div>
    <div></div>
</div>

<!-- Un block parent et un enfant, qui est parent d'un autre block enfant -->
<div>
    <div>
        <div></div>
    </div>
</div>

<!-- Deux balises inlines -->
<p>Lorem</p>
<p>Ipsoume</p>

<!-- Un petit mix de tout -->
<div>
    <h2>Lorem ipsoume</h2>
    <h3>Part one</h3>

    <div>
        <p>Lorem</p>
        <p>Ipsoume</p>
    </div>

    <div>
        <p>Ipsoume</p>
        <p>Lorem</p>
    </div>
</div>

<div>
    <h2>Lorem ipsoume</h2>
    <h3>Part two</h3>

    <div>
        <p>Lorem</p>
        <p>Ipsoume</p>
    </div>

    <div>
        <p>Ipsoume</p>
        <p>Lorem</p>
    </div>

    <div>
        <p>Ipsoume</p>

        <p>
            Texte trèèèèèèèèèèèèèèèèèèèèèèèèèèèès long
            qui tien pas
            sur une ligne
        </p>
    </div>
</div>

Les balises <a> avec l'attribut name n'est supporté que dans les document HTML, en HTML5 ça a été retiré (bon... dans ton cas c'est un document... on va dire que c'est bon x), mais pour un site en HTML5 laisses tomber le <a name="rubrique1"> et utilises <h2 id="rubrique1">)
Dans ta section (qui devrait etre une div comme dit dans un point plus haut) tu as deux élements qui se répètent, isoles les dans des div:

<article>
    <h2>Lorem</h2>

    <!-- div, pas section :p -->
    <div>
        <div>
            <h3>Une notion aux champ d'application nombreux</h3>

            <p>
                L'<abbr>IA</abbr> ...
            </p>

            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div>
            <h3>L'intelligence artificielle appliquée à notre société actuelle</h3>
            <!-- Etc... -->
        </div>
    </div>
</article>

Mmmh voila tout ce que j'ai pu trouver :)

Création d'un document HTML

3 réponses