Los documentos HTML se componen de diversos tipos de etiquetas, las cuales son interpretadas por el navegador para generar los componentes visuales de una página web.
Clasificación de las Etiquetas HTML
- Etiquetas de un solo elemento (Self-closing tags): Como
<img/>, se cierran por sí mismas. Formato:<nombreEtiqueta atributo1="valor1" atributo2="valor2" ... /> - Etiquetas de doble elemento (Paired tags): Como
<head></head>, incluyen contenido entre la etiqueta de apertura y cierre. Pueden anidar otras etiquetas. Formato:<nombreEtiqueta atributo1="valor1" ...>Contenido</nombreEtiqueta> - Etiquetas de línea (Inline tags): Ocupan solo el espacio necesario para su contenido.
- Etiquetas de bloque (Block-level tags): Ocupan todo el ancho disponible y comienzan en una nueva línea. Generalmente, las etiquetas de bloque pueden contener otras de bloque y de línea, pero la etiqueta
<p>solo puede contener etiquetas de línea.
Etiquetas Comunes dentro de <head>
-
<title>: Define el título de la página web, que aparece en la pestaña del navegador. -
<meta>: Proporciona metadatos sobre el documento HTML.<meta name="keywords" content="palabras clave">: Palabras clave para motores de búsqueda.<meta name="description" content="resumen de la página">: Descripción del contenido de la página.
-
<style>: Permite incluir estilos CSS directamente en el documento. ```html -
<link>: Enlaza recursos externos, comúnmente archivos CSS. ```html -
<script>: Permite incluir código JavaScript o enlazar archivos externos de JavaScript. ```html
Etiquetas Comunes dentro de <body>
Etiquetas Básicas
<b>: Texto en negrita.<i>: Texto en cursiva.<u>: Texto subrayado.<s>: Texto tachado.
<p>: Define un párrafo.
<h1> a <h6>: Definen los niveles de encabezado, de mayor a menor importancia.
<br>: Inserta un salto de línea.
<hr>: Inserta una línea horizontal.
Caracteres Especiales
| Símbolo | Código HTML |
|---|---|
| Espacio | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| © | © |
| ® | ® |
Etiquetas de Estructura (Layout)
<div>: Un contenedor genérico de bloque. Se utiliza principalmente para agrupar otros elementos y aplicarles estilos o comportamientos.<span>: Un contenedor genérico en línea. Similar a<div>pero se usa para agrupar porciones de texto u otros elementos en línea.
Estas etiquteas son fundamentales para organizar la estructura de una página web antes de aplicar estilos.
Otras Etiquetas Comunes
Etiqueta <img>
Se utiliza para incrustar imágenes en una página web.
<img src="ruta/a/la/imagen.jpg" alt="Texto alternativo" title="Información al pasar el ratón"
width="300" height="200">
src: La ruta al archivo de imagen.alt: Texto descriptivo que se muestra si la imagen no puede cargarse.title: Texto que aparece cuando el usuario pasa el cursor sobre la imagen.widthyheight: Especifican las dimensiones de la imagen. Si solo se define uno, el otro se ajusta proporcionalmente.
Para solucionar problemas de carga de imágenes de red, se puede añadir la siguiente metaetiqueta en el <head>:
<meta name="referrer" content="no-referrer">
Etiqueta <a>
Define un hipervínculo, permitiendo enlazar a otras páginas web, secciones de la misma página, correos electrónicos, archivos, etc.
<a href="https://www.ejemplo.com" target="_blank">Visita Ejemplo.com</a>
href: Especifica la URL o el destino del enlace. Puede ser:- URL absoluta (ej:
https://www.google.com) - URL relativa (ej:
pagina-interna.html) - Ancla (ej:
#seccion-superior, enlaza a un elemento conid="seccion-superior")
- URL absoluta (ej:
target: Determina dónde se abre el enlace._blank: Abre el enlace en una nueva pestaña o ventana._self: Abre el enlace en la misma pestaña o ventana (comportamiento por defecto).
Otras Etiquetas de Estructura
Etiquetas de Lista
-
Lista no ordenada (
<ul>): Los elementos se marcan con viñetas. ```htmlEl atributo `type` (`disc`, `circle`, `square`, `none`) solía usarse para definir el estilo de las viñetas, pero hoy en día se prefiere el uso de CSS. -
Lista ordenada (
<ol>): Los elementos se numeran. ```htmlEl atributo `type` (`1`, `A`, `a`, `I`, `i`) define el tipo de numeración. El atributo `start` especifica el número de inicio. -
Lista de definición (
<dl>): Utilizada para pares de término y descripción. ```html
Etiquetas de Tabla (<table>)
Se utilizan para presentar datos tabulares.
<table border="1">
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1.1</td>
<td>Dato 1.2</td>
</tr>
<tr>
<td>Dato 2.1</td>
<td>Dato 2.2</td>
</tr>
</tbody>
</table>
<table>: Define la tabla.<thead>: Agrupa el contenido del encabezado de la tabla.<tbody>: Agrupa el contneido del cuerpo de la tabla.<tr>: Define una fila de la tabla.<th>: Define una celda de encabezado (normalmente en negrita y centrada).<td>: Define una celda de datos estándar.
Atributos comunes (aunque se prefieren estilos CSS): border, cellpadding, cellspacing, width. Para fusionar celdas se usan rowspan (filas) y colspan (columnas).
Etiqueta <form>
Define un formulario HTML para recopilar datos del usuario. Puede contener varios tipos de controles de entrada.
Atributos importantes:
action: La URL a la que se enviarán los datos del formulario.method: El método HTTP para enviar los datos (GEToPOST).
Etiquetas de Entrada (<input>) y sus Atributos
La etiqueta <input> es muy versátil y su comportamiento se define principalmente por el atributo type.
| Tipo | Descripción | Ejemplo |
|---|---|---|
text |
Campo de entrada de texto de una sola línea. | <input type="text" name="usuario"> |
password |
Campo de entrada de contraseña (caracteres ocultos). | <input type="password" name="contrasena"> |
date |
Selector de fecha. | <input type="date" name="fecha"> |
checkbox |
Casilla de verificación (selección múltiple). | <input type="checkbox" name="intereses" value="programacion"> Programación |
radio |
Botón de opción (selección única dentro de un grupo). | <input type="radio" name="genero" value="masculino"> Masculino |
submit |
Botón para enviar los datos del formulario. | <input type="submit" value="Enviar"> |
reset |
Botón para restablecer los campos del formulario a sus valores iniciales. | <input type="reset" value="Restablecer"> |
button |
Botón genérico, usualmente controlado por JavaScript. | <input type="button" value="Clic aquí"> |
hidden |
Campo oculto, no visible para el usuario pero se envía con el formulario. | <input type="hidden" name="id_usuario" value="123"> |
file |
Selector de archivos para subir al servidor. | <input type="file" name="archivo"> |
Los atributos name y value son cruciales, ya que definen cómo se enviarán los datos al servidor (como pares clave-valor). Para atributos booleanos como checked, selected o disabled, la simple presencia del atributo es suficiente (ej: checked en lugar de checked="checked").
Ejemplo de Radio Button
<p>
Selecciona tu género:
<input type="radio" name="genero" value="hombre"> Hombre
<input type="radio" name="genero" value="mujer" checked> Mujer
<input type="radio" name="genero" value="otro"> Otro
</p>
Los radio buttons con el mismo name forman un grupo donde solo uno puede ser seleccionado. El atributo value especifica el valor que se enviará si esa opción es elegida.
Ejemplo de Checkbox
Similar a los radio buttons, se pueden agrupar por el atributo name, pero permiten múltiples selecciones.
Múltiples Selecciones
Los tipos file y select pueden permitir selecciones múltiples mediante el atributo multiple.
Otras Etiquetas de Formulario
Etiqueta <select> y <option>
Crea un menú desplegable.
<p>
Selecciona una ciudad:
<select name="ciudad" id="ciudad-select">
<option value="madrid">Madrid</option>
<option value="barcelona" selected>Barcelona</option>
<option value="sevilla">Sevilla</option>
</select>
</p>
El atributo name se aplica a la etiqueta <select>. El atributo selected en una <option> la marca como predeterminada.
Etiqueta <textarea>
Proporciona un área de texto multilínea para la entrada del usuario, útil para comentarios, mensajes, etc.
<p>
Deja tu comentario:
<textarea name="comentario" cols="50" rows="5"></textarea>
</p>
Los atributos cols y rows sugieren el tamaño visible del área de texto.