Estructura básica de una pagina web en HTML

En este tutorial se explica la estructura básica de una pagina web en HTML. Damos una introducción a los elementos principales y sus características, asi como varias opciones que se tienen para agregar y personalizar distintos elementos.

La estructura básica de una página web en HTML sigue un formato estándar que define la estructura y el contenido de la página. A continuación, te explico los elementos principales:

Descripción rápida de Cada Sección

HTML (Estructura)
- <header>: La cabecera, que generalmente contiene el título o logo y la navegación principal.
- <main>: El área principal de contenido, donde puedes incluir secciones (<section>).
- <footer>: El pie de página, que suele incluir información como derechos de autor.
CSS (Estilos)
- Reseteo Básico: La regla * { ... } ayuda a eliminar márgenes y padding predeterminados.
- Estilos de Cuerpo: Define la fuente, color de fondo y diseño general de la página.
- Estilos de Encabezado y Navegación: Le da color y organización a la cabecera y al menú de navegación.
- Secciones: Añade márgenes, fondo y sombra a cada sección para que se vea uniforme.
- Pie de Página: Estilo básico para el pie de página con color de fondo oscuro y texto claro.

Estructura básica de un archivo HTML

A continuación se muestra un ejemplo de la estructura básica para crear una página web con html. aqui se pueden ver los componentes principales, más adelante los explicaremos con un poco más de detalles.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título de la Página</title>
    <!-- Aquí puedes incluir hojas de estilo, fuentes, y metadatos -->
    <link rel="stylesheet" href="styles.css"> <!-- Enlace a un archivo CSS -->
</head>
<body>
    <!-- Encabezado principal -->
    <header>
        <h1>Bienvenido a mi página web</h1>
        <nav>
            <ul>
                <li><a href="#seccion1">Sección 1</a></li>
                <li><a href="#seccion2">Sección 2</a></li>
            </ul>
        </nav>
    </header>

    <!-- Sección principal del contenido -->
    <main>
        <section id="seccion1">
            <h2>Sección 1</h2>
            <p>Este es el contenido de la primera sección.</p>
        </section>
        <section id="seccion2">
            <h2>Sección 2</h2>
            <p>Este es el contenido de la segunda sección.</p>
        </section>
    </main>

    <!-- Pie de página -->
    <footer>
        <p>&copy; 2024 Mi Página Web. Todos los derechos reservados.</p>
    </footer>

    <!-- Archivos de scripts -->
    <script src="script.js"></script> <!-- Enlace a un archivo JS -->
</body>
</html>

Desglose de los elementos, estructura básica de una página web en HTML

<!DOCTYPE html>
Es la declaración del tipo de documento. Le dice al navegador que esta es una página web en HTML5.
<html>
El contenedor principal de toda la página web. El atributo lang="es" indica el idioma del contenido.
<head>
Contiene información sobre la página web que no se muestra directamente en el navegador:
- meta charset: Define la codificación de caracteres (UTF-8 para admitir acentos y caracteres especiales).
- meta viewport: Hace que la página sea adaptable en dispositivos móviles.
- title: Título que aparece en la pestaña del navegador.
- Enlaces a hojas de estilo y otros recursos.
<body>
Aquí va todo el contenido visible de la página.
Elementos comunes del contenido:
- <header>: Encabezado de la página, a menudo contiene logotipos o menús de navegación.
- <main>: La sección principal del contenido de la página.
- <section>: Agrupaciones temáticas dentro de main.
- <footer>: Contenido que aparece al final, como derechos de autor o enlaces.
Enlaces a recursos externos:
- link: Para incluir hojas de estilo CSS.
- script: Para enlazar archivos JavaScript.

Con esta estructura puedes empezar a crear cualquier página web.

Contenido en el Head, estructura básica de una pagina web en HTML

El <head> es una sección clave de tu archivo HTML donde puedes definir metadatos y enlazar recursos externos que afectan el comportamiento o la apariencia de la página. Aquí tienes una lista de elementos comunes que puedes incluir en el <head>:

Elementos básicos

Declarar el tipo de caracteres:htmlCopiar código<meta charset="UTF-8"> Esto asegura que tu página soporte caracteres especiales, como tildes (á, é, í) y la letra ñ.
Configurar la vista en dispositivos móviles:htmlCopiar código<meta name="viewport" content="width=device-width, initial-scale=1.0"> Hace que tu página sea responsiva, adaptándose a diferentes tamaños de pantalla.
Establecer el título de la página:htmlCopiar código<title>Mi Página Web</title> Este es el texto que aparece en la pestaña del navegador.

Metadatos adicionales

Descripción de la página:htmlCopiar código<meta name="description" content="Esta es una página web de ejemplo."> Útil para mejorar el SEO (optimización para motores de búsqueda) y proporcionar una descripción cuando se comparta en redes sociales.
Palabras clave:htmlCopiar código<meta name="keywords" content="HTML, CSS, página web, tutorial"> Aunque menos usado hoy en día, puede ser relevante para algunos motores de búsqueda.
Autor del contenido:htmlCopiar código<meta name="author" content="Tu Nombre">
Icono de la página (favicon):htmlCopiar código<link rel="icon" href="favicon.ico" type="image/x-icon">

Hojas de estilo y tipografías

Enlazar hojas de estilo CSS:htmlCopiar código<link rel="stylesheet" href="styles.css"> Aquí indicas el archivo CSS que contiene los estilos de tu página.
Incluir fuentes externas (Google Fonts):htmlCopiar código<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Scripts y librerías

