Taller de HTML5

Michelle Torres

Consultor TI

Índice

Requisitos para trabajar
HTML
CSS
Etiquetas en HTML
Estructura del documento HTML 5
Guardar el archivo

Índice

Comentarios
Texto en HTML
Párrafos
Saltos de línea
Títulos
Citas

Índice

Énfasis al texto
Texto preformateado
Acrónimos y abreviaturas
Etiquetas de frases
Enlaces
Listas

Índice

Imágenes
Tablas
Formularios
Maquetado en HTML5
Nuevos elementos multimedia

Requisitos para trabajar

Editor de texto plano o un editor HTML como Bluefish
Navegadores que funcionen bien y cumplan con los estándares: Chrome, Firefox, Opera
Un navegador que funcione mal y no cumpla con los estándares

HTML

HyperText Markup Language. Es la quinta revisión la cual es regulada por el Consorcio W3C
Es un lenguaje semántico, lo que quiere decir que no definimos el aspecto de las cosas, sino lo que significan.
En el título de la página, en lugar de decir "Lo quiero grande en letras rojas", le indicamos al navegador que "Este es el título principal de la página. Haz algo para que destaque".

CSS

CSS son las siglas de Cascading Style Sheets y son un regalo del cielo. Si el documento HTML está bien estructurado, podemos cambiar totalmente su apariencia sin tocar una sola línea de código en el archivo .html.
Esto nos permite separar el contenido del aspecto, y es de gran importancia.

Etiquetas en HTML

HTML está basado en etiquetas. Una etiqueta tiene la siguiente forma:

<etiqueta> Algo aquí dentro </etiqueta>

La etiqueta para poner el título principal en la página es <h1>. Entonces nos quedará:
```
<h1> Este es un título </h1>
```

Etiquetas en HTML

Como ves, <h1> marca el inicio de la etiqueta, mientras que </h1> se encarga de cerrarla

Hay etiquetas que pueden modificarse mediante atributos. Su estructura es la siguiente:

```
<etiqueta atributo="valor">
```
Por ultimo, comentar un par de reglas que siguen las etiquetas:

Siempre en minúsculas
Los atributos entre comillas

Estructura del documento HTML 5

El DOCTYPE

Esta declaración debe ser lo primero en un documento HTML. No es un tag de HTML, es una instrucción para indicarle al navegador en que versión de HTML esta escrito el documento.

```
<!DOCTYPE html>
```
La raíz HTML

Es el contenedor de todos los elementos HTML. Se puede/debe llevar la etiqueta lang para indicar el lenguaje en el cual esta el contenido del documento.

```
<html lang="es">
```

Estructura del documento HTML 5

La cabecera

Es un contenedor para todos los elementos cabecera.

El elemento <head> debe incluir el título del documento y puede incluir scripts, estilos, meta información y mas.
Los elementos utilizados dentro de <head> son:

Cabecera del documento HTML5

<title> Es obligatoria
<style> Se usa para definir los estilos para el documento, es decir el CSS. Lleva el atributo type con el valor text/css
<base> Cambia la dirección base de las direcciones y la carga de archivos. Se puede especificar el lugar de apertura para las URL con el atributo target y los valores _blank, _self, _parent y _top
<link> Se utiliza para hacer la carga de archivos externos. Utiliza los atributos: rel para indicar la relación, type para especificar el tipo de documento, href para indicar la ubicación.

Cabecera del documento HTML5

<meta> Funciona para otorgar información de los datos del documento. Debe tener el atributo name para indicar el nombre del metadato y los otros valores a otorgar son charset, content y http-equiv.
<script> Permite introducir scripts para su uso dentro del documento. Lleva el atributo type donde se indica el tipo de script.
<noscript> Mostrará el contenido dentro de estas etiquetas en caso de que el navegador no soporte los scripts.

Estructura del documento HTML 5

El cuerpo

Contiene todo el código que se debe mostrar dentro del navegador.
```
<body>
```

Estructura del documento HTML 5

Por último deberemos cerrar las etiquetas del body y de html.
```
</body>
</html>
```

Estructura del documento HTML 5

<!DOCTYPE html>
<html lang="es">
<head>
   <title>Título de la página</title>
   <style type="text/css">
      h1 {color:red}
      p {color:blue}
   </style>
   <link rel="stylesheet" type="text/css" href="style.css" />
   <meta name="description" content="Taller de HTML5" />
   <meta name="keywords" content="HTML5, Taller, CUCEI, DivecFest" />

Estructura del documento HTML 5

   <meta name="author" content="Michelle Torres" />
   <meta charset="UTF-8" /><script type="text/javascript">
      document.write("Hello World!")
   </script>
   <noscript>Tu navegador no soporta JavaScript!</noscript>
</head>
<body>
   Lo escrito aquí aparecerá en el navegador.
</body>
</html>

Guardar el archivo

El archivo se debe guardar en formato html.

Texto en HTML

HTML no cuenta con soporte para algunos símbolos, es por esto que usaremos los símbolos & y ; para denotar el inicio y final respectivamente de un símbolo especial.
Hay tablas de equivalencias para estos símbolos, a continuación pongo solo algunos:

© ©
& &
< <
> >
® ®
¼ ¼
½ ½
¾ ¾

Párrafos

Los párrafos sirven para estructurar el contenido. En la web funcionan igual que en la vida real: contienen una o más frases con relación entre sí.
Para crear un párrafo, metemos texto entre las etiquetas <p> y </p>.

<p>Este es un párrafo de una línea</p>
<p>Este es un que contiene varias lineas y se ajustará 
al tamaño de su contenedor</p>

Saltos de linea

A veces, dentro de un mismo párrafo necesitamos cambiar de línea. Esto lo conseguimos con la etiqueta <br />

<p>Una linea<br />
otra linea<br />
una ultima linea</p>

Títulos

Los títulos nos sirven para agrupar información.
Para conseguir esto, tenemos las etiquetas <hx> y </hx>, donde x es un número del 1 al 6. <h1> corresponde al título más importante

<h1>Título principal</h1>
<h2>Subtítulo</h2>

Citas

Los blockquotes sirven para mostrar un bloque que indica que lo que hay en el interior es una cita.
Las citas sirven para indicar el titulo de un trabajo, ya sea un libro, un paper, canción, etc.

<cite>El Señor de los Anillos</cite>
<blockquote>
<p>Renovada será la hoja que se ha roto.</p>
</blockquote>

Énfasis al texto

Para dar énfasis a un texto disponemos de la etiqueta <em>. Si queremos dar un énfasis más fuerte, utilizaremos <strong>.

<p>
  <em>Remarcado</em> sin remarcar
  y continua <strong>otro</strong>.
</p>

Los navegadores suelen representar <em> con cursiva y <strong> con negrita.

Texto preformateado

Recordemos que HTML ignora espacios en blanco consecutivos, tabuladores, saltos de línea etc.
Si nos interesa que estas cosas se tengan en cuenta, tenemos la etiqueta <pre>

<pre>
   Este texto mostrará la tabulación
Este será otro renglón
   Todo estos espacios        también aparecerán
</pre>

Acrónimos y abreviaturas

Para explicar el significado de los acrónimos y abreviaturas usaremos <abbr>.
El efecto es: al pasar el ratón por encima de la palabra, nos aparece un rectángulo de ayuda con lo que significan.
Necesita un atributo para funcionar, y es title.

<p>
Mi computadora tiene 6 <abbr title="Gigabytes">GB</abbr> 
de memoria <abbr title="Random Access Memory">RAM</abbr>.
</p>

Etiquetas de frases

Existen otras etiquetas que nos ayudarán a indicar el tipo de contenido dentro de las mismas.

<dfn> Definición de un término
<code> Sección de código de computadora
<samp> Ejemplo de salida de un código
<kbd> Entrada de teclado
<var> Variables

Definición de un término

<p>Un <dfn>archivo de hojas de estilo en cascada</dfn> 
es un documento con atributos presentacionales agrupados en clases.</p>

Sección de código de computadora

