HTML & HTML5

HTML

Jose Emilio Labra Gayo
Departamento de Informática
Universidad de Oviedo

Proceso de Estandarización
¿Dónde está tu tecnología favorita?

Éxito
(Diversificación) Necesidad
de estándar
Idea brillante
Posibles perversiones...
No estandarización
Estandarizar algo que no tiene éxito
Estándar demasiado pronto
Estándar demasiado tarde
Comités poco representativos Especificación
Estándar sin prototipos (comité)
No adoptar el estándar
etc., etc.
Adopción Primeros
del estándar prototipos Internacionales
(limitaciones) ISO, W3C, IETF,
ECMA, WHATWG, etc.
Jose Emilio Labra Gayo, Universidad de Oviedo

Evolución
1970 GML Generalized Markup Language
(C.Goldfarb, E. Moshie, R. Lorie)
∶
Standard Generalized Markup Language
1985 SGML (ISO)

Hypertext Markup Language
1990 HTML (T. Berners Lee)
HTML 2.0 (IETF)
1995
HTML 3.2 (W3c)
XML (W3c)
HTML 4.01 (W3c)
2000
XHTML 1.0 (W3c) Borrador
XHTML 2.0 Borrador (W3c) HTML5 (WHATWG)
2005
X
2010
Borrador
HTML5 (W3c & Whatwg)
2015


HTML 5

Evolución de HTML 4.01 (compatibilidad hacia atrás)
Admite 2 Sintaxis: HTML y XML
Modelo de procesamiento estándar
Mejorar interoperabilidad entre implementaciones
Incluye API DOM
Antes estaba separada
Describe cómo gestionar errores
Antes se dejaba libertad a las implementaciones
Facilita desarrollo de aplicaciones Web


Principios de diseño

Compatibilidad
Soportar contenido existente
Degradado cortés: alternativas para navegadores anteriores
Reutilizar características que ya se usan
Utilidad
Resolver problemas existentes
Separación: estructura, presentación, comportamiento
Interoperabilidad
Comportamiento y gestión de errores definidos
Acceso universal
Independencia de medios, internacionalización y accesibilidad


2 sintaxis

HTML XHTML
<!DOCTYPE html> <?xml version="1.0"
<html> encoding="UTF-8"?>
<head> <html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8"> <head>
<title>Ejemplo</title> <title>Ejemplo</title>
</head> </head>
<body> <body>
<p>Algo de texto</p> <p>Algo de texto</p>
</body> </body>
</html> </html>

Tipo MIME: Tipo MIME:
text/html application/xml
application/xhtml+xml


Tipo de documento

Solamente es necesario

<!DOCTYPE html>
Antes:
Estricto:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transicional:
"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Con marcos:
"-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Más información: http://hsivonen.iki.fi/doctype/

Sintaxis HTML

HTML5 ya no tiene sintaxis SGML ni XML
No hay declaraciones de espacios de nombres
Se especifica cómo tratar errores
Gestión de errores: modelo draconiano vs flexibilidad
Sintaxis simplificada
No siempre es obligatorio cerrar etiquetas
No es obligatorio poner entre comillas valores simples

<input name=tlfno disabled> = <input name="tlfno" disabled="" />
HTML XHTML


Elementos

Elemento:
<etiqueta atributo1="valor1" atributo2="valor2"...>
. . . contenidos . . .
</etiqueta>

Se pueden anidar elementos <externo>
<interno>
texto
</interno>

</externo>

…pero no se pueden entrelazar <externo>


<interno>
texto
</externo>
</interno>

Elementos vacíos

Elementos sin contenido

<img src="foto.png" alt="Paisaje asturiano"></img>

En XML pueden simplificarse como:
<img src="foto.png" alt="Paisaje asturiano" />

En HTML, no es obligatorio cerrar etiquetas siempre:
<img src="foto.png" alt="Paisaje asturiano" >


Atributos

