Cuáles son las diferencias entre HTML4

7
¿Cuáles son las diferencias entre HTML4 (XHTML 1.0) y HTML5? El W3C ha preparado un documento, HTML5 differences from HTML4, en el que detalla las principales diferencias entre HTML4 (y su variante según XML, XHTML 1.0) y la nueva versión del lenguaje, HTML5. Algunas de las principales diferencias son: HTML5 define una sintaxis que es compatible con HTML4 y XHTML 1.0. Por tanto, un salto de línea se puede escribir como <br> (HTML4) o <br /> (XHTML 1.0). Para definir el juego de caracteres se introduce un nuevo atributo para la etiqueta <meta>: <meta charset=”UTF-8″> aunque todavía es posible utilizar el método tradicional: <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″> Se simplica el DOCTYPE: <!DOCTYPE html> HTML5 permite incluir elementos de SVG y MathML. Se introducen nuevos elementos, como: section, article, aside, header, footer, etc. Se introducen nuevos atributos, como: media, charset, autofocus, placeholder, etc. Algunos elementos cambian, como: a, b, i, menu, etc. Algunos atributos cambian, como: type, name, summary, etc. Algunos elementos desaparecen, como: basefont, big, center, etc. Algunos atributos desaparecen, como: align, background, bgcolor, etc. Mejora de las API, como: getElementsByClassName() y innerHTML. Etiquetas Etiqueta Atributos Comentarios <!-- --> Estándar o ninguno <!DOCTYPE> Estándar o ninguno

Transcript of Cuáles son las diferencias entre HTML4

Page 1: Cuáles son las diferencias entre HTML4

¿Cuáles son las diferencias entre HTML4 (XHTML 1.0) y HTML5?

El W3C ha preparado un documento, HTML5 differences from HTML4, en el que detalla las principales diferencias entre HTML4 (y su variante según XML, XHTML 1.0) y la nueva versión del lenguaje, HTML5.

Algunas de las principales diferencias son:

HTML5 define una sintaxis que es compatible con HTML4 y XHTML 1.0. Por tanto,

un salto de línea se puede escribir como <br> (HTML4) o <br /> (XHTML 1.0).

Para definir el juego de caracteres se introduce un nuevo atributo para la etiqueta

<meta>:

<meta charset=”UTF-8″>

aunque todavía es posible utilizar el método tradicional:

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

Se simplica el DOCTYPE:

<!DOCTYPE html>

HTML5 permite incluir elementos de SVG y MathML.

Se introducen nuevos elementos, como: section, article, aside, header, footer, etc.

Se introducen nuevos atributos, como: media, charset, autofocus, placeholder, etc.

Algunos elementos cambian, como: a, b, i, menu, etc.

Algunos atributos cambian, como: type, name, summary, etc.

Algunos elementos desaparecen, como: basefont, big, center, etc.

Algunos atributos desaparecen, como: align, background, bgcolor, etc.

Mejora de las API, como: getElementsByClassName() y innerHTML.

Etiquetas

Etiqueta Atributos Comentarios

<!-- --> Estándar o ninguno

<!DOCTYPE> Estándar o ninguno

Page 2: Cuáles son las diferencias entre HTML4

<a> href | target | rel | hreflang | media | type

Atributo Añadido:media

Atributo cambiado: Target

<abbr> Estándar o ninguno <acronym> Etiqueta Eliminada

<address> Estándar o ninguno <applet> Etiqueta eliminada

<area> Estándar o ninguno <article> Atributos globales Nueva etiqueta

<aside> Atributos globales Nueva etiqueta

<audio> autobuffer | autoplay | controls | loop | src Nueva etiqueta

<b> Atributos globales Etiqueta cambiada

<base> Estándar o ninguno <basefont> Etiqueta eliminada

<bb> Estándar o ninguno <bdo> Estándar o ninguno <big> Etiqueta eliminada

<blockquote> Estándar o ninguno <body> Estándar o ninguno

<br> Estándar o ninguno <button> Estándar o ninguno <canvas> height | width Nueva etiqueta

<caption> Estándar o ninguno <center> Etiqueta eliminada

<cite> Atributos globales Etiqueta cambiada

<code> Estándar o ninguno <col> Estándar o ninguno

<colgroup> Estándar o ninguno

<command> checked | default | disabled | hidden | icon | label | radiogroup | type Nueva etiqueta

<datagrid> Estándar o ninguno <datalist> Atributos globales Nueva etiqueta

<dd> Estándar o ninguno <del> Estándar o ninguno

<details> open Nueva etiqueta

<dialog> Atributos globales Nueva etiqueta

<dir> Etiqueta eliminada

Page 3: Cuáles son las diferencias entre HTML4

<div> Estándar o ninguno <dfn> Estándar o ninguno <dl> Estándar o ninguno <dt> Estándar o ninguno <em> Estándar o ninguno

<embed> height | src | type | width Nueva etiqueta

<fieldset> Estándar o ninguno <figure> Atributos globales Nueva etiqueta

<font> Etiqueta eliminada

<footer> Atributos globales Nueva etiqueta

<form> Estándar o ninguno <frame> Etiqueta eliminada

<frameset> Etiqueta eliminada

<h1> ... <h6> Estándar o ninguno <head> Estándar o ninguno

<header> Atributos globales Nueva etiqueta

<hgroup> Atributos globales Nueva etiqueta

<hr> Ninguno Etiqueta cambiada

<html> Estándar o ninguno <i> Ninguno Etiqueta cambiada

<iframe> Estándar o ninguno <img> Estándar o ninguno

<input>

accept | alt | auto-complete | autofocus | cheked | disabled | form | formaction | formenctype | formmethod

| formnovalidate | formtarget | height | list | max | maxlength | min | multiple | name | pattern1

placeholder | readonly | required | size | src | step | type | value | width

Etiqueta cambiada: Añadidos 13

elementos a type

<ins> Estándar o ninguno <isindex> Etiqueta eliminada

<kbd> Estándar o ninguno <label> Estándar o ninguno

<legend> Estándar o ninguno <li> Estándar o ninguno

<link> Estándar o ninguno <mark> Atributos globales Nueva etiqueta

<map> Estándar o ninguno <menu> Estándar o ninguno <meta> Estándar o ninguno

Page 4: Cuáles son las diferencias entre HTML4

<meter> high | low | max | min | optimum | value Nueva etiqueta

<nav> Atributos globales Nueva etiqueta

<noframes> Etiqueta eliminada

<noscript> Estándar o ninguno <object> Estándar o ninguno

<ol> Estándar o ninguno <optgroup> Estándar o ninguno

<option> Estándar o ninguno <output> form Nueva etiqueta

<p> Estándar o ninguno <param> Estándar o ninguno

<pre> Estándar o ninguno <progress> max | value Nueva etiqueta

<q> <ruby> cite Nueva etiqueta

<rp> Atributos globales Nueva etiqueta

<rt> Atributos globales Nueva etiqueta

<s> Etiqueta eliminada

<samp> Estándar o ninguno <script> Estándar o ninguno

<section> cite Nueva etiqueta

<select> Estándar o ninguno

<small> Atributos globales Etiqueta Cambiada

<source> media | src | type Nueva etiqueta

<span> Estándar o ninguno

<strike> Etiqueta eliminada

<strong> Estándar o ninguno

<style> Estándar o ninguno

<sub> Estándar o ninguno

Page 5: Cuáles son las diferencias entre HTML4

<sup> Estándar o ninguno

<table> Estándar o ninguno

<tbody> Estándar o ninguno

<td> Estándar o ninguno

<textarea> Estándar o ninguno

<tfoot> Estándar o ninguno

<th> Estándar o ninguno

<thead> Estándar o ninguno

<time> datetime | pubdate Nueva etiqueta

<title> Estándar o ninguno

<tr> Estándar o ninguno

<tt> Etiqueta eliminada

<u> Define texto que debe tener un estilo diferente del texto normal 3

<ul> Estándar o ninguno

<var> Estándar o ninguno

<video> src | poster | autobuffer | autoplay | loop | controls | width | height Nueva etiqueta

