Lista de Elementos HTML5

Lista de Elementos HTML5
Todos los elementos del estandar HTML5 estn listados aqu, descritos por su etiqueta de
apertura y agrupados por su funcin. Contrariamente al indice de elementos HTML el cual lista
todas las posibles etiquetas, estandar, no-estandar, vlidas, obsoletas o aquellas en desuso,
esta lista solamente los elementos vlidos de HTML5. Solamente aquellos elementos listados
aqu son los que deberan ser usados en nuevos sitios Web.
El simbolo
indica que el elemento fue aadido en HTML5. Ntese que otros elementos
listados aqui pueden haber sido modificados o extendido en su significado por la

especificacin HTML5.
Elemento raz
Elemento
<html>
Descripcin
Representa la raz de un documento HTML o XHTML. Todos los dems
elementos deben ser descendientes de este elemento.
Metadatos del documento

Elemento
Descripcin
<head>
Representa una coleccin de metadatos acerca del documento, incluyendo

enlaces a, o definiciones de, scripts y hojas de estilo.
<title>
Define el ttulo del documento, el cual se muestra en la barra de ttulo del

navegador o en las pestaas de pgina. Solamente puede contener texto y
cualquier otra etiqueta contenida no ser interpretada.
<base>
Define la URL base para las URLs relativas en la pgina.
<link>
Usada para enlazar JavaScript y CSS externos con el documento HTML actual.
<meta>
Define los metadatos que no pueden ser definidos usando otro elemento HTML.
<style>
Etiqueta de estilo usada para escribir CSS en lnea.
Scripting
Elemento
Descripcin
<script>
Define ya sea un script interno o un enlace hacia un script externo. El lenguaje

de programacin es JavaScript
Elemento
Descripcin
<noscript>
Define una contenido alternativo a mostrar cuando el navegador no soporta

scripting.
Secciones
Elemento
Descripcin
<body>
Representa el contenido principal de un documento

HTML. Solo hay un elemento <body> en un documento.
<section>
Define una seccin en un documento.
<nav>
Define una seccin que solamente contiene enlaces de

navegacin
<article>
Define contenido autnomo que podra existir

independientemente del resto del contenido.
Define algunos contenidos vagamente relacionados con
<aside>
el resto del contenido de la pgina. Si es removido, el

contenido restante seguir teniendo sentido
Los elemento de cabecera implementan seis niveles de

cabeceras de documentos; <h1> es la de mayor
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> y <h6> es la de menor impotancia. Un elemento de
cabecera describe brevemente el tema de la seccin
que introduce.
<header>
<footer>
<address>
<main>
Define la cabecera de una pgina o seccin.

Usualmente contiene un logotipo, el ttulo del sitio Web y
una tabla de navegacin de contenidos.
Define el pie de una pgina o seccin. Usualmente
contiene un mensaje de derechos de autora, algunos
enlaces a informacin legal o direcciones para dar
informacin de retroalimentacin.
Define una seccin que contiene informacin de
contacto.
Define el contenido principal o importante en el
documento. Solamente existe un elemento <main> en el
documento.
Agrupacin de Contenido
Elemento
Descripcin
<p>
Define una parte que debe mostrarse como un prrafo.
<hr>
Representa un quiebre temtico entre parrafos de una seccin o

articulo o cualquier contenido.
<pre>
Indica que su contenido esta preformateado y que este formato debe

ser preservado.
<blockquote>
Representa una contenido citado desde otra fuente.
<ol>
Define una lista ordenada de artculos.
<ul>
Define una lista de artculos sin orden.
<li>
Define un artculo de una lista ennumerada.
<dl>
Define una lista de definiciones, es decir, una lista de trminos y sus

definiciones asociadas.
<dt>
Representa un trmino definido por el siguiente <dd>.
<dd>
Representa la definicin de los terminos listados antes que l.
<figure>
<figcaption>
<div>
Representa una figura ilustrada como parte del documento.

Representa la leyenda de una figura.
Representa un contenedor genrico sin ningn significado especial.
Semntica a nivel de Texto

Elemento
Descripcin
<a>
Representa un hiperenlace , enlazando a otro recurso.
<em>
Representa un texto enfatizado , como un acento de intensidad.
<strong>
Representa un texto especialmente importante .
<small>
Representa un comentario aparte , es decir, textos como un descargo de

responsabilidad o una nota de derechos de autora, que no son esenciales
para la comprensin del documento.
Elemento
Descripcin
<s>
Representa contenido que ya no es exacto o relevante .
<cite>
Representa el ttulo de una obra .
<q>
Representa una cita textual inline.
<dfn>
Representa un trmino cuya definicin est contenida en su contenido

ancestro ms prximo.
<abbr>
Representa una abreviacin o un acrnimo ; la expansin de la abreviatura

puede ser representada por el atributo title.
<data>
Asocia un equivalente legible por mquina a sus contenidos. (Este elemento

est slamente en la versin de la WHATWG del estandar HTML, y no en la
versin de la W3C de HTML5).
<time>
Representa un valor de fecha y hora; el equivalente legible por mquina

puede ser representado en el atributo datetime.
<code>
Representa un cdigo de ordenador .
<var>
Representa a una variable, es decir, una expresin matemtica o contexto de

programacin, un identificador que represente a una constante, un smbolo
que identifica una cantidad fsica, un parmetro de una funcin o un marcador
de posicin en prosa .
<samp>
Representa la salida de un programa o un ordenador.
<kbd>
Representa la entrada de usuario o usuaria, por lo general desde un teclado,

pero no necesariamente, este puede representar otras formas de entrada de
usuario o usuaria, como comandos de voz transcritos.
<sub>,<sup>
Representan un subndice y un superndice, respectivamente.
<i>
Representa un texto en una voz o estado de nimo alterno, o por lo menos de

diferente calidad, como una designacin taxonmica, un trmino tcnico, una
frase idiomtica, un pensamiento o el nombre de un barco.
<b>
Representa un texto hacia el cual se llama la atencin para propsitos

utilitaros. No confiere ninguna importancia adicional y no implica una voz
alterna.
<u>
Representa una anotacin no textual sin-articular, como etiquetar un texto

como mal escrito o etiquetar un nombre propio en texto en Chino.
Elemento
Descripcin
<mark>
Representa texto resaltado con propsitos de referencia, es decir por su

relevancia en otro contexto.
<ruby>
<rt>
<rp>
<bdi>
<bdo>
Representa contenidos a ser marcados con anotaciones ruby, recorridos

cortos de texto presentados junto al texto. Estos son utilizados con
regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones
actan como una gua para la pronunciacin, como el furigana Japons.
Representa el texto de una anotacin ruby .
Representa los parntesis alrededor de una anotacin ruby, usada para
mostrar la anotacin de manera alterna por los navegadores que no soporten
despliegue estandar para las anotaciones.
Representa un texto que debe ser aislado de sus alrededores para el
formateado bidireccional del texto. Permite incrustar un fragmento de texto
con una direccionalidad diferente o desconocida.
Representa la direccionalidad de sus descendientes con el fin de anular de
forma explcita al algoritmo bidireccional Unicode.
Representa texto sin un significado especfico. Este debe ser usado
<span>
cuando ningn otro elemento semntico le confiere un significado adecuado,

en cuyo caso, provendr de atributos globales como class, lang, o dir.
<br>
Representa un salto de lnea.
<wbr>
Representa una oportunidad de salto de lnea, es decir, un punto sugerido de

envoltura donde el texto de mltiples lneas puede ser dividido para mejorar
su legibilidad.
Ediciones
Elemento
Descripcin
<ins>
Define una adicin en el documento.
<del>
Define una remocin del documento.
Contenido incrustado
Elemento
Descripcin
<img>
Representa una imagen.
Elemento
Descripcin
<iframe>
Representa un contexto anidado de navegacin, es decir, un documento

HTML embebido.
<embed>
<object>
<param>
<video>
<audio>
Representa un punto de integracin para una aplicacin o contenido

interactivo externo que por lo general no es HTML.
Representa un recurso externo, que ser tratado como una imagen, un
sub-documento HTML o un recurso externo a ser procesado por un plugin.
Define parmetros para el uso por los plugins invocados por los
elementos <object>.
Representa un video , y sus archivos de audio y capciones asociadas, con
la interfaz necesaria para reproducirlos.
Representa un sonido o stream de audio.
<source>
Permite a autores o autoras especificar recursos multimedia alternativos

para los elementos multimedia como <video> o <audio>.
<track>
Permite a autores o autoras especificar una pista de texto temporizado

para elementos multimedia como <video> o <audio>.
<canvas>
Representa un rea de mapa de bits en el que se pueden utilizar scripts

para renderizar grficos como grficas, grficas de juegos o cualquier
imagen visual al vuelo.
<map>
En conjunto con <area>, define un mapa de imagen.
<area>
En conjunto con <map>, define un mapa de imagen.
<svg>
<math>
Define una imagen vectorial embebida.

