5568 sujets

Sémantique web et HTML

Bonjour à tous,
Je suis en train d'essayer d'améliorer mon site internet et en regardant le code html des pages, moi qui n'y connais pas grand chose, je me demande s'il ne pourrait pas être allégé.
J'utilise Prestashop pour créer/gérer mon site et le code html est généré automatiquement à partir d'un éditeur wysiwyg de ce logiciel.

Par exemple, ce qui me choque un peu dans le code de la page ci-dessous, c'est que plusieurs lignes de même niveau (h3, h4,...) se suivent avec exactement les mêmes caractéristiques de style.
Est-ce qu'il ne serait pas plus correct de les regrouper par niveau (quitte à ajouter une balise pour les sauts de ligne) ?
Voici le code :

<div class="bb_cms">
<h3 style="text-align: center;"><strong>Parrainage, </strong></h3>
<h3 style="text-align: center;"><strong>bons de réduction et points de fidélité</strong></h3>
<h4 style="text-align: center;"><strong><span style="color: #ff7f50;">Vous aimez nos bougies ? </span></strong></h4>
<h4 style="text-align: center;"><strong><span style="color: #ff7f50;">Parlez-en autour de vous et recommandez notre boutique !<br /></span></strong></h4>
<h4 style="text-align: center;"><strong><span style="color: #ff7f50;">Pour vous remercier de cette démarche, </span></strong></h4>
<h4 style="text-align: center;"><strong><span style="color: #ff7f50;"><span style="text-decoration: underline;">nous offrons un bon de réduction de 15% </span></span></strong></h4>
<h4 style="text-align: center;"><strong><span style="color: #ff7f50;">à vous et à vos amis parrainés.</span></strong></h4>
<h4><strong><span style="color: #ff7f50;">Comment parrainer ?</span></strong></h4>
<p>Vous devez être client de notre site BougiesBijoux.</p>
<p>Connectez-vous à votre compte et cliquez sur "?Parrainage"?. Complétez le formulaire d'invitation avec les noms et adresses courriels de ceux de vos amis qui n'ont pas encore de compte sur BougiesBijoux?.</p>
<p>Chacun de vos filleuls recevra un courrier électronique contenant un lien vers BougiesBijoux? et mentionnant votre nom et adresse courriel.</p>
<p><strong>Dès sa 1ère commande à BougiesBijoux, votre filleul bénéficie d'une réduction de 15%</strong> <strong>et</strong> <strong>vous fait bénéficier de la même réduction </strong>pour votre prochaine commande, après un délai de validation de 15 jours?.</p>
<p><span style="color: #414141;">Rendez-vous à la rubrique "Mes bons de réductions" de votre compte pour connaître la valeur en euros de votre réduction. </span></p>
<h4><strong><span style="color: #ff7f50;">Les bons de réduction du parrain</span></strong></h4>
<p>Le bon de réduction est acquis par le parrain lorsque le filleul a passé une commande sur notre site <span style="text-decoration: underline;">en spécifiant l'adresse email de son parrain</span> et qu'aucun produit de sa commande n'a fait l'objet d'un retour?.?</p>
<p><strong><strong>Les bons de réduction sont valables un an?, ils sont cumulables et utilisables en déduction d’une commande dans la limite du montant total de cette commande.</strong>?<br /></strong></p>
<p>Nous nous réservons le droit d'annuler les avantages attribués à un participant si nous constatons des irrégularités dans l'utilisation du programme de parrainage.</p>
<h4 style="text-align: center;"><strong><span style="color: #ff7f50;">Les points de fidélité</span></strong></h4>
<p><strong>BougiesBijoux vous remercie de votre fidélité en vous offrant ces points, utilisables pour régler tout ou partie de vos commandes.</strong></p>
<p>Chaque achat sur notre site vous apporte <strong>1 point</strong> de fidélité par <strong>tranche de 5€ </strong>(hors frais de livraison), la valeur  du point est de <strong>0,25€</strong>?.</p>
<p><em>Par exemple : pour une commande de 50€ vous cumulez 10 points de fidélité, soit 2,50€ de réduction à valoir sur votre prochaine commande.</em></p>
<p>Ces points sont cumulables et vous pouvez les convertir en bons de réduction à n’importe quel moment.?<em><br /></em></p>
<h4><strong><span style="color: #ff7f50;">Comment convertir vos points de fidélité en bons de réduction ?</span></strong></h4>
<p>Connectez-vous à votre compte et cliquez sur "Mes points de fidélité"?. Cliquez sur "Transformer mes points en un bon de réduction..."; un code est alors généré automatiquement.?</p>
<p><span style="color: #414141;">Rendez-vous à la rubrique "Mes bons de réductions" pour connaître votre code et le montant en euros de votre réduction. Vous pourrez l'utiliser dès votre prochaine commande.</span>?</p>
<p><strong>Les bons de réduction sont valables un an?, ils sont cumulables et utilisables en déduction d’une commande dans la limite du montant total de cette commande.</strong></p>
<em>À noter :</em> En cas de retour des articles achetés, BougiesBijoux débitera de votre compte client les points correspondant à la valeur des articles retournés. Les points ne peuvent en aucun cas avoir une valeur de remboursement ou d’échange, être convertis en espèces ou être vendus ou monnayés sous quelle que forme que ce soit.</div>



Merci d'avance pour vos impressions et vos réponses.

PS : Dommage qu'on ne puisse pas prévisualiser ses messages avant de poster, bien que j'aie utilisé la coloration syntaxique pour ce bout de code, je ne vois qu'un gros paquet de lignes toutes noires.
Modifié par Yllen (18 Apr 2012 - 18:21)
Bonjour,

ben tu pourrais déjà séparer le fond de la forme, en clair ta mise en page en CSS plutôt que le style directement dans les balises. Donc un appel à une feuille de style entre les balises HEAD.
Cela te permettrait d'y voir plus clair et d'améliorer encore.
Merci de ta réponse Floyd.

Est-ce que tu veux dire que, par exemple, dans le .bb_cms h4 du global.css je pourrais déjà directement définir la couleur, l'alignement et la graisse du texte du h4 ?
Et dans l'éditeur de code, saisir juste :
<h4 >Vous aimez nos bougies ?</h4>

au lieu de :
<h4 style="text-align: center;"><strong><span style="color: #ff7f50;">Vous aimez nos bougies ? </span></strong></h4>

Pour les balises HEAD, comme je le disais plus haut, n'y connaissant pas grand chose, je suis contrainte de passer par l'éditeur Prestashop qui génère tout seul le code html correspondant à ma saisie de texte et donc je n'y ai pas accès.
Enfin, il me donne accès juste aux petits bouts de code html tels que celui que j'ai mis dans mon premier message.
Modifié par Yllen (18 Apr 2012 - 19:35)
ben oui, c'est justement l'intérêt. par exemple :


h4 {
text-align: center;
color: #ff7f50;
font-weight:bold;
}


si tu veux appliquer un style à un seul élément , tu utilises les identifiants (id).
Bon, apparemment la ligne à modifier à laquelle je pensais dans le global.css n'est pas la bonne car après avoir enregistré le fichier et rechargé la page, aucun de ces 3 paramètres n'est appliqué à mon texte.
Je vais fouiner ailleurs.
Honnêtement je ne suis pas certain que ce soit une bonne idée d'essayer d'améliorer du html généré par Prestashop : Tu as fait le choix d'utiliser une solution prête à l'emploi (et a priori très correcte, Prestashop a plutot bonne réputation), je pense que si tu ne t'y connais pas trop en développement web il serait préférable d'assumer ce choix jusqu'au bout et de plutôt employer ton temps à bien manier l'interface administrateur de prestashop et à configurer/installer les plugins qui amélioreront ton site comme tu le veux.


Maintenant pour revenir à la page html, oui dans l'absolu il y aurait énormément à améliorer :
-Comme déjà dit, les styles en ligne c'est pas génial.
-La balise strong sert à souligner (au sens figuré... et pourquoi pas au sens propre suivant le css ^^) les points important d'un texte. A priori on se doute que les titres sont importants : donc aucune raison de mettre un strong dans un h3 ou h4.
-Les spans sont inutiles, surtout avec l'utilisation des styles en ligne : Pourquoi ne pas appliquer le style directement à tous le titre au lieu de créer un span à l'intérieur ? (et même avec des styles séparés, il serait plus judicieux d'attribuer une classe au titres qui doivent s'afficher d'une autre couleur.
- il y a un br entre em qui traine et qui ne sert strictement à rien (tu as probablement fait un retour à la ligne en trop en éditant la page ^^)

Voilà, bonne continuation !
Ton message est plein de bon sens, BlueScreenJunky.

Je me suis laissée envahir par mon côté perfectionniste pour un sujet que je ne maitrise pas. Mieux vaut m'abstenir sous peine de perdre beaucoup de temps pour un résultat qui ne sera pas à la hauteur.

Merci à tous.

PS : Je vais quand même enlever ce br qui traine inutilement Smiley cligne