Formation HTML5 - CSS3

HTML : Les balises de contenu texte

Le texte doit toujours être compris dans des balises de contenu de type paragraphe, comme des bloc de citation, du texte préformaté, etc.
La balise   permet de mettre un retour chariot au sein d'un paragraphe.

la plupart des balises de contenu texte sont en affichage display: block, c'est à dire qu'elles prennent tout l'espace disponible en largeur, et celles qui sont display: inline "entourent" le contenu texte, certaines peuvent par exemple servir a appliquer un CSS particulier à ce texte, comme les balises <code>,  ou avoir un fonctionnement comme la balise <a>.

Attention, pour par exemple mettre du texte en gras ou en italique, il existe plusieurs balises comme ,  pour le gras,  ou  pour l'italique.

Si on utilise , on donne en plus d'une important visuelle au contenu une importance au niveau de la sémantique donc du référencement, alors que  ne donne qu'une importantce visuelle.

La même chose pour la balise , qui donne en plus de l'italique, une emphase au texte, alors que la balise  ne fait que mettre le texte en italique.

Certains systèmes d'icônes fournis sur internet utilisent la balise i comme support pour afficher leurs icônes.

Tu quoque filis ?
Jules César

I'm Batman, Batman.

Lorem ipsum dolor sit 
amet consectetur adipisicing elit. 
Facere nemo consequatur, temporibus 
quaerat quis tempore odit est incidunt 
aperiam laborum recusandae 
aspernatur explicabo non quas. 
Vel autem earum assumenda incidunt.

<body>
    <h1>
        Mon titre
    </h1>
</body>

Des balises sur le texte

Autrefois, on utilisait la balise  pour changer la police de caractère, la taille et la couleur d'une zone de texte. Cette balise est désormais décommissionnée, mais est pour l'instant toujours interprétée par les navigateur.

A la place de , on utilisera plutôt les balises adaptée pour l'italique, le gras, etc, et la balise  associée à une classe pour ce qui est du changement de police de caractère, de taille ou de couleur.

Certaines balises ajoutent du contenu dans l'espace qui se siture entre le début de la balise et le contenu (entre la bordure et le contenu).

H₂SO₄^2-

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia est quia, accusantium dicta esse consequuntur quis! Vitae, modi dicta id ab a temporibus quo ratione mollitia, necessitatibus optio itaque laudantium.

En web, on ne souligne jamais du texte s'il n'est pas un lien vers un autre document. Les visiteurs pourraient confondre avec un lien et penser que le site est cassé. On peut en revanche ~~biffer~~ du texte ou surligner au marqueur jeune fluo une série de mot

Problèmes courants en CSS

Les tailles des éléments sont définis par défaut sur le contenu des éléments, c'est à dir que si je définie une div de 200px de large, avec une marge intérieure de 10px et une bordure de 1px de large, la place totale de l'élément sur l'écran sera de : 200px + 10px + 10px + 1px + 1px (contenu + marge intérieur gauche + marge intérieur droite + largeur bordure à gauche + largeur bordure à droite ) => 222px.
c'est la propriété css box-sizing qui est à 'content-box' par défaut.
Pour éviter cela, on appliquera 'border-box' à tous les éléments grace au caractère spécial * dans la déclaration CSS.

                            
*, *::before, *::after{
    box-sizing: border-box;
}

Content box:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium, dolores.

Border box:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium, dolores.

EM vs REM

Coucou

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius ut voluptas ab et tempore odio illo, dolorem impedit sapiente veniam recusandae perferendis quidem, culpa fugiat. Dicta nesciunt magni quasi officiis?