close

Introducción a la Estructura HTML: Elementos Básicos y Sintaxis

La estructura HTML juega un papel crucial en la construcción de páginas web. Define cómo se organiza y muestra el contenido en una página web. Aquí hay una introducción a la estructura HTML básica:

1. Doctype

El Doctype(Declaración de tipo de documento) define la versión HTML que utiliza la página web. Debe colocarse al principio del archivo HTML.

2. etiqueta html

La etiqueta html es el elemento raíz de cada archivo HTML. Encapsula todo el contenido de la página web.

3. head etiqueta

La etiqueta de encabezado contiene información sobre la página web que no se muestra directamente en el navegador. Aquí es donde se definen el título de la página, las metaetiquetas, los enlaces a los archivos CSS y JavaScript y varios otros elementos.

4. body etiqueta

La etiqueta del cuerpo contiene todo el contenido que se muestra en la página web. Aquí es donde se definen elementos como texto, imágenes, videos, enlaces y otros componentes de la interfaz de usuario.

5. Etiquetas anidadas

HTML utiliza una estructura jerárquica con etiquetas de apertura y cierre. Las etiquetas secundarias se colocan dentro de las etiquetas principales. Por ejemplo, la etiqueta p(párrafo) puede contener etiquetas de extensión(texto en línea), etiquetas fuertes(texto en negrita) y muchas otras etiquetas.

6. Etiquetas comunes

HTML proporciona una variedad de etiquetas para formatear y mostrar contenido. Por ejemplo, las etiquetas h1-h6(encabezados), la etiqueta p(párrafo), la etiqueta img(imagen), la etiqueta a(enlace) y muchas otras.

 

Aquí hay un ejemplo de una estructura de página HTML completa:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

En el ejemplo anterior, tenemos una página HTML completa con los elementos principales, como doctype, html etiqueta, head etiqueta y body etiqueta. En la sección de encabezado, definimos el título de la página, los archivos CSS y JavaScript que se utilizarán. La sección del cuerpo contiene elementos como encabezado, principal y pie de página para mostrar el contenido de la página web.

 

Al usar la estructura HTML correcta, puede crear páginas web bien organizadas, legibles e interactivas.