¿Qué es HTML?

Definiéndolo de forma sencilla, "HTML es el lenguaje que se utiliza para crear las páginas web a las que se
accede mediante internet". Más concretamente, HTML es el lenguaje con el que se "escriben" la mayoría
de páginas web.

Los diseñadores utilizan el lenguaje HTML para crear páginas web, los programas que se emplean generan
páginas escritas en HTML y los navegadores que utilizamos (por ejemplo Google Chrome, Opera o Mozilla
Firefox) muestran las páginas web después de leer e interpretar su contenido HTML.

Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseño de páginas web, es
muy fácil de entender y escribir por parte de las personas. En realidad, HTML son las siglas de HyperText
Markup Language y más adelante se verá el significado de cada una de estas palabras. El lenguaje HTML es
un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado
World Wide Web Consortium, más conocido como W3C. Como se trata de un estándar reconocido por
todas las empresas relacionadas con el mundo de internet, una misma página escrita en HTML se
visualizará de forma muy similar en cualquier navegador bajo distintos sistemas operativos.

El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite
publicar información de forma global". Desde su creación, el lenguaje HTML ha pasado de ser un lenguaje
utilizado exclusivamente para crear documentos electrónicos a emplearse en diversas aplicaciones
electrónicas especializadas como buscadores, tiendas "en línea" y banca electrónica.

Breve historia de HTML

La historia completa de HTML es algo larga, por lo que se muestra resumida a partir de la información que
se puede encontrar en Wikipedia.

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, investigador del CERN
(Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de “hipertexto” para
compartir documentos.

Los sistemas de hipertexto habían sido desarrollados años antes. En el ámbito de la informática, el
hipertexto permite que los usuarios accedan a la información relacionada con los documentos electrónicos
que visualizan. En cierta manera, los primitivos sistemas de hipertexto podrían asimilarse a los enlaces de
las páginas web actuales.

Tras finalizar el desarrollo de su sistema, Tim Berners-Lee lo presentó a una convocatoria organizada para
desarrollar un sistema de hipertexto para internet. Después de unir sus fuerzas con el ingeniero de
sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3). El primer
documento formal con la descripción de HTML se publicó en 1991 bajo el nombre “HTML Tags” (Etiquetas
HTML) y todavía hoy puede ser consultado en línea a modo de reliquia informática.
La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del
organismo IETF (Internet Engineering Task Force). Aunque se consiguieron avances significativos (en esta
época se definieron las etiquetas para imágenes, tablas y formularios) ninguna de las dos propuestas de
estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial.

En 1995, el organismo IETF organizó un grupo de trabajo de HTML y el 22 de septiembre publicaron el

estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML.

A partir de 1996, los estándares de HTML los publica otro organismo de estandarización, el W3C. La versión
HTML 3.2 se publicó el 14 de Enero de 1997 y es la primera recomendación de HTML publicada por el W3C.
Esta revisión incorpora los últimos avances de las páginas web desarrolladas hasta 1996, como applets de
Java y texto que fluye alrededor de las imágenes.

HTML 4.0 se publicó el 24 de Abril de 1998 (versión corregida de la publicación del 18 de Diciembre de
1997) y supuso un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se
encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas
web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.

La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se denomina HTML 4.01.
Se trata de una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades
significativas.

Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se detuvo y el W3C se centró
en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple, Mozilla y Opera
mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva
asociación llamada WHATWG (Web Hypertext Application Technology Working Group). La actividad actual
del WHATWG se centra en el estándar HTML5, cuyo primer borrador oficial se publicó el 22 de enero de
2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y a la publicación de los
borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML.

HTML5 ya es un estándar (recomendado), el consorcio W3C, con el inventor de la Web Sir Tim Berners-Lee,
presentó el 27 de octubre de 2014 la versión final. Su intención es que se construya lo que se ha llamado
Plataforma Web abierta, donde el HTML5, junto a Javascript y CSS3, se podrá utilizar para el desarrollo de
aplicaciones multiplataforma (Linux, Windows, Android, iOS..).