El orden de los atributos no es significativo
No puede haber 2 atributos con el mismo nombre
Pueden usarse comillas dobles o simples

<body onLoad="alert('Hola')"
onUnload='alert("Adios")'>
. . .
</body>


Comentarios HTML

Texto entre 
<head>
<title>Ejemplo</title>

</head>

Comentarios condicionales (Sólo Internet Explorer)


<p>No estás usando Internet Explorer</p>

Estructura de HTML = HTML4

Elemento raíz <html> contiene:
<head> metadatos
<body> contenido de la página

<html>
<head>
...metadatos
</head>
<body>
...contenido
</body>
</html>

NOTA
<html> puede tener atributo manifest.
Permite indicar ficheros a descargar
Jose Emilio Labra Gayo, Universidad de Oviedo cuando se ejecute offline

head = HTML4

Especifica metadatos
Puede contener un elemento <title> (en HTML4 era obligatorio)
Además, puede contener:
<meta>
<link>
<style>
<base>
<command>
<script>
<noscript>


meta

Permite incorporar metadatos. Ejemplos:

<head>
<title>Ejemplo</title>
<meta charset="utf-8" >
<meta name="author" content="Jose Torres">
...
</head>

Antes
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">


link = HTML4

Permite enlazar a otros recursos.
Atributo href indica el recurso al que se enlaza
Atributo rel indica el tipo de enlace, puede ser:
author, help, license, next, prev, prefetch, stylesheet, …
Pueden realizarse varios tipos de enlace a la vez
<head>
...
<link rel="next" href="capitulo3.html">
<link rel="prev" href="capitulo1.html">
<link rel="author license" href="acercaDe.html">
</head>


link stylesheet = HTML4

rel="stylesheet" permite asociar una hoja de estilos
type="text/css" es el valor por defecto
media permite especificar el tipo de medio
all (por defecto), screen, print, projection,…
title permite dar un nombre a la hoja de estilos
alternate stylesheet indica que es un hoja alternativa

<head>
...
<link rel="stylesheet" href="estilo.css" title="Azul">
<link rel="alternate stylesheet" href="rojo.css" title="Rojo">
<link rel="stylesheet" href="impreso.css" media="print">
</head>


link alternate = HTML4

rel="alternate" indica enlaces alternativos
Ejemplo: enlazar RSS

<head>
...
<link rel="alternate" type="application/atom+xml"
title="Blog en Atom" href="blog.atom" >
. . .
</head>


style = HTML4

Permite incrustar declaraciones de estilo
Pueden afinarse estilos de una hoja de estilos
En general, es mejor utilizar enlaces a ficheros externos

<head>
...
<link rel="stylesheet" href="estilo.css" >
<style>

p { text-align: justify; }
p:first-letter {font-size: 3em; }

</style>
</head>


base = HTML4

Permite especificar la URI de base
Las URIs relativas tomarán dicha URI como base

<html>
<head>
<title>Noticias</title>
<base href="http://www.example.com/noticias/index.html">
</head>
<body>
<a href="historico.html">Historico</a>
</p>
</body>
</html>
Apunta a:
http://www.example.com/noticias/historico.html


script = HTML4

Permite añadir interactividad
type="text/javascript" por defecto
Puede ser:
Externo: Mediante src
Interno: Incrustado directamente (puede usarse para datos)
<head>
...
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("a").click(function() {
alert("Has pulsado!");
});
});
</script> También existe <noscript>:
</head> muestra su contenido si
. . . está deshabilitado el
Jose Emilio Labra Gayo, Universidad de Oviedo scripting

body = HTML4

Especifica el contenido del documento
Sólo debe haber un elemento <body>
Diversos atributos permiten controlar eventos de página

<html>
<head>
<script>
function pon(msg) {
document.getElementById('evento').textContent = msg;
}
</script>
</head>
<body onload="pon('onload')"
onresize="pon('resize')" >
<p>Evento: <span id="evento">nada</span></p>
</body>
</html>


Elementos de Estructura

HTML5 contiene nuevos elementos para para definir la
estructura semántica del documento
HTML5 outliners: Muestran estructura del documento

h1,h2,…h6 Títulos
div Agrupa elementos de contenido
section Sección, puede incluir encabezados
article Artículo
hgroup Grupo de cabecera
nav Listas de navegación
aside Contenido auxiliar
header Cabecera
footer Pie
address Define datos de contacto
figure Figuras
details Detalles opcionales

h1, h2, …h6 = HTML4

Definen títulos de distinto nivel
Nivel de estructura definido por el número (h1…h6)
Problema para cortar/pegar contenido
<body>
<h1>La primavera</h1>
<h2>Introducción</h2>
<p>... </p>
<h2>Primera parte: Agentes</h2>
<h3>Las flores</h3>
<p>...</p>
<h3>Las personas</h3>
<p>...</p>
<h2>Segunda parte: Acciones</h2>
<h3>El amor</h3>
<p>...</p>
<h3>La felicidad</h3>
<p>...</p>
</body>

div = HTML4

Se utiliza para agrupar contenido
class, id, lang, etc. permiten seleccionar grupos div
No tiene significado por si mismo
Abuso de div mezclando características de presentación
Recomendación HTML5: sólo como última alternativa
<body>
<div id="cabecera">
. . .
</div>
<div id="contenido">
<div class="noticia">
. . .
</div>
</div>
<div id="barraLateral">
. . .
</div>
</body>

section

Permite declarar una sección dentro de un documento
Pueden anidarse secciones dentro de otras

Antes
<body> <body>
. . . . . .
<div id="Sociedad"> <section id="Sociedad">
<h2>La via social</h2> <h1>La via social</h1>
<p> ... </p> <p>...</p>
</div> ≃ </section>
<div id="Deportes"> <section id="Deportes">
<h2>Noticias deportivas</h2> <h1>Noticias deportivas</h1>
<p>. . .</p> <p>. . .</p>
</div> </section>
</body> </body>
Problemas:
no hay semántica, cortar/pegar,…

article

Declara una parte independiente de un documento
Artículo de blog, de periódico, etc.
Algo que podría reutilizarse o distribuirse en otros documentos
Pueden anidarse secciones y artículos
<body>
<h1>El noticiero</h1>
<section id="Sociedad">
<h1>Noticias de sociedad</h1>
<article id="FiestaJuan">
<h1>Juan da una fiesta</h1>
<p>...</p>
</article> Diferencia
<article id="Boda"> section está dentro de algo
<h1>Por fin hay boda</h1>
<p>...</p> article tiene identidad propia
</article>
</section>
...

hgroup

Forma un grupo de cabecera
Será un elemento único de cara a la tabla de contenidos
Útil para agrupar subtítulos sin afectar al esquema del documento

<body>
<hgroup>
<h2>El mejor diario de noticias</h2>
</hgroup>
<h1>La via social</h1>
<p>...</p>
</section>
...


aside

Algo relacionado tangencialmente con el contenido actual
Habitualmente, pueden ponerse en un lateral
Su lectura no es obligada (los agentes podrían ocultarlos)

<article id="Boda">
<h1>Por fin hay boda</h1>
<p>A pesar de las protestas de los invitados,
la boda se celebró...</p>
<aside>
<h1>Refrán popular</h1>
Tal y como dice el refrán:
<q>Ni novia sin cejas, ni boda sin quejas.</q>
</aside>
</article>


nav

Declara un grupo de navegación
Suele ser una lista de enlaces

<body>
<nav>
<ul>
<li><a href="#sociedad">Sociedad</a></li>
<li><a href="#deportes">Deportes</a></li>
</ul>
</nav>
<h1>La via social</h1>
<p>. . .</p>
</section>
.. .


header

Declara una cabecera
No forman parte de la tabla de contenidos (outline)

<body>
<header>
<img src="logo.png" alt="logo de El noticiero" >
<nav>
<ul>
<li><a href="#sociedad">Sociedad</a></li>
...
</ul>
</nav>
</header>
...
</body>


footer

Declara un pie de documento, sección o artículo

<body>
<header>
...
</header>
...
</section>
...
<footer>
© 2012. Todos los derechos reservados
</footer>
</body>
</html>


address = HTML4

Indica información de contacto
Habitualmente se incluye en footer

...
<footer>
© 2012. Todos los derechos reservados
<address>
Contacto: <a href="http://noticiero.es">El noticiero</a>
</address>
</footer>


Elementos para agrupar contenido


Párrafos, listas, definiciones = HTML4

p párrafo.
ol, ul, li listas de ítems
dt,dl,dd definiciones
pre texto preformateado
blockquote contenido extraido de otra fuente


Figuras: figure, figcaption

figure representa contenido cuya posición no es importante
Puede tener su propio flujo de contenido
Puede ser: diagramas, imágenes, vídeos, fragmento de código, etc.
figcaption representa la leyenda de la figura

<figure>
<img src="juanBarbacoa.jpg"
alt="Foto de Juan en la barbacoa">
<figcaption>Juan preparando una barbacoa</figcaption>
</figure>


details

Contenido que puede estar oculto
summary indica el contenido visible
El navegador puede visualizar los detalles a peticíón del usuario

<h1>Campeonato de tenis de mesa</h1>
<p>Acaba de arrancar la última competición de tenis del pueblo. </p>
<details>
<summary>Lista de partidos</summary>
<ul>
<li>Jueves, Juan - Antonio</li>
<li>Viernes, Ana- Antonio</li>
<li>Sábado, Ana- Juan</li>
</ul>
</details>


Elementos textuales


Elementos textuales = HTML4

Elemento Definición Ejemplo
em Énfasis Esta bebida me parece <em>espectacular</em>

strong Importante La leche está <strong>muy caliente</strong>

small No importante Tome Exidina <small>Este medicamento... </small>

s Incorrecto Precio: <s>10 euros</s>. 9,95 euros

cite Títulos de obras En <cite>El Quijote</cite> hay 2 protagonistas.

q Citas Juan dijo <q>Bien predica quien bien vive</q>

abbr Abreviación Un <dfn>catamorfismo</dfn> es un tipo de functor

span Texto diferente Castillo en francés es <span lang="fr">château</span>

br Salto de línea C/Valdés Salas, S/N<br>Oviedo<br>España

wbr Posible salto super<wbr>cali<wbr>frasti<wbr>listico.com


Elementos textuales = HTML4

code Código <code>checkDB</code> chequea la base de
datos.
var Variable Sea <var>n</var> el número de personas, ...

samp Muestra, La salida es: <samp>Syntax error</samp>
Salida
kbd Entrada teclado Pulse <kbd>F1</kbd> para obtener ayuda

sub Subíndice El agua es H<sub>2</sub>O

sup Superíndice El cuadrado es <var>x<sup>2</sup></var>

i Voz alternativa Es un <i>poquillo</i> trasto

b Palabras clave Contiene <b>salmón</b> y <b>tomate</b>

u Anotaciones Escribe <u>lopo</u> en vez de <b>lobo</b>


Inserción/Borrado = HTML4

ins Texto insertado <ins>Texto insertado</ins>

del Texto borrado <del>Texto eliminado</del>

<ol>
<li><ins datetime="2012-02-12">Bug 2: No funciona cortar</ins></li>
<li><del datetime="2012-03-01">
<ins datetime="2008-02-11">Bug 221: Error al cargar</ins>
</del>
</li>
</ol>


Elementos textuales nuevos

mark Texto Resaltado El <mark>lobo</mark> ibérico.
Ej. tras una búsqueda Los <mark>lobo</mark>s son animales
data Dato Juan sacó un <data value="10">diez</data>.

time Evento temporal Nos vemos el
datetime indica <time datetime="2012-04-01">sábado</time>
instante


Tablas

Elemento Definición
table Una tabla <table>
<caption>Notas</caption>
caption Leyenda de la tabla <tr><th>Nombre</th><th>Nota</th></tr>
<tr><td>Jose Torre</td><td>8</td></tr>
tr Fila <tr><td>Ana Blanco</td><td>6</td></tr>
<tr><td>Juan Mato</td><td>4</td></tr>
th Celda de cabecera
<tr><td>Luis Rojas</td><td>7</td></tr>
td Celda de datos </table>

colgroup Grupo de columnas

col Representa una columna Agrupar columnas
dentro de un colgroup
tbody Cuerpo de la tabla

thead Cabecera de la tabla Útiles para tablas que ocupan
varias páginas
tfoot Pie de tabla


Contenido Incrustado

img Imagen <img src="logoX.png" alt="Logotipo X">

audio Audio <audio src="cancion.mp3" controls autoplay loop>

video Vídeo <video src="navidad.mp4" controls >

object Objeto <object data="juego.swf" >

iframe Página <iframe src="http://www.w3c.org" >

map/area Mapa <map name="cosas">
<area shape="rect" coords="0,0,82,126"
alt="casa" href="casa.htm" />
<area shape="circle" coords="90,58,3"
alt="bola" href="bola.html" />
</map>


Atributos


Atributos globales HTML = HTML4

class Clase <div class="Anuncio">. . .</div>

id Identificador único <article id="r23">. . .</article>

title Título Texto <span title="verdoso">verde</span>

style Información de estilo Texto <span style="color:green">verde</span>

accesskey Atajo de teclado <a accesskey=B>Búsqueda</a>

tabindex Navegación mediante <a href="about.html" tabindex="2">Acerca</a>
tabulación <a href="mapa.html" tabindex="1">Mapa</a>


Atributos nuevos en HTML5

contenteditable Indica si el elemento Nombre:
puede editarse <span contenteditable>Juan</span>
contextmenu Muestra menú <input id=genero contextmenu=genero>
contextual
hidden Elemento no <section id=juego hidden>. . .
relevante </section>
spellcheck Habilitar corrector Nombre:
ortográfico <input id=nombre spellcheck=no>
translate Traducir o no una Ejemplo más adelante: Internacionalización
cadena
data-* Atributos definidos <p data-calorias="50">kiwi</p>
por el usuario


Internacionalización



charset Codificación <meta charset="utf-8" >

lang Idioma <p lang="es"> Castillo en francés se escribe
xml:lang en,es,en-US,... <span lang="fr">château</span>
</p>
hreflang Idioma de un enlace <a href="chateaus.html"
hreflang="fr">Lista de castillos franceses</a>
translate Traducir un texto o Pulsar <span translate=no>CONTINUE</span> en
no panel de impresora.



ruby, Anotaciones <ruby> <rt> </rt> <rt> </rt></ruby>
rt, rp fonéticas habituales
en textos asiáticos

bdi Aislar Usuario <bdi> </bdi>: 3 artículos
direccionalidad del
texto
bdo Formatear Castillo al revés es
direccionalidad del <bdo dir=rtl>Castillo</bdo>
texto

Más información: ITS (Internationalization Tag Set)
http://www.w3.org/TR/its/


Formularios


Ejemplo = HTML4

http://ejemplo.com/form.html

<form method="post"
action="http://ejemplo.com/procesa">
<label>Nombre: <input name="cliente"></label><br>
<label>Correo electrónico: <input name="correo"></label><br>
<button>Enviar</button>
</form>

GET http://ejemplo.com/form.html

form.html

WWW
POST http://ejemplo.com/procesa
cliente = pepe
Usuario
correo = pepe@kiko.com
Servidor


Tipos de entrada = HTML4

text Texto (por defecto) <input name=cliente>
<input name=cliente type=text>
password Oculta caracteres <input type=password ...>

hiden Campo oculto <input type=hiden name=origen value=20>

checkbox on/off <p>Aficiones:
<input type=checkbox
name=aficiones value=Leer>Leer libros
<br>
<input type=checkbox
name=aficiones value=Pasear>Dar paseos
</p>
radio Opción, sólo uno <p>Género:
dentro de un <input type=radio name=genero value=H>Hombre
grupo <br>
<input type=radio name=genero value=M>Mujer
</p>


Tipos de entrada = HTML4


file Fichero <input type=file
name=Fichero>
submit Enviar <input type=submit
value="Enviar">
image Imagen (enviar) <input type=image
src="img.png" alt="Enviar">
reset Reiniciar <input type=reset
value="Borrar datos">


Elementos de formularios

Atributo Definición Ejemplo

fieldset Agrupa campos de <fieldset>
un formulario <legend>Datos personales</legend>
Nombre: <input name="nombre"><br>
Apellidos: <input name="apellidos">
</fieldset>
button Botón <button type=submit>

select Seleccionar <select name="genero">
opciones <option value="H">Hombre</option>
<option value="M">Mujer</option>
</select>
textarea Campo de texto <textarea rows="4" cols="50">
libre Comentarios
</textarea>


Atributos = HTML4


type Tipo de entrada <input type=. . . >

name Nombre del campo <input name=apellidos >

value Valor del campo <input name=país value="España">

checked Seleccionado: Estado Civil:
checkbox/radio <input type=radio
name=estado value=S checked>Soltero
<br>
<input type=radio
name=estado value=M>Casado
maxlength Nº máximo de <input name=apellidos maxlength="20">
caracteres
disabled Desabilitado <input name=edad disabled>

readonly Sólo lectura <input name=país value="España" readonly>


Nuevos tipos de entrada


email Correo <input type=email
electrónico name=correo>
url URL <input type=url
name=Homepage>
tel Teléfono <input type=tel
name=Tlfno>
search Texto de <input type=search
búsqueda name=cadena>

email url tel búsqueda

Nuevos tipos de entrada

color Color <input type=color
name=colorFondo>

date Fechas <input type=date
datetime name=fechaNacimiento>
datetime-local
month
year
week
time
number Número <input type=number
name=edad
min=1 max=150>
range Rango <input type=range
name=puntos
min=1 max=10>

Nuevos atributos

autocomplete Autocompletar <input name=Nombre
on/off autocomplete="off">
placeholder Pista sobre el <input name=textoBuscar
tipo de entrada placeholder="Cadena a buscar">
required Campo <input name=usuario required>
obligatorio
pattern Patrón <input name=nif
(expresión pattern="d{7,8}[A-Z]"
regular) title="Introduzca un NIF">
min/max/step Valores mínimo <input type=range
y máximo name=puntos
min=1 max=10 step=2>
multiple Se permiten <input type=file
entradas name=ficherosCopia
múltiples multiple>


Expresiones regulares
Expresión Posibles valores
Elemento d Elemento 2
a*b b, ab, aab, aaab, …
[xyz]b xb, yb, zb
a?b b, ab
a+b ab, aab, aaab, …
[a-c]x ax, bx, cx
[^0-9]x Carácter dígito seguido de x
Dx Carácter dígito seguido de x
(pa){2}rucha paparucha
.abc Cualquier carácter (1) seguido de abc
(a|b)+x ax, bx, aax, bbx, abx, bax,...
a{1,3}x ax, aax, aaax
n Salto de línea
p{Lu} Letra mayúscula
p{Sc} Símbolo de moneda

Nuevos Atributos


autofocus Indicar <input name=Nombre
adquisición autofocus>
"focus"
list Lista de valores <input list="lista" name="nombre">
sugeridos <datalist id="lista">
<option value="Jose">
<option value="Luis">
</datalist>
form Formulario <input name=usuario form="DatosUsr">