<p>La función siguiente muestra un mensaje al usuario:</p>
<code>
function mostrarMsj(msj)<br />
{<br />
 alert("El mensaje es: "+msj);<br />
 mostrado = true;<br />
}<br />
</code>
<p>Pero para que funcione correctamente necesitas declarar 
primero la variable global "<code>var mostrado = false;</code>".</p>

Ejemplo de salida de un código

<p>Cuando presionas la tecla "enter", el programa procesa 
la información y muestra los resultados. En este caso el mensaje 
fue: <samp>La operación ha retornado falso</samp></p>

Entrada de teclado

<p>Para ejecutar el comando ingrese "<kbd>exec -c</kbd>" 
en el símbolo de sistema.</p>

Variables

<p>El resultado de la operación se ha guardado en la variable 
"<var>result_var</var>" antes de la salida.<p>

Enlaces

Los enlaces son ligas a otras páginas las cuales pueden ser

Internas
Externas
A una sección en la misma página
A un correo

Enlace a una página externa

Si queremos un link a una página que está en otro servidor, usamos <a> de esta forma:

<a href="http://www.loquesea.com">
Texto del enlace
</a>

Cuando queremos indicar en donde se abrirá esa página utilizamos el atributo target, donde los posibles valores son los mismos vistos en la etiqueta <base> _blank, _parent, _self y _top

<a href="http://www.google.com" target="_blank">
Google en otra ventana
</a>

Enlace a una página local

Se utiliza la misma etiqueta <a> y se indica la ruta del archivo en el mismo servidor

<a href="otro.html" target="_blank">
Otra pagina
</a>

Enlace a un correo electrónico

Podemos hacer un enlace que al pulsar sobre él, se abra automáticamente una ventana del cliente de correo electrónico que tenga el usuario para que escriba un mensaje a esa dirección.
Se utiliza la misma etiqueta <a> y se indica el correo electrónico

<a href="mailto:correo@servidor.com">
Contacto
</a>

Enlace en la misma página

Las anclas nos permiten enlazar a una posición concreta de la página.
En el punto al que queremos saltar, insertamos un ancla (usamos el atributo id):
```
<a id="nombre_ancla" />
```
Para crear un link que nos lleve a esa ancla:

<a href="#nombre_ancla">
Texto del enlace
</a>

Listas

Cuando necesitamos presentar en un texto una serie de conceptos o ideas utilizamos listas.
Las listas pueden ser ordenadas o no serlo. Las que no son ordenadas, a cada término se le antepone una viñeta. Las ordenadas tienen un número en cada término.

Listas desordenadas

La etiqueta <ul> indica al navegador que cree una lista con viñetas no ordenada. La etiqueta <li> indica que ese es un ítem de la lista

<ul>
  <li>Esto es un punto.</li>
  <li>Este es otro.</li>
  <li>Y este es otro diferente.</li>
</ul>

Listas ordenadas

La etiqueta <ol> indica al navegador que cree una lista numerada. Al igual que con las listas desordenadas, se utiliza la etiqueta <li> para cada ítem de la lista

<ol>
  <li>Esto es el numero 1.</li>
  <li>Este sería el 2</li>
  <li>Y por último el 3</li>
</ol>

Listas ordenadas

Dento de la etiqueta <li> se utiliza el atributo value para indicar en que número se pondrá la numeración

<ol>
   <li value="20">Este sera el numero 20. </li>
   <li>Este sera el 21. </li>
   <li>Este sera el 22. Y asi sucesivamente. </li>
</ol>

Listas de definición

Las listas de definición se diferencian de las anteriores en que cada "ítem" está compuesto por un par de elementos: un término y su definición.
Se usan estas etiquetas: <dl> para marcar la lista, <dt> para un término y <dd> para su definición.

Listas de definición

<dl>
   <dt>
      <abbr title="Hoja de estilos en cascada" >CSS</abbr>
   </dt>
   <dd>
      Son conjuntos de instrucciones, a veces en forma 
      de archivo anexo, que se asocian a los archivos 
      de texto y se ocupan de los aspectos de formato 
      y de presentación de los contenidos
   </dd>
</dl>

Imágenes

