Com s'utilitzen els elements HTML i Div HTML

Utilitzeu span i div amb CSS per a un major control d'estil i disseny.

Moltes persones que són noves en disseny web i HTML / CSS utilitzen els elements i

de forma intercanviable mentre creen pàgines web. La realitat, però, és que cadascun d'aquests elements HTML serveix diferents propòsits. Aprendre a utilitzar cadascun per al seu propòsit us ajudarà a desenvolupar pàgines web més netes que el codi sigui més fàcil de gestionar en general.

Utilitzant l'element

L'element div defineix les divisions lògiques a la vostra pàgina web.

És bàsicament una caixa en la qual podeu col·locar altres elements HTML que, lògicament, vagin junts. Una divisió pot tenir diversos altres elements, com ara paràgrafs, encapçalaments, llistes, enllaços, imatges, etc. Pot tenir fins i tot altres divisions dins d'ell per proporcionar una estructura i organització addicional al vostre document HTML.

Per utilitzar l'element div, col·loqueu una etiqueta

oberta abans que l'àrea de la vostra pàgina que vulgueu com a divisió separada i una etiqueta tancada després d'això:

continguts de div

Si l'àrea de la vostra pàgina necessita informació addicional que usareu a l'estil amb CSS més endavant, podeu afegir un selector d'identitats (p.ex.,

id = "myDiv">), o un selector de classe (p.ex., class = "bigDiv">). Tots dos atributs es poden seleccionar utilitzant CSS o modificats mitjançant JavaScript. Les millors pràctiques actuals es basen en l'ús de selectors de classes en lloc d'identificadors, en part a causa de com són els selectors d'identificació específics. Tanmateix, en realitat, podeu utilitzar qualsevol de les dues opcions i fins i tot donar una divisió tant a una ID com a un selector de classe.

Quan feu servir

Versus

L'element div és diferent de l'element de la secció HTML5 perquè no dóna cap contingut semàntic al contingut adjunt. Si no esteu segur de si el bloc de contingut ha de ser una div o una secció, penseu en quin objectiu té l'element i el contingut per ajudar-vos a decidir què utilitzar:

  • Si necessiteu l'element simplement per afegir estils a aquesta àrea de la pàgina, haureu d'utilitzar l'element div.
  • Si el contingut que heu de contenir té un enfocament diferent i podria mantenir-se sols, és possible que vulgueu utilitzar l'element de la secció.

En última instància, les dues seccions i les seccions es comporten de forma semblant i podeu donar-los valors d'atribució i estilitzar-los amb CSS per obtenir l'aspecte del vostre lloc que necessiteu. Tots dos són elements de nivell de bloc.

Utilitzeu l'element

L'element span és un element inline per defecte. Això el diferencia dels elements de la divisió i la secció. Sovint, l'element span s'utilitza per embolicar un contingut específic, normalment text, per donar-li un "ganxo" addicional que es pot dissenyar més endavant. Usat amb CSS, pot canviar l'estil del text que conté; No obstant això, sense cap atribut d'estil, l'element span només no té cap efecte en el text.

Aquesta és la diferència principal entre els elements span i div. Com es va esmentar anteriorment, l'element div inclou un salt de paràgraf, mentre que l'element span només indica al navegador que aplique regles d'estil CSS associades a les etiquetes


Text ressaltat i text no ressaltat.

Afegiu class = "highlight" o una altra classe a l'element span per a estilitzar el text amb CSS (p. Ex., Class = "highlight">).

L'element span no té atributs obligatoris, però els tres que són els més útils són els mateixos que els de l'element div:

  • estil
  • classe
  • id

Utilitzeu l'abast quan vulgueu canviar l'estil del contingut sense definir aquest contingut com un nou element del nivell del bloc del document.

Per exemple, si voleu que la segona paraula d'un encapçalat h3 sigui de color vermell, podeu envoltar aquesta paraula amb un element d'extensió que estilitzi aquesta paraula com a text vermell. La paraula continua sent part de l'element h3, però ara també es mostra en vermell:

Aquest és el títol My Awesome

Editat per Jeremy Girard el 2/2/17