Esquema de una página HTML

En este artículo veremos el esquema básico de una página en HTML5, la última version de código HTML que existe.

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

para crear secciones en cada página. Por ejemplo, una sección para colocar el artículo principal, otra para los enlaces a los artículos relaciones y otra para los comentarios. El contenido es completamente libre, aunque por lo general se tratan de artículos compuestos de párrafos, imágenes y videos.

 

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.

70 me gusta
327 vistas
Anterior ¿Cómo se escribe en código HTML?
Siguiente ¿Existen reglas para escribir código HTML?
Programar en HTML y CSS

Programar en HTML y CSS

En esta lista de tutoriales veremos como programar de forma clara y directa en código HTML y CSS que son la base de la web.

¿Cómo se escribe en código HTML?

En esta sección veremos los elementos y la forma en la que se debe escribir el código de hipertexto o HTML.
Tiene video

Esquema de una página HTML

En este artículo veremos el esquema básico de una página en HTML5, la última version de código HTML que existe.

¿Existen reglas para escribir código HTML?

En este artículo analizaremos la forma correcta de escribir en código HTML.

¿Para qué sirve el código CSS?

Aquí veremos para que sirven las hojas de estilo y su uso en los sitios web.

Unidades de medida CSS

En esta sección analizamos todas las unidades de medida que existen en CSS

Propiedades de estilo CSS de bloques

En este artículo vemos las propiedades de estilo que tienen los bloques utilizando una hoja de estilos CSS.

Propiedades CSS para los textos

Aquí veremos como se puede dar estilo a los textos utilizando las propiedades de estilo CSS.

Selectores de estilo CSS

En esta sección vamos a analizar lo básico sobre los selectores de estilo CSS.

¿Qué sucede si no uso estilos CSS en mi página?

En esta sección analizaremos qué es lo que sucede cuando no se utiliza ninguna hoja de estilos CSS en un sitio web.

¿Debería utilizar un framework CSS?

Muchas veces nos preguntamos si vale la pena utilizar un framework como Bootstrap o MaterialUI. En este artículo analizamos la situacion.