Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Tutoriales HTML > Tags y atributos HTML

Bypass main content

Tags y atributos HTML

Este tutorial está pensado para presentar las bases del código HTML a usuarios que nunca han escrito un sitio web manualmente. Escribir código HTML code es básicamente escribir tags, atributos y contenido. Es por ello que nos enfocaremos en cómo un tag, sus atributos y su contenido son definidos. Nota que también estableceremos las reglas para escribir documentos XHTML válidos.

Bypass main content

Puedes encontrar muchos tags, atributos y código JavaScript en este tutorial pero ninguno de ellos es apropiadamente descripto. Esto se debe a que el objetivo del tutorial es enfocarse en la sintaxis general, no en las características de cada tag. Para encontrar una lista de tags refiérete a esta lista de tags HTML, donde puedes encontrar vínculos a recursos descriptivos acerca de cada tag en HTML, con sus respectivas listas de atributos y eventos.

Elementos y tags

HTML está compuesto por un conjunto de elementos que son la base de su estructura. Los elementos están diseñados para dar información especial que será utilizada para computar su representación final. Esto significa que donde un tag es definido en el código HTML, algo ocurrirá en la representación de ese documento, que puede ser visual o no.

Los elementos están compuestos por dos tags: tag de apertura y tag de cierre (a excepción de los elementos vacíos donde el tag de cierre es omitido). Los elementos no son tags, los elementos son representados por tags en el código, pero son muchas veces erróneamente considerados la misma cosa. Aquí hay un ejemplo básico del elemento HTML strong con ambos tags, de apertura y cierre, y el contenido en medio:

Código
<strong>Texto con énfasis fuerte</strong>
Vista
Texto con énfasis fuerte

Nota cómo el tag de apertura está compuesto por el nombre del elemento encerrado por los símbolos "<" y ">". Por otra parte, el tag de cierre es declarado exactamente como el tag de apertura pero con una barra antes del nombre del tag. Lo que sea que caiga en el medio de éstos es llamado contenido, pero ten en cuenta que no todos los elementos permiten contenido (elementos vacíos).

Cada uno de los 93 elementos estándar produce un resultado específico cuando el documento es representado (por ejemplo, el elemento HTML strong provee de mayor importancia a su contenido, el cual es usualmente representado en negrita) permitiendo a los autores dar formato y/o insertar información en documentos. Todo elemento puede tener atributos y eventos que deben ser declarados dentro del tag de apertura separado del nombre y de otros atributos o eventos por un espacio. Su contenido es ubicado entre el tag de apertura y el de cierre. Mira este ejemplo genérico:

Código
<nombretag atributo1="val1" atributo2="val2" ... evento1="funcion1" evento2="funcion2" ...>Contenido</nombretag>

Este código puede ser difícil de comprender, por lo que reemplazaremos estos valores genéricos por algunos ejemplos comunes para hacerlo más amistoso (observa la presentación al final):

Código
<a href="../reference/tags.html" onmouseover="this.style.color='white'" onmouseout="this.style.color='black'">Lista de tags HTML</a>
Vista

Ahora podemos ver claramente el nombre del tag (a), el atributo y su valor (href), los dos eventos y sus funciones (onmouseover y onmouseout), el contenido (Lista de tags HTML) y el tag de cierre (</a>). Nota que los eventos así como los atributos comparten una sintaxis común: el nombre del atributo/evento es seguido por un signo igual y el valor/funcion encerrado entre comillas.

Como te recommiendo decididamente que escribas documentos que cumplan con el estándar de código XHTML, deberías siempre ustilizar nombres en minúsculas tanto para tags como para atributos (<nombretag> en lugar de <NOMBRETAG>).

Atributos

Los atributos dan ciertas características a un elemento (por ejemplo, altura, color, relación, etc.), a veces muy importantes, que al final establecerán cómo el mismo debe ser interpretado. Por ejemplo, el elemento HTML a inserta un vínculo en un documento HTML (una forma de ir del documento actual a otro recurso, usualmente con un click), pero el atributo "rel" establece cuál es la relación entre el documento actual y el recurso destino.

Aún cuando muchos atributos son compartidos por muchos elementos, cada elemento tiene un set de atributos predefinido de acuerdo al estándar que se esté utilizando. Para ver los atributos que un elemento acepta, revisa la descripción de ese elemento en la lista de tags HTML.

Como vimos en el ejemplo genérico cada atributo debe tener un valor y ha de ser definido en el tag de apertura. En este ejemplo insertamos una definición completa (con contenido y tag de cierre) de un elemento HTML a con dos atributos: "href" y "rel".

Código
<a rel="help" href="otrodoc.html">Otro documento que sirve de ayuda para comprender este</a>
Vista

Observa como el nombre de atributo es seguido por un signo igual y su valor encerrado entre comillas. Así es como todo atributo debe ser definido para ser compatible con XHTML.

También existe otro tipo de atributo cuyo valor es booleano (Verdadero o Falso). Esto significa que puedes definir este atributo con solo escribir su nombre (sin el igual y sin su valor), pero como estamos escribiendo código XHTML, la forma correcta para definir un atributo booleano es usando su propio nombre como valor.

En el ejemplo siguiente mostramos una defición del elemento HTML button, compatible con código XHTML, con los atributos: "id", "disabled" (booleano) y "tabindex".

Código
<button id="okbutton" disabled="disabled" tabindex="3">Ok</button>
Vista
Páginas:123>

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona