Syntaxe du web
Introduction
Je le rappelle, le but premier d’Optimisaweb est de donner des conseils de webmarketing aux webmasters pour promouvoir leurs sites Internet et non pas d’expliquer comment créer un site. Cela étant, la promotion d’un site passe avant tout par de bases solides de ce site, notamment par une bonne syntaxe du site web. Nous allons voir comment écrire au mieux son code XHTML tout au long de cet article.
Structure d’une page
Petit rappel
Bref rappel : une page HTML type a la forme suivante :
<html>
<head> Titre, liens vers la feuille CSS, favicons, Metatags…</head>
<body>Contenu visible de la page : texte, image, vidéo…</body>
</html>
On a déjà vu les bases concernant les Metatags, venons en au contenu à proprement parler.
Syntaxe du contenu de votre page
Le CSS
Le maximum d’informations graphiques devra être contenu dans votre feuille CSS
Définir les titres
Les titres sont définis par les balises h1 (grand titre), h2… jusque h6
Les balises
Toute balise de style (titre…) a un début et une fin. La forme type est <nomdelabalise></nomdelabalise>. Exemple : <h1>Ceci est mon titre principal, <h3>Ceci est un titre de moindre importance</h3>
Définir les paragraphes
On structure les textes autour de paragraphes. Un paragraphe commence toujours par <p;> et finit par </p>.
Exemple : <p>
Premier paragraphe
</p><p>
Ceci est mon deuxième paragraphe
</p>
Sauter une ligne
Si on veut sauter une ligne sans changer de paraphes, il suffit d’indiquer le code <br/>. Pour passer à la ligne, un seul <br/>. Suffit. Pour 2 lignes, indiquer deux fois le code <br/>. Et cetera.
Autre effets graphiques
Si on veut faire un effet graphique spécial non prévu par la feuille CSS, on pourra centrer le contenu grâce aux balises suivantes :
La balise <strong>gras</strong> permet de mettre un texte en gras. Pour mettre en italique son texte, la balise <talic> ou <em> permet de le faire
Balises images
On donne un maximum de renseignements sur une image : <img src= »http://www.votresite.com/images/image.jpg ou images/image.jpg » alt= »Description de l’image utile pour les moteurs de recherche, en cas de non affichage de l’image et pour les aveugles » height= »hauteur en pixels de l’image » width= »largeur en pixels de l’image »/>
Les liens
On donne un maximum d’informations dans des liens : <a href= »http://www.adressedesitepartenaire » alt= »description du site » title= »titre du site »>Mots clés comme par exemple Voyage Chine</a>. on peut indiquer target= »_blank » dans un lien <a href= »monlien » target= »_blank »></a> pour qu’une fois l’internaute a cliqué sur le lien, une nouvelle fenêtre s’affiche. A ne jamais faire entre des liens internes à votre site, mais peut etre utile pour les liens partenaires, pour que si l’internaute clique sur un de ces liens, il ne quitte pas votre site. N.B : le target blank n’est pas recommandé par le w3c jugeant que l’irruption d’une nouvelle fenêtre perturbe la navigation. A bon entendeur…
Evitez le javascript
Certes, environ 98% des Internautes acceptent le javasript. Cela étant, les moteurs de recherche n’aiment pas trop le javascript. Alors, pour les 2% d’Internautes sans javascript comme pour les moteurs de recherche, évitez autant que possible le recours au javascript.
Et pour finir…
On passe au Validateur W3C sa page pour vérifier les erreurs de syntaxe.