El llenguatge HTML inclou diversos elements. Aquests inclouen components del lloc web habitualment utilitzats , com ara paràgrafs, encapçalaments, enllaços i imatges. També hi ha una sèrie d'elements nous que s'han introduït amb HTML5, incloent-hi l'encapçalament, el nav, el peu de pàgina i molt més. Tots aquests elements HTML s'utilitzen per crear l'estructura d'un document i donar-li sentit. Per afegir encara més significat als elements, podeu donar-los atributs.
Una etiqueta bàsica d'obertura HTML comença amb el
Per afegir un atribut a l'etiqueta HTML, primer heu posat un espai després del nom de l'etiqueta (en aquest cas, la "p"). A continuació, afegiu el nom de l'atribut que voleu utilitzar seguit d'un signe igual. Finalment, el valor de l'atribut es col·locaria entre cometes. Per exemple:
Les etiquetes poden tenir diversos atributs. Es separaria cada atribut dels altres amb un espai.
Elements amb atributs requerits
Alguns elements HTML realment requereixen atributs si voleu que funcionin com es vol. L'element d'imatge i l'element d'enllaç són dos exemples d'això.
L'element d'imatge requereix l'atribut "src". Aquest atribut indica al navegador quina imatge voleu utilitzar en aquesta ubicació. El valor de l'atribut seria una ruta d'accés a la imatge. Per exemple:
Notaràs que he afegit un altre atribut a aquest element, l'atribut de text alt o alternatiu. Aquest no és tècnicament un atribut obligatori per a les imatges, però és una bona pràctica incloure sempre aquest contingut per a l'accessibilitat. El text que es mostra en el valor de l'atribut alt és el que es mostrarà si una imatge no es carrega per alguna raó.
Un altre element que requereix atributs específics és l'àncora o l'etiqueta d'enllaç. Aquest element ha d'incloure l'atribut "href", que significa "referència d'hipertext". Aquesta és una manera fantàstica de dir "on ha d'anar aquest enllaç". Igual que l'element d'imatge ha de saber quina imatge es carrega, l'etiqueta de l'enllaç ha de Sapigueu on vol. Aquí és com es pot veure una etiqueta d'enllaç:
Aquest enllaç ara portaria una persona al lloc web especificat en el valor d'un atribut. En aquest cas, és la pàgina principal de.
Atributs com a ganxos CSS
Una altra utilització dels atributs és quan s'utilitzen com a "ganxos" per als estils CSS. Atès que els estàndards web dicten que haureu de mantenir l'estructura de la vostra pàgina (HTML) separada dels seus estils (CSS), utilitzeu aquests enllaços d'atributs al CSS per dictar com es mostrarà la pàgina estructurada al navegador web. Per exemple, podria tenir aquest fragment de marcat en el seu document HTML.
Si volíeu que la divisió tingués un color de fons de negre (# 000) i una mida de font d'1.5, afegiu això al vostre CSS:
.featured {background-color: # 000; font-size: 1.5em;)L'atribut class "featured" actua com un ganxo que utilitzem a CSS per aplicar estils a aquesta àrea. També podríem tenir un atribut d'identificació aquí si volguéssim. Les dues classes i els identificadors són atributs universals, el que significa que es poden afegir a qualsevol element. També es pot orientar amb els estils CSS específics per determinar l'aparença visual d'aquest element.
Quant a Javascript
Finalment, l'ús d'atributs en determinats elements HTML també és una cosa que podeu utilitzar a Javascript. Si teniu un script que busca un element amb un atribut d'identificació específic, aquest és un altre ús d'aquesta part comuna del llenguatge HTML.