Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a HTML 5: Introducción

Datos de búsqueda

HTML 5

HTML 5: Introducción

Advertencia: Es muy importante tener en cuenta que HTML 5 es todavía un borrador, y que podría haber características del mismo que puedan sufrir variaciones antes de convertirse en recomendación.

HTML 5: resultado de la experiencia

Fecha Versión
Noviembre 1995 HTML 2.0: Con el tiempo se le van añadiendo características (1995-97)
Enero 1997 HTML 3.2
Diciembre 1997 HTML 4.0: Correcciones en abril de 1998
Diciembre 1999 HTML 4.01: Solo pequeños cambios respecto a HTML 4.0

HTML 4.0 aparece a finales de 1997, y HTML 4.01 dos años después. Es el momento en el que comienza a expandirse la generación de contenidos Web.

HTML 4 ha sido probado a lo largo de una década, en la que se ha demostrado su gran utilidad, pero que ha destapado algunas debilidades y carencias.

Son esas debilidades y carencias las que HTML 5 trata de corregir.

El uso habitual de ciertas clases para elementos de cabecera de página (enlace externo, en inglés), de pie de página, de contenidos, etc. evidenciaba que eran necesarios nuevos elementos:

  1. footer
  2. menu
  3. title
  4. small
  5. text
  6. content
  7. header
  8. nav
  9. copyright
  10. button
  11. main
  12. search
  13. msonormal
  14. date
  15. smalltext
  16. body
  17. style1
  18. top
  19. white
  20. link

Por ello, en base a algunas de esas clases más habituales, se han creado o modificado algunos elementos:

Clase Elemento
footer footer
menu menu
title, header, top header
text, content, main, body article
nav nav
date date

XHTML: los inconvenientes

Hay HTML 5, pero ¿no hay una versión equivalente de XHTML, como la hubo con HTML 4?

La diferencia de HTML 4.01 con XHTML 1.0/1.1 es importante, XHTML se debe servir con un tipo MIME application/xhtml+xml: Es XML. Consecuencias:

  • Esto hace que hasta el más pequeño error haga que se pare la carga de la página y ésta no se llegue a visualizar en el navegador.
  • Esa severidad en el tratamiento de los errores haría que muchas páginas no pudiesen cargar, ya que la mayoría de las páginas suelen tener errores de marcado.

Esto no ocurre con HTML, el navegador es capaz de seguir interpretando la página a pesar de la presencia de errores de marcado (dependiendo de la gravedad de los mismos).

La especificación XHTML 1.0 (no así XHTML 1.1) incluía la posibilidad de no servirlo como XML, sino como texto, de modo que en caso de error el comportamiento fuese como en HTML.

Compatibilidad hacia atrás

HTML 5 se ha definido de modo que sea compatible con el modo en que los navegadores manejan el contenido de las páginas.

Los requerimientos para desarrolladores y para navegadores difieren en algunos aspectos:

  • Para el desarrollador se excluyen los elementos que caen en desuso, por ejemplo, los que cuyo cometido se ha de cumplir mediante CSS (separación de presentación y contenido).
  • Y a los navegadores se les requiere soporte para esos elementos.

De este modo no es necesario marcar características del lenguaje como obsoletas.

Sintaxis

La sintaxis de HTML 5 es compatible con los documentos HTML 4 y XHTML 1 que se utilizan en la actualidad.

Existen dos variantes de sintaxis:

  • HTML
  • XHTML

DOCTYPE: tipo de documento

<!doctype html>

El tipo de documento (DOCTYPE) sólo es obligatorio para la sintaxis HTML: Si se omite no se habilitará el modo de estándares en los navegadores.

En documentos con sintaxis XHTML, servidos como XML, el tipo de documento es opcional, ya que independientemente de su inclusión se activará el modo estándares.

Sintaxis HTML

Si se utiliza la sintáxis HTML el documento es servido como text/html.

Si la página no se considera segura se puede servir como text/html-sandboxed (sandbox).

Ejemplo de la sintáxis HTML:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Documento de ejemplo</title>
  </head>
  <body>
    <p>Párrafo de ejemplo</p>
  </body>
</html>

Sintaxis XHTML

Si se utiliza la sintáxis XHTML la página deberá servirse como XML:

  • application/xhtml+xml
  • application/xml 

Ejemplo de la sintáxis XHTML sin DTD:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Documento de ejemplo</title>
  </head>
  <body>
    <p>Párrafo de ejemplo</p>
  </body>
</html>

Ejemplo de la sintáxis XHTML con DTD:

<?xml version="1.0" encoding="UTF-8"?>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Documento de ejemplo</title>
  </head>
  <body>
    <p>Párrafo de ejemplo</p>
  </body>
</html>

Hay que hacer hincapié en la primera línea, que es la que define como XML al documento:

<?xml version="1.0" encoding="UTF-8"?>

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios de la página

Puedes comentar o hacer trackback desde tu propio sitio web.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay 7 comentarios a “HTML 5: Introducción”

02077826605 dice:

Fecha de comentario: 2015/10/12 10:34

gmail.com

Pamela dice:

Fecha de comentario: 2015/12/20 21:33

/ The very best Vitamin D source is the Sun. The basic rule for this is that the futehrr you’re away from the equator, the less Sun you receive. Also, the darker your skin, the longer you’d need to remain in the sun’s rays for. The minimum time that you need to stay out in the Sun would be about Quarter-hour. You should note that using sun block prevents the absorption from the rays. If you have darker skin, then you can safely stay out in the sun’s rays for about 30 minutes or so. Although it is extremely recommended that you simply maintain the sun for a while, people residing in colder climates might not find this possible.[]

http://www.rab-jeric.com/ dice:

Fecha de comentario: 2016/05/01 03:15

im going to have to test this, but from the sounds of it i can use annotations to link a viewer from one scene in a video letting them choose a path which could be two different times, the story can change and bring them back and forth through out the video making for a more interactive experience? woo hoo

car insurance dice:

Fecha de comentario: 2016/05/16 03:29

I would say, if you have to change it, go for Scrap Vortex, not a huge change, but gets rid of the "vomit" word.Looks great tho!MK

car insurance dice:

Fecha de comentario: 2016/06/04 15:56

Grazie a te per averci dato la possibilità di organizzare questa presentazione.Diversa sicuramente dalle presentazioni degli scorsi anni ma è giusto e normale così, le cose cambiano, il tempo passa, e la rabbia che c’era prima si è trasformata in una consapevolezza che speriamo di riuscire a trasmettere e far raggiungere anche a tutte le donne che si trovano da poco a dover affrontare questa malattia.Grazie ancora Vero!

http://www./ dice:

Fecha de comentario: 2016/07/30 02:01

I love the Beyonce video. I think that it’s great that she came on board. I’m hoping that other celebrities will start coming on board and helping Michelle Obama and parents get our children moving and healthier. Congrats on the weight loss. It may seem small but it’s progress.I’m already thinking about how I’m going to jump start my own post pregnancy weight loss program once I deliver this summer. And I totally feel you about those tornadoes. However, I still want some warmer weather though. LOLYUMMommy recently posted..

http://www./ dice:

Fecha de comentario: 2016/11/14 04:07

Hallo,bei mir war die Simkarte auch schon nach zwei Werktagen im Briefkasten. Die Freischaltung hat dann nicht einmal eine Stunde gedauert, also bis jetzt klapte alles hervoragend.Da ich zur Zeit doch ab und an mal Telefonieren muss, habe ich mich für die 100 Freiminuten entschieden und ich muss sagen, das ich total zufrieden mit Netzclub bin. Gruß Pe-Su-Ki

Hacer un comentario