NOTA:

No se te olvide, los nombres de los archivos y sus extensiones y el nombre de las

carpetas de tus pginas web han de ir siempre escritas solo con letras minsculas.
Recuerda tambin asegurarte de que el nombre del archivo no contenga ningn smbolo
raro, como acentos o tildes y espacios en blanco. Si es as, o los eliminas del nombre del
archivo o casi seguro que vas a tener problemas con l y no te aparecer la imagen en tu
pgina.
Atte: www.elarcorp.com

Diferencias entre HTML 4 y HTML 5

1. HTML5 contina en progreso
Si bien est claro el hecho de tener una web maquetada en HTML4 nos permite contar
con un estndar de soluciones ya que HTML4 tiene a diferencia de HTML5 que est
an en proceso experimental y de desarrollo, es muy probable que muchas cosas sigan
cambiando con el tiempo, y generando algunas dificultades, situacin a la que ya no est
sujeto ningn producto web hecho en HTML4
2. Sintaxis simplificada
La declaracin de tipo de documento de forma ms sencilla es slo una de las muchas
novedades de HTML5. Ahora solo tienes que escribir solamente: <DOCTYPE
HTML!>. La sintaxis de HTML5 es compatible conHTML4 y XHTML1, pero no con
SGML.
3. Elemento <canvas> poniendo en su lugar a Flash
Flash ha sido un dolor de cabeza para unos y una maravilla para otros muchos usuarios
de la Web, por lo que hay una importante cantidad de desarrolladores nada contentos
con la forma en la que HTML5 trata a Flash; pero es cierto que para todos los dems
usuarios que estamos cansados de los vdeos en flash que tardan aos en cargarse y

By: Elar E., HANCCO QUISPE

26

www.elarcorp.com

funcionar, el nuevo elemento <canvas> y su utilidad para la representacin de grficos

es un sueo hecho realidad.
Aunque es cierto que hasta hoy el elemento <canvas> no ofrece todas las ventajas de
Flash hay mucho que hace suponer que se acerca el da en que esta herramienta quede
obsoleta ante el potencial de HTML5 y su magnifica integracin.
4. Nuevos elementos <header> y <footer>
HTML5 est desarrollado con la intencin de reflejar mejor la nueva anatoma de los
sitios web. Es por eso que hay algunos elementos nuevos, como <header> y <footer>,
que estn diseados especficamente para marcar estas partes de la web.
Con este desarrollo en el lenguaje ya no es necesario identificar a estos dos
elementos con la etiqueta <div>.
5. Nuevos elementos <section> y <article>
Al igual que los elementos <header> y <footer>, el <section> y <article> en HTML5
permitir a los desarrolladores marcar estas reas de la pgina como tal.
Adems de hacer el cdigo ms estructurado, este tambin tendr un efecto positivo en
tus esfuerzos de SEO ya que para los motores de bsqueda ser ms fcil el ranking de
tu pgina.
6. Nuevos elementos <menu> y <figure>
El elemento nuevo <menu> puede ser utilizado no solo para los mens convencionales,
sino tambin para las barras de herramientas y mens contextuales, aunque en realidad
estos no son los elementos ms utilizados en una pgina.
Del mismo modo, el elemento <figure> es una forma adicional til para organizar el
texto y las imgenes en tu pgina de una manera profesional. Es cierto que se pueden
definir los mens y las cifras en una hoja de estilo pero es bueno que se pueda utilizar
en la construccin de elementos de HTML5.

By: Elar E., HANCCO QUISPE

27

www.elarcorp.com

7. Nuevos elementos <audio> y <video>

Son probablemente dos de las novedades ms tiles para HTML5. Como su nombre
indica, se utilizan para insertar archivos de audio y vdeo.
Tambin hay algunos nuevos elementos multimedia y atributos, tales como <track>, que
ofrece pistas de texto para el elemento de vdeo.Con estas incorporaciones HTML5 est
consiguiendo definitivamente que la Web 2.0 sea ms amigable. El problema es que al
tiempo que HTML5 se convierte en una tecnologa ampliamente aceptada, la Web 2.0
podra ser noticia vieja.
8. Un nuevo nivel de las formas
<form> y <forminput> vivieron una gran cantidad de revisiones y ahora tienen muchos
atributos nuevos (y los modificados, tambin). Si ests usando con frecuencia las
formas tomate un tiempo para revisar las novedades con ms detalle.
9. No ms <b> y <font>
Esto es un cambio ms que yo no entiendo todava del todo. No creo que la eliminacin
de la <b> y elementos <font> vaya a ayudar mucho. pero las directrices oficiales dicen
que estos elementos se manejan mejor en CSS.
10. Han desaparecido <frame>, <center> y <big>
Seguramente no recuerdas cuando fue la ltima vez que utilizaste una de estas etiquetas
lo cual indica que ha sido una buena decisin, todo lo que sea deshacernos de
nomenclatura intil es bienvenido.
Estas 10 diferencias entre HTML5 y HTML4 son slo una pequea fraccin de lo que
es nuevo. Adems de estos grandes cambios, tambin podramos nombrar unos pocos
menores, como el nuevo atributo del elemento invertido <ol> que permite a una lista
que se ordenan en orden descendente, o modificar el uso del elemento <u>.

Otra cosa que llama la atencin es el campo INPUT, que ahora tendr muchos ms
valores posibles en el atributo type: datetime, date, month, week, number, url, email,
color.
By: Elar E., HANCCO QUISPE

28

www.elarcorp.com

Tabla comparativa de elementos de HTML 4 Y HTML 5

Etiqueta