formmethod Cambia el valor <input type=submit
formenctype correspondiente formnovalidate
formaction del elemento formtarget="blank">
formnovalidate form
formtarget


Nuevos elementos


meter Medida dentro de un Espacio en disco:
rango. <meter value="34"
Ej. Espacio en diso, max="100">34%</meter>
progress Representa el progreso de Ficheros copiados:
una tarea en ejecución <progress value="34"
Ej. %datos copiados max="100">34%</progress>
output Resultado de una <form
computación onsubmit="return false"
oninput="o.value =
a.valueAsNumber + b.valueAsNumber">
<input name=a type=number step=any> +
<input name=b type=number step=any> =
<output name=o></output>
</form>


Nuevos elementos


menu, Crea un menú con <menu type=toolbar>
command comandos <command label="Abrir" onclick="open()">
<command label="Guardar" onclick="save()">
</menu>
keygen Genera una clave que <keygen name=clave>
puede enviarse en un
formulario


Soporte para MathML y SVG

HTML5 admite la inclusión directa de MathML y SVG
En HTML no es necesario utilizar espacios de nombres
MathML = definir fórmulas matemáticas
SVG = gráficos vectoriales
A diferencia del canvas, los gráficos pueden escalarse
El sistema indica elemento a dibujar


Soporte para MathML y SVG

Ejemplo
<!DOCTYPE html>
<title>MathML y SVG</title>
<meta charset="UTF-8" >
<p>
Una ecuación:
<math>
<mrow><mi>x</mi><mo>=</mo>
<msqrt>
<mfrac>
<mrow><mi>Varianza</mi></mrow>
<mrow><mn>2</mn></mrow>
</mfrac>
</msqrt>
</mrow>
</math>
y un círculo:
<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>
http://www.di.uniovi.es/~labra/cursos/XML/ejemplos/svgMathML.html

Microdatos

Enriquecer un documento con valores de un vocabulario
Añade metadatos que pueden procesarse automáticamente
Objetivo: Facilitar descripción de los contenidos
Acercamiento a la Web Semántica
Consiste en grupos de parejas nombre/valor


Microdatos

Atributo Definición Valores

itemscope Contenedor de microdatos Valor booleano

itemtype Define tipo de ítems Lista de URIs

itemid Identificador del ítem URI

itemref Referencia donde se pueden Identificador
obtener más datos
itemprop Propiedad a definir Nombre de la propiedad a declarar


Microdatos

Los valores de la propiedad definida en itemprop
dependen del tipo de elemento:
Elemento Valor

meta Valor de content

a, area, link Valor de href

audio, embed, video, iframe, Valor de src
img, source, track
object Valor de data

data Valor de value

Resto de elementos Contenido textual


Microdatos

Ejemplo:
<div itemscope
itemtype="http://schema.org/Offer"
itemid="http://ejemplo.org/Oferta24">
<h1 itemprop="name">Batidora</h1>
<p>Precio: <span itemprop="price">19.95€</span>
<p itemscope itemprop="reviews"
itemtype="http://schema.org/AggregateRating">
Puntuación:
<span itemprop="ratingValue">3</span> sobre
<span itemprop="bestRating">5</span>.
Basado en <span itemprop="ratingCount">25</span> usuarios
</p>
</div>


Accesibilidad


Accesibilidad y HTML5

WAI-ARIA (Accessible Rich Internet Applications)
Define roles para mejorar la accesibilidad
Rol Valor
banner Cabecera
search Búsqueda
navigation Navegación

main Cuerpo principal

contentinfo Información sobre el contenido

complementary Contenido complementario

application Identifica una aplicación

. . . . . .


Fin de la Presentación


HTML & HTML5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (8)

Semelhante a HTML & HTML5

Semelhante a HTML & HTML5 (20)

Mais de Jose Emilio Labra Gayo

Mais de Jose Emilio Labra Gayo (20)

HTML & HTML5