Què és una etiqueta HTML versus un element HTML?

Hi ha una diferència entre aquests dos termes

El disseny web, com qualsevol indústria o professió, té un llenguatge propi. A mesura que entris a la indústria i comencis a parlar amb els teus companys, sense cap dubte trobaràs una gran quantitat de termes i frases nous, però que flueixen de les llengües dels teus companys de professionals web. Dos dels termes que escoltaran són "etiqueta" i "element" d'HTML.

A mesura que escolteu aquests dos termes parlats, podeu adonar-vos que s'estan utilitzant d'una manera indistintable. Com a tal, una pregunta que molts professionals web nous tenen quan comencen a treballar amb codi HTML és "quina és la diferència entre una etiqueta HTML i un element HTML?"

Si bé aquests dos termes són similars en el significat, no són realment sinònims. Quina és la semblança d'aquests dos termes? La resposta curta és que tant les etiquetes com els elements es refereixen al marcat que s'utilitza per escriure HTML. Per exemple, podeu dir que esteu utilitzant l'etiqueta

per definir un paràgraf o l'element per crear enllaços. Moltes persones utilitzen l'etiqueta i l'element de termes indistintament, i qualsevol dissenyador o desenvolupador web amb què parleu entendria el que volia dir, però la realitat és que hi ha una lleugera diferència entre els dos termes.

HTML és un llenguatge de marques , el que significa que està escrit amb codis que pot llegir una persona sense haver de compilar primer. En altres paraules, el text d'una pàgina web està "marcat" amb aquests codis per donar instruccions al navegador web sobre com mostrar el text. Aquestes etiquetes de marca són les mateixes etiquetes HTML.

Quan escriviu HTML, esteu escrivint etiquetes HTML. Totes les etiquetes HTML es componen d'una sèrie de parts específiques, com ara:

• Un signe de menys de <
• Una paraula o un caràcter que determinen quina etiqueta està sent escrita
• Qualsevol nombre d' atributs HTML opcionals en forma de parell name = "value"
• I, finalment, un signe superior a>

Per exemple, aquí teniu algunes etiquetes HTML:

Aquestes són totes les etiquetes d'obertura HTML, sense que s'afegeixin cap atribut opcional. Aquestes etiquetes representen:

• - defineix un paràgraf.

• - defineix la pàgina com a HTML
• - defineix una divisió.

A continuació també hi ha etiquetes HTML:

• Tots aquests exemples inclouen atributs que s'han afegit a les etiquetes HTML obertes.

  • és una llista desordenada que inclou un atribut ID
    • La divisió té un atribut de classe
    • L'element ancoratge o enllaç inclou l'atribut "href"
    • L'etiqueta d'imatge amb un atribut "src"

    Per a les etiquetes d'àncores i imatges, els atributs no són opcionals, són necessaris perquè aquestes etiquetes es mostrin correctament. Heu de dir l'enllaç a on anar (que és el que fa "href") i la imatge que mostrar (que és el que proporciona l'atribut "src").

    Quins són elements HTML?

    Segons l' especificació HTML del W3C , un element és el bloc de construcció bàsic d'HTML i normalment es compon de dues etiquetes : una etiqueta d'obertura i una etiqueta de tancament. Fins ara només hem mirat les etiquetes d'obertura, que inicia els elements. Per finalitzar aquest element, escriviu les etiquetes de tancament corresponents.

    Per exemple, per a l'element de paràgraf, escriu això:

    Està format per l'etiqueta d'obertura que vam veure fa un moment, així com l'etiqueta de tancament - . Les etiquetes de tancament són realment només l'etiqueta d'obertura repetida, però amb una "barra inclinada" afegida directament després del "menys del símbol".

    Gairebé tots els elements HTML tenen una etiqueta d'obertura i una etiqueta de tancament. Aquestes etiquetes envolten el text que es mostrarà a la pàgina web. Per exemple, per escriure un paràgraf de text, escriu el text que es mostrarà a la pàgina i l'envoltarà amb aquestes etiquetes:

    Aquí és on voleu escriure el text del paràgraf que voleu que es mostri a la pàgina web.

    Alguns elements HTML no tenen una etiqueta de tancament. Aquests s'anomenen "elements buits". De vegades, també es denomina elements " singleton " o "void". Els elements buits són fàcils d'utilitzar perquè només heu d'incloure una etiqueta a la vostra pàgina web i el navegador sabrà què fer. Per exemple, per afegir un sol salt de línia a la vostra pàgina, utilitzaria l'etiqueta b de l'etiqueta.

    Un altre element comú que només inclou una etiqueta d'obertura és l'element "imatge". Per exemple:

    Hem vist aquest exemple anteriorment, però no hi ha cap etiqueta de tancament per a aquest element d'imatge. El navegador simplement substituirà aquest codi per la imatge que es fa referència a l'atribut "href". En aquest cas, això seria "logo.png".

    En general, quan faig referència a un element HTML o una etiqueta, utilitzaré el terme "element" per indicar que em refereixo a totes les parts de l'element (tant les etiquetes d'obertura com de tancament). Jo faig servir "etiqueta", és realment un referent únic o un altre. Aquest és l'ús adequat d'aquests dos termes, i us animo a utilitzar-los correctament, però només sabeu que, si us llisca i els intercanvieu una mica, els vostres nous companys de desenvolupament web encara seran entesos.

    Article original de Jennifer Krynin. Editat per Jeremy Girard el 21/07/17