Estructura básica de HTML¶

Una página web HTML sigue una estructura jerárquica compuesta por elementos que organizan el contenido. A continuación, se describe la estructura básica de un documento HTML.

Etiquetas principales de HTML¶

Un documento HTML está formado por una serie de etiquetas que indican al navegador cómo debe presentar el contenido. Estas etiquetas están delimitadas por los caracteres < y >. Las etiquetas suelen tener una etiqueta de apertura y otra de cierre, con la siguiente estructura:

<etiqueta>Contenido</etiqueta>

La etiqueta de cierre se diferencia de la de apertura porque incluye una barra inclinada / antes del nombre de la etiqueta.

Estructura general de un documento HTML¶

Un documento HTML básico se organiza de la siguiente manera:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Título de la página</title>
  </head>
  <body>
    <h1>Encabezado principal</h1>
    <p>Este es un párrafo de texto.</p>
  </body>
</html>

Explicación de las etiquetas:

<!DOCTYPE html>: Indica al navegador que estamos usando la versión de HTML5.
<html>: Es la etiqueta raíz que contiene todo el contenido de la página web.
<head>: Contiene la información meta (metadatos) y configuraciones de la página, como el título y la codificación de caracteres.
<meta charset="UTF-8">: Define la codificación de caracteres del documento. UTF-8 es el estándar actual.
<title>: Establece el título que aparecerá en la pestaña del navegador.
<body>: Contiene todo el contenido visible de la página, como textos, imágenes y enlaces.
<h1>: Representa un encabezado principal. Los encabezados van del <h1> (máximo nivel) al <h6> (mínimo nivel).
<p>: Define un párrafo de texto.

Esquema de la estructura básica¶

<!DOCTYPE html>
<html>
  <head>
    <!-- Metadatos e información sobre la página -->
  </head>
  <body>
    <!-- Contenido visible de la página -->
  </body>
</html>

Esta estructura básica es la base de cualquier documento HTML, y es importante que esté correctamente organizada para garantizar que los navegadores puedan interpretar y mostrar el contenido adecuadamente.

Notas importantes¶

Etiquetas HTML obligatorias: Aunque algunas etiquetas pueden ser opcionales, es recomendable usar siempre <html>, <head>, <meta charset="UTF-8">, <title> y <body> para asegurar una correcta visualización y compatibilidad.

Anidamiento de etiquetas: Las etiquetas deben estar correctamente anidadas. Por ejemplo, una etiqueta de apertura <p> debe cerrarse con </p>, y las etiquetas no deben solaparse entre sí.

Sensibilidad a mayúsculas y minúsculas: HTML no es sensible a las mayúsculas, pero es buena práctica escribir las etiquetas en minúsculas para seguir el estándar actual.

Comentarios en HTML¶

Los comentarios en HTML son útiles para dejar notas o descripciones en el código que no serán visibles en la página. Se escriben de la siguiente manera:

``

Los comentarios no afectan la estructura ni el funcionamiento de la página.

Actividades¶

AC 201 (RA1 / CE1b / IC1/ 3p) Genera un documento HTML, con las etiquetas necesarias donde se especifique:
- Título de la página. Ha de ser tu nombre
- Juego de caracteres usado.
- La meta descripción. Será el curso académico, nombre del módulo y nombre de la actividad.
AC 202 (RA1 / CE1b / IC1/ 3p). Genera un documento HTML, que deberá tener todo lo visto, la siguiente información:
- Encabezado con tu nombre
- Un párrafo que cuente con tus aficiones
- Otro párrafo que cuente lo que esperes de este curso.