Archivos JavaScript externos (opcional en el <head>):htmlCopiar código<script src="script.js" defer></script> El atributo defer asegura que el script se cargue después de que se haya renderizado el HTML.
Librerías externas: Si usas frameworks como Bootstrap o jQuery, puedes incluirlos aquí:htmlCopiar código <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" defer></script>

Redes sociales y SEO avanzado

Open Graph (para redes sociales):htmlCopiar código<meta property="og:title" content="Título de mi página"> <meta property="og:description" content="Descripción para redes sociales"> <meta property="og:image" content="imagen-social.jpg"> <meta property="og:url" content="https://www.tupagina.com"> <meta property="og:type" content="website">
Twitter Cards:htmlCopiar código<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Título de mi página"> <meta name="twitter:description" content="Descripción para Twitter"> <meta name="twitter:image" content="imagen-twitter.jpg">

Otros recursos útiles

Enlazar archivos adicionales:
- Para favicon con múltiples tamaños:htmlCopiar código<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
- Para una manifiesto de aplicación web:htmlCopiar código<link rel="manifest" href="site.webmanifest">
Evitar caché durante desarrollo:htmlCopiar código<meta http-equiv="Cache-Control" content="no-store">

Con estas opciones, puedes configurar tu <head> para que sea funcional, estético y optimizado para usuarios y motores de búsqueda.

Contenido en el body, estructura básica de una pagina web en HTML

En el <body> de una página HTML puedes incluir todos los elementos que forman parte del contenido visible y la estructura de tu página. Aquí te menciono lo básico que puedes usar para comenzar:

1. Estructura general

Encabezados (<h1> a <h6>)
Se usan para títulos y subtítulos, organizando jerárquicamente el contenido.htmlCopiar código<h1>Título Principal</h1> <h2>Subtítulo</h2>
Párrafos (<p>)
Para bloques de texto.htmlCopiar código<p>Este es un párrafo con contenido descriptivo.</p>
Divisiones (<div>)
Contenedores genéricos para organizar elementos en secciones.htmlCopiar código<div> <h2>Sección 1</h2> <p>Texto dentro de esta sección.</p> </div>

2. Listas

Listas ordenadas (<ol>)
Contienen elementos numerados.htmlCopiar código<ol> <li>Primer elemento</li> <li>Segundo elemento</li> </ol>
Listas desordenadas (<ul>)
Contienen elementos con viñetas.htmlCopiar código<ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul>

3. Enlaces y navegación

Enlaces (<a>)
Para vincular a otras páginas o secciones.htmlCopiar código<a href="https://www.ejemplo.com">Ir a Ejemplo</a>

4. Imágenes

Etiqueta <img>
Para mostrar imágenes.htmlCopiar código<img src="imagen.jpg" alt="Descripción de la imagen">

5. Tablas

Tabla básica (<table>)
Para organizar datos en filas y columnas.htmlCopiar código<table> <tr> <th>Encabezado 1</th> <th>Encabezado 2</th> </tr> <tr> <td>Dato 1</td> <td>Dato 2</td> </tr> </table>

6. Formularios

Formulario simple (<form>)
Para recibir información del usuario.htmlCopiar código<form action="/enviar" method="post"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre"> <button type="submit">Enviar</button> </form>

7. Multimedia

Videos (<video>)
Para mostrar videos.htmlCopiar código<video controls> <source src="video.mp4" type="video/mp4"> Tu navegador no soporta videos. </video>
Audio (<audio>)
Para reproducir audio.htmlCopiar código<audio controls> <source src="audio.mp3" type="audio/mp3"> Tu navegador no soporta audio. </audio>

8. Elementos interactivos

Botones (<button>)
Para acciones o eventos.htmlCopiar código<button>Haz clic aquí</button>

9. Contenido semántico

Encabezado (<header>)
Para encabezados globales o de secciones.htmlCopiar código<header> <h1>Encabezado principal</h1> </header>
Secciones (<section>, <article>, <aside>)
Para estructurar contenido temático.htmlCopiar código<section> <h2>Sección temática</h2> <p>Contenido de esta sección.</p> </section>
Pie de página (<footer>)
Para información final o de contacto.htmlCopiar código<footer> <p>© 2024 Mi Página Web</p> </footer>

10. Ejemplo básico del `<body>`, estructura básica de una pagina web en HTML

<body>
    <header>
        <h1>Mi Página Web</h1>
        <nav>
            <ul>
                <li><a href="#seccion1">Inicio</a></li>
                <li><a href="#seccion2">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="seccion1">
            <h2>Bienvenido</h2>
            <p>Este es un sitio web de ejemplo.</p>
            <img src="imagen.jpg" alt="Imagen de ejemplo">
        </section>

        <section id="seccion2">
            <h2>Contacto</h2>
            <form action="/enviar" method="post">
                <label for="nombre">Nombre:</label>
                <input type="text" id="nombre" name="nombre">
                <button type="submit">Enviar</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Mi Página Web</p>
    </footer>
</body>

Este ejemplo incluye las bases: encabezados, párrafos, enlaces, imágenes, formularios y secciones estructuradas.

Para más tutoriales puedes verla sección de paginas web en nuestro sitio web.

Algunos temas que pueden ser de tu interes:

Html como poner una imagen.