Si alguna vegada has mirat una llista d'elements HTML, és possible que hagueu trobat preguntant-se "què és un bloqueig?". L'element blockquote és un parell d'etiquetes HTML que s'utilitza per definir les cites llargues. Aquí teniu la definició d'aquest element d'acord amb l'especificació W3C HTML5:
L'element blockquote representa una secció que es cita d'una altra font.
Com utilitzar Blockquote a les vostres pàgines web
Quan esteu escrivint text a una pàgina web i creant el disseny de la pàgina, de vegades voleu trucar un bloc de text com a cita.
Aquesta podria ser una cita d'un altre lloc, com un testimoni del client que acompanya un cas d'estudi o una història d'èxit del projecte. Això també podria ser un tractament de disseny que repeteix un text important de l'article o del contingut en si mateix. A la publicació, això de vegades s'anomena " pull-quote" , en el disseny web, una de les maneres d'aconseguir-ho (i de la manera que estem cobrint en aquest article) s'anomena blockquote.
Mireu, doncs, com usareu l'etiqueta blockquote per definir les cites llargues, com aquest extracte de "The Jabberwocky" de Lewis Carroll:
'Twas brillig i els toves slithey
Va fer giroscopi i gimnàstica al wabe:
Tots els mims eren els borogoves,
I el mome raths outgrabe.
(per Lewis Carroll)
Exemple d'ús de l'etiqueta Blockquote
L'etiqueta blockquote és una etiqueta semàntica que indica al navegador o usuari que els continguts són una cita llarga. Com a tal, no heu d'incloure text que no sigui una cita dins de l'etiqueta de bloqueig. Recordeu que una "cita" és sovint paraules reals que algú ha dit o text d'una font externa (com el text de Lewis Carroll en aquest article), però també pot ser el concepte de "pullquote" que hem tractat prèviament.
Quan penses en això, aquest pullquote és una cita de text, només passa del mateix article que apareix a la mateixa cita.
La majoria de navegadors web afegeixen una mica de sagnia (uns 5 espais) a banda i banda d'un bloc de notes per fer-ne ressaltar del text que l'envolta. Alguns navegadors extremadament antics poden fins i tot representar el text citat en cursiva.
Recordeu que aquest és simplement l'estil predeterminat de l'element blockquote. Amb CSS, tens un control total sobre com es mostrarà el teu bloc de notes. Podeu augmentar o fins i tot suprimir el sagnat, afegir colors de fons o augmentar la mida del text per continuar cridant el pressupost. Podeu flotar aquesta cita a un costat de la pàgina i fer que l'altre text s'hi envolti, que és un estil comunament visual utilitzat per a les capçaleres en revistes impreses. Tens control sobre l'aparença de blockquote amb CSS, cosa que debatrem una mica més en breu. De moment, seguim observant com afegir la pròpia cita al vostre marcat HTML.
Per afegir l'etiqueta blockquote al vostre text, simplement envolteu el text que és una cita amb el següent parell d'etiquetes:
Per exemple:
'Twas brillig i els toves slithey
Va fer giroscopi i gimnàstica al wabe:
Tots els mims eren els borogoves,
I el mome raths outgrabe.
Com podeu veure, només heu d'afegir el parell d'etiquetes de bloqueig al voltant del contingut de la pròpia cita. En aquest exemple, també hem utilitzat algunes etiquetes de trencament (
) per afegir salts d'una sola línia, quan sigui apropiat dins del text. Això és perquè estem recreant el text d'un poema, on aquestes pauses específiques són importants. Si creieu un pressupost de testimonis de clients i les línies no necessitaven trencar parts específiques, no voldreu afegir aquestes etiquetes de ruptura i permetre que el propi navegador s'emboliqui i trenqui segons sigui necessari en funció de la mida de la pantalla.
No feu servir Blockquote per sagnar el text
Durant molts anys, les persones van utilitzar l'etiqueta blockquote si volien sagnar text a la seva pàgina web, fins i tot si aquest text no era un "pullquote". Aquesta és una mala pràctica! No vol utilitzar la semàntica de blockquote únicament per motius visuals. Si necessiteu sagnar el vostre text, heu d'utilitzar fulls d'estil, no les etiquetes de bloqueig (a menys que, per descomptat, el que intenteu fer és una frase!). Intenteu posar aquest codi a la vostra pàgina web si esteu intentant simplement afegir un sagnat:
Aquest text serà sagnat.
A continuació, orientaríeu aquesta classe amb un estil CSS
.indinded {
farcit: 0 10px;
}
Això afegeix els 10 píxels de farcit a cada costat del paràgraf.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 17/08/17.