HTML y CSS son los lenguajes que permiten dar estructura a nuestros proyectos web. Un sitio web puede estar compuestos de una o varias páginas. Comprender la anatomía de una página web es clave a la hora de comenzar a maquetar.
Un documento HTML está compuesto por diversos elementos que trabajan en conjunto para presentar contenido de manera apropiada en cada medio. La base de cualquier página web está conformada por HTML (estructura), CSS (diseño) y JavaScript (interactividad).
En este artículo nos enfocaremos en la anatomía de una página web desde la perspectiva de HTML y CSS.
Estructura de un documento HTML
HTML (HyperText Markup Language) es el lenguaje de marcado que define la estructura de una página web. Cada documento HTML está compuesto por diversas etiquetas que organizan el contenido en una jerarquía lógica.
Un documento HTML básico luce así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Web</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Ejemplo de título</h1>
</header>
<main>
<p>Este es el contenido principal de la página.</p>
</main>
<footer>
<small>Damián De Luca - Buenos Aires - Argentina</small>
</footer>
</body>
</html>
La cabecera del documento (<head>)
Antes de declarar la cabecera establecemos el tipo de documento con DOCTYPE. Desde la llegada de HTML5 se ha simplificado esta línea y se declarar simplemente como html (tal como lo vemos en el código del ejemplo anterior). En versiones anteriores se definían características de versión.
Los documentos HTML tienen como estructura fundamental el uso de etiquetas (que encierran el nombre del elemento con los signos < y >) y atributos, que le dan característica o información adicional. Los atributos se pueden definir en la etiqueta de apertura y suelen tener un valor entre comillas luego del signo =)
El <head> de una página web contiene metadatos e información relevante para los navegadores y motores de búsqueda. Sus principales elementos son:
<meta charset="UTF-8">: define la codificación de caracteres para evitar problemas con acentos y caracteres especiales. Dependiendo del juego de caracteres que se requieren por el idioma se puede recurrir a otros juegos de caracteres.<meta name="viewport" content="width=device-width, initial-scale=1.0">: esa línea es muy importante para ajustar el viewport y su escala. Tiene un papel importante en sitios responsive.<title>: aquí definimos el título de la página que se muestra en la pestaña del navegador.<link rel="stylesheet" href="styles.css">: vinculamos una hoja de estilos CSS externa para la presentación visual.
Existen mucha más información que se puede incluir en la cabecera, en este caso la idea ha sido declarar lo básico a modo de ejemplo. Un aspecto a tener en cuenta es que a partir de HTML5 se incorpora la etiqueta <header> que veremos más adelante en el cuerpo del documento, y no hay que confundirla con <head> ya que su uso es diferente.
En lo que respecta a metadatos de la cabecera de un documento HTML podemos consultar la documentación que ofrece MDN.
El cuerpo del documento (<body>)
El <body> contiene el contenido visible de la página y se organiza en diferentes secciones. Veamos algunos bloques clásicos incorporados a partir de HTML5:
<header>: normalmente incluye el logo y título. En ocasiones puede contener el menú de navegación.<nav>: si bien en este ejemplo no le he incluido por fines prácticos, es un bloque que se utiliza para contener la navegación principal del sitio.<main>: con esta etiqueta podremos establecer la parte principal de la página, la que contiene el contenido más relevante.<footer>: como su nombre lo indica, se utiliza como pie de página. Aquí se ubica la información adicional como derechos de autor y enlaces.
Es importante destacar que HTML5 ha impulsado la llegada de una muchas etiquetas nuevas y para este ejemplo solo tomé algunas a modo de ejemplo. En este sentido es muy recomendable seguir una estructura semántica para mejorar la accesibilidad y SEO.
Anatomía de un CSS externo
Un archivo CSS externo permite mantener el diseño separado del contenido. Su estructura básica podría incluir estilos como los que muestro en el siguiente ejemplo de código:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #222;
color: white;
text-align: center;
padding: 10px;
}
En este ejemplo vemos como desde CSS se definen los nombres de los elementos HTML y mediante llaves se establecen los estilos que se aplican siguiendo la estructura nombre de la propiedad : valor ;
Para este caso, donde la estructura es muy simple, elegí definir las reglas de CSS siguiendo el orden de los elementos como estaban marcados en el flujo original del documento HTML.
Para comprender mejor como usar CSS y sus reglas, recomiendo leer mi artículo Los selectores en CSS: una guía completa.
Vale señalar que en proyectos medianos y grandes podremos encontrar cientos de líneas en un CSS, por esta razón se puede pensar estructurar los estilos en diferentes archivos externos.
Ventajas del CSS externo
- Reutilización: un mismo archivo CSS puede aplicarse a varias páginas.
- Mantenimiento: externalizar los estilo hace que resulta más fácil modificar el diseño sin alterar el HTML.
- Carga más rápida: los navegadores pueden almacenar en caché los archivos CSS, optimizando la velocidad.
Cuándo usar CSS en dentro de un archivo html
Para pequeñas demostraciones o cuando el diseño es muy básico, se puede incluir CSS directamente en el <head> dentro de una etiqueta <style> como vemos a continuación:
<style>
p {
color: blue;
font-size: 18px;
}
</style>
Este método es muy útil en pruebas rápidas. También puede resultar una buena opción en demostraciones o ejemplos en documentación.
La manera de declarar las reglas es igual que cuando lo hacemos en un archivo externo, pero la principal diferencia es que solo se aplicará sobre esa página.
Anatomía de una página web: en conclusión
Esta guía rápida es una manera de entrar en el mundo de creación de páginas HTML y hojas de estilo CSS. Comprender los conceptos básico es clave a la hora de dar los primeros pasos en el mundo del diseño y desarrollo web.
Entender la anatomía de una página web y la organización de su HTML y CSS es fundamental para un diseño eficiente y bien estructurado. Usar CSS externo mejora la modularidad y mantenibilidad, mientras que CSS interno es ideal para demostraciones rápidas.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta