5547 sujets
Sémantique web et HTML
Salut,
il n'y a pas vraiment de tuto pour ça
C'est chacun à son idée, de la façon la plus logique possible.
Typiquement, on ajoute un "cran" d'indentation à chaque degré de parenté franchi. On passe à la ligne (avec le même niveau d'indentation) pour des balises de type block et on laisse sur la même ligne les balises en ligne.
C'est en tout cas comme celà que je procède.
Ce qui donne typiquement :
J'ai remplacé un indentation par *** parceque le forum merdouille au niveau de l'indentation.
Tu vois que <head> et <body> sont enfant de <html>, on indente d'un cran, les paragraphe etc sont enfant de <body>, on indente encore et ainsi de suite.
il n'y a pas vraiment de tuto pour ça
C'est chacun à son idée, de la façon la plus logique possible.
Typiquement, on ajoute un "cran" d'indentation à chaque degré de parenté franchi. On passe à la ligne (avec le même niveau d'indentation) pour des balises de type block et on laisse sur la même ligne les balises en ligne.
C'est en tout cas comme celà que je procède.
Ce qui donne typiquement :
<!DOCTYPE ... >
<html>
***<head>
******<title>Titre</title>
***</head>
***<body>
******<h1>Titre</h1>
******<p>Texte</p>
******<p>Texte, élément <em>en ligne</em></p>
******<div>
*********<p>Texte</p>
*********<p>Texte</p>
******</div>
***</body>
</html>
J'ai remplacé un indentation par *** parceque le forum merdouille au niveau de l'indentation.
Tu vois que <head> et <body> sont enfant de <html>, on indente d'un cran, les paragraphe etc sont enfant de <body>, on indente encore et ainsi de suite.
Pour compléter ce que j'ai dit (en fait, je n'avais pas tout dit 
)
Parfois, on indente un cran de plus pour les sous titres, au passage de <h2> à <h3> etc.
C'est une incartade aux "principes" énoncés ci dessus, mais je trouve la démarche loin d'être idiote, même si là c'est question de goûts.
La structure du document est plus lisible.
J'oubliais un truc aussi.
Penser à faire des sauts de ligne aussi !!
Là j'en ai pas mis, mais ça améliore la lisibilité.
Typiquement on met des sauts de lignes entre les grands blocs de structure.
Au delà de l'indentation, certains commentent leur code pour indiquer les "zones"
Je suis pas fan de cette méthode même si ça aide encore à la lisibilité du code.
Mais perso, j'utilise des identiifiant à mes blocs de conteneurs suffisament explicites
)Parfois, on indente un cran de plus pour les sous titres, au passage de <h2> à <h3> etc.
C'est une incartade aux "principes" énoncés ci dessus, mais je trouve la démarche loin d'être idiote, même si là c'est question de goûts.
La structure du document est plus lisible.
J'oubliais un truc aussi.
Penser à faire des sauts de ligne aussi !!
Là j'en ai pas mis, mais ça améliore la lisibilité.
Typiquement on met des sauts de lignes entre les grands blocs de structure.
Au delà de l'indentation, certains commentent leur code pour indiquer les "zones"
<!-- Titre -->
...
<!-- Fin du Titre -->
<!-- Contenu -->
...
<!-- Fin du Contenu -->
<!-- Pied de page -->
...
<!-- Fin du pied de page -->
Je suis pas fan de cette méthode même si ça aide encore à la lisibilité du code.
Mais perso, j'utilise des identiifiant à mes blocs de conteneurs suffisament explicites
Suffit d'utiliser un éditeur qui peut remplacer les tabulations par des blancs et hop!, une option à cocher et le tour est joué...
Celui qui veut des tabulations, ben il a tapé des tabulations, celui qui veut des blancs, ben il a des blancs à la fin... Et tout le monde est content...
Sauf quand cette saleté d'éditeur utilise des tabulations quand on tabule et des blancs quand on copie/colle
Cet outils n'étant pas destiné au WEB et encore moins à l'accessibilité, je tairais son nom sur le forum...
Celui qui veut des tabulations, ben il a tapé des tabulations, celui qui veut des blancs, ben il a des blancs à la fin... Et tout le monde est content...
Sauf quand cette saleté d'éditeur utilise des tabulations quand on tabule et des blancs quand on copie/colle
Cet outils n'étant pas destiné au WEB et encore moins à l'accessibilité, je tairais son nom sur le forum...
Olivier a écrit :
Pour compléter ce que j'ai dit (en fait, je n'avais pas tout dit
Bah... Si tu insistes, on peut aussi indenter comme ceci :
<body>
<h1>Lorem ipsum</h1>
<div id="id">
<p>blabla <a href="#"
title="lorem"
onclick="...">ipsum</a></p>
</div>
</body>... pour séparer les attributs successifs d'un élément.
Laurent Denis a écrit :
Bah... Si tu insistes, on peut aussi indenter comme ceci :
<body> <h1>Lorem ipsum</h1> <div id="id"> <p>blabla <a href="#" title="lorem" onclick="...">ipsum</a></p> </div> </body>
... pour séparer les attributs successifs d'un élément.
C'est une autre façon de voir, mais je trouve ça totalement illisible !! et inutile en plus, les attributs sont séparés par des espaces et délimité par les chevrons de la balise, faut être aveugle pour pas s'y retrouver ! alors que là il suffit d'être logique pour pas s'y retrouver
(moi troller ? oui peut être...)
Salut,
Pour ma part, j'indente de la même manière que Olivier... à une différence près : je n'indente pas les enfants (voire même les petits-enfants ) de la balise <html>... Juste une question pratique, j'ai l'habitude de coder avec vim dans un terminal de 80x24 caractères et j'évite un maximum les lignes trop longues qui en prennent deux à l'écran.
++
Jérémie.
Pour ma part, j'indente de la même manière que Olivier... à une différence près : je n'indente pas les enfants (voire même les petits-enfants
) de la balise <html>... Juste une question pratique, j'ai l'habitude de coder avec vim dans un terminal de 80x24 caractères et j'évite un maximum les lignes trop longues qui en prennent deux à l'écran. ++
Jérémie.
Bonsoir,
Indentation contre compression...
je ne vois aucun intérêt à indenter un code html, j'y trouve même un inconvénient que chacun pourra constater.
Lors de la réalisation d'une maquette l'indentation facilite le travail : c'est le moment où le besion de pouvoir lire confortablement la source est évident.
Cependant de simples retoure à la ligne me suffisent en général.
Par la suite je compacte le code afin qu'il tienne sur un minimum de lignes, surtout sur les pages un peu chargées.
La raison est simple : on gagne souvent plusieurs kO en supprimant espaces et tabulations superflus, et tout le monde n'est pas encore connecté en Adsl, même en France.
Qu'une page soit aussi légère que possible tout en contenant l'intégralité de ce qu'elle doit contenir la rend donc plus accessible, au sens premier du terme, à ceux qui disposent d'une connexion lente.
Pour illustrer cela je travaille actuellement sur un site qui sera utilisé notamment au Brésil : je n'ai vraiment pas intérêt à multiplier les indentations car une page de 30 à 40 KO semble déjà lourde à charger à certaines heures ...
Tout octet gagné sera donc un avantage.
Indentation contre compression...
je ne vois aucun intérêt à indenter un code html, j'y trouve même un inconvénient que chacun pourra constater.
Lors de la réalisation d'une maquette l'indentation facilite le travail : c'est le moment où le besion de pouvoir lire confortablement la source est évident.
Cependant de simples retoure à la ligne me suffisent en général.
Par la suite je compacte le code afin qu'il tienne sur un minimum de lignes, surtout sur les pages un peu chargées.
La raison est simple : on gagne souvent plusieurs kO en supprimant espaces et tabulations superflus, et tout le monde n'est pas encore connecté en Adsl, même en France.
Qu'une page soit aussi légère que possible tout en contenant l'intégralité de ce qu'elle doit contenir la rend donc plus accessible, au sens premier du terme, à ceux qui disposent d'une connexion lente.
Pour illustrer cela je travaille actuellement sur un site qui sera utilisé notamment au Brésil : je n'ai vraiment pas intérêt à multiplier les indentations car une page de 30 à 40 KO semble déjà lourde à charger à certaines heures ...
Tout octet gagné sera donc un avantage.