Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel du HTML5

Comparer les balises de type bloc et inline

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Il existe deux familles principales de balises : les balises de type bloc se positionnant les unes sous les autres et les balises de type inline qui s'enchaînent les unes aux autres.
03:14

Transcription

Au cours d'une étape précédente, nous avions vu que chaque balise pouvait avoir différents types de contenu. Alors il y a deux types principaux, et un troisième qui est alternatif. Le type principal va être que par exemple une balise article va avoir un contenu permis qui sera du flow content. Alors que par exemple une balise de type B aurait un type de contenu qui serait du Phrasing content. Alors la différence entre le flow content et le Phrasing content, alors ici si je regarde le phrasing elements, vous voyez que ce sont que des balises de type a, em, strong, small, et cetera... Alors que le flow element va contenir à la fois les phrasings elements, c'est à dire ceux-là, mais en plus des balises de type b, hr, ol, h1, h2, address, article, et cetera. Donc, ce qui est important de comprendre, c'est que ça fait deux familles d'éléments deux familles principales d'éléments, on va appeler ça des types d'éléments de type bloc, ou de type inline. Il y avait un troisième élément qui était un peu, selon l'air du temps on va dire, c'est les balises a par exemple, qui vont avoir un contenu transparent. En fait ça va dépendre de la nature du parent. Si le parent est de type bloc, le transparent pourra être de type bloc. Si la nature du parent est de type inline, le transparent sera de nature inline. Il va s'adapter à la nature du conteneur parent. Pour mieux le comprendre, regardez ici, si je prends, on va aller dans le code ça sera plus explicite ici, une balise article, une balise section ou une balise div ou paragraphe, je les note ici à l'intérieur, de contenu. Et ensuite je prends balise span, strong, em, a, q, pour quotation courte, ici, une citation. Donc je vais pouvoir venir maintenant définir tous ces contenus. Et si je les regarde dans le contenu en rendu dans un navigateur, vous voyez que chaque élément va retourner, pourtant il y aurait la place ici à ce que section vienne s'écrire sur le côté, div pareillement, non. Chaque élément va être d'un type bloc, c'est à dire va placer directement son côté gauche ici sur le côté gauche immédiatement inférieur au bloc qui le précède. Alors que les éléments de type en ligne vont se mettre en ligne avec autant de possibilités qu'il y aura d'espace dans la largeur. C'est à dire que si je réduis maintenant la largeur de ma page, forcément ces deux éléments vont passer les uns sous les autres. Voilà, regardez si je réduit, vous voyez tous passent les uns sous les autres. Mais par contre les éléments de type bloc, eux resteraient les uns sous les autres, ils ne se déplaceraient pas, ils resteraient, donc il y a une partie qui deviendrait invisible. Donc tout ceci équivaut à dire explique le pourquoi aussi on travaillait un peu comme ça des fois par le passé, c'est d'utiliser, par le passé et avant que la sémantique existe, c'est d'utiliser des balises div pour représenter les éléments de type bloc et les balises de type span pour représenter les éléments de type en ligne. Ici si je reprends exactement la même structure, à ceci près, je vais obtenir approximativement le même résultat. Pourquoi je dis approximativement, parce qu'ici entre le lien et la citation, il y a un élément qui est détecté, déjà c'est un lien interactif, balise a, le second c'est une balise q avec les éléments de quotation ici, les petites apostrophes. Donc il y a un petit décalage de padding qui intervient entre les deux éléments. Mais vous voyez que tout le reste, reste positionné exactement pareil, parce qu'en fait, ce sont des balises qui utilisent la même famille dans les familles blocs et les familles en ligne.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !