No sabes la de veces que he escrito el Doctype en una página web sin tener ni idea de lo que era. Claro que eso era antes, ahora ya sí.
Así que, en este capítulo de la serie del diccionario de etiquetas de HTML vamos a hablar sobre el doctype <!doctype>, que realmente no es ninguna etiqueta de HTML aunque lo parezca.
Sino más bien, es una declaración que informa al navegador que versión de HTML estamos usando en nuestro documento.
Y al final de esta lección veremos un pequeño truco para crear el doctype de forma rápida con Vscode, o mejor dicho, un pequeño atajo en visual studio code (y en la mayoría de “editor de código” modernos).
De esta manera ahorraremos mucho tiempo evitando hacerlo a mano.
Qué es el Doctype
Cómo hemos comentado al principio, el doctype en HTML no es ninguna etiqueta de como tal, sino que es una declaración que se hace al principio del documento y sirve para definir la versión de HTML que vamos a usar.
Este tipo de declaración también se conoce con las siglas DTD que significa “document type declaration”en inglés. En español sería algo así como “declaración del tipo de documento”.
¿Para qué sirve el doctype entonces? (ejemplos)
Para comprender el uso del doctype nos tendríamos que remontar a versiones anteriores de HTML y XML donde se especificaba más información sobre esta declaración.
Ejemplo 1:
EN HTML 4.1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Ejemplo 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Cómoi puedes ver era bastante más complicado que ahora, donde se coloca de forma «simple». Vease a continuación.
Cómo poner el Doctype en HTML
Hoy en día, en la mayoría de navegadores comunes no hace falta especificar tan información y podemos crear el doctype fácilmente.
<!DOCTYPE html>Esta declaración se coloca al principio del documento HTML (se coloca incluso antes que la etiqueta <html>) y antes de la cabecera <head> evidentemente.
Veamos a ver un ejemplo a continuación.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Este es el ejemplo más típico y que nos vamos a encontrar normalmente en casi todas las páginas web en HTML.
Truco Doctype html visual studio code
Es posible que estés pensando si hay alguna forma de crear este pedazo de código de forma más rápida, sin tener que picar código y hacerlo de forma manual. Pues bien, en editores “modernos” como Visual Studio Code (que es uno de los más utilizados) existe la opción de realizar todo este trozo de código mediante un atajo de teclado.
Para que este atajo de teclado y otros relacionados con HTML funcionen correctamente, has de usarlos en un documento HTML. Es decir, el archivo con el que estés trabajando debe contener el sufijo .html (como index.html).
Para crear el doctype de forma automática tan solo deberás escribir el símbolo “!” en el documento y acto seguido darle a la tecla tabulador (tab).
Teclas: ! + Tab
Así de fácil.
Ahora no hace falta que lo escribas tu mismo o que lo copies y pegues de otro sitio 😉
Espero que te haya gustado esta lección sobre el Doctype y recuerda que si tienes cualquier pregunta o sugerencia puedes dejarla en los comentarios.