5568 sujets

Sémantique web et HTML

[Résolu] Incrustation de balises

Bonjour à tous,

Je suis encore débutant en HTML et j'ai un souci de balises qui viennent s'incruster à l'affichage.

Dans mon code initial, il n'y a pas de balise <a></a>

Editeur de texte:

<div id="titre_principal">
....
 </div>
<nav>
...


Dans Firefox ou Chrome lorsque j'inspecte l'élément j'ai des balises qui s'incrustent:

<div id="titre_principal">
....
 </div>
<a>
</a>
</nav>


J'ai essayé en retirant tout le CSS/javascript mais rien n'y fait.

Quelqu'un sait d'ou cela peut-il venir?

Merci.
Modifié par raze (02 Jun 2017 - 11:09)
Bonjour.

Les seules fois où j'ai vu une 'apparition de code', c'est lorsque le HTML a été mal écrit...

(Pour être complet, le navigateur le fait aussi quand il estime que des éléments sont manquants même s'ils sont optionnels comme lorsqu'il rajoute un 'tbody' dans 'table'...)

Smiley smile
Modifié par Zelena (02 Jun 2017 - 11:18)
Bonjour,

Et que contiennent ces balises <a>. Si c'est comme pour les webmails, probablement que le navigateur englobe les urls dans ce type de balise.

Pure spéculation qui reste telle sans la fourniture du code source.
Modifié par Greg_Lumiere (02 Jun 2017 - 11:19)
Les balises <a> ne contiennent rien, mais du coup ca joue sur la mise en page finale.

Voici le code source:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <header>
            <div id="titre_principal">
                <div id="logo">
                    <a href="Accueil.php" ><img src="images/logo-petit.png" alt="Logo" height=30px width=auto /></a>
                    <h1>Titre</h1>
                    <div id="Uconnect">
                        <img id="Uimg" src="images/Deadpool.png" alt="Logo" height=30px width=auto />
                        <div id="User_Right"></a id="User_Name">User_Name<a></div>
                    </div>
                </div>
            </div>
            <nav>
                <ul id="menu">
                    <li><a href="#">A Faire</a><span class="compteur">123</span>
                        <ul>
                            <li><a href="#">Cat A</a><span class="compteur">92</span></li>
                            <li><a href="#">Cat B</a><span class="compteur">23</span></li>
                            <li><a href="#">Cat C</a><span class="compteur">8</span></li>
                        </ul>
                    </li>
                    <li><a href="#">Titre</a>
                        <ul>
                            <li><a href="#">Sous-Titre</a>
                                <ul>
                                    <li><a href="#">Sous-Sous-Titre</a></li>
                                    <li><a href="Test.php">Sous-Sous-Titre</a></li>
                                    <li><a href="#">Sous-Sous-Titre</a></li>
                                    <li><a href="#">Sous-Sous-Titre</a></li>
                                    <li><a href="#">Sous-Sous-Titre</a></li>
                                </ul>
                            </li></li>
                            <li><a href="#">Sous-Titre</a>
                                <ul>
                                    <li><a href="#">Sous-Titre</a></li>
                                    <li><a href="#">Sous-Sous-Titre</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Sous-Titre</a>
                                <ul>
                                    <li><a href="#">Sous-Sous-Titre</a></li>
                                    <li><a href="#">Sous-Sous-Titre</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li id="search_box">
                        <div id="search_box2">
                            <input placeholder="Rechercher" type="text">
                        </div>
                    </li>
                </ul>
            </nav>
        </header>
        <footer>
            <div id="Mentions">
                <p>© blablabla</p>
            </div>
        </footer>
    </body>
</html>
Comme l'écrivait Zelena, il y a des erreurs au niveau de votre code qui provoquent ces effets indésirables:
<div id="User_Right"></a id="User_Name">User_Name<a></div>
Ici vous fermez une balise a et en ouvrez une juste après (faîtes l'inverse)

</ul>
                    </li>
                    <li id="search_box">
Ici vous fermez une balise li en trop.

Un conseil, utilisez un éditeur de texte qui embarque un colorateur syntaxique tel que Notepad++.
Meilleure solution
Merci beaucoup, Le souci a disparu.

Sur notepad ou sur sublime Text la coloration ne m'a pas permis de détecter ces erreurs.
Je suppose qu'il doit exister des plug-ins pour voir ces erreurs.

Encore une fois merci et bonne journée
Modifié par raze (02 Jun 2017 - 12:10)
raze a écrit :

Sur notepad ou sur sublime Text la coloration ne m'a pas permis de détecter ces erreurs.
Je suppose qu'il doit exister des plug-ins pour voir ces erreurs.

Encore une fois merci et bonne journée
Pas vraiment mais dans Notepad++ (je ne sais pour Sublime) quand on place le curseur sur une balise d'ouverture, une distinction visuelle indique où elle se ferme, ça aide.

Ha si, il y a bien un plugin pour ces erreurs bêtes. Il s'appelle Relecture() Smiley cligne
Il existe même ses pendants : Re-Relecture() et Re-Re-Relecture() dispo pour tous les langages Smiley biggrin
Modifié par Greg_Lumiere (02 Jun 2017 - 12:14)
Sujet clos
Aller à