Como parte de la estrategia para vincular a más gente en el proceso actual, el director ejecutivo del
Consorcio, el Dr. Jeff Jaffe (MIT) ha publicado un texto acerca de las prioridades del mismo bajo el título de
‘Fundamentos de Aplicación‘ que sostienen todo el trabajo orientado hacia la plataforma actual y de
“nueva generación”:
Seguridad y privacidad, todo lo relacionado con autenticaciones, encriptación, protección de identidad y
actividad en línea.
Diseño y desarrollo de la web, en cuanto a estilo, formato, gráficos, animación y tipografía.
Interacción con distintos equipos como sistemas de sensores y Bluetooth.
Ciclo de uso de aplicación para administración de tareas fuera de conexión y sincronización.
Medios y comunicaciones en tiempo real, para efectos, por ejemplo, de transmisiones en vivo (streaming).
Desempeño y afinación de la capacidad y precisión en la respuesta y descarga de sitios web con sus
funciones.
Usabilidad y accesibilidad, para un web internacional, multilingüe y de acceso para personas con distintas
discapacidades.

Servicios como pagos y web social.

De forma paralela a su actividad con HTML, W3C ha continuado con la estandarización de XHTML, una
versión avanzada de HTML y basada en XML. La primera versión de XHTML se denomina XHTML 1.0 y se
publicó el 26 de Enero de 2000 (y posteriormente se revisó el uno de Agosto de 2002).

XHTML 1.0 es una adaptación de HTML 4.01 al lenguaje XML por lo que mantiene casi todas sus etiquetas y
características, pero añade algunas restricciones y elementos propios de XML. La versión XHTML 1.1 ya ha
sido publicada en forma de borrador y pretende modularizar.

HTML y CSS
Originalmente, las páginas HTML sólo incluían información sobre sus contenidos de texto e imágenes. Con
el desarrollo del estándar HTML, empezaron a incluir también información sobre el aspecto de sus
contenidos: tipos de letra, colores y márgenes.

La posterior aparición de tecnologías como JavaScript, provocaron que las páginas HTML también
incluyeran el código de las aplicaciones (scripts) que se utilizan para crear páginas web dinámicas.

Incluir en una misma página HTML los contenidos, el diseño y la programación complica en exceso su
mantenimiento. Normalmente, los contenidos y el diseño de la página web son responsabilidad de
diferentes personas, por lo que es adecuado separarlos. CSS es el mecanismo que permite separar los
contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos:

Otra ventaja de la separación de los contenidos y su presentación es que los documentos XHTML creados
son más flexibles, ya que se adaptan mejor a las diferentes plataformas: pantallas de ordenador, pantallas
de dispositivos móviles, impresoras y dispositivos utilizados por personas discapacitadas.

De esta forma, utilizando exclusivamente XHTML se crean páginas web "feas" pero correctas. Aplicando
CSS, se pueden crear páginas "bonitas" a partir de las páginas XHTML correctas.
Características básicas

Lenguajes de etiquetas

Uno de los retos iniciales a los que se tuvo que enfrentar la informática fue el de cómo almacenar la
información en los archivos digitales. La solución que se emplea para guardar la información con formato
es sencilla: el archivo electrónico almacena tanto los contenidos como la información sobre el formato de
esos contenidos. Si por ejemplo se quiere dividir el texto en párrafos y se desea dar especial importancia a
algunas palabras, se podría indicar de la siguiente manera:

<parrafo> Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma

especial. </parrafo>

El principio de un párrafo se indica mediante la palabra <parrafo> y el final de un párrafo se indica

mediante la palabra </parrafo>. De la misma manera, para enfatizar ciertas palabras del texto, se encierran
entre <importante> e </importante>. El proceso de indicar las diferentes partes que componen la
información se denomina marcar (markup en inglés). Cada una de las palabras que se emplean para marcar
el inicio y el final de una sección se denominan etiquetas.

Aunque existen algunas excepciones, en general las etiquetas se indican por pares y se forman de la
siguiente manera:

Etiqueta de apertura: carácter <, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado
con el carácter > Etiqueta de cierre: carácter <, seguido del carácter /, seguido del nombre de la etiqueta
(sin espacios en blanco) y terminado con el carácter >.

Así, la estructura típica de las etiquetas HTML es:

<nombre_etiqueta> ... </nombre_etiqueta>

HTML es un lenguaje de etiquetas (también llamado lenguaje de marcas) y las páginas web habituales
están formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML" de la sigla HTML
significan markup language, que es como se denominan en inglés a los lenguajes de marcas. Además de
HTML, existen muchos otros lenguajes de etiquetas como XML, SGML, DocBook y MathML.

La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir por parte de
las personas y de los sistemas electrónicos. La principal desventaja es que pueden aumentar mucho el
tamaño del documento, por lo que en general se utilizan etiquetas con nombres muy cortos.

El primer documento HTML

Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre
la propia página, como por ejemplo su título y su idioma, que no se visualiza. El cuerpo de la página incluye
todos sus contenidos, como párrafos de texto e imágenes.
El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera
(llamada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que
los navegadores muestran como título de sus ventanas).

A continuación se muestra el código HTML de una página web muy sencilla:

<html>
<head>
<title>Mi primer documento HTML</title>
</head>

<body>
<p>El lenguaje HTML es <b>tan sencillo</b> que
prácticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>

</html>

Para probar este primer ejemplo,se ha de hacer lo siguiente:

Abre un editor de archivos de texto y crea un archivo nuevo

Copia el código HTML mostrado anteriormente y ponlo tal cual en el archivo que has creado

Guarda el archivo con el nombre que quieras, pero con la extensión html

Llama el fichero desde un navegador de internet (no es necesario llevarlo a un servidor).

Cómo lograr un sitio web atractivo

Si tus estadísticas están cayendo y cada vez son más las personas que no regresan a tu sitio, es obvio que
existe algo que no funciona. Desarrollar un sitio atractivo que capte una y otra vez a los lectores no es una
tarea sencilla. Las causas de la mala aceptación pueden ser muchas, lo importante es analizar el sitio
objetivamente y valorar qué factores están incidiendo en la percepción de los visitantes:

1. La saturación visual de textos e imágenes. Es esencial que el diseño del sitio web posea una estructura
ordenada de forma que no presente una imagen caótica. Se ha comprobado que los sitios particularmente
desorganizados provocan estrés en los visitantes por lo que, probablemente, estos no querrán regresar.
Cuando se trata de diseño, recuerda que menos es más.

2. Una navegación confusa. Los usuarios de internet suelen premiar la simplicidad. Y el mejor ejemplo de
ello es Apple. Si tu sitio web cuenta con menús extensos y con múltiples enlaces, esto provoca la sensación
de desorden y al visitante le será difícil moverse dentro del sitio web y comprender su organización.
Recuerda además, que la organización da sensación de control y seguridad por lo que tus visitantes
querrán volver.

3. Incompatibilidad con navegadores y dispositivos móviles. Aunque no seas un programador experto,

debes asegurarte de que tu sitio web tenga una visibilidad aceptable en los principales navegadores que se
usan en la actualidad así como que posea una versión para los teléfonos inteligentes, tabletas y lectores de
libros. De esta forma no te estarás cerrando a ninguna posibilidad. Debes recordar que a veces los
navegadores producen superposiciones de textos e imágenes o provocan que el diseño se corra obligando
a realizar desplazamientos muy largos. Por ende, lo mínimo que puedes hacer es revisar la funcionalidad
de tu sitio web en los diferentes navegadores y dispositivos.

4. Publicidad excesiva. Cuando los sitios web están tan llenos de publicidad que cuesta encontrar el
contenido y cuando se usan ventanas pop up que molestan al visitante, es muy probable que este no
vuelva. Por supuesto, la solución no está en eliminar la publicidad sino en insertarla armónicamente con el
diseño web.