Define una frmula matemtica.
Datos tabulares
Elemento
Descripcin
<table>
Representa datos con ms de una dimensin.
<caption>
Representa el ttulo de una tabla.
Elemento
Descripcin
<colgroup> Representa un conjunto de una o ms columnas de una tabla.

<col>
Representa una columna de una tabla.
<tbody>
Representa el bloque de filas que describen los datos contretos de una tabla.
<thead>
Representa el bloque de filas que describen las etiquetas de columna de una

tabla.
<tfoot>
Representa los bloques de filas que describen los resmenes de columna de

una tabla.
<tr>
Representa una fila de celdas en una tabla.
<td>
Representa una celda de datos en una tabla.
<th>
Representa una celda encabezado en una tabla.
Formularios
Elemento
<form>
Descripcin
Representa un formulario, consistendo de controles que puede ser
enviado a un servidor para procesamiento.
<fieldset>
Representa un conjunto de controles.
<legend>
Representa el ttulo de un <fieldset>.
<label>
Representa el ttulo de un control de formulario.
<input>
Representa un campo de datos escrito que permite al usuario o usuaria

editar los datos.
<button>
Representa un botn .
<select>
Represents un control que permite la seleccin entre un conjunto de

opciones.
<datalist>
Representa un conjunto de opciones predefiniddas para otros controles.
<optgroup>
Representa un conjunto de opciones, agrupadas lgicamente.
<option>
Representa una opcin en un elemento <select>, o una sugerencia de

un elemento <datalist>.
Elemento
Descripcin
<textarea>
Representa un control de edicin de texto multi-lnea.
<keygen>
<output>
<progress>
<meter>
Representa un control de par generador de llaves.

Representa el resultado de un clculo.
Representa el progreso de finalizacin de una tarea.
Representa la medida escalar (o el valor fraccionario) dentro de un rango
conocido.
Elementos interactivos
Elemento
Descripcin
<details>
Representa un widget desde el que un usuario o usuaria puede obtener

informacin o controles adicionales.
<summary>
Representa un resumen, ttulo o leyenda para un

elemento <details> dado.
<command>
<menu>
Representa un comando que un usuario o usuaria puede invocar.

Representa una lista de comandos .
Ejemplo 1.
Ejemplo 2.
Ejemplo 3.
Meta tags bsicos.

No podemos hablar de la estructura bsica de un pgina web sin hablaros de los meta tags. Los meta tags se
insertan en la cabecera de la pgina, entre las etiquetas <head></head>. La funcin de estos tags vara.
Pueden ser informativos, para los buscadores y usuarios, indicndoles el tipo de contenido de la web, sus
palabras claves, etc. o pueden predefinir una actuacin a la pgina.
Los meta tags no se pueden ver a no ser que sea a travs del cdigo fuente. Es decir, un meta tag no hace
variar la apariencia de una pgina web, pero son imprescindibles e importantsimos para los buscadores
webs.
El esquema de un meta tag es el siguiente: <meta name=" " content=" "/>. El name muestra el nombre de la
etiqueta y el content el contenido de esa etiqueta. Los meta tags pueden cerrarse de dos formas: > o /> . La
segunda es ms correcta aunque los navegadores no muestran diferencia con una u otra.
Puede que todo esto te suene a chino, no te preocupes. Ahora vamos a pasar a explicarte los meta tags ms
importantes que debes conocer.
Meta tag Keywords
Este meta indica al buscador las palabras claves de nuestra pgina. Por ejemplo, nuestra pgina al ser un
tutorial de html, sus palabras clave sern tutorial y html. Los keywords deben ir separados por comas y sin
espacios entre ellos.
<meta name="Keywords" content="tutorial,html" />
Meta tag Description
Este meta es tambin destinado para los buscadores. En la description escribiremos la descripcin de la
pgina, de sus contenidos. Esto lo haremos a travs de frases cortas y separadas entre ellas por puntos. En
nuestra pgina este meta quedara de la siguiente manera:
<meta name="Description" content="Tutorial html. Meta tags" />
Meta tag language
Este meta tag le indica al buscador el idioma en el que est escrita la pgina. En el caso de espaol en
content se pone es, en ingls en, en francs fr Nuestra pgina es espaola as que su meta ser el
siguiente:
<meta http-equiv="Content-Language" content="es"/>
Meta tag Distribution
Este meta es importante. Marac la distribucin que queremos que se haga de nuestra web en Internet. Si
queremos que se distribuya por todo el mundo en content indicaremos global. Escribir este meta en global
es lo ms recomendable. As pues nuestra pgina incluir
<meta name="distribution" content="global"/>
Meta tag Robots
Puede que no queramos que nuestra pgina sea indexada por los robots de los buscadores Web. En ese
caso debemos indicrselo con el meta Robots. En content variar la respuesta dependiendo del valor que
escribamos.
Los valores all e index indicarn que queremos que se indexe toda la pgina. Los valores none y
noindex indicarn que no queremos que se indexe nada. El valor follow indica que queremos que el robot
siga los vnculos externos de nuestra web y nofollow indicar lo contrario.

