HTML 5

HTML 5.
Introducción.
¿Os interesa hacer sitios web? ¡No busques más! Con HTML5 y CSS3, dos de los lenguajes en los que
están basados los sitios web tendrás las bases adecuadas. Los veremos en este curso.
El diseño web puede ser fascinante. Crear sitios web atractivos y profesionales es el sueño de millones
de diseñadores de todo el mundo que utilizan las tecnologías de Internet. Un sitio web debe ser sobre
todo accesible, intuitivo y agradable.
La organización inicial es muy importante para poder utilizar eficazmente las herramientas y tomar
decisiones oportunas. Debe iniciarse con la concepción del diseño web, explicar las estrategias de
diseño y cómo organizar las ideas.
El comprender el proyecto desde ésta etapa, permite un ahorro significativo de recursos en el momento
de la implementación.
HTML es divertido, y será el pan de cada día si ingresas al mundo del desarrollo web profesional.
Sin embargo HTML es sólo un ingrediente del pastel (un sitio web profesional y interactivo en
internet), así que te recomiendo que primero te familiarices con el Diseño Gráfico, eso mejorará tu
creatividad, diseña tus propios bocetos en Gimp e Inkscape para tus futuros sitios web, e impleméntalos
poco a poco junto con CSS
Después que ya estás un poco más avanzado con lo antes mencionado, échale javascript y php.
Es posible que pensés que no estás hechos para aprender el lenguaje informático, pero no os preocupés:
El HTML y el CSS son lenguajes simples. Las últimas versiones de estos lenguajes, HTML5 y CSS3,
ofrecen posibilidades increíbles. Con ellos podrés añadir texto a un sitio web, construir un menú de
navegación, añadir imágenes, efectos gráficos y mucho más.
¿Estás preparados para hacer un sitio web desde cero? ¡Sigamos adelante!
Lo mejor para practicar es pensar un proyecto. Imagina una página que quieras crear, bosquéjala como
te gustaría, aunque algunas cosas no sepas como hacerlas. Después intenta llevarla a cabo y cuando te
encuentras con desafíos vas aprendiendo las cosas que te hacen falta, te vas a encontrar con CSS, quiza
con librerías tipo bootstrap, cuando quieras ponerle un comportamiento o animaciones con
JavaScript ... y asi. No esperes a saber todo para comenzar tu proyecto... por que nunca vas a saber
todo. Lo único que falta saber para poder estar en la web es aprender el lenguaje de la web; HTML.
Para practicar, lo ideal es que montes un servidor web casero. Es mucho mas simple de lo que parece,
hay paquetes por Internet que integran un servidor web Apache, un interprete php y una motor de base
de datos MySql

¿Para que todo eso? Pues porque en html aprenderás lo básico de "como hacer las páginas", pero solo
la parte "visible". Luego necesitarás php y mysql (hay otras soluciones, pero esta es la más popular)
para unir html con javascript, php y gestores de bases de datos. Las páginas modernas salvo pocas
excepciones no son "estáticas", sino dinámicas. La diferencia está precisamente en esos otros lenguajes
y la base de datos.
Por ejemplo un paquete WAMP valdría perfectamente para muchas cosas.
Las páginas web.
Posiblemente el término página web sea el más utilizado en Internet, precisamente porque cuando se
navega por la red se hace buscando páginas web. Las páginas web son el soporte de la información en
la web.
Los componentes de una página web son: imágenes, textos y otros contenidos multimedia. Las
secciones internas se encuentran enlazadas de manera que el usuario puede navegar de una página a
otra utilizando hipervínculos, un concepto de interactividad surgido con el fenómeno Internet.
Los sitios web
Un sitio web es una localización en la web que contiene varias páginas web organizadas
jerárquicamente.
Cada sitio tiene una página de inicio que corresponde a la página principal, conocida en Inglés como
Home Page y cuyo nombre de fichero sería index.
Es la primera página que se visualiza cuando se accede a un sitio tecleando el nombre del dominio en la
barra del navegador.
Un sitio tiene generalmente más de una página web y su objetivo principal es ofrecer la información
que necesitan los usuarios y proporcionársela de manera que puedan asignarla fácilmente.
Elementos que componen una página web.
Una página web está compuesta por:
1. Texto.
2. Imágenes.
3. Hipervínculos.
4. Videos.
5. Animaciones.
6. Sonidos.
7. Formularios.

El texto es el elemento más significativo de cualquier sitio Web porque los usuarios navegan por la
Web fundamentalmente en busca de información expresada en hipertexto.
Imágenes: Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página y por
lo tanto, los tiempos de descarga. Las imágenes constituyen un elemento esencial para ofrecer
información visual del contenido y mostrar un diseño atractivo y personal.
Hipervínculos: Por sí misma, una página web no puede hacer mucho. La magia de verdad comienza
cuando relaciona varias página mediante enlaces.
Video: Mientras Internet es cada vez más asequible, confiable y veloz, los programas de edición de
video se hacen más cercanos a los usuarios. Ahora es más fácil realizar un video desde una cámara
digital o un teléfono móvil con cámara incorporada y que termine en la web para ponerlo al alcance de
todos.
Sonidos: Un elemento cada vez más importante. La comercialización de nuevos dispositivos digitales
móviles como el iPhone ha potencializado este elemento. Además de incorporar sonido en la página
web puede descargar de ellas archivos de audio para sus dispositivos móviles. El formato MP3 es el
más conocido y más usado por su calidad y nivel de compresión.
Formulario: Zona para introducir datos o comentarios en espacios vacíos para llenarse con alguna
finalidad. También se utiliza para referirse al conjunto de campos solicitados por un determinado
programa, los cuales se almacenan o reciben para su manipulación o uso posterior.
El éxito de un sitio depende de la forma en que se combinan contenidos, arquitectura del sitio, diseño e
interactividad; los cuales determinan en gran medida la rapidez con que se genera y ofrece la
información, y por supuesto el éxito de un sitio.
Estos deben garantizar que el sitio sea fácil de mantener, flexible para cambiar de tamaño y realizar
actualizaciones y atractivo visualmente para los usuarios, interesante para su audiencia, práctico para
realizar descargas rápidas y búsquedas efectivas; también sólidos técnicamente, sin vínculos rotos, ni
comportamientos inadecuados.

