¿Qué cosas han cambiado en html5 desde html 4?
Capítulo 1: Novedades y cambios en html5
Capítulo introductorio a html5 en el que vas a ver algunas de las novedades que tiene este estándar.
La etiqueta <!doctype html> y <meta charset=" ">
Algo que podemos ver como gran cambio, son estas dos etiquetas, <!doctype html> y <meta charset=" ">, las cuales se han simplificado enormemente. Aquí tienes un ejemplo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5 avanzado - Capítulo 1 - Introducción</title>
</head>
<body>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>html5 avanzado - Capítulo 1 - Introducción</title>
</head>
<body>
</body>
</html>Como puedes ver, ahora es mucho más sencillo de escribir con html5.
Compatibilidad de html5 con otras versiones anteriores
Algo muy bueno de html5 es que tiene compatibilidad con el estándar 4 y con xhtml 1, por lo que aunque utilicemos alguna norma que no sea propia de html5, va a funcionar. Por ejemplo, el cierre del salto de línea en xhtml 1 es así:
Etiqueta xhtml 1
<br/>Etiqueta html5
<br>En xhtml en elementos sin contenido como es un salto de línea, llevaban el cierre incluido en la misma apertura. En html5 no es necesario, ya que los elementos vacíos (sin contenido) no requieren este cierre.
Sin embargo, por temas de retrocompatibilidad y por gustos, puedes utilizar las dos formas.
Etiquetas semánticas nuevas en html5
En html5 se han añadido etiquetas semánticas atributos nuevos. Iremos viendo todo esto a lo largo del curso.
Aquí tienes las nuevas etiquetas:
| Etiqueta | Descripción |
|---|---|
| <article> | Define un artículo |
| <aside> | Define el contenido aparte del contenido de la página |
| <details> | Define detalles adicionales que el usuario puede ver u ocultar |
| <figure> | Especifica contenido autónomo como ilustraciones, diagramas, fotos, listados de códigos, etc. |
| <figcaption> | Define un título para un elemento <figure> |
| <footer> | Define un pie de página para un documento o sección |
| <header> | Especifica un encabezado para un documento o sección |
| <main> | Especifica el contenido principal de un documento |
| <mark> | Define texto marcado / resaltado |
| <nav> | Define enlaces de navegación |
| <section> | Define una sección en un documento |
| <summary> | Define un encabezado visible para un elemento <details> |
Etiquetas obsoletas que se han eliminado en html5
No todo son añadidos. También se han eliminado bastantes etiquetas que se han considerado obsoletas. Aquí te dejo una tabla para que veas cuales se han eliminado y cuales se han sustituido.
| Etiquetas eliminadas | Sustitución |
|---|---|
| <acronym> | <abbr> |
| <applet> | <object> |
| <basefont> | Estilos CSS |
| <big> | Estilos CSS |
| <center> | Estilos CSS |
| <dir> | <ul> |
| <font> | Estilos CSS |
| <frame> | |
| <frameset> | |
| <noframe> | |
| <strike> | Estilos CSS, <s> o <del> |
| <tt> | Estilos CSS |
Comentarios
Si te quedan dudas sobre el temario, sobre html, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.