Como resumen, y siguiendo el ejemplo del apartado "introduccin al html" aunque cambiando el "title",
nuestros meta tags seran los siguientes:
<html>
<head>
<title>Meta tags básicos.</title>
<meta http-equiv="Content-Language" content="es"/>
<meta name="Keywords" content="tutorial,html"/>
<meta name="Description" content="Tutorial html. Meta tags"/>
<meta name="Distribution" content="global"/>
<meta name="Robots" content="all"/>
</head>
<body>
Hola mundo!<br>
<b>Esto es negrita.</b><br>
<i>Y esto itálica.</i><br>
</body>
</html>
Men
En HTML5 tenemos una etiqueta de navegacin para nuestro documento NAV

dentro de NAVpodemos incluir enlaces, listas o cualquier cosa para navegacin del
sitio, pero nosotros vamos utilizar listas que son mas fciles de utilizar.
<nav>
<ul>
<li><a title="Opcion 1" href="#">Opcin 1</a></li>
</ul>
</nav>
Listas
Listas no ordenadas: <ul>
Las listas no ordenadas van dentro de la etiqueta <ul> y de su cierre </ul>. Cada punto que queramos aadir
a la lista, lo haremos dentro de la etiqueta <li> y su cierre.
Si no le indicamos nada a la etiqueta <li>, sta se generar de forma automtica. Pero si queremos definir
nosotros mismo el smbolo del punto, podemos gracias al atributo type.
Vamos con un pequeo ejemplo en cdigo:
<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>
Cuyo resultado visual ser el que veremos a continuacin:
Esto es un tipo de punto.

Este es otro.
Y este es otro diferente.
Listas ordenadas: <ol>

Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada punto de la lista se escribe con
la misma etiqueta que en las no numeradas: <li>. Pero al ser listas ordenadas los smbolos sern nmeros y
stos se irn generando automticamente por orden, conforme escribamos nuevos puntos.
En las listas ordenadas podemos hacer que el primer punto comience con el nmero que nosotros queramos.
Lo conseguiremos gracias al atributo value. Los siguientes puntos que escribamos se generarn
automticamente por orden, partiendo de ese nmero.
Por ejemplo, si queremos que nuestra lista empiece por el nmero 20, slo deberemos escribir lo siguiente:
<ol>
<li value="20">Este ser el nmero 20. </li>
<li>Este ser el 21. </li>
<li> Este ser el 22. Y as sucesivamente. </li>
</ol>
Y el resultado ser el siguiente:
20. Este ser el nmero 20.
21. Este ser el 21.
22. Este ser el 22. Y as sucesivamente.
Listas de definiciones: <dl>, <dt> y <dd>.
Si lo que vamos a hacer es un listado de definiciones, podemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a
explicarlas por partes:
La etiqueta <dl> viene de los trminos ingleses Definiton list y nos indica que dentro de ella, entre ella y su
cierre, va a ir una definicin.
La etiqueta <dt> viene de los trminos Definition term y dentro de ella ir el trmino que vamos a definir.
Para entendernos mejor, dentro de <dt> ira el ttulo de la definicin.
La etiqueta <dd> viene de los trminos Definition description y nos dice que dentro de sta ir la definicin.
Si escribimos varios listados de definicin, stas se separarn automticamente entre ellas para facilitar su
diferenciacin.
Aqu podemos ver un ejemplo de cdigo de dos listado de definicin:
<dl>
<dt>Aqu va el trmino que definiremos</dt>
<dd>Y aqu dentro ir la definicin propiamente dicha.</dd>
</dl>
<dl>
<dt>Aqu va la segunda definicin</dt>
<dd>Y aqu dentro ir la segunda definicin, separada automticamente de la
anterior.</dd>
</dl>
Cuyo resultado ser el siguiente:
Aqu va el trmino que definiremos
Y aqu dentro ir la definicin propiamente dicha.
Aqu va la segunda definicin
Y aqu dentro ir la segunda definicin, separada automticamente de
la anterior.
H1, H2 y H3: Cmo utilizar correctamente las etiquetas de encabezado de HTML