HTML.
HTML son las siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace
referencia al lenguaje de marcado para la elaboración de páginas web.
Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones,
define una estructura básica y un código (denominado código HTML) para la definición de contenido
de una página web, como texto, imágenes, etc.
HTML 5 es la quinta revisión más importante que se hace al lenguaje HTML. En esta versión, se
introducen nuevas características para ayudar a los autores de aplicaciones Web, y se ha prestado
especial atención a la definición de claros criterios de conformidad para los agentes de usuario
(navegadores) en un esfuerzo por mejorar la interoperabilidad.
La especificación actual de HTML 5 la podemos consultar en
(http://dev.w3.org/html5/spec/Overview.html). Podemos seguir los cambios que se hacen a la
especificación del HTML 5 en Twitter (http://twitter.com/HTML5). Los integrantes del grupo de
trabajo para definir las especificaciones del HTML 5 pertenecen a muchas empresas y los podemos ver
en (http://www.w3.org/2000/09/dbwg/details?group=40318&public=1).
Se pueden escribir páginas en HTML5 utilizando el mismo software que se utiliza para escribir páginas
HTML.
Podemos utilizar un editor de texto sencillo como el Notepad (en Windows) o como el TextEdit (en
Mac). En realidad, la estructura básica de una página HTML5 es tan sencilla que se puede utilizar
cualquier editor web, para crearla, incluso si el editor web no está diseñado para HTML5.
A continuación algunos de los navegadores que soportan gran parte de HTML5:
 Internet Explorer 9 y versiones superiores
 Firefox 3.5 y versiones superiores
 Google Chrome 8 y versiones superiores
 Safari 4 y versiones superiores
 Opera 10.5 y versiones superiores
Tags, elementos y estructura de documentos HTML.
HTML significa "Hyper Text Markup Language", es decir "Lenguaje de marcado de hipertexto". Este
lenguaje describe una página web usando marcas o tags. A continuación vemos un ejemplo de código
fuente de una página Web o documento HTML:
<html>
<head>
<title>Hola Mundo</title>
</head>

<body>
<h1>Hola clase 2018</h1>
<p>Bienvenidas a nuestra primera <br/> web.</p>
</body>
</html>
El código HTML está compuesto por caracteres englobados dentro de paréntesis angulados "< >" - que
se llaman elementos o etiquetas.
Html5 contiene un número de etiquetas considerable. Es importante como recomendación: escribirlas
en minúsculas (excepto DOCTYPE), cerrar siempre las etiquetas, poner comillas en los atributos de las
etiquetas, no omitir las etiquetas básicas (html, head, body.)
Los archivos que contienen etiquetas html deben tener la extensión .html (aunque .htm se acepta
también). Hay que tener especial cuidado con los nombres de los ficheros, ya que los servidores web
son sensibles a minúsculas y mayúsculas.
Tag HTML.
Cada palabra rodeada por los símbolos "<" y ">" en el código fuente anterior es llamada tag. Existen 3
tipos de Tags:
 Tag de inicio o apertura. Ejemplo: <h1>
 Tag de fin o cierre. Ejemplo: </h1>
 Tag de inicio y cierre. Ejemplo: <br/>
Los elementos están compuestos, generalmente, por una etiqueta de inicio y una de cierre. La etiqueta
de cierre tiene una barra diagonal extra; "/>" Cada elemento informa al navegador sobre la información
contenida dentro de esas etiquetas.
Elemento HTML
El html es un conjunto de etiquetas que se usan para formatear el contenido de una página web. Hay
una etiqueta que se pone al principio del texto a formatear y otra al final (con una barra /) y estas tienen
ciertos atributos: <etiqueta atributo="valor">Texto</etiqueta>. Los navegadores interpretan esas
etiquetas y visualizan el contenido transformado de la página web.
Un tag de inicio y su correspondiente tag de fin componen un elemento HTML. Ejemplo: <title>Hola
mundo</title>
Lo que esta entre un tag de inicio y su correspondiente tag de fin es el contenido del tag. Un tag de
inicio y cierre por si solo compone un elemento HTML. Ejemplo: <br/>

Estructura básica de un documento HTML
El primer tag HTML de una web debería ser <html> y el último </html>. En otras palabras toda la
pagina web debe estar contenida en un elemento HTML. Dentro del elemento HTML existen el
elemento header que contendrá información de configuración y el elemento body que contendrá todo
lo que es visible en nuestra página.
El elemento title define el titulo de la página que podemos ver en la pestaña superior del navegador
usado. Dentro de body no solo está la información a ser representada en la página web sino que existen
marcadores o tags que indican como representar la información.
Lista de elementos HTML en orden alfabético:
Etiqueta Descripción

Define un comentario. Cualquier información que se ponga dentro de las etiquetas  dentro del cuerpo de la página, será ignorados por el navegador.
<!
DOCTYPE>
Define el tipo de documento
<a> Principalmente utilizado como hipervínculo.
<abbr> Define una abreviación
<acronym>
Permite a los autores indicar claramente una sequencia de caracteres que componen un
acrónimo o abreviación de una palabra. No soportado en HTML5.
<address> Define información de contacto del propietario del documento
<applet>
Esta etiqueta define un applet embebido dentro del documento. No soportado en
HTML5. Declarado en desuso en HTML 4.01.
<area> Esta etiqueta define un área dentro de un mapa de imagen
<article>*
Define una composición independiente dentro de un documento, página, aplicación o
web, que puede ser distribuida independientemente o reutilizada.
<aside>* Define contenido secundario al contenido de la página.
<audio>*
Se utiliza para representar contenido de audio en los documentos. Añadido en HTML5,
puede contener diferentes fuentes de audio, representadas utilizando el atributo "src" o
el elemento <source>.
<b> Este elemento indica que el texto englobado tiene que ser mostrado en negrita.
<base>
Define cuál es la URL absoluta para todos aquellos enlaces que sean relativos en la
página
<basefont>
Especifica un color, tamaño y fuente por defecto, para todo el texto del documento. No
soportado en HTML5. Declarado en desuso en HTML 4.01
<bdi>* Aisla una parte del texto que puede tener un formato diferente del texto principal.
<bdo> Este elemento es utilizado para sobreescribir la dirección del texto.
<big> Este elemento define texto grande. No soportado en HTML5.

<blockquote>
Este elemento se utiliza para designar una cita de texto larga. Normalmente, se puede
reconocer porque está identado.
<body> Este elemento es utilizado para definir el cuerpo del documento.
<br> Define un salto de línea.
<canvas>* Utilizada para dibujar gráficos, mediante scripts. (normalmente JavaScript)
<caption> Defines el título de una tabla
<center>
Este elemento hace que el texto englobado esté centrado dentro de los márgenes. No
soportado en HTML5. Declarado en desuso en HTML 4.01.
<cite> Especifica una cita o referecia a otro lugar
<code> Indica que el texto englobado es código de programación.
<col> Define una columna dentro de una tabla y se utiliza para agrupar y alinear.
<colgroup> Especifica un grupo de una o más columnas de una tabla para darles formato.
<command>* Define un botón comando al que el usuario puede llamar.
<datalist>* Especifica una lista de opciones predefinidas para una caja de texto input
<dd> Define una descripción de un item en una lista de definición
<del> Define texto que ha sido eliminado de un documento.
<details>* Define detalles adicionales que el usuario puede ver o esconder.
<dfn> Define un término de una definición.
<dialog>* Define una caja de diálogo o ventana.
<dir>
Define una lista directorio. No soportado en HTML5. Declarado en desuso en HTML
4.01.
<div> Define una sección en un documento.
<dl> Define una lista de definición.
<dt> Define un término (un item) dentro de una lista de definición.
<em> Define énfasis en un texto.
<embed>* Se utiliza para declarar un contenedor para una aplicación externa (no- HTML)
<fieldset> Agrupa elementos relacionados en un formulario.
<figcaption>* Define un título para un elemento <figure>
<figure>* Especifica contenido independiente.
<font> Define fuente, color y tamaño para un texto. No soportado en HTML5.
<footer>* Define un footer para un documento o sección.
<form> Define un formulario HTML para datos del usuario.
<frame> Define una ventana dentro de un frameset. No soportado en HTML5.
<frameset> Define un conjunto de "frames". No soportado en HTML5.
<h1> -<h6> Define encabezados en HTML
<head> Define información sobre el documento
<header>* Define un encabezado para un documento o sección
<hgroup> Agrupa elementos del encabezado (<h1> -<h6>)
<hr> Define un cambio temático en el contenido

<html> Define la raiz de un documento HTML
<i> Este elemento se usa para representar un texto con un estilo de fuente en itálica
<iframe> Define un documento HTML dentro de otro documento HTML
<img> Define una imagen
<input> Este elemento se utiliza para ingresar datos por parte del usuario
<ins> Define el texto que ha sido insertado dentro del documento
<kbd> Este elemento se utiliza para avisar al usuario que tiene que introducir datos por teclado
<keygen>* Define un campo generador de claves en formularios
<label> Define una etiqueta para un elemento <input>
<legend> Este elemento define un título para un elemento <fieldset>, <figure> o <details>
<li> Define un item de una lista
<link>
Este elemento define la relación entre el documento y un recurso externo (normalmente
utilizado con hojas de estilo)
<main>* Especifica el contenido principal del documento
<map> Define un mapa de imagen en el lado del cliente
<mark>* Define un texto resaltado en el documento
<menu> Define un menu
<meta> Define metadata de un documento HTML
<meter>* Define una medida escalar dentro de un rango determinado
<nav>* Define links de navegación
<noframes>
Especifica el contenido alternativo para los navegadores que no soportan frames. No
soportado por HTML5.
<noscript> Especifica un contenido alternativo para navegadores que no soportan scripts.
<object> Define un objeto embebido
<ol> Este elemento especifica una lista ordenada
<optgroup> Especifica un grupo de opciones en una lista desplegable.
<option> Este elemento define una opción en una lista desplegable.
<output>* Especifica el resultado de un cálculo
<p> Especifica un párrafo
<param> Este elemento especifica un parámetro para un objeto
<pre> Define un texto con formato previo
<progress>* Representa el progreso de una tarea
<q> Define una cita de texto corta(en una línea)
<rp>* Define que mostrar en los navegadores que no soportan anotaciones ruby
<rt>* Este elemento define la pronunciación de caracteres (para tipografía del este asiático)
<ruby>* Define una anotación ruby (para tipografía del este asiático)
<s> Esta etiqueta define texto con un estilo de fuente tachado
<samp> Muestra un mensaje de un programa o script
<script> Define un script dentro del documento

<section>* Define una sección en un documento
<select>
Muestra varias opciones al usuario y permite que elija entre ellas una o más en una lista
desplegable
<small> Se utiliza para presentar un texto con un estilo de fuente pequeña
<source>* Define las fuentes para los elementos multimedia como video y audio.
<span>
Agrupa varios elementos en línea seguidos dentro de un mismo bloque, para después
darles formato con la hoja de estilo.
<strike>
Este elemento se utiliza para representar un texto con un estilo de fuente tachado. No
<strong> Se utiliza para representar texto importante
<style> Este elemento define el estilo del documento
<sub> Representa un subíndice
<summary>* Define un encabezado para el elemento <details>
<sup> Representa un superíndice
<table> Define una tabla
<tbody> Agrupa el contenido del body de una tabla
<td> Define una célda de una tabla
<textarea> Este elemento especifica una área para escribir texto
<tfoot> Agrupa el contenido del footer de una tabla
<th> Representa la celda del encabezado de una tabla
<thead> Agrupa el contenido del encabezado de una tabla
<time>* Define la fecha y hora
<title> Define el título de un documento
<tr> Define una fila dentro de una tabla
<track>*
Define determinadas características para las pistas de texto de elementos multimedia
como; vídeos o audios.
<tt> Define texto con un estilo de fuente en teletipo. No soportado en HTML5.
<u> Define texto con un estilo de fuente subrayado.
<ul> Define una lista no ordenada
<var> Define una variable
<video>* Define un video o película
<wbr>* Define donde un texto se puede romper para cambios de línea
Elementos HTML ordenados por función:
Esto nos ayudará a saber que elemento utilizar en cada caso para poder facilitar el desarrollo de páginas
web compatibles con distintos navegadores y plataformas.

Básicos:

Define un comentario. Cualquier información que se ponga dentro de las etiquetas  dentro del cuerpo de la página, será ignorados por el navegador.
<!
DOCTYPE>
Define el tipo de documento
<html> Define la raiz de un documento HTML
<title> Define el título de un documento
<body> Este elemento es utilizado para definir el cuerpo del documento.
<h1> -<h6> Define encabezados en HTML
<p> Especifica un párrafo
<br> Define un salto de línea.
<hr> Define un cambio temático en el contenido
Secciones o estilo:
<style> Este elemento define el estilo del documento
<div> Define una sección en un documento.
<span>
Agrupa varios elementos en línea seguidos dentro de un mismo bloque, para después
darles formato con la hoja de estilo.
<header>* Define un encabezado para un documento o sección
<footer>* Define un footer para un documento o sección.
<section>* Define una sección en un documento
<article>*
Define una composición independiente dentro de un documento, página, aplicación o
web, que puede ser distribuida independientemente o reutilizada.
<aside>* Define contenido secundario al contenido de la página.
<details>* Define detalles adicionales que el usuario puede ver o esconder.
<dialog>* Define una caja de diálogo o ventana.
<summary>* Define un encabezado para el elemento <details>
Información meta:
<head> Define información sobre el documento

<s> Esta etiqueta define texto con un estilo de fuente tachado
<samp> Muestra un mensaje de un programa o script
<small> Se utiliza para presentar un texto con un estilo de fuente pequeña
<strike>
Este elemento se utiliza para representar un texto con un estilo de fuente tachado. No
<strong> Se utiliza para representar texto importante
<sub> Representa un subíndice
<time>* Define la fecha y hora
<tt> Define texto con un estilo de fuente en teletipo. No soportado en HTML5.
<ul> Define una lista no ordenada
<var> Define una variable
<wbr>* Define donde un texto se puede romper para cambios de línea
Formularios:
<form> Define un formulario HTML para datos del usuario.
<input> Este elemento se utiliza para ingresar datos por parte del usuario
<textarea> Este elemento especifica una área para escribir texto
<button> Se utiliza para crear botones de un formulario
<select>
Muestra varias opciones al usuario y permite que elija entre ellas una o más en una lista
desplegable
<optgroup> Especifica un grupo de opciones en una lista desplegable.
<option> Este elemento define una opción en una lista desplegable.
<label> Define una etiqueta para un elemento <input>
<fieldset> Agrupa elementos relacionados en un formulario.
<legend> Este elemento define un título para un elemento <fieldset>, <figure> o <details>
<datalist>* Especifica una lista de opciones predefinidas para una caja de texto input
<keygen>* Define un campo generador de claves en formularios
<output>* Especifica el resultado de un cálculo
Tablas:
<table> Define una tabla

<caption> Defines el título de una tabla
<th> Representa la celda del encabezado de una tabla
<tr> Define una fila dentro de una tabla
<td> Define una celda de una tabla
<thead> Agrupa el contenido del encabezado de una tabla
<tbody> Agrupa el contenido del body de una tabla
<tfoot> Agrupa el contenido del footer de una tabla
<col> Define una columna dentro de una tabla y se utiliza para agrupar y alinear.
<colgroup> Especifica un grupo de una o más columnas de una tabla para darles formato.
Listas:
<ol> Este elemento especifica una lista ordenada
<li> Define un item de una lista
<dir>
Define una lista directorio. No soportado en HTML5. Declarado en desuso en HTML
4.01.
<dl> Define una lista de definición.
<dt> Define un término (un item) dentro de una lista de definición.
<dd> Define una descripción de un término en una lista descriptiva
<menu> Define un menu
<command>* Define un botón comando al que el usuario puede llamar.
Enlaces
<a> Principalmente utilizado como hipervínculo.
<link>
Este elemento define la relación entre el documento y un recurso externo (normalmente
utilizado con hojas de estilo)
<nav>* Define links de navegación
Imágenes:
<img> Define una imagen
<map> Define un mapa de imagen en el lado del cliente

<area> Esta etiqueta define un área dentro de un mapa de imagen
<canvas>* Utilizada para dibujar gráficos, mediante scripts. (normalmente JavaScript)
<figcaption>* Define un título para un elemento <figure>
<figure>* Especifica contenido independiente.
Audios y videos:
<audio>*
Se utiliza para representar contenido de audio en los documentos. Añadido en HTML5,
puede contener diferentes fuentes de audio, representadas utilizando el atributo "src" o el
elemento <source>.
<source>* Define las fuentes para los elementos multimedia como video y audio.
<track>*
Define determinadas características para las pistas de texto de elementos multimedia
como; vídeos o audios.
<video>* Define un video o película
Marcos o frames:
<frame> Define una ventana dentro de un frameset. No soportado en HTML5.
<frameset> Define un conjunto de "frames". No soportado en HTML5.
<noframes>
Especifica el contenido alternativo para los navegadores que no soportan frames. No
soportado por HTML5.
<iframe> Define un documento HTML dentro de otro documento HTML
Programación:
<script> Define un script dentro del documento
<noscript> Especifica un contenido alternativo para navegadores que no soportan scripts.
<applet>
Esta etiqueta define un applet embebido dentro del documento. No soportado en
HTML5. Declarado en desuso en HTML 4.01.
<embed>* Se utiliza para declarar un contenedor para una aplicación externa (no- HTML)
<object> Define un objeto embebido
<param> Este elemento especifica un parámetro para un objeto
* Etiqueta añadida en HTML5.

DOCTYPE.
Es la declaración del tipo de documento (DTD Document Type Declaration), esta sección se ubica en la
primera línea del archivo HTML, es decir antes de la marca html. Ahora con el HTML 5 se simplifica
esta sección con la siguiente sintaxis:
<!DOCTYPE HTML>
Es importante agregar el DOCTYPE, de esta forma el navegador puede saber que estamos utilizando la
especificación del HTML 5. Esta línea deberá ser la primera línea del documento, sin espacios ni líneas
previas. Esto es una manera de activar el modo estándar y forzar a los navegadores a interpretar el
HTML5 siempre que sea posible, o a ignorarlo cuando no lo sea.
Ejemplo de uso de DOCTYPE con HTML 5.
<!DOCTYPE HTML>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</head>
<body>
<p>Si vemos el código fuente de esta página veremos la forma de declarar el DOCTYPE en
HTML5.</p>
</body>
</html>
<html>
Después de declarar el tipo de documento, se construye la estructura del árbol con HTML. El elemento
raiz del árbol es el elemento <html>. Este elemento engloba todo el código HTML.
<!DOCTYPE html>
<html lang="es">
</html>
El atributo lang en la etiqueta de inicio <html> es el único atributo que debemos especificar en
HTML5. Este atributo define el lenguaje del contenido del documento que estamos creando - en este
caso, es para Español.
HTML5 es muy flexible con respecto a la estructura y los elementos utilizados en su desarrollo. El
elemento <html> puede ser incluido sin atributos o no ser incluido.

Sin embargo, por compatiblidad y otras razones, se recomienda seguir unas reglas básicas, siguiendo un
manual de buenas prácticas.
<head>
Sigamos con la construcción de nuestra plantilla. El código HTML incluido en las etiquetas <html>
tiene que estar dividido en dos secciones principales. Como ya ocurría en versiones anteriores de
HTML, la primera sección es el "head" y la segunda el "body". El siguiente paso, por tanto, es crear
dos secciones en el código, utilizando esos dos elementos; <head> y <body>.
El elemento <head> va en primer lugar, y como el resto de los elementos estructurales, tiene un tag de
apertura y otro de cierre.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
</html>
El "tag" no ha cambiado con respecto a otras versiones y su función es la misma. Dentro de los "tags"
<head>, definiremos el título de nuestra página, declararemos la codificación de caracteres,
incluiremos cualquier información general que queramos sobre el documento e incorporaremos
archivos externos con los estilos, scripts o incluso imágenes necesarias para mostrar la página.
A excepción del título y algunos iconos, el resto de la información incluida en el documento dentro de
las etiquetas <head> no será visible.
<body>
La siguiente sección que forma parte de la organización principal del documento HTML es el "body".
Este "cuerpo" es la parte visible del documento y viene especificado con la etiqueta <body>.
Esta etiqueta no ha cambiado con respecto a las versiones anteriores de HTML:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>

<title>Título del documento</title>
</head>
<body>
</body>
</html>
Nota: Normalmente, este texto es mostrado por los navegadores en la parte superior de la ventana.
<link>
Otro elemento importante que se incluye dentro de la cabecera es <link>. Este elemento se utiliza para
incorporar estilos, scripts, imágenes o iconos de archivos externos. Uno de los usos más comunes de
<link>, es insertar un archivo CSS externo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título del documento</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
En HTML5, ya no hay que especificar el tipo de hoja de estilo que estamos insertando, por lo que el
atributo type ha sido eliminado.
Solamente necesitamos dos atributos para incluir nuestro archivo de estilos: rel y href. El atributo rel
se refiere a la relación entre el documento y el archivo que estamos incluyendo. En este caso tiene el
valor= "stylesheet", lo que le indica al navegador que el archivo styles.css es un archivo CSS con
estilos necesarios para mostrar la página.
Nota: Una hoja de estilos es un conjunto de reglas de formato que nos ayuda a cambiar la presentación
de nuestro documento - por ejemplo, el tamaño o el color del texto. Sin estas reglas, el texto y otros
elemento se mostrarán en la pantalla utilizando los estilos estándares suministrados por los navegadores
(tamaño y colores por defecto.)
Estructura del cuerpo- HTML5

La estructura del cuerpo (el código entre los tags <body>) generará la parte visible de nuestro
documento. Será el código que genere nuestra página web. HTML ofrece diferentes formas para
construir y organizar la información en el cuerpo del documento.
Uno de los primeros elementos que ofrece HTML para este propósito es <table>. Las tablas, aunque no
fueran ideadas para eso, permiten organizar data, texto, imágenes dentro de filas y columnas.
Con el tiempo y gradualmente, otros elementos han reemplazado la función de las tablas, aportando
diferentes maneras de hacer lo mismo con menos código y de una manera más rápida, facilitando la
creación, portabilidad y mantenimiento.
El elemento <div> empezó extenderse y dominar este campo. Sin embargo, el elemento <div> o
<table>, no suministran mucha información sobre las partes del cuerpo que están representando.
Cualquier cosa puede ir dentro de las etiquetas de apertura y cierre <div>, desde imágenes, menúes,
textos, enlaces, scripts, formularios, etc.
Para los usuarios, saber que hay dentro de las etiquetas no es importante, pero para los navegadores es
crucial saberlo para hacer la correcta interpretación de los documentos.
Teniendo esto en cuenta, HTML5 ha incorporado nuevos elementos que ayudan a identificar cada parte
del documento y a organizar el cuerpo.
Como utilizar estos nuevos elementos, es cosa nuestra, pero las palabras clave seleccionadas para cada
uno, ayudará a saber cuál es su función.
Normalmente una página web o aplicación web está dividida en diferentes áreas visuales para poder
mejorar la experiencia del usuario y su interactividad. Las palabras clave que representan cada
elemento nuevo de HTML5, están relacionadas a estas áreas visuales.
Organización
Cada diseñador crea sus propios diseños, pero en general podremos identificar dentro de cada página
web las siguientes secciones:
Cabecera
Barra de navegación

Información principal Barra lateral
Institucional
 Arriba del todo, tenemos la cabecera, que es el lugar donde solemos tener el logo, nombre, y
pequeñas descripciones de nuestra página web.
 Debajo de la cabecera, podemos ver la barra de navegación, en la que casi cualquier
desarrollador ofrece un menú o lista de enlaces para navegar por el sitio web. Los usuarios son
llevados desde esta barra a diferentes páginas o documento, normalmente en el mismo sitio
web.
El contenido más importante de la página se localiza normalmente en el medio de la
distribución. Esta sección muestra la información importante y links. Casi siempre está dividida
en varias filas y columnas.
 La sección de información principal, podría tener una lista de artículos, descripciones de
productos, entradas de blog y cualquier otra información importante.
 La barra lateral podría tener por ejemplo, una lista de enlaces apuntando a cada uno de estos
elementos.
 Abajo del todo, tenemos una barra llamada barra institucional. Se llama así porque es el área
de la página donde tenemos información general del sitio web, el autor o la compañía, además
de enlaces con referencia a términos y condiciones, mapas e información adicional que el
desarrollador cree importante compartir.
La barra institucional es el complemento de la cabecera, y es considerada como una parte
esencial de la estructura de la página.

Elementos HTML semánticos.
El HTML 5 introduce una serie de elementos estructurales que facilitarán tanto el desarrollo de las
páginas como también el análisis de las mismas por buscadores.
Los elementos de HTML 5 que ayudan a estructurar la parte semántica de la página son:
header: El elemento header debe utilizarse para marcar la cabecera de una página (contiene el
logotipo del sitio, una imagen, un cuadro de búsqueda etc)
El elemento header puede estar anidado en otras secciones de la página (es decir que no solo se
utiliza para la cabecera de la página)
nav: El elemento nav representa una parte de una página que enlaza a otras páginas o partes
dentro de la página. Es una sección con enlaces de navegación.
No todos los grupos de enlaces en una página deben ser agrupados en un elemento nav.
únicamente las secciones que consisten en bloques de navegación más importantes son
adecuados para el elemento de navegación.
section: El elemento section representa un documento genérico o de la sección de aplicación.
Una sección, en este contexto, es una agrupación temática de los contenidos. Puede ser un
capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio
encabezado.
Una página de inicio de un sitio Web puede ser dividida en secciones para una introducción,
noticias, información de contacto etc.
footer: El elemento footer se utiliza para indicar el pié de la página o de una sección. Un pie de
página contiene información general acerca de su sección el autor, enlaces a documentos
relacionados, datos de derechos de autor etc.
aside: El elemento aside representa una nota, un consejo, una explicación. Esta área son
representados a menudo como barras laterales en la revistas impresa.
El elemento puede ser utilizado para efectos de atracción, como las comillas tipográficas o
barras laterales, para la publicidad, por grupos de elementos de navegación, y por otro
contenido que se considera por separado del contenido principal de la página.
article: El elemento article representa una entrada independiente en un blog, revista, periódico
etc.
Cuando se anidan los elementos article, los artículos internos están relacionados con el
contenido del artículo exterior. Por ejemplo, una entrada de blog en un sitio que acepta
comentarios, el elemento article principal agrupa el artículo propiamente dicho y otro bloque
article anidado con los comentarios de los usuario.

Ejemplo de página añadiendo estos elementos semánticos:
<!DOCTYPE html>
<html>
<head>
<title>Elementos semánticos del HTML5</title>
</head>
<body>
<header>
<h1>Encabezado de la página</h1>
</header>
<nav>
<p>enlaces de navegación</p>
</nav>
<section>
<p>Sección 1</p>
</section>
<section>
<p>Sección 2</p>
</section>
<aside>
<p>Publicidad</p>
</aside>
<footer>
<p>Pié de página</p>
</footer>
</body>
</html>
Estructura del cuerpo en HTML5. Etiqueta <header>
HTML5 tiene una estructura y un diseño básicos y aporta nuevos elementos para diferenciarlos y
declararlos. Con ello podemos informar al navegador, la función de cada sección.
A continuación tenemos una representación visual de la organización de las secciones utilizando las
etiquetas HTML5. La primera de estas etiquetas es <header>:
<header></header>
<nav></nav>

<section></section> <aside></aside>
<footer></footer>
<header>
Uno de los nuevos elementos incorporados en HTML5 es <header>. No debe ser confundido con la
etiqueta <head>, que hemos utilizado anteriormente.
De la misma manera que la etiqueta <head>, la etiqueta <header> aporta información introductoria
(como títulos, subtítulos, logos....), pero en otro ámbito.
Mientras que la etiqueta <head> tiene la función de suministrar información sobre todo el documento,
la etiqueta <header> aporta información del cuerpo del documento o de alguna sección dentro del
cuerpo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="Ejemplo de HTML5">
<title>Bienvenidos</title>
</head>
<body>
<header>
<h1>Hola mundo</h1>
</header>

</body>
</html>
En el código, vemos que definimos el título de la página web, utilizando la etiqueta <header>.
Recuerde que este título no es el mismo que el título general del documento definido previamente en el
<head>.
La inserción del elemento <header> representa el principio del cuerpo y de la parte visible del
documento.
Nota: El elemento <h1> es un elemento de HTML utilizado para definir un títular. El número indica
la importancia del titular y su contenido. El elemento <h1> es el de mayor importancia y <h6> es el de
menor, por lo que el <h1> será utilizado para mostrar el título principal y el resto para títulos
secundarios.
Estructura del cuerpo en HTML5. Etiqueta <nav>
etiquetas HTML5. Vamos aprender sobre la primera de estas etiquetas, <nav>;
<header></header>
<nav></nav>

<footer></footer>
<nav>
La siguiente sección a explicar es la barra de navegación. Esta es generada en HTML5 con la etiqueta
<nav>.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
<h1>Lenguajes para la web</h1>
</header>
<nav>
<ul>
<li>Lenguaje HTML</li>
<li>Lenguaje CSS</li>
<li>Lenguaje JavaScript</li>
<li>Lenguaje XML</li>
<li>Lenguaje PHP</li>
</ul>
</nav>
</body>
</html>
Como vemos en el código anterior, el elemento <nav> se encuentra dentro de las etiquetas <body>,
pero después de las etiquetas de cierre de header (</header), no entre las etiquetas <header>. Esto es
porque el <nav> no forma parte del header, si no que es una nueva sección.
HTML5 es muy versátil y nos suministra los parámetros y elementos básicos con los que podemos
trabajar. Como utilizar esos elementos para crear nuestra estructura y el orden que escojamos es una
decisión nuestra.
Un ejemplo de esta versatilidad es la etiqueta <nav>, que podemos insertar o bien dentro del elemento
<header> o bien dentro de cualquier otra sección del cuerpo. Igualmente, hay que tener en cuenta, que
estas etiquetas nuevas se han creado para proveer a los navegadores con más información y así ayudar

a cualquier programa nuevo o dispositivo del mercado a identificar las partes más relevantes del
documento.
Para mantener nuestro código portable y legible, recomendamos seguir los estándares y mantenerlo lo
más ordenado posible. El elemento <nav> está hecho para incluir ayudas a la navegación como el
menú principal o los bloques principales de navegación y se debería utilizar para este propósito.
Nota: En este ejemplo, haremos una lista con las opciones de menú de nuestra página web. Entre las
etiquetas <nav>, existen dos elementos que se utilizan para crear una lista. Utilizamos el elemento
<ul> para definir la lista. Dentro de estas etiquetas <ul> vemos varias etiquetas <li> con diferente
texto, que representan las opciones de menú. Estas etiquetas <li>, se utilizan para definir cada elemento
de la lista.
Estructura del cuerpo en HTML5. Etiqueta <section>
etiquetas HTML5. Vamos aprender sobre la etiqueta <section>:
<header></header>
<nav></nav>
<footer></footer>

<section>
Siguiendo nuestro diseño estandar tenemos la barra de contenido principal que contiene la
información más relevante del documento que puede disponerse, por ejemplo, en varios bloques o
columnas.
Dado que el propósito de estas columnas o bloques es más general, el elemento HTML5 que lo
especifica se llama simplemente <section>.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
</ul>
</nav>
<section>
Tutoriales para la web
</section>
</body>
</html>
Igual que la barra de navegación, la barra de contenido principal es una sección separada del resto.
Por lo tanto esta sección se localiza debajo de la etiqueta de cierre </nav>.
IMPORTANTE: Las etiquetas que representan cada sección del documento aparecen listadas dentro del
código, una encima de la otra, pero en las páginas web algunas de estas secciones aparecerán una al
lado de la otra. (Por ejemplo las columnas de Contenido principal y la Barra lateral.)
En HTML5, la presentación en pantalla se delega a CSS. El diseño se llevará a cabo asignando un
estilo CSS a cada elemento.

Estructura del cuerpo en HTML5. Etiqueta <aside>
etiquetas HTML5.
<header></header>
<nav></nav>
<footer></footer>
<aside>
En una distribución estándar de una página web, la barra lateral está situada al lado de la barra de
contenido principal. Es una columna o sección que normalmente contiene datos relacionados con el
contenido principal pero con una relevancia o importancia menor.
En el diseño estándar de un blog, la barra lateral contiene una lista de enlaces. La información dentro
de esta barra está relacionada con el contenido principal de la página pero no es relevante por si sola.
Siguiendo con el ejemplo del blog, podemos decir que las entradas del blog son importantes, pero los
enlaces y resúmenes de esas entradas son sólo una ayuda navegacional y no en lo que el lector o
usuario está más interesado.

En HTML5, podemos diferenciar este tipo de información secundaria con el elemento <aside>.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
</ul>
</nav>
<section>
</section>
<aside >
English Version
</aside>
</body>
</html>
El elemento <aside> puede estar localizado en cualquier parte del diseño; la etiqueta no define la
posición, como vemos en el ejemplo. El elemento <aside> sólo describe la información que engloba,
no un lugar en la estructura y se puede utilizar siempre que el contenido no quiera ser considerado
como el contenido principal del documento.
Podemos utilizar el elemento <aside>, por ejemplo, dentro de un elemento <section>, o incluso dentro
de una sección con información relevante - en un cita dentro de un texto.
Hay que recordar que en HTML5, la presentación en pantalla de estos elementos ha sido delegado a
CSS. El diseño se consigue asignando estilos CSS a cada elemento.

Estructura del cuerpo en HTML5. Etiqueta <footer>
A continuación una representación visual de la organización de las secciones utilizando las etiquetas
HTML5. Vamos aprender sobre la etiqueta <footer>:
<header></header>
<nav></nav>
<footer></footer>
<footer>
Para dar por concluido nuestra plantilla o estructura básica de nuestro documento HTML5, sólo falta un
elemento más. Para cerrar el diseño debemos darle terminación al cuerpo del documento. HTML5 tiene
un elemento específico para este fin llamado <footer>:
<!DOCTYPE html>
<html lang="es">
<head>

</head>
<body>
<header>
</header>
<nav>
<ul>
</ul>
</nav>
<section>
</section>
<aside >
English Version
</aside>
<footer>
Copyright © 2005 - 2018
</footer>
</body>
</html>
En el diseño estándar de una página web (ver Estructura del cuerpo - HTML5), la sección llamada
barra institucional será definida con etiquetas <footer>. Se llama así porque la barra representa el fin (o
pie) de nuestro documento y esta parte de la página web es utilizada normalmente para compartir
información general sobre el autor o la compañía que ha creado el proyecto; como copyright, términos
y condiciones, etc.
Normalmente, el elemento <footer> representa el fin del cuerpo de nuestro documento y tiene el
propósito antes descrito. Sin embargo, la etiqueta <footer> puede ser usada varias veces dentro del
cuerpo para representar el fin de las diferentes secciones. (La etiqueta <header> también puede ser
utilizada varias veces dentro del cuerpo.)
Contenido del cuerpo. Etiqueta article
El cuerpo de nuestro documento ya está completo. La estructura básica de la página web está terminada
y ahora tenemos que trabajar en el contenido. Los elementos HTML5 que hemos visto nos ayudan a

identificar cada sección del diseño y asignar una función intrínseca para cada uno de ellos, pero lo que
es realmente importante es lo que hay dentro de cada una de esas secciones.
La mayoría de los elementos ya estudiados fueron creados para dar una estructura a la página web que
los navegadores y nuevos dispositivos puedan identificar.
Las etiquetas <body> son para declarar el cuerpo o las partes visibles del documento, las etiquetas
<header> son para englobar información importante para el cuerpo, las etiquetas <nav> para aportar
ayuda a la navegación, las etiquetas <section> contienen el contenido más importante y las etiquetas
<aside> y <footer> suministran información adicional.
Pero ninguno de estos elementos declaran algo sobre el contenid. Todos tienen una función estructural
muy específica.
Cuanto más profundizamos en el documento, más nos acercamos a la definición del contenido. Esta
información estará compuesta por elementos visuales diferentes como títulos, textos, imágenes, videos
y aplicaciones interactivas entre otras. Necesitamos poder diferenciar estos elementos y establecer
relaciones entre ellos.
<article>
De las misma manera en que los blogs están divididos en entradas, las páginas webs están divididas en
partes que tienen características similares. El elemento <article> permite identificar cada una de estas
partes.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
</ul>
</nav>
<section>

<article>
VIDEO TUTORIALES HTML
Tutoriales de HTML para principiantes o iniciación. Aquí aprenderemos desde cero .
Algunos de los conceptos que veremos son básico, pero los veremos siempre en el entorno
web.
</article>
<article>
VIDEO TUTORIALES CSS
Tutoriales de CSS para principiantes. Aquí aprenderemos como utilizar el lenguaje de estilos
en cascada CSS.
</article>
</section>
<aside >
English Version
</aside>
<footer>
Copyright © 2005-2018
</footer>
</body>
</html>
Como podemos ver en el código, las etiquetas <article> están dentro de las etiquetas <section>. Las
etiquetas <article> pertenecen a esa sección. Son sus hijos, de la misma manera que las etiquetas que
están dentro de las etiquetas <body> son hijos del cuerpo. Pero como con todo hijo del nodo cuerpo, las
etiquetas <article> son colocadas una después de la otra, ya que cada una de ellas es una parte
independiente de <section>.
Como hemos dicho, la estructura HTML puede ser descrita como un árbol, con el elemento <html> de
raíz. Otra forma de describir las relaciones entre los elementos es denominarlos, padres, hijos o
hermanos según la posición en la estructura del árbol. Por ejemplo, en un documento HTML típico, el
elemento <body> es el hijo del elemento <html> y hermano del elemento <head>. Tanto, <body>
como <head>, tiene el elemento <html> como padre.
El elemento <article> no sólo habla de artículos. <article> está creado para contener una unidad
independiente de contenido, por lo que puede llevar un post de un foro, un artículo de una revista, una
entrada de un blog, un comentario de un usuario, etc. Este elemento agrupará unidades de información
relacionadas entre sí, sin tener en cuenta la naturaleza de la información.
Como parte independiente del documento, el contenido de cada elemento <article> tendrá su estructura
independiente. Para definir esta estructura podemos sacar ventaja a la versatilidad de las etiquetas
<header> y <footer> ya estudiadas anteriormente. Estas etiquetas son portables y pueden ser utilizadas
fuera del cuerpo, en todas las secciones del documento.
<!DOCTYPE html>
<html lang="es">
<head>

</head>
<body>
<header>
</header>
<nav>
<ul>
</ul>
</nav>
<section>
<article>
<header>
<h1>VIDEO TUTORIALES HTML</h1>
</header>
Tutoriales de HTML para principiantes o iniciación. Aquí aprenderemos desde cero .
Algunos de los conceptos que veremos son básico, pero los veremos siempre en el entorno
web.
<footer>
<p>comments (0)</p>
</footer>
</article>
<article>
<header>
<h1>VIDEO TUTORIALES CSS</h1>
</header>
Tutoriales de CSS para principiantes. Aquí aprenderemos como utilizar el lenguaje de estilos
en cascada CSS.
<footer>
<p>comments (0)</p>
</footer>
</article>
</section>
<aside >
English Version
</aside>
<footer>
</footer>
</body>
</html>

Esto sería un ejemplo de una unidad de información creada con <article>, con una estructura propia.
Primero con la etiqueta <header> que contiene el título definido con <h1>. A continuación el
contenido propiamente dicho, un texto describiendo el tutorial. Y finalmente, después del texto, la
etiqueta <footer> especificando el número de comentarios.
Contenido del cuerpo. Etiqueta hgroup
Ya hemos incorporado etiquetas <h1> para especificar el título, dentro de un elemento <header>, al
principio del cuerpo o al principio de cada <article>.
<h1> son necesarios para crear el encabezado de cada parte del documento. A veces necesitamos
también añadir subtítulos o más información para describir el contenido de la página web o de alguna
sección. <header> está hecho para incluir otros elementos - como por ejemplo, una tabla de
contenidos, formularios de búsqueda, logos o textos cortos.
Para construir el header, podemos utilizar las ventajas que nos dan el resto de las etiquetas H: <h1>,
<h2>, <h3>, <h4>, <h5> y <h6>. Pero para propósitos de procesamiento interno, y para evitar generar
múltiples secciones o subsecciones durante la interpretación del documento, estas etiquetas se deben
agrupar. Para esto el HTML5, proporciona <hgroup>.
<hgroup>
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
</ul>
</nav>
<section>

<article>
<header>
<hgroup>
<h1>VIDEO TUTORIALES HTML </h1>
<h2>Primer programa, con Visual Studio Code en Español. Como maquetar con HTML
</h2>
</hgroup>
</header>
Este tutorial es el primero de una serie de tutoriales en los que aprenderemos los conceptos
básicos del lenguaje HTML.
<footer>
<p>comments (0)</p>
</footer>
</article>
</section>
<aside >
English Version
</aside>
<footer>
</footer>
</body>
</html>
Las etiquetas H deben guardar su jerarquía, lo que significa que primero se declara el título con la
etiqueta <h1>, y después se utiliza el <h2> para el subtítulo, etc. Sin embargo, al contrario de versiones
más antiguas de HTML, HTML5 nos permite reutilizar las etiquetas H y construir esta jerarquía las
veces que se quiera en cada sección del documento.
El elemento <hgroup> es necesario cuando tenemos un título y subtítulo o más de una etiqueta H junta
en el mismo <header>. Este elemento sólo puede contener etiquetas H. Si solamente tenemos una
etiqueta <h1>, no hace falta agruparlo. Por ejemplo en el <header> del cuerpo no hemos utilizado este
elemento ya que sólo tenemos un elemento H en el interior. Hay que recordar que el elemento
<hgroup> está hecho para agrupar etiquetas H, tal y como indica su nombre.
Los navegadores y programas que ejecutan y renderizan páginas web, leen el código HTML y crean su
propia estructura interna para interpretar y procesar cada elemento. Esta estructura interna se divide en
secciones que no tienen relación con las divisiones en el diseño o en el elemento <section>. Estas son
secciones conceptuales generadas durante la interpretación del código.
El elemento <header> no crea solamente una de estas secciones conceptuales; esto significa que los
elementos dentro del <header> representarán diferentes niveles y pueden generar internamente
diferentes secciones. El elemento <hgroup> se creó con el propósito de agrupar las etiquetas H y así
evitar que el navegador hiciera malas interpretaciones.

Contenido del cuerpo. Elemento Figure
La etiqueta <figure> ha sido creada para ayudarnos a ser más específicos en la declaración del
contenido del documento. Antes que se introdujera este elemento, no podíamos identificar el contenido
que era parte de la información pero independiente a la vez como por ejemplo las imágenes,
ilustraciones, videos, etc.
Normalmente estos elementos son parte del contenido principal pero se pueden mover sin perjudicar al
flujo del documento. Cuando existe este tipo de información, hay que utilizar las etiquetas <figure>
para identificarlas.
<figure>
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>VIDEO TUTORIALES HTML </h1>
<h2>Primer programa, con Visual Studio Code en Español. Como maquetar con HTML
</h2>
</hgroup>
</header>
<figure>
<iframe src="http://www.youtube.com/embed/RUTadelVideo"></iframe>
<figcaption>

Este es el video del primer tutorial de HTML para principiantes.
</figcaption>
</figure>
<footer>
<p>comments (0)</p>
</footer>
</article>
</section>
<aside >
English Version
</aside>
<footer>
</footer>
</body>
</html>
En el ejemplo, hemos insertado un video (<iframe
src="http://www.youtube.com/embed/RUTadelVideo"></iframe>), después del texto. Esto se hace
frecuentemente; comúnmente el texto se enriquece con imágenes o videos.
Las etiquetas <figure> permite encapsular estos complementos visuales y diferenciarlos así del resto
del contenido.
En el código que vemos en el ejemplo, podemos ver un elemento extra dentro de <figure>.
Comúnmente las unidades de información como imágenes o videos se describen con un texto corto
debajo. HTML5 nos provee con un elemento para colocar e identificar esta leyenda.
Las etiquetas <figcaption> encapsulan la leyenda relacionada a la <figure> y establece una relación
entre los dos elementos y el contenido.
Audio
Otro elemento que se agrega al HTML5 es el AUDIO. El objetivo de esta etiqueta es permitir la carga y
ejecución de archivos de audio sin requerir un plug-in de Flash, Silverlight o Java.
El comité de estandarización W3C deja abierto a cada empresa que desarrolla navegadores los formatos
que quieran soportar (así tenemos que algunos soportan mp3, wav, ogg, au)
Un ejemplo de disponer el elemento audio dentro de una página sería:
<audio src="sonido.ogg" autoplay controls loop></audio>
Las propiedades que podemos utilizar con la marca audio son:

src: La URL donde se almacena el archivo de audio. Si no definimos la URL la busca en el
mismo directorio donde se almacena la página.
autoplay: En caso de estar presente el archivo se ejecuta automáticamente luego de cargarse la
página sin requerir la intervención del visitante.
loop: El archivo de audio se ejecuta una y otra vez.
controls: Indica que se deben mostrar la interface visual del control en la página (este control
permite al visitante arrancar el audio, detenerlo, desplazarse etc.)
autobuffer: En caso de estar presente indica que primero debe descargarse el archivo en el
cliente antes de comenzar a ejecutarse.
Como no hay un formato de audio universalmente adoptado por todos los navegadores el elemento
audio nos permite agregarle distintas fuentes:
<audio controls autoplay loop>
<source src="sonido.ogg">
<source src="sonido.mp3">
<source src="sonido.wav">
<source src="sonido.au">
</audio>
El elemento source indica a través de la propiedad src la ubicación del archivo de audio respectivo. El
orden que disponemos estas fuentes es importante. Primero el navegador busca la primera fuente y
verifica que puede reproducir dicho archivo, en caso negativo pasa a la siguiente fuente.
Una página que muestra el control de audio:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<audio controls>
<source src="http://www.misitioweb.com/mis-audios/gallo.ogg">
<source src="http://www.misitioweb.com/mis-audios/gallo.mp3">
<source src="http://www.misitioweb.com/mis-audios/gallo.wav">
</audio>
</body>
</html>
Según el navegador el control de reproducción de audio puede variar.
En el caso que solo necesitemos reproducir un único formato de archivo podemos evitar los elementos
HTML "source" y disponer la propiedad src directamente en la etiqueta "audio":

<audio controls src="http://www.misitioweb.com/mis-audios/gallo.mp3">
</audio>
Video.
El elemento VIDEO permite mostrar un video sin la necesidad de plugin (Flash). En este momento los
navegadores permiten mostrar formatos como mp4, webm y ogv.
FireFox permite mostrar videos en formato ogv (formato de vídeo de código abierto Ogg/Theora.)
Luego para visualizar un video con este formato en FireFox tenemos:
<video width="640" height="360"
src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv"
controls>
Este navegador no permite tag video
</video>
Las propiedades más importantes de la marca video son:
src: Dirección donde se almacena el video.
controls: Se visualiza el panel de control del video: botón de inicio, barra de avance del video
etc.
autoplay: El video se inicia inmediatamente luego que la página se carga en el navegador.
width: Ancho en píxeles del video.
height: Alto en píxeles del video.
Como no hay un formato de video universalmente adoptado por todos los navegadores el elemento
video nos permite agregarle distintas fuentes:
<video width="640" height="360" controls>
<source src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv">
<source src="http://videos.mozilla.org/firefox/3.5/overview/overview.mp4">
</video>
Esto es similar al elemento AUDIO visto anteriormente.
La siguiente página muestra un video llamado "video1.mp4":
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video width="640" height="360"
controls

src="http://www.misitioweb.com/mis-videos/video1.mp4">
</video>
</body>
</html>
Nuevamente según el navegador nos muestra una interfaz visual distinta, pero nos permite reproducir el
video.
Las etiquetas más utilizadas
Hay un conjunto de etiquetas que se utilizan a menudo:
 Enlaces a páginas web locales o externas.<a href="https://www.google.com" >Enlace</a>
 Imágenes web. <img src="/images/tutoriales/raspberry/truco2.png" />
 Líneas horizontales. <hr>
 Salto de línea. <br>
 Citar un texto. <blockquote>
 División o bloque.<div>Bloque de contenido</div>
 Listas no numerada de items. <ul><li>Item 1</li><li>Item 2</li></ul>
 Listas numerada de items. <ol><li>Item 1</li><li>Item 2</li></ol>
 Texto en negrita. <strong>texto</strong>

HTML5- Formularios. Nuevos tipos de Input.
La web 2.0 se centra en el usuario. Y por ello hay que hacer las interfaces más intuitivas, más naturales,
más prácticas y más estéticas.
Los formularios son las interfaces más importantes; permiten al usuario insertar datos, tomar
decisiones, comunicar información y cambiar el comportamiento de una aplicación.
Durante los últimos años se han creado códigos adaptados y librerías para procesar los formularios
desde los ordenadores de los usuarios. HTML5 hace que estas propiedades sean estándar, aportando
nuevos atributos, elementos y un API completo.
Actualmente la capacidad para procesar la información en los formularios en tiempo real se ha
incorporado a los navegadores y está completamente estandarizado.
El elemento <input>
El elemento más importante de un formulario es <input>. Este puede cambiar sus propiedades gracias
al atributo type, el cual determina que tipo de dato debe insertar el usuario.
Anteriormente los tipos disponibles eran texto multipropósito y algunos más específicos, como
contraseña (password) y enviar (submit). HTML5 ha aumentado el número de opciones disponibles,
incrementando de esta manera las posibilidades para este elemento.
En HTML5, estos nuevos tipos, están especificando que tipo de dato se espera y además le está
diciendo al navegador que hacer con la información recibida. El navegador procesará los datos del
input teniendo en cuenta el valor del atributo y validará o no la entrada de la información.
Tipo Email (correo electrónico)
Casi todos los formularios tienen un campo input para insertar una dirección de correo electrónico.
Hasta ahora, el único tipo disponible para este tipo de datos era el texto (text). El type text (tipo texto),
representa un texto general, no un dato específico, por lo que había que controlar con Javascript si el
texto insertado era una dirección de correo electrónica válida. Ahora es el navegador el que se encarga
de validar la información insertada:
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
</head>
<body>
<section id="form">
<form name="miform" id="miform" method="get">
<input type="email" name="micorreo" id="micorreo">
<input type="submit" value="Enviar">

</form>
</section>
</body>
</html>
El texto insertado en el campo es examinado por el navegador y validado o no como correo electrónico.
En este caso, reconoce que no es una dirección correcta y salta un mensaje de error. Las respuestas de
cada navegador no vienen determinadas por las especificaciones HTML5.
Tipo Search (Búsqueda)
El tipo search no controla la entrada de la información; simplemente es una indicación para los
navegadores. Algunos navegadores cambian el diseño de este elemento, para señalar al usuario la
función del campo.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<section id="form">
Buscar en mi sitio web:<input type="search" name="mibusqueda" id="mibusqueda">
</form>
</section>
</body>
</html>
Lo que obtenemos es un campo que se comporta como un campo de texto normal.
Tipo URL.
Funciona exactamente igual que el email, pero para una dirección de una página web. Esta creado para
recibir únicamente URLs absolutos y retornará un mensaje de error si el valor es inválido.
Tipo Tel (Teléfono.)
Para insertar números de teléfono. A diferencia de los tipos email y url, el tipo tel, no necesita una
sintaxis específica. Es una indicación para el navegador, por si la aplicación necesita hacer ajustes
teniendo en cuenta el dispositivo en el que se está ejecutando. Por ejemplo, un smartphone como el
iPhone convierte su teclado a números de teléfono.

Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<section id="form">
Telefono: <input type="tel" name="mitelefono" id="mitelefono">
</form>
</section>
</body>
</html>
Tipo Number.
Como indica su nombre, el tipo number sólo es válido cuando recibe un dato numérico. A continuación
tenemos nuevos atributos que pueden ser útiles para este campo:
min—El valor de este atributo determina el valor mínimo aceptado para este campo.
max—El valor de este atributo determina el valor máximo aceptado para este campo.
step—El valor de este atributo determina los intervalos en los que los valores del campo son
incrementados y disminuidos. Por ejemplo, si se define un step de 5, con un mínimo de 0 y un máximo
de 10, el navegador no permite especificar un valor entre 0 y 5 o entre 5 y 10.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<section id="form">
Insertar un numero (entre 0 y 10):
<input type="number" name="minumber" id="minumber" min="0" max="10" step="3">

</form>
</section>
</body>
</html>
Donde introducimos una letra y no un número, salta un mensaje de error. También aparece un mensaje
de error cuando insertamos un número que está fuera del intervalo de 3 que hemos definido con el
atributo step=3.
Tipo Range.
Este tipo hace que el navegador construya un nuevo control. Este control deja escoger al usuario el
valor de entre un rango de números. Normalmente se muestra con un deslizador para mover los valores
de arriba a abajo o con unas flechas, pero no existe un diseño estándar aún.
Este tipo utiliza los atributos min y max para definir los límites del rango. También puede tener el
atributo step para definir los valores del intervalo en los que se incrementará o disminuirá el rango.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<section id="form">
Puntos: 0 <input type="range" name="misnumeros" id="misnumeros" min="0" max="10" step="5">
10
</form>
</section>
</body>
</html>
Tipo Date.
Este tipo también generará un control nuevo. En este caso, se incluyó para mejorar la inserción de
fechas. Un ejemplo es cuando el usuario está eligiendo la fecha de un vuelo, en este caso, el tipo date
hará que el navegador nos muestre un calendario y que nosotros sólo tengamos que insertar el elemento
<input> en el documento para que le aparezca al usuario. La interface no se declara en la
especificación. Cada navegador suministra su propia interface y lo hará de acuerdo con el dispositivo
en el que ejecute la aplicación. Normalmente, el valor esperado y generado tiene la sintaxis
año/mes/día.

Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<section id="form">
<input type="date" name="mifecha" id="mifecha">
</form>
</section>
</body>
</html>
Tipo Week.
Este tipo suministra una interface similar a la de date, pero sólo para escoger semanas completas.
Normalmente el valor esperado tiene la sintaxis 2014-W10, donde 2014 es el año y el 10 es el número
de la semana.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>

<section id="form">
Seleccione una semana:
<input type="week" name="misemana" id="misemana">
</form>
</section>
</body>
</html>
Tipo Month.
Es similar al tipo anterior, aunque para un mes completo. El valor esperado tiene la sintaxis año-mes.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<section id="form">
Seleccione un mes: <input type="month" name="mimes" id="mimes">
</form>
</section>
</body>
</html>
Tipo Time
El tipo time es similar a date, pero para fijar la hora. Normalmente tiene la sintaxis
hora:minutos:segundos, pero también puede ser hora:minutos. Dependerá del navegador.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<section id="form">
Seleccione una hora: <input type="time" name="mihora" id="mihora">
</form>

</section>
</body>
</html>
Tipo Datetime-local
El tipo datetime-local es un tipo de datetime (fecha y hora) sin zona horaria.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<section id="form">
Inserte la fecha y la hora de su cumpleanos:
<input type="datetime-local" name="mihorafechalocal" id="mihorafechalocal">
</form>
</section>
</body>
</html>
Tipo Datetime
El tipo datetime es para fecha y hora, incluyendo zona horaria.
<input type="datetime" name="mifechahora" id="mifechahora">
Tipo Color
Además de los tipos para las fechas y horas, también hay un tipo que nos suministra una interface
predefinida para que el usuario pueda elegir un color. Normalmente, el valor esperado para este campo
es un número hexadecimal, como #00FF00.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<section id="form">

Seleccione un color:
<input type="color" name="micolor" id="micolor">
</form>
</section>
</body>
</html>
No existe una interface estándar para el color determinada por HTML5, pero los navegadores suelen
mostrar una tabla de colores.
FORM (autofocus)
En HTML5 disponemos una propiedad en los controles de los formularios que nos permiten indicar
cual control tendrá foco (es decir que aparecerá el cursor en su interior.)
Anteriormente esta actividad se la realizaba mediante Javascript, pero como vemos varios tipos de
problemas ahora se puede resolver directamente con HTML.
Para que aparezca un control con foco lo único que tenemos que hacer es disponer la propiedad
autofocus sin asignarle valor.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Usuario:
<input type="text" id="usuario">
<br>
Clave:
<input type="password" id="clave">
<br>
Edad:
<input type="text" id="edad" autofocus>
<br>
<input type="submit" value="Confirmar">
</form>
</body>
</html>

Podemos observar que lo único que hemos agregado al control donde se ingresa la edad es la propiedad
autofocus:
<input type="text" id="edad" autofocus>
Si a ningún control se agrega la propiedad autofocus por defecto no aparece ningún control con foco y
será el usuario que tendrá que seleccionar uno.
Solo tiene sentido incluir la propiedad autofocus a un único control de una página web, sino el
resultado es impredecible.
FORM (placeholder)
Normalmente cuando creamos un formulario previo a cada control disponemos un mensaje indicando
que dato debe cargar el usuario en el mismo, en algunas circunstancias dicha información puede quedar
no lo suficientemente clara. Mediante la propiedad placeholder podemos disponer más información
directamente dentro del control generalmente con un ejemplo de dato a ingresar. El contenido del
control HTML inicial se borra inmediatamente luego que el operador ingresa un caracter.
Es importante tener en cuenta que debemos utilizar la propiedad placeholder si la información que
disponemos en ella despeja de dudas al operador.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Patente:
<input type="text" id="patente" placeholder="AB123CD">
<br>
<input type="submit" value="Confirmar">
</form>
</body>
</html>
Como vemos al control que deseamos agregar esta marca de agua (o mensaje inicial) inicializamos la
propiedad placeholder:
<input type="text" id="patente" placeholder="AB123CD">
Luego en el navegador podemos observar la marca de agua.

FORM (required)
Otra facilidad que nos proporciona el HTML5 es la validación de contenido obligatorio de un control.
Mediante la propiedad required obligamos e informamos al operador que el control se debe cargar
obligatoriamente (por ejemplo el nombre de usuario, clave, estudios etc.)
Esto se hacía únicamente con Javascript pero ahora agregando la propiedad required al control la
validación de contenido se hace automáticamente.
Nuevamente estamos en presencia de una propiedad que no requiere que le asignemos un valor, con
solo hacer referencia a la misma dentro del control el navegador verificará que su contenido esté
cargado previo a enviarlo al servidor.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form action="#">
Usuario:
<input type="text" id="usuario" required>
<br>
Clave:
<input type="password" id="clave" required>
<br>
<br>
<input type="submit">
</form>
</body>
</html>
Podemos observar que solo hemos agregado la propiedad required a cada control HTML que
necesitamos que el operador no deje vacío:
Usuario:
<input type="text" id="usuario" required>
<br>
Clave:
<input type="password" id="clave" required>
Luego si el operador carga el nombre e intenta dejar la clave vacía al presionar el botón para enviar los
datos al servidor (submit) el navegador se encargará de mostrar un mensaje indicando que no debe
dejar el campo de la clave vacía.

El mensaje que aparece e informa al operador es propio de cada navegador, pero no deja ninguna duda
de la acción que debe tomar el operador.

Ejercicios para HTML 5 y CSS 3.
1. Código base:
<!DOCTYPE html>
<html>
<head>
<title>El título de la página</title>
</head>
<body>
<p><strong>HTML</strong> son las siglas de <em>HyperText Markup
Language</em>, que puede traducirse como lenguaje de marcas o marcado de
hipertexto.
</p>
<p>El lenguaje HTML se emplea para crear las páginas web. Es muy fácil ver el
código HTML de una página web, la opción exacta cambia de un navegador a otro y
también puede cambiar de una versión a otra de un mismo navegador, pero suelen tener
un nombre similar.
</p>
<p>HTML se compone de etiquetas que se escriben entre los símbolos menor que y
mayor que.</p>
<p>Los inicios del lenguaje HTML se remontan al año 1990, cuando Tim Berners-Lee
creó la primera página web.</p>
</body>
</html>
En el código base que se te proporciona debes realizar los siguientes cambios:
1. Las siglas HTML deben aparecer como texto destacado en toda la página.
2. Tim Berners-Lee debe aparecer como texto enfatizado en toda la página.
3. Debes añadir el siguiente contenido:
1. Un encabezado de nivel 1 con el texto "HTML" antes de "HTML son las siglas
de..."
2. Un encabezado de nivel 2 con el texto "Historia de HTML" antes de "Los inicios
del lenguaje HTML..."
3. Un encabezado de nivel 2 con el texto "Versiones de HTML" antes de dos
nuevos párrafos que contienen el texto "Tim Berners-Lee definió la primera versión de
HTML en el año 1991" y "En la actualidad, la última versión de HTML es HTML5".

Solución:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<h1>HTML</h1>
<p><strong>HTML</strong> son las siglas de <em>HyperText Markup
Language</em>, que puede traducirse como lenguaje de marcas o marcado de
hipertexto.
</p>
<p>El lenguaje <strong>HTML</strong> se emplea para crear las páginas web. Es
muy fácil ver el código <strong>HTML</strong> de una página web, la opción exacta
cambia de un navegador a otro y también puede cambiar de una versión a otra de un
mismo navegador, pero suelen tener un nombre similar.
</p>
<p><strong>HTML</strong> se compone de etiquetas que se escriben entre los
símbolos menor que y mayor que.</p>
<h2>Historia de HTML</h2>
<p>Los inicios del lenguaje <strong>HTML</strong> se remontan al año 1990,
cuando <em>Tim Berners-Lee</em> creó la primera página web.</p>
<h2>Versiones de HTML</h2>
<p><em>Tim Berners-Lee</em> definió la primera versión de
<strong>HTML</strong> en el año 1991.</p>
<p>En la actualidad, la última versión de <strong>HTML</strong> es HTML5.</p>
</body>
</html>
2.

HTML 5

Más contenido relacionado

La actualidad más candente

Similar a HTML 5

Más de Facultad de Ciencias y Sistemas

Último

HTML 5