Production d'un source HTML adapté

**Pyanepsion** · 25/05/2012, 16h44

Bonjour à tous.

Il m'est demandé de produire un source HTML agréable à voir. Exemple pour le source suivant :
– chaque balise <li> devrait se situer juste en dessous de la précédente;
– la balise <ul> devrait être au même niveau que la précédente.

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!DOCTYPE HTML>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="content-type" content="text/html" />
	<title>Source de bel apparence</title>
</head>
 
<body>
<?php
	$ariane_nom_1='Nom 1';
	$ariane_description_1='description 1';
	$ariane_chemin_1='chemin 1';
	$ariane_nom_2='Nom 2';
	$ariane_description_2='description 2';
	$ariane_chemin_2='chemin 2';
	$ariane_nom_3='Nom 3';
	$ariane_description_3='description 3';
	$ariane_chemin_3='chemin 3';
?>
			<div class="bandeau-ariane">
			<!-- Début Fil d’Ariane -->
				<ul id="ariane" class="nav">
					<li>Vous êtes ici&nbsp;: </li>
					<?php
					if($ariane_nom_1<>'')
					{
						echo '<li><a href="'.$ariane_chemin_1.'" title="'.$ariane_description_1.'">'.$ariane_nom_1.'</a></li>';
					}
					if($ariane_nom_2<>'')
					{
						echo '<li><a href="'.$ariane_chemin_2.'" title="'.$ariane_description_2.'">'.$ariane_nom_2.'</a></li>';
					}
					if($ariane_nom_3<>'')
					{
						echo '<li><a href="'.$ariane_chemin_3.'" title="'.$ariane_description_3.'">'.$ariane_nom_3.'</a></li>';
					}
					?>
				</ul>
			<!-- Fin Fil d’Ariane -->
			</div>
</body>
</html>

Comment corriger ce source ? Merci pour votre aide.

**Bovino** · 25/05/2012, 16h56

Il m'est demandé de produire un source HTML agréable à voir.

Explique à "Il" que c'est très à la mode de produire le HTML comme tu le fais et que du coup, il est très agréable à voir !

Parce que franchement, quel est l'intérêt de ce type de demande ???

Que ton code source soit bien organisé, indenté etc. est important pour pouvoir le relire, mais que le HTML généré soit formatté est complètement stupide !

**Benjamin Delespierre** · 25/05/2012, 16h57

Bonjour,

Ma recommandation principale est l'usage systématique de la syntaxe alternative, ça rends tout de suite le source plus lisible et ça permet d'éviter les problèmes d'indentation PHP vs HTML. C'est curieusement assez peu utilisé d'ailleurs...

Ne pas faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div>
<?php foreach ($collection as $value) { ?>
<?php if ($value) { ?>
<span><?php echo value; ?></span>
<?php } else { ?>
<span>valeur nulle</span>
<?php } ?>
<?php } ?>
</div>

Encore moins

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div>
<?php foreach ($collection as $value) {
if ($value) {
echo '<span>' . $value . '</span>';
} else {
echo '<span>valeur nulle</span>';
}
} ?>
</div>

Faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div>
<?php foreach ($collection as $value): ?>
<?php if ($value): ?>
<span><?php echo $value ?></span>
<?php else: ?>
<span>valeur nulle</span>
<?php endif ?>
<?php endforeach ?>
</div>

L'avantage principal de cette méthode est qu'elle permet d'utiliser des structures de contrôles PHP de la même façon qu'on utilise des balises HTML.

Utilise également les short open tags, c'est beaucoup beaucoup plus pratique que de semer des echo un peu partout:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<? if ($value): ?><span><?=$value?></span><? endif ?>

Par défaut, le short open tag est désactivé mais tu peux l'activer en mettant ça dans ton .htaccess:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

php_flag short_open_tags 1

Applique déjà ces deux règles et tu verra que le source PHP et le source HTML produits seront de meilleure qualité.

Soit dit en passant la remarque de Bovino est tout à fait valide, on se fout pas mal de l'indentation HTML en règle générale vu que tous les outils de débug des navigateur modernes ré indentent automatiquement (fait F12 tu verra). Sinon, même si "Il" télécharge le flux HTML pour le lire dans un éditeur de texte, tu as des IDE comme Eclipse qui permettent de remettre d'équerre une indentation avec un simple raccourci clavier (CTRL + SHIFT + F)

**rawsrc** · 25/05/2012, 17h14

Tout à fait d'accord avec les remarques précédentes,
Voici le même code plus lisible :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?php
 
$ariane_nom_1='Nom 1';
$ariane_description_1='description 1';
$ariane_chemin_1='chemin 1';
$ariane_nom_2='Nom 2';
$ariane_description_2='description 2';
$ariane_chemin_2='chemin 2';
$ariane_nom_3='Nom 3';
$ariane_description_3='description 3';
$ariane_chemin_3='chemin 3';
 
?>
<!DOCTYPE HTML>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-type" content="text/html" />
    <title>Source de bel apparence</title>
</head>
<html>
<body>
    <div class="bandeau-ariane">
        <!-- Début Fil d’Ariane -->
        <ul id="ariane" class="nav">
            <li>Vous êtes ici&nbsp;: </li>
            <?php
 
            if ($ariane_nom_1 <> '') {
                echo
<<<HTML
            <li><a href="$ariane_chemin_1" title="$ariane_description_1">$ariane_nom_1</a></li>
HTML;
            }
 
            if ($ariane_nom_2 <> '') {
                echo
<<<HTML
            <li><a href="$ariane_chemin_2" title="$ariane_description_2">$ariane_nom_2</a></li>
HTML;
            }
 
            if ($ariane_nom_3 <> '') {
                echo
<<<HTML
            <li><a href="$ariane_chemin_3" title="$ariane_description_3">$ariane_nom_3</a></li>
HTML;
            }
            ?>
        </ul>
        <!-- Fin Fil d’Ariane -->
    </div>
</body>
</html>

Après moults essais, les syntaxes HEREDOC et NOWDOC sont d'après mon expérience le graal en terme de lisibilité.
Il faut de préférence les placer en début de ligne, les écrire en majuscules et les nommer explicitement de manière à savoir en un coup d'oeil ce qui est manipulé.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<<<CSS
...
CSS;
 
 
<<<JS
...
JS;
 
 
<<<HTML
...
HTML;
 
 
<<<XML
...
XML;

Bref ce qui importe, c'est la lisbilité du code générant une page et pas trop le rendu ainsi généré.
D'ailleurs, les lib de minification pour le CSS, JS ou le HTML s'affranchissent de l'aspect du code rendu pourvu que cela soit le plus léger possible, le moins gourmand en bande passante et le plus rapide à afficher.
Regarde le code source de la page d'accueil de Google. Tu verras, c'est pas zoli zoli

**Bovino** · 25/05/2012, 19h17

Après moults essais, les syntaxes HEREDOC et NOWDOC sont d'après mon expérience le graal en terme de lisibilité.

Entièrement d'accord !

**Pyanepsion** · 25/05/2012, 19h20

Tout cela n'a pas été bien facile à comprendre puisque je suis plutôt débutant en PHP, mais maintenant c'est fait. J'ai donc réussi à mettre correctement en forme l'exemple alors que je craignais bien tout cela impossible. Il ne me reste plus qu'à modifier mes autres includes.

Merci Benjamin et Rawsrc pour vos réponses.

Production d'un source HTML adapté

Langage PHP

Discussions similaires

Partager

Partager