<xmp> Etiqueta eliminada

______________________________________________________________________

Page 6: Cuáles son las diferencias entre HTML4

Novedades

Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs libres (WebM + VP8) o privados (H.264/MPEG-4 AVC).

Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command. Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente.

Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript.

Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML.

Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.

[editar]Web Semántica

Añade etiquetas para manejar la Web Semántica (Web 3.0): header, footer, article, nav, time( fecha del contenido), link rel=‘’ (tipo de contenido que se enlaza).

Estas etiquetas permiten describir cual es el significado del contenido. Por ejemplo su importancia, su finalidad y las relaciones que existen. No tienen especial impacto en la visualización, se orientan a buscadores.

Los buscadores podrán indexar e interpretar esta meta información para no buscar simplemente apariciones de palabras en el texto de la página.

Permite incorporar a las páginas ficheros RDF / OWL (con meta información) para describir relaciones entre los términos utilizados.

[editar]Nuevas APIs y Javascript

API para hacer Drag & Drop. Mediante eventos. API para trabajar Off-Line. Permite descargar todos los contenidos necesarios y trabajar en

local. API de Geoposicionamiento para dispositivos que lo soporten. API Storage. Facilidad de almacenamiento persistente en local, con bases de datos (basadas

en SQLite) o con almacenamiento de objetos por aplicación o por dominio Web (Local Storage y Global Storage). Se dispone de una Base de datos con la posibilidad de hacer consultas SQL.

WebSockets. API de comunicación bidireccional entre páginas. Similar a los Sockets de C. WebWorkers. Hilos de ejecución en paralelo.

Page 7: Cuáles son las diferencias entre HTML4

ESTÁNDAR FUTURO. System Information API. Acceso al hardware a bajo nivel: red, ficheros, CPU, Memoria, puertos USB, cámaras, micrófonos … muy interesante pero con numerosas salvedades de seguridad.

______________________________________________________________________

Según su concepto es mejor HTML 5 que Flash? Porque?

Flash no tenía características de accesibilidad desde el principio. Posteriormente se añadieron, pero por necesidad, porque lo pidió la gente. Incluso así, aunque se utilicen las características de accesibilidad de Flash, los objetos hechos en Flash siempre han tenido un problema: en algunos navegadores no se puede acceder a ellos directamente con el teclado (nosotros no nos damos cuenta de ello porque lo usamos con ratón). Una persona ciega o una persona con problemas de movilidad que utilice sólo el teclado, tendrá graves problemas de accesibilidad con los objetos hechos en Flash. HTML siempre ha tenido en cuenta la accesibilidad. Puede ser mejor o peor, aún tiene muchas cosas por solucionar, pero se tiene el compromiso de ello. Por tanto, entre Flash y HTML5, sin duda HTML5 es mejor. Aquí puedes encontrar algo de información interesante sobre HTML5 y la accesibilidad: http://html5accessibility.com/ Un problema importante para que HTML5 triunfe es la falta de buenas herramientas de autor. Flash siempre ha tenido buenos (o malos) entornos de desarrollo, pero por ahora HTML5 carece de ello. Sin embargo, todo es cuestión de tiempo. Incluso Adobe está desarrollando su propia herramienta, Edge (http://labs.adobe.com/technologies/edge/) oWallaby

Por qué cree usted que empresas como Apple apuestan solo por HTML5 y ya no instalan en sus dispositivos Plugins de Flash?

Steve Jobs dijo que Flash no es un estándar abierto - es controlado por Adobe Systems - mientras que HTML5 está en gran medida controlada por un comité ( WHATWG ), formado por tres empresas - Opera Software , la Fundación Mozilla ., y Apple

Bibliografía

http://es.wikipedia.org/wiki/HTML5#Diferencias_entre_HTML5_y_HTML4.2FXHTML http://www.desarrolloweb.com/actualidad/html-4-5-diferencias-1465.html http://accesibilidadenlaweb.blogspot.com/2012/03/que-es-mejor-flash-o-html5.html http://www.apple.com/hotnews/thoughts-on-flash/