Podemos usar tres formatos de imagen: GIF, JPEG y PNG.
El JPEG es el más adecuado para imágenes con muchos colores, como fotografías, y que no tengan grandes áreas de colores planos.
Las imágenes GIF son de sólo 8 bits (256 colores), pero podemos usar un color transparente.
El formato PNG es el estándar y podemos elegir varias profundidades de paleta (número de colores). Además, podemos utilizar un canal alpha para crear transparencias.

Imágenes

Para poner una imagen hacemos uso de la etiqueta <img> con unos cuantos atributos:

<img src="image.gif" width="ancho"
height="alto" alt="descripcion" />

Los atributos width y height nos permiten establecer el ancho y el alto de la imagen.

Imágenes

Podemos indicar un valor en píxeles o en tanto por ciento.
width="200" muestra la imagen con 200 píxeles de ancho
width="200%" hace que se vea al doble de su anchura original.
Es conveniente que pongamos las dimensiones en píxeles reales, ya que ahorramos tiempo al navegador a la hora de maquetar la página.

Imágenes como links

Ya hemos visto como generar links, y como cargar imágenes. Ahora combinemos estas dos cosas.

<a href="http://pagina.com">
	<img src="banner.gif" width="200" height="40"
	alt="Imagen banner" />
</a>

Thumbnails

Thumbnail es una imagen más pequeña que la original, de modo que al hacer clic sobre ella, cargamos la imagen a tamaño completo.

<a href="matrix.jpg" title="Wallpaper de Trinity">
<img src="matrix.jpg" width="100" height="50" 
alt="Trinity" />
</a>

Si nuestro wallpaper de Trinity ocupa 100Kb (o más), tendremos esos 100Kb ¡como thumbnail!

Thumbnails

Tenemos que escalar la imagen y guardar esta copia más pequeña (de 5Kb, por ejemplo):

<a href="matrix.jpg" title="Wallpaper de Trinity">
<img src="matrix_thumb.jpg" width="100" height="50" 
alt="Trinity" />
</a>

Tablas

Las tablas en HTML utilizan varias etiquetas las cuales se describen a continuación
<table> Crea una nueva tabla. Se utiliza el atributo border para indicar el ancho de los bordes.
<caption> Asigna un título a la tabla
<thead> Genera una espacio para indicar el encabezado de la tabla. Aquí dentro se deberán crear las filas y celdas requeridas
<tbody> Genera una espacio para indicar el cuerpo de la tabla. Aquí dentro se deberán crear las filas y celdas requeridas. Pueden existir varios body para poder separar por bloques la tabla.

Tablas

<tfoot> Genera una espacio para indicar el pie de la tabla. Actúa de la misma manera que el thead
<tr> Crea una fila
<th> Crea una celda de encabezamiento
<td> Crea una celda

Tablas

<table>
	<caption>Tabla</caption>
	<thead>
		<tr>
			<th>Nombre</th>
			<th>Celular</th>
			<th>Correo</th>
		</tr>	
	</thead>

Tablas

	<tbody>
	    <tr>
			<td>Juan</td>
			<td>bla</td>
			<td>bla</td>
	    </tr>
	    <tr>
			<td>Pedro</td>
			<td>ble</td>
			<td>ble</td>
	    </tr>
	 </tbody>

Tablas

	 <tbody>
	    <tr>
			<td>Maria</td>
			<td>abc</td>
			<td>abc</td>
	    </tr>
	</tbody>
</table>

Grupos de columnas

Para motivos de formato, se pueden formar grupos de columnas, la etiqueta es <colgroup> y dentro de esta se utiliza la etiqueta <col> por cada columna. Si se desean juntar varias columnas con una misma característica se utiliza el atributo span.

Grupos de columnas

<table>
  <colgroup>
    <col span="2" style="background-color:red" />
    <col style="background-color:yellow" />
  </colgroup>	
  <colgroup>
   <col span="3">
   <col id="dame-un-formato-especial">
  </colgroup>
  
  ...
  
</table>

Fusionar celdas

Podemos fusionar celdas de forma horizontal con el atributo colspan

<table border="1">
  <tr>
	<th colspan="3">Mi dinero</th>  
  </tr>
  <tr>
    <th>Mes</th>
    <th>Gastos</th>
    <th>Ahorros</th>
  </tr>
