Guía de Estructura y Etiquetas Fundamentales de HTML

HTML (HyperText Markup Language) es el lenguaje estándar utilizado para definir la estructura de las páginas web. Al ser un lenguaje de marcado, permite organizar el contenido mediante etiquetas que el navegador interpreta para renderizar texto, imágenes, formularios y otros elementos multimedia.

Elementos de Encabezado y Metadatos

La sección <head> contiene información técnica sobre el documento que no se muestra directamente en el cuerpo de la página, pero es crucial para el navegador y los motores de búsqueda (SEO).

<title>: Define el nombre que aparece en la pestaña del navegador y en los resultados de búsqueda.
<meta>: Proporciona metadatos sobre el documento, como la codificación de caracteres, la descripción del sitio o palabras clave para indexación.
<link>: Se utiliza para conectar el documento con recursos externos, frecuentemente hojas de estilo CSS.
<script>: Permite incrustar o referenciar código de programación, usualmente JavaScript, para añadir interactividad.

<!-- Ejemplo de configuración en el encabezado -->
<meta name="description" content="Tutorial completo sobre fundamentos de desarrollo web" />
<link rel="stylesheet" href="assets/css/estilos.css" type="text/css" />

Jerarquía de Texto y Formato

HTML ofrece etiquetas específicas para estructurar el contenido textual de manera semántica.

Los encabezados se definen desde <h1> hasta <h6>, donde el primero representa el título principal y el último el de menor importancia jerárquica.

<p>Este es un párrafo de texto estándar.</p>
<br /> <!-- Salto de línea -->
<hr /> <!-- Regla horizontal divisoria -->
<p>Texto con <sub>subíndice</sub> y texto con <sup>superíndice</sup>.</p>
<p><del>Contenido eliminado</del> y <ins>contenido subrayado o insertado</ins>.</p>

Gestión de Formularios y Captura de Datos

El elemento <form> es el contenedor principal para enviar información al servidor. Utiliza dos atributos fundamentales:

action: Especifica la URL a la que se enviarán los datos.
method: Define el protocolo de envío. GET adjunta los datos a la URL (público y limitado), mientras que POST envía los datos en el cuerpo de la petición (más seguro y sin límite de tamaño).

Tipos de entrada comunes

<form action="/procesar_registro" method="post">
    <!-- Campo de texto estándar -->
    <label>Nombre de usuario:</label>
    <input type="text" name="alias_usuario" placeholder="Ej: dev_admin" />

    <!-- Campo de contraseña -->
    <label>Clave:</label>
    <input type="password" name="clave_acceso" />

    <!-- Selección única -->
    <p>Preferencia de contacto:</p>
    <input type="radio" name="contacto" value="email"> Correo Electrónico
    <input type="radio" name="contacto" value="tel"> Teléfono

    <!-- Casillas de verificación -->
    <input type="checkbox" name="terminos"> Acepto los términos legales

    <!-- Menú desplegable -->
    <select name="pais_origen">
        <option value="es">España</option>
        <option value="mx">México</option>
        <option value="ar">Argentina</option>
    </select>

    <button type="submit">Enviar Información</button>
</form>

Atributo Enctype y Carga de Archivos

Cuando un formulario necesita enviar archivos (como imágenes o documentos), se debe cambiar el tipo de codificación mediante el atributo enctype.

application/x-www-form-urlencoded: Codificación predeterminada para texto.
multipart/form-data: Requerido para formularios que incluyen campos de tipo <input type="file">.

<form method="post" enctype="multipart/form-data">
    <label>Subir currículum:</label>
    <input type="file" name="documento_adjunto" />
    <input type="submit" value="Cargar Archivo" />
</form>

Multimedia, Enlaces y Tablas

Para la navegación y visualización de recursos, HTML emplea etiquetas de referencia:

<!-- Hipervínculo -->
<a href="https://ejemplo.com" target="_blank">Visitar sitio externo</a>

<!-- Imagen con atributos de dimensión y evento -->
<img src="logo_empresa.jpg" alt="Logo Corporativo" width="150" height="150" />

<!-- Tabla de datos -->
<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Producto</th>
            <th>Precio</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>Monitor 4K</td>
            <td>$300</td>
        </tr>
    </tbody>
</table>

Organización de Listas

Las listas permiten agrupar elementos relacionados. Las listas no ordenadas (<ul>) usan viñetas, mientras que las ordenadas (<ol>) usan numeración.

<ul>
    <li>Frontend
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
        </ul>
    </li>
    <li>Backend</li>
</ul>

Uso de Marcos (Frames)

Aunque en el desarrollo moderno se prefieren los <iframe>, la etiqueta <frameset> se utilizaba históricamente para dividir la ventana del navegador en múltiples paneles independientes. Cabe destacar que esta práctica se considera obsoleta en HTML5 en favor de diseños basados en CSS.

<!-- Ejemplo de estructura de marcos antigua -->
<frameset rows="20%,80%">
    <frame src="cabecera.html" />
    <frame src="contenido.html" />
</frameset>

Etiquetas: HTML5 frontend web development forms DOM

Publicado el 7-30 16:08

Friki Work