Autoformater ou embellir un code HTML en gardant les balises li sur la même ligne

Dans ce tutoriel, je vous propose ma méthode pour embellir un code HTML en veillant à ce que les balises <li> restent sur la même ligne.

En effet, lorsque j'essaye d'embellir mon code HTML que ce soit en utilisant un outil en ligne ou l'extension XML Tools de Notepad++, j'obtiens certes un code plus propre et plus compréhensible, mais mes balises <li> ne se mettent pas sur la même ligne.

Voici l'auto formatage que j'obtiens généralement avec ce genre d'outils :

<div class='nav-navigation'>
	<div class='body-row menu-wrap'>
		<nav>
			<a class='resp-menu2' href='#' id='resp-menu'>Menu</a>
			<ul class='menu'>
				<li>
					<a expr:href='data:blog.homepageUrl' itemprop='url'>
						<span itemprop='name'>Accueil</span>
					</a>
				</li>
				<li>
					<a href='#'>
						<span itemprop='name'>Fashion</span>
					</a>
				</li>
				<li>
					<a href='#'>Voyages</a>
				</li>
				<li style="list-style: none; display: inline">
					<ul class='sub-menu'>
						<li>
							<a href='#'>Sous-Menu 1</a>
						</li>
						<li>
							<a href='#'>S.Sous-Menu 2</a>
						</li>
						<li>
							<a href='#'>S.Sous-Menu 3</a>
						</li>
					</ul>
				</li>
			</ul>
		</nav>
	</div>
</div>

Voilà maintenant ce que je souhaite avoir comme résultat

<div class='nav-navigation'>
    <div class='body-row menu-wrap'>
        <nav><a class='resp-menu2' href='#' id='resp-menu'>Menu</a>
            <ul class='menu'>
                <li><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'>Accueil</span></a></li>
                <li><a href='#'><span itemprop='name'>Fashion</span></a></li>
                <li><a href='#'>Voyages</a></li>
                <li style="list-style: none; display: inline">
                    <ul class='sub-menu'>
                        <li><a href='#'>Sous-Menu 1</a></li>
                        <li><a href='#'>S.Sous-Menu 2</a></li>
                        <li><a href='#'>S.Sous-Menu 3</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</div>

Vous êtes d’accord pour dire que le second code est plus compréhensible que le premier ! Du moins, cela me permet personnellement de détecter les erreurs plus facilement.

Pour résoudre cette problématique, j'ai dû recourir à deux outils en ligne et procéder en deux étapes.

D'abord, j'utilise l'application en ligne dirtymarkup.

1. Collez votre code dans la zone prévue à cette effet
2. Dans le menu "Output", sélectionnez "Code fragment" pour que l'application ne route pas un entête à notre code HTML après formatage.
3. Dans le menu "Indent", sélectionnez "None" afin d'empêcher l'application de créer des retraits en début de ligne (cette opération sera réalisée avec le deuxième outil par la suite).
4. Enfin, cochez la case "Allow proprietary attributes" et cliquez sur le bouton "Clean" pour exécuter l'opération.

Voici le résultat, on obtient un code plus compact et sans indentation.

<div class='nav-navigation'>
<div class='body-row menu-wrap'>
<nav><a class='resp-menu2' href='#' id='resp-menu'>Menu</a>
<ul class='menu'>
<li><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'>Accueil</span></a></li>
<li><a href='#'><span itemprop='name'>Fashion</span></a></li>
<li><a href='#'>Voyages</a></li>
<li style="list-style: none; display: inline">
<ul class='sub-menu'>
<li><a href='#'>Sous-Menu 1</a></li>
<li><a href='#'>S.Sous-Menu 2</a></li>
<li><a href='#'>S.Sous-Menu 3</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>

Maintenant à l'aide de beautifier.io, on ajoutera des retraits en début de ligne (indentation) pour rendre le code plus lisible.

1. Ouvrez l'application en ligne beautifier.io
2. Sélectionnez "Beautify HTML" dans le menu déroulant
3. Insérer le code obtenu avec dirtymarkup
4. Cliquez sur "Beautify Code"

Voici le résultat final :

<div class='nav-navigation'>
    <div class='body-row menu-wrap'>
        <nav><a class='resp-menu2' href='#' id='resp-menu'>Menu</a>
            <ul class='menu'>
                <li><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'>Accueil</span></a></li>
                <li><a href='#'><span itemprop='name'>Fashion</span></a></li>
                <li><a href='#'>Voyages</a></li>
                <li style="list-style: none; display: inline">
                    <ul class='sub-menu'>
                        <li><a href='#'>Sous-Menu 1</a></li>
                        <li><a href='#'>S.Sous-Menu 2</a></li>
                        <li><a href='#'>S.Sous-Menu 3</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</div>