Cambios en HTML5

Cambios en HTML5
ndice
1 | Cambios en HTML5 3
1.1 | Elementos desaprobados en HTML5 4
2 | Etiquetas incorporadas a HTML5 6
2.1 | Etiquetas semnticas 6
2.2 | Etiquetas en formularios 9

Cambios en HTML5 | TELEFNICA // 3
1. Cambios en HTML5
Los cambios introducidos en HTML5, en general pretenden simplificar ciertas
declaraciones que en versiones previas, eran innecesariamente complejas. A
continuacin veremos algunas de ellas.
El primer cambio que encontramos en HTML5 se encuentra en Tambin se ha simplificado la declaracin de las siguientes
la definicin del tipo de documento (primera lnea del documento etiquetas:
HTML). Quedara de la siguiente manera:
meta (especfico de codificacin de caracteres): ahora se ha
simplificado quedando de la siguiente manera:
<!DOCTYPE html>
<meta charset=UTF-8>
DEFINICIN DE TIPO DE DOCUMENTO EN HTML5
CODIFICACIN DE CARACTERES EN HTML5

Link: Script:
<link rel=stylesheet href=styles.css /> <script src=sripts.js></script>
LINK EN HTML5 SCRIPT EN HTML5
1.1 | Elementos desaprobados en HTML5
Etiquetas eliminadas:
acronym: explica acrnimos. Mejor usar abbr. tt: muestra el texto como espaciado simple. Resulta mejor usar
CSS.
applet: inserta un applet. Resulta mejor usar la etiqueta object.
u: subraya el texto. Resulta mejor usar CSS.
basefont: tamao de fuente predeterminado. Resulta mejor
usar CSS. xmp: para texto preformateado. Resulta mejor etiqueta pre.
big: resalta un texto. Resulta mejor usar CSS. Atributos eliminados:
center: centra un texto. Resulta mejor usar CSS. align: La alineacin horizontal se debe utilizar con CSS.
dir: lista directorios. Resulta mejor usar la etiqueta ul. link, vlink, alink: en enlaces. Mejor usar CSS.
font: estilo fuente. Resulta mejor usar CSS. bgcolor: el color de nuestro componente debe ir con CSS.
frame, frameset, noframes: etiquetas para marcos. Resulta height, width: altura y anchura. Mejor usar CSS.
mejor usar CSS.
scrolling (en iframes): obsoleto debido a su falta de usabilidad.
strikes: muestra tachado en el texto. Resulta mejor usar CSS.
valign: para la alineacin vertical se debe

utilizar con CSS.
hspace, vspace: espacios en blanco se <strike>
<dir> <noframe>
consideran mala prctica.
celpadding, cellspacing, border (en
tablas): mejor con CSS. <frame>
<frameset>
target: Solo se debera usar el valor _ <font>
blank. <center>
<basefont>
font: el tipo de letra debe definirse con
CSS. <big>
marquee: desplazamiento de texto. <acronym>

Obsoleto por falta de usabilidad. <applet>
<tt>
2. Etiquetas incorporadas a HTML5

Con la aparicin del estndar HTML, se aaden una serie de nuevas etiquetas y
atributos al lenguaje:
2.1 | Etiquetas semnticas
El HTML 5 introduce una serie de elementos main: esta etiqueta contiene el cuerpo footer: se utiliza para indicar el pie de
estructurales que facilitaran tanto el de la aplicacin o del documento. El la pgina o de una seccin. Un pie de
desarrollo de las pginas como tambin el contenido principal consiste en aquel pgina contiene informacin general
anlisis de las mismas por buscadores. que est directamente relacionado con acerca de su seccin el autor, enlaces
el tema central del documento o con la a documentos relacionados, datos de
Son elementos que pretenden concretar la funcionalidad principal de la aplicacin. derechos de autor etc.
funcionalidad del elemento div (usado como
header: el elemento header debe nav: representa una parte de una pgina
divisor en bloque) y darle a su contenido un
utilizarse para marcar la cabecera de una que enlaza a otras pginas o partes
significado semntico.
pgina (contiene el logotipo del sitio, una dentro de la pgina. Es una seccin con
imagen, un cuadro de bsqueda etc.). enlaces de navegacin.
Los elementos de HTML 5 que ayudan a
estructurar la parte semntica de la pgina Puede estar anidado en otras secciones
son: de la pgina (es decir que no slo se
utiliza para la cabecera de la pgina).
El HTML 5 introduce una serie de elementos estructurales que nav: representa una parte de una pgina que enlaza a otras
facilitaran tanto el desarrollo de las pginas como tambin el anlisis pginas o partes dentro de la pgina. Es una seccin con enlaces
de las mismas por buscadores. de navegacin.
Son elementos que pretenden concretar la funcionalidad del No todos los grupos de enlaces en una pgina deben ser agrupados
elemento div (usado como divisor en bloque) y darle a su contenido en un elemento nav.
un significado semntico.
section: el elemento section representa un documento genrico
Los elementos de HTML 5 que ayudan a estructurar la parte
o de la seccin de aplicacin. Una seccin, en este contexto, es
semntica de la pgina son:
una agrupacin temtica de los contenidos.
main: esta etiqueta contiene el cuerpo de la aplicacin o del Puede ser un capitulo, una seccin de un capitulo o bsicamente
documento. El contenido principal consiste en aquel que est cualquier cosa que incluya su propio encabezado. Una pgina de
directamente relacionado con el tema central del documento o inicio de un sitio Web puede ser dividida en secciones: introduccin,
con la funcionalidad principal de la aplicacin. noticias, informacin de contacto etc.
header: el elemento header debe utilizarse para marcar la
cabecera de una pgina (contiene el logotipo del sitio, una aside: el elemento aside representa una nota, consejo, una
imagen, un cuadro de bsqueda etc.). explicacin, etc. Este elemento puede ser utilizado para efectos
de atraccin, como las comillas tipogrficas o barras laterales,
Puede estar anidado en otras secciones de la pgina (es decir
para la publicidad, por grupos de elementos de navegacin, y
que no slo se utiliza para la cabecera de la pgina).
por otro contenido que se considera por separado del contenido
footer: se utiliza para indicar el pie de la pgina o de una seccin. principal de la pgina.
Un pie de pgina contiene informacin general acerca de su
article: el elemento article representa una entrada independiente
seccin el autor, enlaces a documentos relacionados, datos de
en un blog, revista, peridico etc.
derechos de autor etc.
Cuando se anidan los elementos article, los artculos internos estn

