Introducción - Curso de html5 avanzado - Capítulo 1

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:

Página con html5

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>html5 avanzado - Capítulo 1 - Introducción</title>
</head>
<body>

</body>
</html>

Página con html 4

<!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, llevavan el cierre incluído 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

Capítulos


    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


    Comentarios

    Si te quedan dudas sobre el temario, sobre html5, 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.