Tag HTML

HTML está compuesto por un conjunto de elementos que son la base de su estructura. Los elementos están diseñados para proveer herramientas a los autores y proporcionar información especial que será usada para computar la representación final del mismo. Esto significa que donde un tag es definido en el código HTML, sucederá algo en la representación de ese documento, que puede ser visual o no.
Los elementos están compuestos por dos tags: el tag de apertura y el tag de cierre (a excepción de los elementos vacíos cuando el tag de cierre es omitido). Elementos no son tags, elementos son representados por tags en el código, pero son usualmente considerados, de manera errónea, la misma cosa. Aquí tienes un ejemplo básico de un elemento HTML b con ambos tags de apertura y de cierre, y el contenido en el medio:

             Código                                Visualización

<b>Texto remarcado</b>                 Texto remarcado

Nota como el tag de apertura está compuesto por el nombre del tag 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 es llamado contenido, pero ten en cuenta que no todos los elementos aceptan contenido (elementos vacíos).

Cada uno de los 93 tags estándares produce un resultado específico cuando el documento es representado (por ejemplo, eltag HTML b produce texto en negrita) permitiendo a los autores formatear y/o introducir información en los documentos. Cada tag puede tener atributos y eventos que deben ser declarados dentro del tag de apertura separados del nombre y de otros atributos o eventos por un espacio. Su contenido es emplazado entre el tag de apertura y el de cierre. Mira este ejemplo genérico:

<nombre_tag atributo1="valor1" atributo2="valor2" ... evento1="funcion1" evento2="funcion2" ...>Contenido</nombre_tag>

Este código puede resultar dificil de comprender, de modo que reemplazaremos los valores genéricos por algunos ejemplos comunes para hacerlo amistoso (ver la presentación a la derecha):

Código	Visualización
<a href="http://www.htmlquick.com/es/reference/tags.html" onmouseover="this.style.color='#FFFFFF'" onmouseout="this.style.color='#000000'">Lista de tags HTML</a>	Lista de tags HTML

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 encerrado entre comillas.
Como nosotros recomendamos imperativamente que escribas documentos compatibles con el estándar de código XHTML, deberías siempre usar minúsculas para los nombres de tags y atributos (<nombre_tag> en lugar de <NOMBRE_TAG>).

A continuación, encontrarás una lista de todos los tags HTML(lenguaje de marcas hipertextual) para el estándar HTML 4.01, que también pertenecen al estándar XHTML (lenguaje de marcas hipertextual extensible) con la excepción de aquellos desaprobados. Junto a cada tag encontrarás un símbolo indicando si el tag es vacío o no, lo que podría ayudarte en la labor de escribir código XHTML, el cual representa una mejor opción no tan difícil de lograr. Recomendamos fuertemente usar XHTML en lugar de HTML, debido a los beneficios y a las pequeñas diferencias.

• <!-- -->                 Inserta comentarios ocultos
• <!DOCTYPE>      Establece el tipo de documento
• <a>                      Inserta vínculos o marcadores
• <abbr>     Explica abreviaciones
• <acronym>            Explica acrónimos
• <address> Provee información de contacto

          <applet>               Inserta un applet (scripts)

• <area> Define sectores para mapas de imagen
• <b>   Texto en negrita
• <base> URI base para resolver URIs relativas

          <basefont>           Tamaño de la fuente predeterminado

• <bdo>                  Suprime el algoritmo bidireccional
• <big>   Texto en tamaño "grande".
• <blockquote>     Citar párrafos
• <body>               Contiene los elementos a mostrar
• <br> Fuerza un quiebre de línea
• <button> Crea un botón
• <caption> Establece un título para una tabla

          <center> Centra su contenido

• <cite>   Inserta una cita o referencia
• <code>              Representa texto de computadora
• <col> Da atributos a columnas en una tabla
• <colgroup> Agrupa columnas en una tabla
• <dd>   Define descripciones en una lista
• <del>                  Indica texto eliminado
• <dfn>                Asigna una definición a un término

          <dir>                  Inserta una lista de directorios (árbol)

• <div>   Define un bloque de contenido
• <dl>                   Define una lista
• <dt>                   Inserta un término en una lista
• <em>   Indica énfasis
• <fieldset> Agrupa controles en un formulario

          <font>   Establece el estilo de fuente

• <form>              Inserta un formulario
• <frame> Inserta un marco
• <frameset> Inserta un grupo de frames
• <h1>   Encabezado de nivel 1
• <h2>                 Encabezado de nivel 2
• <h3>   Encabezado de nivel 3
• <h4>                 Encabezado de nivel 4
• <h5>                 Encabezado de nivel 5
• <h6>                 Encabezado de nivel 6
• <head>             Define el bloque de encabezado
• <hr> Dibuja una línea o regla horizontal
• <html>   Contiene al documento
• <i>   Muestra texto en itálica
• <iframe> Inserta un marco dentro del documento
• <img> Inserta una imagen
• <input> Muestra controles de entrada
• <ins>                Indica texto insertado

          <isindex>         Entrada de línea simple

• <kbd>   Indica texto a ingresarse por el usuario
• <label>            Establece una etiqueta para un control
• <legend>         Asigna un título a un "fieldset"
• <li>   Define un artículo en una lista
• <link> Ofrece informacón relacional
• <map>            Define un mapa de imagen

          <menu>           Lista menú

• <meta> Da información sobre el documento
• <noframes> Contenido alternativo para marcos
• <noscript> Contenido alternativo para scripts
• <object> Ejecuta aplicaciones externas
• <ol>   Inserta una lista ordenada
• <optgroup> Agrupa opciones en un control select
• <option> Define una opción en un control select
• <p>   Define un párrafo
• <param> Da un parámetro para un objeto
• <pre>               Bloque de texto preformateado
• <q>                 Inserta una cita en una línea

          <s>   Muestra texto tachado

• <samp>   Representa texto de programas
• <script> Contiene scripts
• <select> Crea un control select
• <small>   Muestra texto en letra "pequeña"
• <span>          Asigna atributos al texto en líneas

          <strike> Muestra texto tachado

• <strong> Indica énfasis fuerte
• <style>   Define atributos visuales (hojas estilo)
• <sub>   Define texto en sub-índice
• <sup>   Define texto en super-índice
• <table>   Inserta una tabla
• <tbody>   Define un cuerpo en una tabla
• <td>   Celda regular de una tabla
• <textarea> Entrada de texto de líneas múltiples
• <tfoot>   Define un pie en una tabla
• <th>   Celda de encabezado de una tabla
• <thead>   Define un encabezado de tabla
• <title>   Define el título del documento
• <tr>   Inserta una fila en una tabla
• <tt>   Muestra texto en "teletype"

          <u>   Muestra texto subrayado

• <ul>   Inserta una lista sin orden
• <var>   Indica una instancia de una variable

Los tags que no están tachados son tags desaprobados, cuyo uso no es recomendado. Esto se debe a que han sido reemplazados por otros tags (por ejemplo, el tag applet ha sido reemplazado por el tag object) o porque las hojas de estilos se han convertido en la forma preferida de lograr sus mismos efectos. Nota, que los tags y atributos desaprobados en HTML pueden no ser soportados por futuras versiones (por ejemplo, XHTML 1.0). Esta es una buena razón para dejar de usarlos.