HTML & HTML5

HTML

Jose Emilio Labra Gayo

Departamento de Informática

Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

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

Idea brillante

Éxito (Diversificación) Necesidad

de estándar

Primeros prototipos

Adopción del estándar

(limitaciones)

Especificación (comité)

Internacionales ISO, W3C, IETF,

ECMA, WHATWG, etc.

No estandarizaciónEstandarizar algo que no tiene éxitoEstándar demasiado prontoEstándar demasiado tardeComités poco representativosEstándar sin prototiposNo adoptar el estándaretc., etc.

Posibles perversiones...


Evolución

GML1970

∶

1985

1990

1995

2000

2005

2010

2015

Generalized Markup Language (C.Goldfarb, E. Moshie, R. Lorie)

SGML

HTML

Standard Generalized Markup Language (ISO)

Hypertext Markup Language(T. Berners Lee)

HTML 2.0(IETF)

HTML 3.2(W3c)

HTML 4.01 (W3c)XML (W3c)

XHTML 1.0(W3c)

XHTML 2.0Borrador (W3c) HTML5Borrador (WHATWG)

HTML5Borrador (W3c & Whatwg)

X


HTML 5

Evolución de HTML 4.01 (compatibilidad hacia atrás)

Admite 2 Sintaxis: HTML y XML

Modelo de procesamiento estándarMejorar interoperabilidad entre implementaciones

Incluye API DOMAntes estaba separada

Describe cómo gestionar erroresAntes se dejaba libertad a las implementaciones

Facilita desarrollo de aplicaciones Web


Principios de diseño

CompatibilidadSoportar contenido existente

Degradado cortés: alternativas para navegadores anteriores

Reutilizar características que ya se usan

UtilidadResolver problemas existentes

Separación: estructura, presentación, comportamiento

InteroperabilidadComportamiento y gestión de errores definidos

Acceso universalIndependencia de medios, internacionalización y accesibilidad


2 sintaxis

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Ejemplo</title> </head> <body> <p>Algo de texto</p> </body></html>

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

HTML XHTML

Tipo MIME: text/html

Tipo MIME: application/xml application/xhtml+xml


Tipo de documento

Solamente es necesario

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

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

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

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

<!DOCTYPE html>


Sintaxis HTML

HTML5 ya no tiene sintaxis SGML ni XMLNo hay declaraciones de espacios de nombres

Se especifica cómo tratar errores

Gestión de errores: modelo draconiano vs flexibilidad

Sintaxis simplificadaNo siempre es obligatorio cerrar etiquetas

No es obligatorio poner entre comillas valores simples

<input name=tlfno disabled>

HTML

<input name="tlfno" disabled="" />=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>

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

En XML pueden simplificarse como:

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

En HTML, no es obligatorio cerrar etiquetas siempre:


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 

Comentarios condicionales (Sólo Internet Explorer)

<head><title>Ejemplo</title></head>

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


Estructura de HTML

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

Elemento raíz <html> contiene:<head> metadatos

<body> contenido de la página

NOTA<html> puede tener atributo manifest.

Permite indicar ficheros a descargar cuando se ejecute offline

= HTML4


head

Especifica metadatos

Puede contener un elemento <title> (en HTML4 era obligatorio)

Además, puede contener:

<meta><link><style><base><command><script><noscript>

= HTML4


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

meta

Permite incorporar metadatos. Ejemplos:

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

Antes


<head> ... <link rel="next" href="capitulo3.html"> <link rel="prev" href="capitulo1.html"> <link rel="author license" href="acercaDe.html"></head>

link

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

= HTML4


link stylesheet

rel="stylesheet" permite asociar una hoja de estilostype="text/css" es el valor por defecto