relacionados con el contenido del artculo exterior. Por ejemplo:
en una entrada de blog en un sitio que acepta comentarios, el
elemento article principal agrupa el articulo propiamente dicho y
otro bloque article anidado con los comentarios de los usuarios.
figure: representa una unidad de contenido que es autosuficiente
y que puede ser movido fuera del flujo principal del documento
sin que esto afecte a su significado. Por lo general contiene una
figura o imagen.
figcaption: esta anidada dentro de figure y representa una nota
ESTRUCTURA TRADICIONAL
o leyenda de la figura.
ESTRUCTURA CON HTML5

2.2 | Etiquetas en formularios
En esencia, la estructura de los formularios permanece igual que

en versiones anteriores, pero se han introducido elementos y
atributos nuevos que enriquecen la manera en la que trabajamos
con formularios.
color favorito: <input type=color />
label: representa una etiqueta de un campo (texto explicativo de
un campo de formulario). Atributos:
for: indica el identificador del elemento de formulario al que
referencia. De esta forma, podemos pinchar en la etiqueta y
el navegador pondr el foco sobre el elemento referenciado.
Se ha ampliado el nmero de tipos para la etiqueta input:
number: especfico para nmeros.
search: especfico para input de buscadores.
url: especfico para direcciones con formato URL.
tel: campo especfico para telfono.
email: campo de texto especfico para e-mails. INPUT TPICO DE COLOR
color: muestra una paleta de colores para elegir.

range: muestra un componente de tipo slider (barra de datetime, date, month, week, time y datetimelocal: especficos
desplazamiento). Permite elegir un valor dentro de un rango. para manejar fechas.
elige un valor del 1 al 10: <input type=range fecha de nacimiento: <input type=date />
min=1 max=10 />
fecha de nacimiento: dd/mm/aa

elige un valor del 1 al 10:
agosto de 2015
INPUT TPICO DE COLOR
INPUT DE TIPO DATE

Adems, se aaden nuevos atributos a los formularios: required: el campo es obligatorio, es necesario darle algn valor.
placeholder: rellena el campo con un valor ilustrativo. Cuando pattern: permite definir una expresin regular para validar el
pinchamos en el campo, este valor desaparece permitindonos valor del campo.
editarlo.
title: permite aadir informacin extra al mensaje de error que
genera la validacin del campo.
novalidate: aadiendo este atributo sobre el input de tipo submit,
el formulario no se valida al pulsar el botn y se realiza la peticin
<input type=text name=nombre placeholder=nombre /> aunque existan campos en rojo.
<input type=text name=apellidos placeholder=apellidos />
oninvalid: evento que se dispara cuando la validacin del
formulario no se cumple. En el valor, se incluye el cdigo JavaScript
que va a manejar este evento (lo veremos ms adelante).
nombre
apellidos
ATRIBUTO PLACEHOLDER

Cambios en HTML5

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cambios en HTML5

Cargado por

Copyright:

Formatos disponibles

Cambios en HTML5

1.1 | Elementos desaprobados en HTML5 4

2 | Etiquetas incorporadas a HTML5 6

2.1 | Etiquetas semnticas 6

2.2 | Etiquetas en formularios 9

CODIFICACIN DE CARACTERES EN HTML5

<link rel=stylesheet href=styles.css /> <script src=sripts.js></script>

LINK EN HTML5 SCRIPT EN HTML5

1.1 | Elementos desaprobados en HTML5

valign: para la alineacin vertical se debe

marquee: desplazamiento de texto. <acronym>

2. Etiquetas incorporadas a HTML5

2.1 | Etiquetas semnticas

Cuando se anidan los elementos article, los artculos internos estn

ESTRUCTURA CON HTML5

2.2 | Etiquetas en formularios

En esencia, la estructura de los formularios permanece igual que

color: muestra una paleta de colores para elegir.

fecha de nacimiento: dd/mm/aa

INPUT DE TIPO DATE

También podría gustarte