Estructura básica de una página web en HTML

Todos navegamos por internet, ya sea en Firefox o en otro navegador. Y todos tenemos una idea de lo que es una página web. Pero creo que un número menor de personas llega a conocer cuál es la estructura básica de una página web. La mayor parte de las webs que consultamos están escritas según un lenguaje muy particular, que seguro que habéis escuchado alguna vez: HTML. El lenguaje HTML proviene del inglés HiperText Markup Language, o lo que es lo mismo, lenguaje de marcas de hipertexto en nuestro idioma.

En esta entrada os voy a dar unas nociones básicas para que los iniciados y novatos tengáis una idea algo más clara de cómo se estructura una web en HTML.

Estructura básica de una página web en lenguaje HTML

El lenguaje de programación HTML se basa en etiquetas de abrir y cerrar elementos. Dicho así puede sonar un poco abstracto, pero veamos un ejemplo de página web codificada en HTML muy sencilla para describir uno a uno esos elementos y lo que significan las etiquetas de abrir / cerrar.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
<title>Esto es una prueba de página web en Viva el Software Libre</title>
	</head>
	<body>
		<header><h1>Título de Viva el Software Libre</h1></header>
	</body>
</html>

Este es el resultado de la página web anterior:

Estructura básica de una página web en HTML

Pero para comprender en profundidad qué significan todas esas etiquetas, vamos a descomponerlas una a una:

<!DOCTYPE html> Informa al navegador sobre la versión del HTML, en este caso HTML 5.

<html></html> El código entre ellas debe ser interpretado como HTML. Dentro de estas etiquetas hay que señalar dos partes principales:

  • <head></head> Es la cabecera. Es la información que necesita el navegador para que pueda ejecutar adecuadamente la web. La información no será visible en el navegador. Es donde se ponen las características básicas de la web. Pueden incluir otras etiquetas dentro de ellas:
    • <meta> (no tiene cierre). Indica la codificación de los caracteres.
    • <title></title> Texto que se utiliza como título en la barra o pestaña del navegador.
    • <link> (no tiene cierre). Nos permite enlazar con un recurso externo. Como un archivo CSS.
    • <style></style> Nos permite introducir código CSS en su interior.
    • <script></script> Nos permite invocar archivos externos JavaScript. Puede ser un enlace relativo o absoluto.
  • <body></body> Es el cuerpo. Dentro de estas etiquetas están los elementos que sí se van a ver en el navegador. Pueden incluir dentro otras etiquetas, como…
    • <header></header> Define el título.
    • <footer></footer> Define los pies de página.
    • <div></div> Define las divisiones de la web.
    • <h1></h1> Encabezados y subencabezados. Van hasta <h6>
    • <p></p> Crea un párrafo de texto.
    • <br> (no tiene cierre). Equivale a un punto y aparte.
    • <strong></strong> o <b></b>. Negrita.
    • <i></i> o <em></em>. Cursiva.
    • <u></u>. Subrayado.
    • Pero también otras vistas en el <head></head>, como <link> o <script>. En este caso, sí que se visualizarán.

Algunas etiquetas extras y atributos de HTML

Lo que hemos visto anteriormente es la estructura básica de una página web escrita con lenguaje HTML.

Introducción de comentarios

Si empezamos a editar el código HTML más en profundidad, llegará el momento en que necesitemos añadir comentarios entre el código para poder informarnos de qué está haciendo. Para ello, dentro de la sección <body></body> podemos añadir comentarios no ejecutables que sirvan para enterarnos qué está haciendo el código.

<! - - Introducimos el comentario aquí - - >

Creación de listas

Podemos añadir también listas con puntos…

<ul>
	<li></li>
</ul>

… o con números:

<ol>
	<li></li>
</ol>

Añadir imágenes

Para añadir imágenes no hace falta que añadamos una etiqueta de cierre:

<img src=”ruta de acceso o dirección web”>

Atributos en las etiquetas

Algunas etiquetas (como la vista antes de <img>) permiten modificar algunos aspectos mediante la inclusión de atributos siguiendo esta estructura: <etiqueta atributo=”valor”>

Añadir un id único la etiquetas, para identificarla en el futuro

<header id=”cabecera”></header>

Modificar el alineamiento del texto

<p align=”center”></p>

Es interesante mencionar que el desarrollo web HTML se integra muy bien con el lenguaje de estilo CSS.

4 comentarios en “Estructura básica de una página web en HTML”

Deja un comentario