media permite especificar el tipo de medioall (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>

= HTML4


link alternate

rel="alternate" indica enlaces alternativosEjemplo: enlazar RSS

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

= HTML4


style

Permite incrustar declaraciones de estiloPueden 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>

= HTML4


base

Permite especificar la URI de baseLas 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>

http://www.example.com/noticias/historico.html

Apunta a:

= HTML4


script

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> </head> . . .

También existe <noscript>: muestra su contenido si está deshabilitado el scripting

= HTML4


body

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>

= HTML4


Elementos de Estructura

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

h1,h2,…h6 Títulosdiv Agrupa elementos de contenidosection Sección, puede incluir encabezadosarticle Artículohgroup Grupo de cabeceranav Listas de navegaciónaside Contenido auxiliarheader Cabecerafooter Pieaddress Define datos de contacto figure Figurasdetails Detalles opcionales


h1, h2, …h6

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>

= HTML4


div

Se utiliza para agrupar contenido

class, id, lang, etc. permiten seleccionar grupos div

No tiene significado por si mismoAbuso de div mezclando características de presentación

Recomendación HTML5: sólo como última alternativa

= HTML4

<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

<body> . . . <section id="Sociedad"> <h1>La via social</h1> <p>...</p> </section> <section id="Deportes"> <h1>Noticias deportivas</h1> <p>. . .</p> </section></body>

<body> . . . <div id="Sociedad"> <h2>La via social</h2> <p> ... </p> </div> <div id="Deportes"> <h2>Noticias deportivas</h2> <p>. . .</p> </div></body>

≃

Antes

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> <article id="Boda"> <h1>Por fin hay boda</h1> <p>...</p> </article> </section> ...

Diferenciasection está dentro de algoarticle tiene identidad propia


hgroup

Forma un grupo de cabeceraSerá un elemento único de cara a la tabla de contenidos

Útil para agrupar subtítulos sin afectar al esquema del documento

<body> <hgroup> <h1>El noticiero</h1> <h2>El mejor diario de noticias</h2> </hgroup> <section id="Sociedad"> <h1>La via social</h1> <p>...</p> </section> ...


aside

Algo relacionado tangencialmente con el contenido actualHabitualmente, 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ónSuele ser una lista de enlaces

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


header

Declara una cabecera

No forman parte de la tabla de contenidos (outline)

<body> <header> <h1>El noticiero</h1> <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 id="Sociedad"> . . . </section> . . . <footer> © 2012. Todos los derechos reservados </footer> </body></html>


address

Indica información de contacto

Habitualmente se incluye en footer

= HTML4

. . . <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

p párrafo.

ol, ul, li listas de ítems

dt,dl,dd definiciones

pre texto preformateado

blockquote contenido extraido de otra fuente

= HTML4


Figuras: figure, figcaption

figure representa contenido cuya posición no es importantePuede 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 ocultosummary 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

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

= HTML4


Elementos textuales

Elemento

Definición Ejemplo

code Código <code>checkDB</code> chequea la base de datos.

var Variable Sea <var>n</var> el número de personas, ...

samp Muestra,Salida

La salida es: <samp>Syntax error</samp>

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>

= HTML4


Inserción/Borrado = HTML4

Elemento

Definición Ejemplo

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

Elemento

Definición Ejemplo

mark Texto ResaltadoEj. tras una búsqueda

El <mark>lobo</mark> ibérico. Los <mark>lobo</mark>s son animales

data Dato Juan sacó un <data value="10">diez</data>.

time Evento temporaldatetime indica instante

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


Tablas

Elemento

Definición

table Una tabla

caption Leyenda de la tabla

tr Fila

th Celda de cabecera

td Celda de datos

colgroup Grupo de columnas

col Representa una columna dentro de un colgroup

tbody Cuerpo de la tabla

thead Cabecera de la tabla

tfoot Pie de tabla

<table> <caption>Notas</caption> <tr><th>Nombre</th><th>Nota</th></tr> <tr><td>Jose Torre</td><td>8</td></tr> <tr><td>Ana Blanco</td><td>6</td></tr> <tr><td>Juan Mato</td><td>4</td></tr> <tr><td>Luis Rojas</td><td>7</td></tr></table>

Útiles para tablas que ocupan varias páginas

Agrupar columnas


Contenido Incrustado

Elemento

Definición

Ejemplo

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

Elemento

Definición Ejemplo

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 tabulación

<a href="about.html" tabindex="2">Acerca</a><a href="mapa.html" tabindex="1">Mapa</a>

= HTML4


Atributos nuevos en HTML5

Elemento Definición Ejemplo

contenteditable Indica si el elemento puede editarse

Nombre: <span contenteditable>Juan</span>

contextmenu Muestra menú contextual

<input id=genero contextmenu=genero>

hidden Elemento no relevante

<section id=juego hidden>. . . </section>

spellcheck Habilitar corrector ortográfico

Nombre: <input id=nombre spellcheck=no>

translate Traducir o no una cadena

Ejemplo más adelante: Internacionalización

data-* Atributos definidos por el usuario

<p data-calorias="50">kiwi</p>


Internacionalización



Elemento

Definición Ejemplo

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

langxml:lang

Idiomaen,es,en-US,...

<p lang="es"> Castillo en francés se escribe <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 no

Pulsar <span translate=no>CONTINUE</span> en panel de impresora.



Elemento

Definición Ejemplo

ruby, rt, rp

Anotaciones fonéticas habituales en textos asiáticos

<ruby>漢 <rt>かん </rt>字 <rt>じ </rt></ruby>

bdi Aislar direccionalidad del texto

Usuario <bdi>إيان</bdi>: 3 artículos

bdo Formatear direccionalidad del texto

Castillo al revés es <bdo dir=rtl>Castillo</bdo>

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


Formularios


WWW

GET 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>

Ejemplo

UsuarioServidor

POST http://ejemplo.com/procesacliente = pepecorreo = [email protected]

http://ejemplo.com/form.html

form.html

= HTML4


Tipos de entradaElemento

Definición Ejemplo

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 dentro de un grupo

<p>Género: <input type=radio name=genero value=H>Hombre<br> <input type=radio name=genero value=M>Mujer</p>

= HTML4


Tipos de entrada

Elemento

Definición Ejemplo

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">

= HTML4


Elementos de formularios

Atributo Definición Ejemplo

fieldset Agrupa campos de un formulario

<fieldset> <legend>Datos personales</legend> Nombre: <input name="nombre"><br> Apellidos: <input name="apellidos"></fieldset>

button Botón <button type=submit>

select Seleccionar opciones

<select name="genero"> <option value="H">Hombre</option> <option value="M">Mujer</option></select>

textarea Campo de texto libre

<textarea rows="4" cols="50"> Comentarios</textarea>


Atributos


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:checkbox/radio

Estado Civil:<input type=radio name=estado value=S checked>Soltero<br><input type=radio name=estado value=M>Casado

maxlength Nº máximo de caracteres

<input name=apellidos maxlength="20">

disabled Desabilitado <input name=edad disabled>

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

= HTML4


Nuevos tipos de entrada

Elemento Definición

Ejemplo

email Correo electrónico

<input type=email name=correo>

url URL <input type=url name=Homepage>

tel Teléfono <input type=tel name=Tlfno>

search Texto de búsqueda

<input type=search name=cadena>

telurlemail búsqueda


Nuevos tipos de entrada

Elemento Definición

Ejemplo

color Color <input type=color name=colorFondo>

datedatetimedatetime-localmonthyearweektime

Fechas <input type=date name=fechaNacimiento>

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 Autocompletaron/off

<input name=Nombre autocomplete="off">

placeholder Pista sobre el tipo de entrada

<input name=textoBuscar placeholder="Cadena a buscar">

required Campo obligatorio

<input name=usuario required>

pattern Patrón (expresión regular)

<input name=nif pattern="\d{7,8}[A-Z]" title="Introduzca un NIF">

min/max/step Valores mínimo y máximo

<input type=range name=puntos min=1 max=10 step=2>

multiple Se permiten entradas múltiples

<input type=file name=ficherosCopia multiple>


Expresiones regularesExpresión Posibles valores

Elemento 2b, ab, aab, aaab, …xb, yb, zbb, abab, aab, aaab, …

Elemento \d a*b [xyz]b a?b a+b

[a-c]x[^0-9]x\Dx(pa){2}rucha.abc(a|b)+xa{1,3}x\n\p{Lu}\p{Sc}

ax, bx, cxCarácter dígito seguido de xCarácter dígito seguido de xpaparuchaCualquier carácter (1) seguido de abcax, bx, aax, bbx, abx, bax,...ax, aax, aaaxSalto de líneaLetra mayúsculaSímbolo de moneda


Nuevos Atributos


autofocus Indicar adquisición"focus"

<input name=Nombre autofocus>

list Lista de valores sugeridos

<input list="lista" name="nombre"><datalist id="lista"> <option value="Jose"> <option value="Luis"></datalist>

form Formulario <input name=usuario form="DatosUsr">

formmethodformenctypeformactionformnovalidateformtarget

Cambia el valor correspondiente del elemento form

<input type=submit formnovalidate formtarget="blank">


Nuevos elementos

Atributo

Definición Ejemplo

meter Medida dentro de un rango. Ej. Espacio en diso,

Espacio en disco: <meter value="34" max="100">34%</meter>

progress

Representa el progreso de una tarea en ejecuciónEj. %datos copiados

Ficheros copiados: <progress value="34" max="100">34%</progress>

output Resultado de una computación

<form 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, command

Crea un menú con comandos

<menu type=toolbar> <command label="Abrir" onclick="open()"> <command label="Guardar" onclick="save()"></menu>

keygen Genera una clave que puede enviarse en un formulario

<keygen name=clave>


Soporte para MathML y SVG

HTML5 admite la inclusión directa de MathML y SVGEn HTML no es necesario utilizar espacios de nombres

MathML = definir fórmulas matemáticas

SVG = gráficos vectorialesA 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 vocabularioAñ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 obtener más datos

Identificador

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,img, source, track

Valor de src

object Valor de data

data Valor de value

Resto de elementos Contenido textual


Microdatos

<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>

Ejemplo:


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

Documents

Transcript of HTML & HTML5