¿Qué es HTML? La anatomía de un documento HTML5

Este es el segundo artículo de nuestra serie sobre los fundamentos absolutos del desarrollo web. Nuestro primer artículo explica en detalle qué es HTML en un nivel conceptual. Analizamos qué es un lenguaje de marcado, qué son las etiquetas y cómo se compara HTML con otras piezas importantes del rompecabezas de desarrollo web, como CSS.

Únase a nosotros hoy mientras avanzamos y eche un vistazo a cada pieza básica de un documento HTML. Explicaré todas esas cosas en la parte superior de un archivo HTML que te confunde y describiré la estructura básica que seguirás para crear tus propios archivos HTML.

DOCTYPE

Lo primero que suele ver en un archivo HTML es la declaración DOCTYPE. Antes de HTML5, esto podría ser un código muy confuso que se parecía a esto:

Hay mucho que hacer aquí y cada uno de ellos habla del navegador web, del lector o de ambos. ¿El público? Parte solo habla de la disponibilidad, la DTD significa Definición del tipo de documento, que declara la versión de HTML que se está utilizando y la sección final es una URL que indica dónde se puede encontrar la DTD.

Las palabras? Sueltas? (o transicional)? estricto? y? frameset? Consulte las diferentes versiones de HTML 4, lo que permitió un marcado ligeramente diferente. Estos fueron esencialmente solo para ayudar a los desarrolladores de la transición de versiones anteriores de HTML.

El DOCTYPE HTML5

Hay varios DOCTYPEs para elegir, que pueden ser muy confusos para los nuevos desarrolladores. Afortunadamente, HTML5 simplifica completamente la situación con un DOCTYPE refrescante y simple:

¿Ves lo fácil que es eso en comparación? Realmente es una cosa hermosa.

¿Qué hace el DOCTYPE?

Ahora hemos visto lo que es un DOCTYPE. parece pero realmente no hemos discutido lo que hace. La respuesta es que el DOCTYPE le dice al navegador qué tipo de HTML debe esperar, lo que a su vez afecta la forma en que el navegador procesa la página.

A medida que explore más el desarrollo web, aprenderá que hay un gran énfasis en el "desarrollo basado en estándares". La idea general es que si todos seguimos ciertas reglas y estándares, el desarrollo web será una práctica más coherente y coherente. Esto es mejor para los desarrolladores, mejor para los navegadores y, lo que es más importante, mejor para los usuarios.

DOCTYPEs fueron diseñados originalmente para activar el modo estándar? en los navegadores, lo que significaba que la página se representaba utilizando estándares web más nuevos. Del mismo modo, las páginas más antiguas sin un DOCTYPE activado? ¿Modo de peculiaridades? en los navegadores, que permitían el uso de prácticas más antiguas que no funcionarían correctamente en el modo estándar.

El nuevo y muy simple DOCTYPE HTML5 es compatible con todos los principales navegadores y activa el modo estándar en todos ellos. El DOCTYPE también lo ayuda a validar su código, lo que garantiza que se cumplan los estándares actuales. Cada página que cree debe usar un DOCTYPE y es de esperar que cumpla con todos los estándares.

Elemento raíz

Después del DOCTYPE, el HTML realmente comienza. Esto se indica mediante el elemento raíz HTML. Si todo su HTML es un árbol, esta es la raíz de la que brota todo lo demás.

El elemento raíz está definido por una etiqueta? De lo que aprendimos en nuestro último artículo. En este caso, es el? HTML? etiqueta.

Observe que el elemento raíz incluye un atributo de idioma, en nuestro caso inglés. Siempre asegúrese de indicar el idioma apropiado para cada página que cree.

Todo lo demás que agregaremos a esta página se encuentra dentro del elemento raíz. Es el contenedor para cada fragmento de información y pieza de contenido, la única exclusión es el DOCTYPE.

Elemento de cabeza

Lo siguiente que encontrarás en un documento HTML es la? Cabeza? sección. La etiqueta de la cabeza es exactamente lo que esperas que sea:

El material que se incluye en la sección de encabezado es principalmente informativo, le informa a usted y al explorador acerca de la página, como el título, el conjunto de caracteres, etc. Aquí es donde tradicionalmente carga importantes recursos externos.

Hay algunas cosas importantes que entran en una etiqueta de cabeza. Vamos a verlos uno por uno.

Etiquetas meta

Como probablemente pueda adivinar, las etiquetas meta contienen metadatos sobre la página. Los metadatos adoptan muchas formas y pueden incluir palabras clave, autores, descripciones, etc. Aquí hay algunas inclusiones notables:

Conjunto de caracteres
Esto es algo bastante aburrido, el conjunto de caracteres se establece normalmente en UTF-8 y esencialmente le dice al navegador qué codificación de caracteres usar.

Sus páginas definitivamente deben incluir una indicación de qué conjunto de caracteres utilizar. No lo piense demasiado, es solo una de esas cosas que necesita para mantener su plantilla. A continuación se muestra una declaración típica de juego de caracteres en HTML5.

Esto es otra cosa que se ha vuelto más fácil con HTML5. Echa un vistazo a la versión de este fragmento de código requerido para HTML 4.01:

Algunos otros metatags típicos incluyen descripción y autor. Aquí hay un ejemplo rápido y autoexplicativo de cada uno de estos:

Descripción

Autor

Título

Otra cosa que va dentro de la parte principal de su documento es la etiqueta del título. Este es un código muy simple que simplemente indica lo que le gustaría que fuera el título de la página. Aquí hay un ejemplo:

Este título generalmente se muestra al usuario en la parte superior central de la ventana del navegador, en una pestaña, etc.

Enlaces y Scripts

Lo último que discutiremos con respecto a la etiqueta principal es la inclusión de recursos externos. En una página web muy simple, normalmente verás que estos toman la forma de una hoja de estilo o script:

Aquí básicamente estoy cargando mi archivo CSS, así como jQuery (una biblioteca de JavaScript) en la página. Si estos recursos están incluidos en los archivos de origen pero no están vinculados a la sección principal, no funcionarán.Tenga en cuenta que los enlaces para estos podrían apuntar a algo en la jerarquía de carpetas locales (como arriba) o algo alojado en otro servidor web.

El enlace utilizado anteriormente para el archivo CSS utiliza una relación de enlace (rel =? hoja de estilo?). Para más información sobre las relaciones de enlace, echa un vistazo a este artículo.

Además, como alternativa a la vinculación a archivos externos, puede incrustar código directamente en el elemento principal. Aquí hay un ejemplo con CSS, pero lo mismo se puede hacer a través del script? etiqueta y JavaScript (los scripts incrustados a menudo se colocan al final del elemento del cuerpo).

Elemento del cuerpo

La parte final de una página HTML es la más importante. Todo dentro del elemento del cuerpo define el contenido y la estructura de su página. En cuanto al tiempo de desarrollo, es probable que utilice una plantilla de conjunto para todo lo anterior y dedique unos minutos a personalizarla para proyectos específicos. El resto de su tiempo HTML se gastará dentro del elemento del cuerpo.

Poniendolo todo junto

Ahora que hemos recorrido cada pieza individual de un archivo HTML, juntémoslo todo en una plantilla HTML5 extremadamente básica.

Una visión general

Mil disculpas por la naturaleza mundana de este tema, los principiantes a menudo son rechazados por el aburrimiento en este punto, pero aguantando, la verdadera diversión de HTML es todo lo que hay entre las etiquetas del cuerpo, ¡lo cual no hemos discutido!

Todas estas piezas fueron necesarias para pintar con precisión la imagen de lo que realmente es un documento HTML. Ahora vemos que un documento HTML tiene un DOCTYPE que le dice al navegador cómo representar la página y ayuda a garantizar que se usen los estándares adecuados.

También sabemos que hay una jerarquía de conjuntos en la estructura de las páginas HTML. Casi todo, excepto el DOCTYPE se lanza al elemento raíz, lo que significa que es el? Elemento primario? De los elementos de cabeza y cuerpo, que a su vez tienen sus propios hijos.

La estructura básica de un documento HTML se conoce como el DOM, o el Modelo de objetos de documento. Esto casi siempre se conoce metafóricamente como un árbol y se muestra como la imagen de arriba. Nuestro propio Jack Rocheleau escribió una mirada en profundidad en el DOM titulado Estudio más profundo del modelo de objetos de documentos de la WWW. Para el siguiente conjunto en el entendimiento de la estructura básica de una página HTML, revisa ese artículo.

Conclusión

Este artículo representa una breve descripción general de cómo se estructura un esqueleto HTML y los tipos de cosas que normalmente se incluyen. No es de ninguna manera exhaustiva, pero debería servir como una buena introducción básica a estos temas.

Cuando recién comienza con el código, la mayoría de las personas simplemente le darán una plantilla para todo el código anterior sin realmente explicar lo que hace todo. Esto puede dejar un agujero considerable en su educación, por lo que es importante leer esta información e intentar comprender lo que puede.

Permanezca con nosotros en esta serie y vuelva pronto cuando respondamos otra pregunta importante: ¿Qué es CSS?