<h1> Texto muy grande</h1>
<h2>Texto grande</h2>
<h3>Texto algo ms grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeo</h5>
<h6>Texto muy pequeo</h6>
En el siguiente artculo veremos los caracteres especiales html.

Caracteres especiales bsicos
Estos caracteres son esenciales. No por que no sean interpretados correctamente por el navegador, sino
porque estos smbolos mal escritos pueden causar que nuestra web no funcione correctamente.
&
&
"
"
<
<
>
>
Ï
Î
Ö
Ô
Ü
Û
×
¢
÷
€

Ã
å
Ñ
Å
Õ
Ç
ã
ç
ñ
Ý
õ
ý
¸
»
Á
À
É
È
Í
Ì

ä
â
ë
ê
ï
î
ö
ô
Caracteres especiales
ü
û
Ó
Ò
Ú
Ù
á
à
é
è
Ø
ÿ
ø
Þ
Ð
þ
ð
Æ
ß
æ
¼

½
¡
¾
£
©
¥
®
§
ª
¤
²
¦
³
«
¹
¬
¯

µ
º
¶
´
·
¨
°
±
Ë
Ê
í
ì
ó
ò
ú
ù
Ä
Â
¿

Lista de Elementos HTML5

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Lista de Elementos HTML5

Încărcat de

Drepturi de autor:

Formate disponibile

Lista de Elementos HTML5

listados aqui pueden haber sido modificados o extendido en su significado por la

Metadatos del documento

Representa una coleccin de metadatos acerca del documento, incluyendo

Define el ttulo del documento, el cual se muestra en la barra de ttulo del

Define la URL base para las URLs relativas en la pgina.

Etiqueta de estilo usada para escribir CSS en lnea.

Define ya sea un script interno o un enlace hacia un script externo. El lenguaje

Define una contenido alternativo a mostrar cuando el navegador no soporta

Representa el contenido principal de un documento

Define una seccin en un documento.

Define una seccin que solamente contiene enlaces de

Define contenido autnomo que podra existir

el resto del contenido de la pgina. Si es removido, el

Los elemento de cabecera implementan seis niveles de

Define la cabecera de una pgina o seccin.

Define una parte que debe mostrarse como un prrafo.

Representa un quiebre temtico entre parrafos de una seccin o

Indica que su contenido esta preformateado y que este formato debe

Representa una contenido citado desde otra fuente.

Define una lista ordenada de artculos.

Define una lista de artculos sin orden.

Define un artculo de una lista ennumerada.

Define una lista de definiciones, es decir, una lista de trminos y sus

Representa un trmino definido por el siguiente <dd>.

Representa la definicin de los terminos listados antes que l.

Representa una figura ilustrada como parte del documento.

Semntica a nivel de Texto

Representa un hiperenlace , enlazando a otro recurso.

Representa un texto enfatizado , como un acento de intensidad.

Representa un texto especialmente importante .

Representa un comentario aparte , es decir, textos como un descargo de

Representa contenido que ya no es exacto o relevante .

Representa el ttulo de una obra .

Representa una cita textual inline.

Representa un trmino cuya definicin est contenida en su contenido

Representa una abreviacin o un acrnimo ; la expansin de la abreviatura

Asocia un equivalente legible por mquina a sus contenidos. (Este elemento

Representa un valor de fecha y hora; el equivalente legible por mquina

Representa un cdigo de ordenador .

Representa a una variable, es decir, una expresin matemtica o contexto de

Representa la salida de un programa o un ordenador.

Representa la entrada de usuario o usuaria, por lo general desde un teclado,

Representan un subndice y un superndice, respectivamente.

Representa un texto en una voz o estado de nimo alterno, o por lo menos de

Representa un texto hacia el cual se llama la atencin para propsitos

Representa una anotacin no textual sin-articular, como etiquetar un texto

Representa texto resaltado con propsitos de referencia, es decir por su

Representa contenidos a ser marcados con anotaciones ruby, recorridos

cuando ningn otro elemento semntico le confiere un significado adecuado,

Representa un salto de lnea.

Representa una oportunidad de salto de lnea, es decir, un punto sugerido de

Define una adicin en el documento.

Define una remocin del documento.

Representa una imagen.

Representa un contexto anidado de navegacin, es decir, un documento

Representa un punto de integracin para una aplicacin o contenido

Permite a autores o autoras especificar recursos multimedia alternativos

Permite a autores o autoras especificar una pista de texto temporizado

Representa un rea de mapa de bits en el que se pueden utilizar scripts

En conjunto con <area>, define un mapa de imagen.

En conjunto con <map>, define un mapa de imagen.

Define una imagen vectorial embebida.

Representa datos con ms de una dimensin.