Ya que sabemos un poco acerca de las etiquetas y cómo se forman, vayamos a ver cuales son sus funciones en una página web, desde las más básicas a las más avanzadas.



HTML define 91 etiquetas que los diseñadores pueden utilizar para marcar los diferentes elementos que componen una página:

a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var. 

Son muchas, ¿verdad? La mayoría ni sabemos para qué sirven o simplemente no se utilizan tan frecuentemente, pero es bueno saber cuántas etiquetas hay :3 A pesar de que se trata de un número de etiquetas muy grande, no es suficiente para crear páginas complejas. Algunos elementos como las imágenes y los enlaces requieren cierta información adicional para estar completamente definidos.




Aunque cada una de las etiquetas HTML define sus propios atributos, algunos de los atributos son comunes a muchas o casi todas las etiquetas. Estos son:

id = "texto" Establece un identificador único a cada elemento dentro de una página HTML
class = "texto" Establece la clase CSS que se aplica a los estilos del elemento
style = "texto" Establece de forma directa los estilos CSS de un elemento
title = "texto" Establece el título a un elemento (mejora la accesibilidad y los navegadores lo muestran cuando el usuario pasa el ratón por encima del elemento)

Casi siempre se utilizan id y class de forma exagerada. Sin embargo, estos atributos sólo son realmente útiles cuando se trabaja con CSS y con Javascript. (más adelante explicaré qué es cada uno)

 ¿Cómo añadir un atributo en una etiqueta?

Los atributos sirven para darle características al elemento. (añadirle la id, el estilo, su título...) Para buscar atributos genéricos, clica aquí. 

Por ejemplo:
Un elemento: <div>Esto es un div </div>

Un elemento con atributo: <div id="cajita">Esto es un div </div>

El atributo de este ejemplo sería id="cajita", y es el que definiría su id.
Se pueden añadir más de un atributo.

Por ejemplo:
<div id="cajita" style="border: 2px solid #000;" title="Ejemplo">Esto es un div.</div>

En este, sus atributos son id="cajita", style="border: 2px solid #000;" y title="Ejemplo".

Construcción de un atributo: [Ejemplo resuelto]
  1. Primero el nombre de atributo: title
  2. Seguido de un igual: =
  3. Entre comillas (") o ('), dependiendo si lo escribes en <body> o <head> añades el valor: Hola
  4. Formado sería:  title="Hola"
  5. Se añade después de la etiqueta, en este caso <div> con una separación ( ) tal que así: <div title="Hola">
Ejemplo resuelto;
<div title="Hola"></div>

ラベル: