html - plantilla - doctype must be declared first

¿Qué hace<! Doctype html> do? (7)

La declaración del doctype debe ser lo primero en un documento HTML, antes de la etiqueta.
La declaración del doctype no es una etiqueta HTML; es una instrucción para el navegador web sobre la versión del lenguaje de marcado en el que está escrita la página.
La declaración de tipo de documento se refiere a una definición de tipo de documento (DTD). La DTD especifica las reglas para el lenguaje de marcado, de modo que los navegadores representen el contenido correctamente.

Cita desde aquí: http://www.w3schools.com/tags/tag_doctype.asp

¿Qué hace esta etiqueta?

<!doctype html>

Lo que puedo ver es que con esta etiqueta en la parte superior mi html se comporta de otra manera que sin. ¿Cómo sé si necesito esta etiqueta?

Guerra del navegador y 2 modos

Para comprender la importancia de DOCTYPE , profundicemos en la historia a partir de los días de las guerras de navegadores. Durante esos días, las páginas web se escribieron en dos versiones diferentes para admitir Internet Explorer y Netscape Navigator .

Pero luego el W3C asumió la definición de estándares web. Pero lamentablemente, los navegadores con nuevos estándares no fueron capaces de generar páginas web creadas para navegadores heredados. Por lo tanto, para apoyar el sitio web creado para los navegadores QUIRK MODE se introdujo el QUIRK MODE . En el cual el navegador asume que ha escrito código y marcado anticuado e inválido según las deprimentes normas de la industria de fines de la década de los noventa.

Para diferenciar esos sitios web de los nuevos, se agregó DOCTYPE , lo que le dio al navegador una señal de que esta página web debería ser renderizada en STANDARD MODE .

HTML5 && HTML 4.01

Antes de HTML5, el html estaba basado en SGML y requería una definición de tipo de documento para establecer reglas y gramática para el marcado. Por lo tanto, doctype tenía otra información sobre la definición del tipo de documento (DTD).

Sin embargo, con la introducción de HTML5, el DOCTYPE es lo único que se necesita para habilitar el STANDARD MODE .

DOCTYPE es la abreviatura de "tipo de documento". Es una declaración utilizada en HTML para distinguir entre el modo estándar y el modo peculiar. Su presencia le dice al navegador que represente la página web en modo estándar.

Es una parte integral de HTML tal como se define en la especificación :

8.1.1 El DOCTYPE
Un DOCTYPE es un preámbulo obligatorio.
DOCTYPEs son necesarios por razones heredadas. Cuando se omiten, los navegadores tienden a usar un modo de representación diferente que es incompatible con algunas especificaciones. La inclusión de DOCTYPE en un documento garantiza que el navegador realice el mejor esfuerzo para seguir las especificaciones pertinentes.

Editar para agregar:

¿Qué hace este cinturón de seguridad?
Lo que puedo ver es que, con este cinturón de seguridad, mi auto se comporta de la misma manera que sin él. ¿Cómo sé si necesito este cinturón de seguridad?

No sabrás si lo necesitarás hasta que algo salga mal y no lo tengas.

Para hacerlo simple: <!DOCTYPE HTML> indica que el código es HTML.

Una declaración Doctype activa el modo estándar en su navegador y siempre debe usarse. El modo Quirks siempre debe evitarse.

DOCTYPE Declaration is the abbreviation for Document Type Declaration (DTD).

La declaración DOCTYPE (DTD o declaración de tipo de documento) hace un par de cosas:

Al realizar pruebas de validación de HTML en una página web, le dice al validador de HTML (Lenguaje de marcado de hipertexto) qué versión de (X) HTML estándar se supone que debe cumplir la codificación de la página web. Cuando valida su página web, el validador HTML verifica la codificación con el estándar aplicable e informa qué partes de la codificación no pasan la validación HTML (no son compatibles).
Le dice al navegador cómo renderizar la página en modo compatible con los estándares.

Si la codificación de la página web no incluye una Declaración DOCTYPE (DTD o declaración de tipo de documento) o se realiza de forma incorrecta:

No podrá usar un Validador de HTML (Lenguaje de marcado de hipertexto) para verificar la codificación de la página. La validación HTML requiere la declaración DOCTYPE.
El navegador que representa la página web procesará la codificación en el modo Quirks.
La hoja de estilo no se puede implementar según lo planeado.

¿Qué DOCTYPE deberías usar?

Si eres un principiante de HTML (HyperText Markup Language), te sugiero que utilices la declaración de HTML 4.01 Transitional . Es mucho más tolerante para el principiante al realizar la validación de HTML . También usaría esta declaración si sabe que su audiencia no tendrá un navegador que admita CSS (hojas de estilo en cascada).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Esta declaración DOCTYPE aún permite elementos y atributos de presentación que deberían estar en la hoja de estilo.

Si desea aprender a codificar en preparación para el futuro pero aún no está listo para XHTML, entonces debería usar la declaración estricta.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Con esta declaración, todos los atributos de presentación se mueven a la hoja de estilos.

Una lista completa de las declaraciones DOCTYPE (DTD) está disponible en la lista de DTD válidas que puede usar en su documento.