</table>

Formularios

Los formularios están delimitados con la etiqueta <form>, que permite reunir varios elementos de un formulario, como botones y casillas de texto.
La etiqueta form tiene dos atributos muy importantes:

method Indica la manera en que serán enviados los valores del formulario. Los métodos permitidos son POST y GET.
POST Envía los datos de manera oculta. GET envía los datos agregándolos a la dirección URL y los separa de la URL base con un signo de interrogación
action Indica la ubicación a la cual será enviada la información. Puede ser un correo electrónico un script, inclusive, otra página HTML

Formularios


<form method="post" action="file2.html"></form>

Formularios

Dentro de un formulario se pueden insertar cualquier elemento HTML como texto, botones, tablas y enlaces
Sin embargo, los elementos interactivos son los más interesantes.

Elementos interactivos

input

En esta categoría se encuentran los cuadros de texto, radio button, checkbox, imágenes, carga de archivos, etc. Se recomienda poner un texto para mostrarse como etiqueta por cada input, esto se logra con la etiqueta <label>

button

Son botones a los que se les pueden programar acciones, o utilizar los ya existentes para enviar y resetear.

textarea

Es una cuadro de texto multilinea

Elementos interactivos

select

Genera una lista desplegable, (o simplemente una lista) la cual lleva varios elementos declarados con la etiqueta <option> y estos pueden estar agrupados por medio de la etiqueta <optgroup>

fieldset

Se utiliza para agrupar elementos relacionados en un formulario. Para dar un nombre a este marco se utiliza la etiqueta <legend>

output

Se utiliza para representar el resultado de un calculo, lo cual aún se debe hacer con un script, pero ya de entrada define de donde vienen los datos.

Los input

Ya vimos que existen varios tipos de input, y antes de ver cada uno de ellos hablaremos de las propiedades que podemos setear.
Recordemos que es importante poner un label por cada input, y para esto nuestros input deberán tener un id que les identifique
Igualmente deben tener un nombre que identificará su valor al enviarlo por cualquiera de los dos métodos (POST o GET)

<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre">

checkbox

Permite al usuario seleccionar uno o mas opciones

<input type="checkbox" name="transporte" value="Bici" /> 
Tengo bici<br />
<input type="checkbox" name="transporte" value="Carro" />
Tengo carro

radio

Permite al usuario seleccionar una opción

<input type="radio" name="transporte" value="Bici" /> Tengo bici<br />
<input type="radio" name="transporte" value="Carro" />Tengo carro

date

Permite definir fechas, ya sea indicando la zona horaria o sin indicarla con datetime, y datetime-local
Soportado en Chrome, Opera y Safari

<label for="bday">Cumpleaños</label> 
<input type="date" id="bday" name="bday" />

month

Cuadro de texto para ingresar el mes y el año sin tomar en cuenta la zona horaria.
Soportado en Chrome, Opera y Safari

<label for="mesanio">Ingresa el mes y año de tu cumpleaños</label>
<input type="month" id="mesanio" name="mesanio" />;

time

Cuadro de texto para ingresar una hora
Soportado en Chrome, Opera y Safari

<label for="hr">Ingresa la hora</label>
<input type="time" id="hr" name="hr" />

week

Cuadro de texto para ingresar un número de semana y el año
Soportado en Chrome, Opera y Safari

<label for="wk">Ingresa la semana y el año</label>
<input type="week" id="wk" name="wk" />

email

Permite escribir direcciones de correo, las cuales serán validadas al enviar el formulario
Soportado en Firefox, Chrome y Opera

<label for="mail">Correo</label> 
<input type="email" id="mail" name="mail" />

file

Permite al usuario elegir archivos de su sistema, como el típico botón examinar

<input id="imagen" name="imagen" type="file"
accept="image/gif" />

hidden

Genera un campo no visible para el usuario. Generalmente se utiliza para guardar un valor por default o para guardar un valor generado con un script.

<input type="hidden" id="country" name="country" value="Norway" />

image

Define una imagen con la función de un botón submit

<input type="image" src="boton.jpg" alt="Enviar" />

number

Cuadro de texto para ingresar números. Se pueden definir los números aceptados. Se utilizan los parámetros min, max y step
Soportado en Chrome, Opera y Safari

<label for="num">Ingresa un número entre 1 y 5</label>
<input type="number" id="num" name="num" min="1" max="5" />

range

Control para ingresar un número el cual su valor no debe ser exacto, como en una barra deslizante. Se utilizan los parámetros min, max y step
Soportado en Chrome, Opera y Safari

<label for="pto">Elija el puntaje</label>
<input type="range" id="pto" name="pto" min="1" max="15" />

password

Cuadro de texto para ingresar contraseñas, de modo que los caracteres se mostrarán enmascarados

<label for="pass">Ingresa tu contraseña</label>
<input type="password" id="pass" name="pass" />

search

Cuadro de texto para realizar búsquedas
Soportado en Chrome y Safari

<label for="busq">Búsqueda en google</label>
<input type="search" id="busq" name="busq" />

url

Cuadro de texto para ingresar direcciones web
Soportado en Firefox y Chrome

<label for="web">Ingrese su página</label>
<input type="url" id="web" name="web" />

tel

Cuadro de texto para ingresar teléfonos
Ningún navegador lo reconoce, pero le servirá para hacer validaciones y formatos en el css

<label for="phone">Ingrese tu teléfono</label>
<input type="tel" id="phone" name="phone" />

text

Cuadro de texto por default donde se puede ingresar cualquier valor

<label for="nombre">Ingrese su nombre</label>
<input type="text" id="nombre" name="nombre" />

textarea

Tienen prácticamente las mismas propiedades vistas para los input y también es necesario utilizar un label por cada textarea
Contiene una nueva propiedad en HTML5 para indicar si el texto será enviado con ajustes de línea. Esto se logra dando el valor hard a la propiedad wrap. Cuando se usa esta propiedad, se deben especificar los valores de cols.

<label for="textarea">Etiqueta para el texto</label>
<textarea id="textarea" name="textarea" rows="5" cols="50">Escriba aquí</textarea>

Botones

Con la etiqueta input también se pueden poner botones, pero se recomienda utilizar la etiqueta button para este propósito.
Existen tres diferentes tipos de botones

Los que no hacen nada a menos que se les programa una acción con un script
El de enviar, llamado submit
Para blanquear los valores del formulario llamado reset

<button type="button">Presioname</button>		
<button type="submit">Enviar</button>			
<button type="reset">Limpiar</button>

Select

Sirve para crear una lista de elementos que puede ser desplegable (especificados por las etiquetas OPTION u OPTGROUP dentro de ella)
Los atributos de la etiqueta select son:

name: Representa el nombre asociado con la casilla de texto, que permite su identificación en el par nombre/valor.
disabled: Crea un lista desactivada, que aparece atenuada
size: Si un elemento SELECT se presenta como una lista con desplazamiento ("scrolled list box"), este atributo especifica el número de filas de la lista que deberían ser visibles al mismo tiempo.No es preciso que los agentes visuales presenten un elemento SELECT como una lista ("list box"); pueden usar cualquier otro mecanismo, como por ejemplo un menú desplegable ("drop-down menu").
multiple: Permite al usuario seleccionar varios campos de la lista

Select

Por cada opción a desplegar en la lista se utiliza la etiqueta <option> la cual puede tener como propiedades selected y value.
e pueden además crear grupos de opciones para así clasificarlos con la etiqueta <optgroup>

Select

<select name="OS">
  <option selected value="0"> Elige una opción </option>
  <optgroup label="Microsoft">
  <option value="1">Windows Vista</option>
   <option value="2">Windows 7</option>
   <option value="3">Windows XP</option>
   </optgroup>
   <optgroup label="Linux">
		<option value="10">Fedora</option>
		<option value="11">Debian</option>
		<option value="12">Suse</option>   
   </optgroup>
</select>

Validación de formularios

