Introducción a html5

22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

SeminarioHTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

INTRODUCCIÓN A HTML5

Facilitadora:

María Zeballos


La nueva sintaxis HTML5

El doctypeEsta sería la DTD de un documento HTML 4.01 transicional:

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

La declaración de la DTD en HTML5 no puede ser más sencilla:

<!DOCTYPE html>

• Sintaxis breve

• Ausencia del número de versión. Uno de los objetivos delHTML5 es el de dar soporte a las versiones anteriores y,también, a las futuras versiones del lenguaje. Precisamente, porese motivo, indicar un número de versión ha quedado obsoleto,incluirlo no tendría absolutamente ninguna utilidad.



El documento HTML

El elemento <html> indica, en una página web, el inicio delcontenido de la página HTML. Hasta el momento hemos usadola etiqueta de inicio sin ningún atributo; observe como sería lasintaxis completa en XHTML 1.0 estricto:<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >

En HTML5 lo que prima es la simplicidad, solo se conserva loesencial. Esta sería la sintaxis completa en HTML5:

<html lang="es" >



La codificación de los caracteres

En HTML 4.01 transicional:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

En XHTML 1.0 estricto:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

La sintaxis en HTML5: <meta charset="UTF-8" />

Disponemos así de lo estrictamente necesario para unacorrecta gestión por parte de los navegadores web.



Los scripts

La declaración de los scripts también ha perdido importancia y la sintaxis es ahora más concisa.

Se ha pasado de: <script src="miScript.js" type="text/javascript"></script>

A esto:

<script src="miScript.js"></script>

Esta simplificación se debe a que se da por sentado que los scripts están escritos en JavaScript.

Será útil para el seminario de la otra

semana



Los estilos CSS

Partiendo siempre del mismo principio: simplificación yunificación del lenguaje, en la declaración de los estilos CSS seha pasado de:

<link href="miHoja.css" rel="stylesheet" type="text/css" />

a:

<link href="miHoja.css" rel="stylesheet" />



La sintaxis de los elementosHTML5 no tiene las reglas estrictas de sintaxis del XHTML.Veamos algunas comparaciones:

Uso de las comillas. Las comillas son facultativas para los valores de los atributos. Por ejemplo, para la codificación de los caracteres podemos usar las tres sintaxis siguientes:

<meta charset=’UTF-8’><meta charset="UTF-8"> <meta charset=UTF-8>

Con comillas simples, con comillas dobles o sin comillas, en los tres casos la sintaxis será válida.



La sintaxis de los elementos

Los elementos con una única etiqueta de apertura.Para los elementos HTML que disponen de una única etiquetade apertura y no tienen etiqueta de cierre: img, br, etc. eranecesario indicar el cierre del elemento en la etiqueta deapertura usando /.Ejemplos:

<br /> <img src="imagen.png" />

En HTML5 no es obligatorio indicar el cierre de esas etiquetas.Ejemplos:

<br> <img src="imagen.png">




Los elementos con etiqueta de cierre facultativaEn XHTML, cada vez que se abre una etiqueta es obligatorio cerrarla. HTML5 retoma la sintaxis permisiva del HTML 4, para algunos elementos.

Así, el siguiente ejemplo sería válido en HTML5: <p>Mi párrafo sin etiqueta de cierre.




Las mayúsculas y minúsculasHTML5 acepta sin problemas las mayúsculas y las minúsculasen la sintaxis de los elementos y de los atributos. Los siguientesejemplos son totalmente válidos en HTML5:

<SCRIPT src="miScript.js"></script> <script SRC="MIscript.JS"></SCRIPT> <sCriPt SrC="MiScript.js"></scRIpt>

Es preferible respetar ciertas normas de uso, así como las prácticas recomendadas.



La sintaxis de los elementosLos elementos HTML, HEAD y BODYLos elementos html, head y body son ahora facultativos.Este sería un documento HTML totalmente válido y que se visualizaría correctamente:

<!DOCTYPE HTML> <meta charset="UTF-8" /> <title>Mi primer documento HTML5 </title> <h1>Esto es HTML5</h1> <p>Mi contenido</p>



La sintaxis recomendadaAcabamos de ver que el HTML5 es muy permisivo. Sinembargo se aconseja respetar las “buenas prácticasrecomendadas" para los diseñadores web:• usar solamente minúsculas,• usar siempre las comillas,• cerrar con / las etiquetas que se auto-cierran,• cerrar los elementos para los cuales la etiqueta de cierre sea

facultativa,• sangrar el código para aumentar la legibilidad.

Documents

Introducción a html5