5. Lentitud al cargar los contenidos. Con la inmediatez de internet, no hay nada más exasperante que un
sitio web que se demore en cargar. Esto puede suceder por varios motivos: un mal proveedor de
alojamiento o un sitio web con imágenes demasiado pesadas. De una forma u otra, ten en cuenta que 10
segundos ya se considera un sitio lento en cargar. En Pingdom podrás verificar cuánto tarda un sitio web.

6. Usar plantillas populares. Existen abundantes plantillas populares, muchas de ellas las ofrecen las
mismas plataformas como Blogger y Wordpress. El uso de ellas puede ser contraproducente ya que anulan
toda la identidad del sitio web. Recuerda que en un mundo tan amplio como internet, diferenciarse es
esencial.

7. Contenido poco original. En la red ya existen cientos de sitios que copian los contenidos de otros. En la
misma medida en que tus visitantes comiencen a percatarse de que copias siempre de los mismos sitios
web, optarán por visitar directamente a estos.

8. Ausencia de una temática principal. Independientemente del número de tópicos que se pueden
abordar, es importante que el visitante aprecie una consistencia temática. De esta forma se puede crear
una identidad que te diferencie del resto de los sitios de la web.

9. Web no accesible. La accesibilidad web significa que personas con algún tipo de discapacidad van a
poder hacer uso de la web. Se está haciendo referencia a un diseño que va a permitir que estas personas
puedan percibir, entender, navegar e interactuar con la web, aportando a su vez contenidos. La
accesibilidad también beneficia a otras personas, incluyendo personas de edad avanzada que han visto
mermadas sus habilidades. Se rige por las normas: Norma UNE 139803:2012, WCAG 2.0, Norma EN 301
549 y WAI-ARIA.

Cuáles son sus novedades

En términos de Markup, el HTML5 introduce algunos elementos que hacen que
se aggiorne a los tiempos que corren. Así, muchas de las novedades están
relacionadas con la forma de construir websites que se tiene en la actualidad. Una de
las más importantes novedades está relacionada con la inserción de multimedia en
los sitios web, que ahora contarán con etiquetas HTML especiales para poder ser
incluidos. Por otro lado, algunos aspectos de diseño también son incluidos en el
lenguaje, así como también algunos detalles de navegación. Veremos todo esto en
algunas líneas.

Con el uso de HTML5, se puede reducir la dependencia de los plug-ins que

tenemos que tener instalados para poder ver una determinada web. Caso
emblemático, el de Adobe Flash, que se ve claramente perjudicado por la instauración
de este estándar. Por otro lado, fue un avance importante para dispositivos que de
forma nativa no soportaban Flash, y que no soportaban tampoco plug-ins necesarios
para hacerlo. Otro caso emblemático, el del iPhone. Pero además, con HTML5 se
amplía el horizonte del desarrollo de aplicaciones que pueden ser usadas en una
multiplicidad de dispositivos.

Gracias a HTML5, los usuarios pueden acceder a sitios web de manera offline, sin
estar conectados a internet. Se suma también la funcionalidad de drag and drop, y
también la edición online de documentos ampliamente popularizada por Google Docs.
La geolocalización es uno de sus puntos fuertes, pero por otro lado, las etiquetas
diseñadas especialmente para el audio y el video ahorran la necesidad de tener que
tener un plug-in de Flash y, al mismo tiempo, asestan un golpe mortal al producto de
Adobe, que cada vez se está usando menos. Sin embargo, es importante destacar que
Flash sigue siendo utilizado y HTML5 todavía no hizo el “salto grande”, aunque está
en camino.

Las nuevas etiquetas

El lenguaje HTML funciona a través de marcas de sentido llamadas etiquetas. Las
etiquetas son la herramienta fundamental para que los navegadores puedan
interpretar el código y permitirnos ver imágenes, texto, párrafo, y estructuras. Los
navegadores vendrían a ser como “traductores” de las etiquetas, y con HTML5, se
agregan nuevas etiquetas para utilizar que nos ahorran el uso de otros productos
que se usaban para complementar y hacer cosas que con el simple HTML no se
podían hacer. HTML5 fue creado para hacer que el proceso de escribir el código sea
más simple y más lógico, por decirlo de una forma. La sintaxis de HTML5 se destaca,
como dijimos, en el ámbito multimedia, pero son bastantes las etiquetas introducidas
para generar una mejoría.

