Esquema de una página HTML
Existen varias versiones de formatos para una página HTML, aunque desde hace varios años ya el formato de preferencia es el HTML5. Este formato no difiere mucho de sus predecesores, excepto en el hecho de que es más sencillo y directo.
La primera línea del archivo indica la versión de HTML que se está utilizando. En este caso el "DOCTYPE HTML" quiere decir que efectivamente estamos usando la versión HTML5.
Sección html
Es la sección que engloba a toda la página web. Normalmente acepta el atributo "lang" que sirve para especificar el idioma en el que está escrita la página. Se utiliza el formato ISO 639-1, que es similar al de las extensiones de dominio, entonces el español seria "es", el inglés "en", el francés "fr" y así.
Sección head
Esta sección contiene:
- Los metadatos de la página, como el título "title", la descripción "description", el autor "author" o las palabras clave "keywords". Todos esos datos se describen con la etiqueta meta. También debemos establecer el juego de caracteres en el que está escrito la página que normalmente es UTF-8.
- El estilo de una página, ya sea como hojas de estilo, que son enlaces a los archivos CSS que se utilizarán en la página bajo la etiqueta link con el atributo rel="stylesheet". O el estilo directamente escrito bajo la etiqueta style.
- El código JavaScript, que está bajo la etiqueta script y que puede ser un archivo externo definido con el atributo "src" o código directamente escrito en el mismo archivo HTML.
- Eventualmente se colocan otro tipo de metadatos como la imagen principal de una página, el icono del sitio o el esquema del contenido del sitio.
Sección body
En esta sección está el contenido del sitio que será visualizado en el navegador. Normalmente tenemos la libertad de colocar cualquier cosa, podemos llegar a extremos como escribir textos enteros sin ninguna etiqueta o solamente listas de imágenes. Sin embargo, se ha vuelto casi un estándar de que cada página tenga una cabecera, el contenido principal, una barra de contenido y un pie de página.
Sección header
Por lo general, en la cabecera de la página web tenemos:
- El logo del sitio con un enlace a la página de inicio.
- Un menú de navegación que puede ser identificado con la etiqueta nav.
- Botones para conectarse o desconectarse del sitio web, o enlaces externos a las redes sociales.
Contenido principal
Eventualmente podemos utilizar la etiqueta
Sección aside
En esta sección podemos colocar:
- Anuncios publicitarios
- Enlaces a los últimos artículos o artículos destacados de nuestros sitios.
- Enlaces a las categorías de contenido del sitio.
Sección footer
En el pie de página tenemos:
- Información de contacto como teléfono, dirección y el email del sitio.
- Información sobre los créditos de la página.
- Enlaces a las secciones destacadas o sitios webs amigos.
- Enlaces a las páginas de políticas de uso y términos de referencia.
Cabe notar que este esquema no funciona en el caso de sitios que se comportan más como aplicaciones. Por ejemplo, una red social o un sitio web para leer emails no tiene los mismos elementos.
Lo cierto es que la web nos ofrece completa libertad al momento de escribir código HTML.