Descripcin
Para incrustar comentarios
<!>
<!DOCTYPE> Para indicar el tipo de documento
El hipervnculo de toda la vida
<a>
Para abreviaciones
<abbr>
No soportado. Define un acrnimo
<acronym>
Define un elemento de la direccin
<address>
No soportado. Define un applet
<applet>
Define un rea dentro de un mapa de imagen
<area>
Define un artculo
<article>
Define el contenido, aparte de contenido de la pgina
<aside>
Define el contenido de sonido
<audio>
Define texto en negrita
<b>
Define una URL base para todos los enlaces en una pgina
<base>
No soportado. Usar CSS en lugar
<basefont>
Define la direccin de la pantalla de texto
<bdo>
No soportado. Define texto grande
<big>
Defines a long quotation Define una larga cita
<blockquote>
Defines the body element Define el cuerpo elemento
<body>
Inserts a single line break Inserta un salto de lnea
<br>
Defines a push button Define un botn
<button>
Defines graphics Define grficos
<canvas>
Defines a table caption Define una tabla ttulo
<caption>
Not supported. Defines centered text No soportado. Define
<center>
texto centrado
Defines a citation Define una cita
<cite>
Define el cdigo de texto
<code>
Define las caractersticas de las columnas de la tabla
<col>
Define grupos de columnas de la tabla
<colgroup>
Define un botn de comando
<command>
Define los datos en una lista de rboles
<datagrid>
Define una lista desplegable
<datalist>
<datatemplate> Define una plantilla de datos
Define una descripcin de la definicin
<dd>
Define texto suprimido
<del>
Define los detalles de un elemento
<details>
Define un cuadro de dilogo (conversacin)
<dialog>
No soportado. Define una lista de directorio
<dir>

By: Elar E., HANCCO QUISPE

29

4
4
4
4
4
4
4
4
4

5
5
5
5
5
5

5
5
5
5
4 5
4 5
4
4 5
4
4 5
4 5
4 5
4 5
5
4 5
4
4
4
4
4

5
5
5
5
5
5
5
5
4 5
4 5
5
5
4

www.elarcorp.com

<div>
<dfn>
<dl>
<dt>
<em>
<embed>
<eventsource>
<fieldset>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> a <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<isindex>
<kbd>
<label>
<legend>
<li>
<link>
<mark>
<map>
<menu>
<meta>
<meter>
<nav>
<nest>
<noframes>
<noscript>

Define una seccin en un documento

Define un trmino definicin
Define una lista de definicin
Define un termino definicin
Define destac texto
Define un elemento embebido de contenido interactivo
Define un objetivo para los eventos enviados por un servidor
Define un fieldset
Define un grupo de los contenidos de los medios, y su
leyenda
Obsoleto. Define texto fuente, el tamao y el color
Define un pie de pgina de una seccin o pgina
Define un formulario
No soportado. Define una sub ventana (un marco)
No soportado. Define un conjunto de marcos
Define tamao de la cabecera 1 a 6
Provee informacin sobre el documento
Define un encabezado de una seccin o pgina
Define una lnea horizontal
Define un documento html
Define texto en cursiva
Define una lnea sub ventana (frame)
Define una imagen
Define un campo de entrada
Define texto insertado
No soportado. Define un nico campo de entrada de lnea
Define el teclado de texto
Define una etiqueta para formularios
Define un ttulo en un fieldset
Define un elemento de la lista
Define un recurso de referencia
Define texto marcado
Define un mapa de imagen
Define una lista de men
Define la informacin de metadatos
Define medicin dentro de un rango predefinido
Define vnculos de navegacin
Define una nestingpoint en un datatemplate
No soportado. Noframe Define una seccin
Define una seccin noscript

By: Elar E., HANCCO QUISPE

30

4
4
4
4
4

5
5
5
5
5
5
5
4 5
5
4
5
4 5
4
4
4 5
4 5
5
4 5
4 5
4 5
4 5
4 5
4 5
4 5
4
4 5
4 5
4 5
4 5
4 5
5
4 5
4 5
4 5
5
5
5
4
4 5

www.elarcorp.com

<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rule>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<tt>
<u>
<ul>
<var>
<video>
<xmp>

Define un objeto incrustado

Define una lista ordenada
Define un grupo de opciones
Define una opcin en una lista desplegable
Define algunos tipos de produccin
Define un prrafo
Define un parmetro para un objeto
Define texto preformateado
Define el progreso de una tarea de cualquier tipo
Define una breve cita
Define las normas de actualizacin de una plantilla
No soportado. Define texto tachado
Define el cdigo de muestra
Un Script
Una seccin
Lista seleccionable
Texto en pequeo
Definir un recurso media
Una seccin del documento
No soportado. Define texto tachado
Texto en negrita
Para definir un estilo
Para subndices
Para superndice
Para definir una tabla
Cuerpo de la tabla
Una celda de la tabla
Define una rea de texto
Pie (Footer) de una tabla
Define una cabecera de la tabla
Define una cabecera de la tabla
Defina una fecha
Para el titulo de la pgina web
Fila de una tabla
No soportado. Define texto teletipo
No soportado. Define texto subrayado
Para listas desordenadas
Para definir una variable
Para indicar que queremos incrustar un video
No soportado. Define texto preformateado

By: Elar E., HANCCO QUISPE

31

4
4
4
4
4
4
4
4

5
5
5
5
5
5
5
5
5
5
5

4
4 5
4 5
5
4 5
4 5
5
4 5
4
4 5
4 5
4 5
4 5
4 5
4 5
4 5
4 5
4 5
4 5
4 5
5
4 5
4 5
4
4
4 5
4 5
5
4

www.elarcorp.com