La idea detrás de HTML5 es que podamos visualizar el contenido multimedia variado

que podemos encontrar en internet aún cuando nos encontramos en dispositivos de
gama baja que no podrían soportarlo cuando tienen que instalar infinidad de plug-ins.
No solamente contamos con etiquetas especiales como audio, video y canvas, sino
también integración con contenidos de gráficos en vectores (que anteriormente se
conocía como la etiqueta object. Con estas etiquetas, los usuarios pueden consumir
videos y canciones, por ejemplo, sin necesidad de instalar nada de forma adicional.
Las más importantes de las nuevas etiquetas creadas son:

 article: esta etiqueta sirve para definir un artículo, un comentario de usuario o

una publicación independiente dentro del sitio.
 header, footer: estas etiquetas individuales ahorran tener que insertar IDs
para cada uno, como se solía hacer anteriormente. Además, se pueden insertar
headers y footers para cada sección, en lugar de tener que hacerlo únicamente
en general.
 nav: la negación puede ser insertada directamente en el markup, entre estas
etiquetas, que nos permitirán hacer que nuestras listas oficien de navegación.
 section: con esta etiqueta, una de las más importantes de las novedades, se
puede definir todo tipo de secciones dentro de un documento. Por ponerlo de
forma sencilla, funciona de una forma similar a la etiqueta div que nos separa
también diferentes secciones.
 audio y video: estas son las dos más importantes etiquetas de HTML5, dado
que nos permiten acceder de forma más simple a contenido multimedia que
puede ser reproducido por casi todo tipo de dispositivos; marcan el tipo de
contenido que estará en su interior.
 embed: con esta etiqueta se puede marcar la presencia de un contenido
interactivo o aplicación externa.
 canvas: finalmente, esta etiqueta nos permite introducir un “lienzo” dentro de
un documento, para poder dibujar gráficos por vectores; será necesario el uso
de JavaScript.
Hay otras etiquetas inauguradas por HTML5 pero destacamos estas por la innovación
que introducen en nuestro código. Las etiquetas a las que estábamos acostumbrados,
por otro lado, introducen un nuevo funcionamiento. El caso ejemplo es el de las
etiquetas header y footer, que, como dijimos, ahora permiten separar las secciones, y
no solamente el comienzo y el fin de una página. El funcionamiento
del DOCTYPE también se renueva, siendo mucho más simple de usar y menos
engorroso. No vamos a explayarnos demasiado en este sentido, dado que, como
dijimos, nos estamos orientando a principiantes y curioso, pero con HTML5 vamos a
poder escribir mucho menos.

Ya repasamos qué es HTML5, y cuáles son sus usos principales y sus innovaciones
más importantes. Para los diseñadores, es algo que debería, y de hecho, ya se está
haciendo, implementarse inmediatamente. Las posibilidades son muchas.
Esperamos poder haber aclarado algunas dudas importantes, o haber despertado algo
de curiosidad para que averigüen más.
Estructura básica

Mi primera página
 Lista de Elementos HTML5
Todos los elementos del estandar HTML5 están listados aquí, descritos por su etiqueta de apertura y
agrupados por su función. Contrariamente al indice de elementos HTML el cual lista todas las posibles
etiquetas, estandar, no-estandar, válidas, obsoletas o aquellas en desuso, esta lista solamente los
elementos válidos de HTML5. Solamente aquellos elementos listados aquí son los que deberían ser
usados en nuevos sitios Web.

El simbolo indica que el elemento fue añadido en HTML5. Nótese que otros elementos listados
aqui pueden haber sido modificados o extendido en su significado por la especificación HTML5.

Elemento raíz
Elemento Descripcion

<!doctype html> Define que el documento esta bajo el estandar de HTML 5

Elemento Descripción

Representa la raíz de un documento HTML o XHTML.

<html>
Todos los demás elementos deben ser descendientes de este elemento.

Metadatos del documento

Elemento Descripción

Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o

<head>
definiciones de, scripts y hojas de estilo.

<title> Define el título del documento, el cual se muestra en la barra de título del
 Elemento Descripción

navegador o en las pestañas de página. Solamente puede contener texto y cualquier

otra etiqueta contenida no será interpretada.

<base> Define la URL base para las URLs relativas en la página.

<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 línea.

Scripting
Elemento Descripción

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

<script>
El lenguaje de programación es JavaScript

<noscript> Define un contenido alternativo a mostrar cuando el navegador no soporta scripting.

Secciones
Elemento Descripción

Representa el contenido principal de un documento HTML.

<body>
Solo hay un elemento <body> en un documento.

Define una sección en un documento.

<section>

Define una sección que solamente contiene enlaces de navegación

<nav>

Define contenido autónomo que podría existir independientemente

<article> del resto del contenido.

Define algunos contenidos vagamente relacionados con el resto

del contenido de la página. Si es removido, el contenido restante
<aside>
seguirá teniendo sentido

<h1>,<h2>,<h3> Los elemento de cabecera implementan seis niveles de cabeceras

<h4>,<h5>,<h6> de documentos; <h1> es la de mayor y <h6> es la de menor impotancia.
 Elemento Descripción

Un elemento de cabecera describe brevemente el tema de la sección que

introduce.

Define la cabecera de una página o sección. Usualmente contiene un

<header> logotipo, el título del sitio Web y una tabla de navegación de contenidos.

Define el pie de una página o sección. Usualmente contiene un

mensaje de derechos de autoría, algunos enlaces a información
<footer>
legal o direcciones para dar información de retroalimentación.

<address> Define una sección que contiene información de contacto.

Define el contenido principal o importante en el documento.

<main> Solamente existe un elemento <main> en el documento.

Agrupación de Contenido
Elemento Descripción

<p> Define una parte que debe mostrarse como un párrafo.

Representa un quiebre temático entre parrafos de una sección o

<hr>
articulo o cualquier contenido.

Indica que su contenido esta preformateado y que este formato

<pre>
debe ser preservado.

<blockquote> Representa una contenido citado desde otra fuente.

<ol> Define una lista ordenada de artículos.

<ul> Define una lista de artículos sin orden.

<li> Define un artículo de una lista ennumerada.

Define una lista de definiciones, es decir, una lista de términos y

<dl>
sus definiciones asociadas.

<dt> Representa un término definido por el siguiente <dd>.

<dd> Representa la definición de los terminos listados antes que él.

Representa una figura ilustrada como parte del documento.

<figure>

Representa la leyenda de una figura.

<figcaption>
 Elemento Descripción

<div> Representa un contenedor genérico sin ningún significado especial.

Semántica a nivel de Texto

Elemento Descripción

<a> Representa un hiperenlace , enlazando a otro recurso.

<em> Representa un texto enfatizado , como un acento de intensidad.

<strong> Representa un texto especialmente importante .

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

<small> responsabilidad o una nota de derechos de autoría, que no son esenciales para
la comprensión del documento.

<s> Representa contenido que ya no es exacto o relevante .

<cite> Representa el título de una obra .

<q> Representa una cita textual inline.

Representa un término cuya definición está contenida en su contenido

<dfn>
ancestro más próximo.

Representa una abreviación o un acrónimo ; la expansión de la abreviatura puede

<abbr>
ser representada por el atributo title.

Asocia un equivalente legible por máquina a sus contenidos. (Este elemento

está sólamente en la versión de la WHATWG del estandar HTML, y no en la
<data>
versión de la W3C de HTML5).

Representa un valor de fecha y hora; el equivalente legible por máquina puede

<time> ser representado en el atributo datetime.

<code> Representa un código de ordenador .

Representa a una variable, es decir, una expresión matemática o contexto

de programación, un identificador que represente a una constante, un símbolo
<var>
que identifica una cantidad física, un parámetro de una función
o un marcador de posición en prosa.

<samp> Representa la salida de un programa o un ordenador.

<kbd> Representa la entrada de usuario, por lo general desde un teclado, pero no

necesariamente, este puede representar otras formas de entrada de usuario,
Elemento Descripción

como comandos de voz transcritos.

<sub>,<sup> Representan un subíndice y un superíndice, respectivamente.

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

<i> diferente calidad, como una designación taxonómica, un término técnico, una
frase idiomática, un pensamiento o el nombre de un barco.

Representa un texto hacia el cual se llama la atención para propósitos utilitaros.

<b>
No confiere ninguna importancia adicional y no implica una voz alterna.

Representa una anotación no textual sin-articular, como etiquetar un texto como

<u>
mal escrito o etiquetar un nombre propio en texto en Chino.

Representa texto resaltado con propósitos de referencia, es decir por su relevancia

<mark> en otro contexto.

Representa contenidos a ser marcados con anotaciones ruby, recorridos cortos

de texto presentados junto al texto. Estos son utilizados con regularidad en conjunto
<ruby> a lenguajes de Asia del Este, donde las anotaciones actúan como una guía para la
pronunciación,
como el furigana Japonés.

Representa el texto de una anotación ruby .

<rt>

Representa los paréntesis alrededor de una anotación ruby, usada para mostrar
la anotación de manera alterna por los navegadores que no soporten despliegue
<rp>
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
<bdi> direccionalidad
diferente o desconocida.

Representa la direccionalidad de sus descendientes con el fin de anular de forma

<bdo> explícita
al algoritmo bidireccional Unicode.

Representa texto sin un significado específico. Este debe ser usado cuando ningún
<span> otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá
de atributos globales como class, lang, o dir.

<br> Representa un salto de línea.

Representa una oportunidad de salto de línea, es decir, un punto sugerido de envoltura

<wbr> donde el texto de múltiples líneas puede ser dividido para mejorar su legibilidad.
Ediciones
Elemento Descripción

<ins> Define una adición en el documento.

<del> Define una remoción del documento.

Contenido incrustado
Elemento Descripción

<img> Representa una imagen.

Representa un contexto anidado de navegación, es decir, un documento

<iframe>
HTML embebido.

Representa un punto de integración para una aplicación o contenido interactivo

<embed> externo que por lo general no es HTML.

Representa un recurso externo, que será tratado como una imagen, un sub-
<object> documento
HTML o un recurso externo a ser procesado por un plugin.

Define parámetros para el uso por los plugins invocados por los
<param>
elementos <object>.

Representa un video , y sus archivos de audio y capciones asociadas, con la

interfaz
<video>
necesaria para reproducirlos.

Representa un sonido o stream de audio.

<audio>

Permite a autores especificar recursos multimedia alternativos para los elementos

<source> multimedia como <video> o <audio>.

Permite a autores especificar una pista de texto temporizado para elementos

<track> multimedia como <video> o <audio>.

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

renderizar gráficos como gráficas, gráficas de juegos o cualquier
<canvas>
imagen visual al vuelo.

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

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

 Elemento Descripción

Define una imagen vectorial embebida.

<svg>

Define una fórmula matemática.

<math>

Datos tabulares
Elemento Descripción

<table> Representa datos con más de una dimensión.

<caption> Representa el título de una tabla.

<colgroup> Representa un conjunto de una o más 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 resúmenes 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 Descripción

Representa un formulario, consistendo de controles que puede ser enviado

<form>
a un servidor para procesamiento.

<fieldset> Representa un conjunto de controles.

<legend> Representa el título de un <fieldset>.

<label> Representa el título de un control de formulario.

<input> Representa un campo de datos escrito que permite al usuario editar los
 Elemento Descripción

datos.

<button> Representa un botón .

Representa un control que permite la selección entre un conjunto de

<select>
opciones.

Representa un conjunto de opciones predefiniddas para otros controles.

<datalist>

<optgroup> Representa un conjunto de opciones, agrupadas lógicamente.

Representa una opción en un elemento <select>, o una sugerencia de un

<option>
elemento <datalist>.

<textarea> Representa un control de edición de texto multi-línea.

Representa un control de par generador de llaves.

<keygen>

Representa el resultado de un cálculo.

<output>

Representa el progreso de finalización de una tarea.

<progress>

Representa la medida escalar (o el valor fraccionario) dentro de un rango

<meter> conocido.

Elementos interactivos
Elemento Descripción

Representa un widget desde el que un usuario puede obtener información

<details> o controles adicionales.

Representa un resumen, título o leyenda para un elemento <details> dado.

<summary>

Representa un comando que un usuario puede invocar.

<command>

Representa una lista de comandos .

<menu>
Ejercicio 1

Cambiaremos el color de un texto con 5 botones que cambien el color de un

texto.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ejemplo JavaScript 5 prompt</title>
<meta name="generator" content="CSE HTML Validator
(http://www.htmlvalidator.com/)">
<script>
function Ejecuta(a)
{

var valor = a;
alert (valor);
x=document.getElementById("p1")
//alert(valor);
switch (valor)
{
case 'azul':
x.style.color="blue";
break;
case 'rojo':
x.style.color="red";
break;
case 'verde':
x.style.color="green";
break;
case 'amarillo':
x.style.color="yellow";
break;
case 'naranja':
x.style.color="orange";
break;
default:
x.style.color="black";
}
}

</script>

</head>

<body>

<h1>Ejercicio 1</h1>
<p>Ya estas pulsando al botón:</p>
<p id="p1">
Texto que cambiará de color.

</p>
<button type="button" onclick="Ejecuta('azul');">Azul</button>
<button type="button" onclick="Ejecuta('rojo');">Rojo</button>
<button type="button" onclick="Ejecuta('verde');">Verde</button>
<button type="button" onclick="Ejecuta('amarillo');">Amarillo</button>
<button type="button" onclick="Ejecuta('naranja');">Naranja</button>
</body>
</html>

Ejercicio 2

Aprovecharemos el mismo ejercicio para cambiar el tamaño de la fuente de un

texto pero el valor se lo introduciremos por un prompt (sin botones).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ejemplo JavaScript 5 prompt</title>
<meta name="generator" content="CSE HTML Validator
(http://www.htmlvalidator.com/)">
<script>
function Ejecuta()
{

var valor=12;
x=document.getElementById("p1");
valor=prompt('Dime el tamaño de letra ','12');
x.style.fontSize=valor+"px";

</script>

</head>

<body>

<h1>Ejercicio 1</h1>
<p>Ya estas pulsando al botón:</p>
<p id="p1">
Texto que cambiará de tamaño de letra.

</p>
<button type="button" onclick="Ejecuta();">Pedir la letra</button>

</body>
</html>
Ejercicio 3

Variación del ejercicio 2. Comprobaremos que el numero introducido es realmente un

numero y que está entre 6 y 30.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ejemplo JavaScript 5 prompt</title>
<meta name="generator" content="CSE HTML Validator
(http://www.htmlvalidator.com/)">
<script>
function Ejecuta()
{
var valor_seg=12;
var valor=12;
x=document.getElementById("p1");
valor=prompt('Dime el tamaño de letra ','12');
if (isNaN(valor)){
x.style.fontSize=valor_seg+"px";
alert('Valor incorrecto, por favor, escribe un numero');
}
else
{
if (valor <= 35 && valor >=6){
x.style.fontSize=valor+"px";
alert('Valor correcto');
}
else
{
x.style.fontSize=valor_seg+"px";
alert('Valor demasiado grande o demasiado pequeño, valor
valido entre 6 y 35');
}
}

</script>

</head>

<body>

<h1>Ejercicio 1</h1>
<p>Ya estas pulsando al botón:</p>
<p id="p1">
Texto que cambiará de tamaño de letra.

</p>
<button type="button" onclick="Ejecuta();">Pedir la letra</button>

</body>
</html>