Con HTML5 viene la opción de hacer las validaciones de formularios de manera nativa
Para que un campo no quede vacio deberemos activar el atributo required
Igualmente si queremos que alguno de los campos no sea validado, activaremos el atributo formnovalidate
Cuando llenas formularios te has dado cuenta que si el navegador lo permite tienes una lista de opciones para autocompletar, eso puede activarse o desactivarse para cada campo con la propiedad autocomplete
Si esto no es suficiente, podremos también validar campos por medio de expresiones regulares con la propiedad pattern.

Validación de formularios

Los elementos pueden ser deshabilitados y también marcados como de solo lectura. Ambos evitan que el usuario pueda modificar el contenido, la diferencia reside en que los campos deshabilitados no pueden ser seleccionados, mientras que los de solo lectura si pueden ser seleccionados.
Los atributos son readonly y disabled
maxlenght se utiliza para especificar la cantidad máxima de caracteres permitidos
Cuando se requiere que el campo ya tenga un valor por default se utiliza el atributo value
HTML 5 introduce el atributo list para indicar opciones predefinidas para el input, aunque no es soportado en muchos navegadores.
Se cuanta tambien con la propiedad placeholder la cual mostrará un texto de ejemplo a lo que deseamos que el usuario escriba, y cuando el elemento obtenga el foco, este texto se borrará.

Validación de formularios

<-- Acepta solo 5 números, es un campo obligatorio y muestra un texto de ejemplo -->
<label for="cp">Ingrese su CP</label> 
<input type="text" id="cp" pattern="[d]{5}" required="required" placeholder="Ejemplo: 45450" /> 

<-- Campo que permite máximo de 10 caracteres -->
<label for="cel">Ingrese su Celular</label> 
<input type="text" id="cel" maxlength="10" /> 

<-- Campo con un valor ya escrito -->
<label for="cel">Ingrese su Celular</label> 
<input type="text" id="cel" value="1098762896" />

Maquetado en HTML5

Surgen nuevos elementos que dan mayor significado, coherencia y estandarización a nuestras estructuras web:

header: cabecera.
article: artículo publicado.
section: sección de la página dentro de la cual pueden haber artículos.
footer: pie de página.
nav: menú de navegación.
aside: barra lateral o sidebar.

Maquetado en HTML5

Comparativa HTML4 y HTML5

Maquetado en HTML5

Entre otros elementos tenemos también:

hgroup: grupo de titulos.
figure: figura que hace referencia importante al contenido.
figcaption: título de la figura a la que se hace referencia.

Etiqueta hgroup

<article>
    <hgroup>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
    </hgroup>
</article>

Etiqueta figure

<p>Como podemos ver en este artículo la referencia principal a una nueva etiqueta HTML5 y es parte de los nuevos standares Web 2.0 como puede ver en el gráfico a continuación </p>
<figure id="figura1">
<figcaption>Tabla de standares Web</figcaption>
<img src="images/tabla-de-standares-web20.png" width="200" height="400" alt="tabla de standares"  />
</figure>

Soporte en IE

Para dar soporte a IE a algunas de las etiquetas de bloque de HTML5 se debe hacer lo siguiente

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Elementos multimedia

Hasta la fecha dependíamos de una tecnología de terceros para poder compartir material audiovisual: Flash de la compañía Adobe.
Es evidente que es una barrera de entrada que un usuario no pueda visualizar en primera instancia todo este contenido hasta que instale en su navegador el plugin flash correspondiente.
De modo que ahora tenemos dos nuevas etiquetas para la carga de material multimedia:

video
audio

Elementos multimedia

Las propiedades que utilizan son:

autobuffer : permite la carga automática del archivo, y los valores posibles son “true” o “false”
autoplay : reproduce automáticamente
controls : muestra los controles de reproducción
height : define la altura del reproductor (en píxeles)
loop : ejecuta la reproducción en bucle, cuando finaliza vuelve a empezar
src : URL del archivo o fuente a reproducir
type : tipo de archivo o fuente
width : define el ancho del reproductor (en píxeles)

Ejemplo de carga de audio

<audio controls="controls">
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.mp3" type="audio/mp3" />
  Tu navegador no soporta reproducción de audio sin necesidad de un plugin
</audio>

Ejemplo de carga de video

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>