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 :

<div align= »center »>Texte centré</div>

 

<div align= »left »>Texte à gauche</div>

 

<div align= »right »>Droite</div>

 

 

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.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

4 × 4 =