Fundamentos Esenciales de HTML y HTML5: Estructura, Etiquetas y Multimedia para Desarrollo Web

Introducción a HTML y HTML5

Concepto	Definición
HTML	El lenguaje de marcado que define la estructura de una página web.
HTML5	Es una mejora significativa de HTML, destacando especialmente las etiquetas semánticas para una mejor estructuración del contenido.

1. Etiquetas Básicas y Estructura Fundamental

Código/Etiqueta	Función	Ejemplo
`<!DOCTYPE html>` `<html>` Atributo: `lang="es"`	Para comenzar, se debe siempre iniciar con estas etiquetas para indicar el lenguaje a usar (HTML5). El atributo `lang="es"` indicará que nuestro lenguaje principal será el español.	`<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Nombre de página</title> </head> <body> <!-- información visible --> </body> </html>`
`<head>`	Define la cabecera de nuestra página web. En ella se colocan todos los elementos que necesitamos importar, como enlaces a hojas de estilo (CSS), metadatos, o elementos multimedia.
`<title>` Atributo `meta charset="utf-8"`	La etiqueta `<title>` asigna el nombre que se podrá observar en la pestaña del navegador. El atributo `meta charset="utf-8"` es esencial. Permite visualizar todos los caracteres especiales que el sistema podría no reconocer, como tildes, eñes o emojis. `utf-8` es el estándar y nunca se modificará.
`<body>`	Esta etiqueta es el cuerpo, el cual utilizaremos para redactar toda la información necesaria en nuestra página que se podrá visualizar.
Atributos de `<body>` (Obsoletos) `text="color"` `bgcolor="red"` `background="imagen/fondo.jpg"` `topmargin="num"` `leftmargin="num"` `link="color"`	Estos atributos servían para agregar ya sea un color o imagen de fondo. En el caso de la imagen, primero se debe anotar el nombre de la carpeta donde se encuentra el archivo, seguido de `/`, y el nombre asignado a la imagen. `topmargin="num"` y `leftmargin="num"` son atributos para los márgenes que se asignan en píxeles a la página web. Nota: Estos atributos están obsoletos en HTML5 y deben manejarse mediante CSS. `link="color"` asigna el color de todos los hipervínculos que agreguemos en la página web.	(Ejemplos de uso obsoleto, se recomienda CSS)

2. Etiquetas Semánticas y Estructura con HTML5

HTML5 introduce etiquetas semánticas para definir la estructura de la página de manera más significativa. Estas etiquetas ayudan a dividir el contenido en secciones lógicas, lo que facilita la comprensión del contenido y mejora la accesibilidad.

Etiqueta	Descripción	Ejemplo de Uso
`<header>`	Define la cabecera o encabezado del contenido. Es la parte superior de nuestra página en la que se presentan el logo, la marca, incluyendo la barra de navegación (`<nav>`), etc.	`<header> <h1>Mi Sitio Web</h1> <nav>...</nav> </header>`
`<nav>`	Representa la barra de navegación del sitio web que se encuentra dentro de nuestro `<header>`. Allí se encuentra nuestro menú de enlaces principales (el inicio, opciones, etc.).	`<nav> <ul> <li><a href="/">Inicio</a></li> </ul> </nav>`
`<main>`	Define el contenido principal de la página.	`<main>...</main>`
`<section>`	Define secciones lógicas de contenido. Agrupa contenido relacionado dentro del `<main>`.	`<section> <h2>Sección 1</h2> <p>...</p> </section> <section> <h2>Sección 2</h2> </section>`
`<article>`	Representa un contenido independiente, como un blog o una noticia. Apartado: Dentro de esta etiqueta (como en su mayoría) podemos agregar atributos. En este caso en especial podemos agregar el atributo `class="article 1"`, el cual se utilizará en caso de querer vincularlo con el formato de algún artículo de CSS, C++, etc.	`<article class="articulo-1"> <h3>Artículo 1</h3> <p>...</p> </article>`
`<aside>`	Define contenido relacionado o complementario a la página principal (ej. barras laterales).	`<aside>...</aside>`
`<footer>`	Define el pie de página del contenido. (Para citar fuentes/referencias o indicar el número de página).	`<footer>...</footer>`
`<div>`	Esta etiqueta nos servirá para organizar nuestro código agrupando por secciones. El `<div>` agrupa el resto de las etiquetas (sin reemplazarlas) con la intención de agregar algún tipo de atributo de otra clase como CSS, lo que dará mejor formato a esa sección agrupada. En caso de no utilizar algún atributo, su utilización no afectará en nada a nuestro HTML, pero nos facilitará la organización del código.	`<div class="contenedor">...</div>`
`<iframe>`	Con la etiqueta `<iframe>` podemos incorporar fácilmente videos de YouTube y ubicaciones de Google Maps. A diferencia de los URL/enlaces, esto nos permitirá visualizar tanto el video como el mapa dentro de la misma aplicación en un recuadro, se podrán reproducir o agrandar. Desventaja: Algunos videos pueden tener derechos de autor y no permitir su uso en sitios externos. Para Maps: Nos dirigimos a la dirección, buscamos la opción de “compartir” y luego “incorporar un mapa”. El enlace completo con el `<iframe>` ya estará incluido, solo copiamos y pegamos. Para YouTube: Nos dirigimos al video, “compartir” y seleccionamos “Incorporar”. El código completo está disponible para copiar y pegar (los atributos como tamaño se pueden modificar a gusto).	Maps: Youtube:

Etiquetas de Encabezado (Títulos)

Etiqueta Descripción Ejemplo

Etiqueta	Descripción	Ejemplo
`<h1>` Encabezado principal `<h2>` Encabezado secundario `<h3>` Encabezado terciario	Hay 6 tipos de tamaño de encabezado, desde `<h1>` hasta `<h6>`, utilizados para distintos tipos de textos. La etiqueta de encabezado enfatiza los textos haciéndolos más grandes y en negrita. `<h1>` es el más grande y `<h6>` es el más pequeño.	`<h1>Encabezado principal</h1>`
Uso de `<header>`	Se utiliza para agrupar el encabezado y distinguirlo del resto del contenido. Si bien no se visualiza en la página, sirve para dividir y organizar el código en el proceso y luego editarlo en CSS.	`<header><h1>Encabezado principal</h1></header>`
Atributos de `<font>` (Obsoleto) `color="color de encabezado"` `face="fuente"` `size="tamaño"`	Para personalizar los encabezados, se utilizaba la etiqueta `<font>` (obsoleta), que permitía modificar el encabezado con los siguientes atributos: `color` (color de letra), `face` (la fuente, ej: Arial, Verdana) y `size` (el tamaño de la letra).	Ejemplo obsoleto: `<header><h1><font color="green" face="Arial" size="3"> Encabezado principal </font></h1></header>`

<h1> Encabezado principal
<h2> Encabezado secundario
<h3> Encabezado terciario

Hay 6 tipos de tamaño de encabezado, desde <h1> hasta <h6>, utilizados para distintos tipos de textos.

La etiqueta de encabezado enfatiza los textos haciéndolos más grandes y en negrita. <h1> es el más grande y <h6> es el más pequeño.

<h1>Encabezado principal</h1>

Uso de <header>

Se utiliza para agrupar el encabezado y distinguirlo del resto del contenido. Si bien no se visualiza en la página, sirve para dividir y organizar el código en el proceso y luego editarlo en CSS.

<header><h1>Encabezado principal</h1></header>

Atributos de `<font>` (Obsoleto)

color="color de encabezado"
face="fuente"
size="tamaño"

Para personalizar los encabezados, se utilizaba la etiqueta <font> (obsoleta), que permitía modificar el encabezado con los siguientes atributos: color (color de letra), face (la fuente, ej: Arial, Verdana) y size (el tamaño de la letra).

Ejemplo obsoleto:

<header><h1><font color="green" face="Arial" size="3"> Encabezado principal </font></h1></header>

Párrafos y Alineación

Etiqueta/Atributo	Descripción	Ejemplo
`<p>`	La etiqueta `<p>` se utiliza para crear párrafos de texto. Es importante dividir el contenido en párrafos para mejorar la legibilidad y la organización del texto.	`<p align="left" topmargin="num" leftmargin="num"> Este es un párrafo de ejemplo. Aquí puedes escribir tu contenido. </p>`
`<blockquote>` (Implícito)	Se utiliza para establecer una sangría en el texto, solo con una distancia de 1cm. (Si se requiere más espacio se repite la etiqueta o se usa CSS).
Atributos de Párrafo (Obsoletos) `topmargin="num"` `leftmargin="num"`	`topmargin="num"` y `leftmargin="num"` son atributos para los márgenes que se asignan en píxeles al párrafo. Nota: Estos atributos están obsoletos.
Atributo de Alineación `align="center"` (solo para `<p>`)	Define la alineación del texto: `left` (izquierda), `center` (centro), `right` (derecha) y `justify` (justificado). Si se quería que aplicara en el `<body>`, se asignaban las alineaciones como etiqueta (ej. `<center>`, obsoleta).

Etiquetas de Énfasis y Formato de Texto

Etiqueta	Función	Ejemplo
`<em>` y `<strong>`	Las etiquetas `<em>` y `<strong>` se utilizan para enfatizar el texto semánticamente. `<em>`: Muestra el texto en cursiva. `<strong>`: Muestra el texto en negrita.	`<p>Este es un texto <em>en cursiva</em> y este es un texto <strong>en negrita</strong>.</p>`
`<b>`	Esta etiqueta tiene la función de resaltar el texto visualmente como negrita, sin el énfasis semántico de `<strong>`.	`<b>Texto en negrita</b>`
`<mark>`	Sirve para resaltar el texto.	`<mark>Texto resaltado</mark>`
`<s>`	Se utiliza para tachar el texto.	`<s>Texto tachado</s>`

3. Saltos de Línea

Etiqueta Descripción Ejemplo

Etiqueta	Descripción	Ejemplo
`<br>`	La etiqueta `<br>` se utiliza para realizar saltos de línea dentro de un párrafo. Nota: La etiqueta `<br>` es una etiqueta vacía: estas no tienen una etiqueta de cierre (ejemplo `</p>`) ni de contenido. También se las llama etiquetas de cierre automático.	`<p>Este es un párrafo con un salto de línea.<br> Continúa en la siguiente línea.</p>`

<br>

La etiqueta <br> se utiliza para realizar saltos de línea dentro de un párrafo.

Nota: La etiqueta <br> es una etiqueta vacía: estas no tienen una etiqueta de cierre (ejemplo </p>) ni de contenido. También se las llama etiquetas de cierre automático.

<p>Este es un párrafo con un salto de línea.<br>
Continúa en la siguiente línea.</p>

4. Comentarios

Sintaxis	Función	Ejemplo
`<!-- Comentario -->`	Los comentarios en HTML nos permiten agregar notas para referencias y organización de códigos sin que se muestren en la página.	`<!-- Se escribe el comentario dentro de la etiqueta -->`

5. Listas y Estructuras: Organizando Contenido de Manera Eficiente

Etiqueta Descripción Ejemplo

Etiqueta	Descripción	Ejemplo
`<ul>` (Listas No Ordenadas) `<ol>` (Listas Ordenadas) `<li>` (Ítem de lista)	Las listas no ordenadas (`<ul>`) y las listas ordenadas (`<ol>`) se utilizan para agrupar elementos relacionados. En una lista no ordenada, los elementos se presentan con viñetas. Mientras que en una lista ordenada, se muestran con números o letras. Cada elemento de la lista se define con la etiqueta `<li>` (ítem de lista). Para aclarar qué tipo de orden queremos en `<ol>`, debemos utilizar el atributo `type`: Si queremos que sea de tipo numérico, se pondrá `type="1"`. Si queremos en letras, será con la letra `type="A"`.	Ejemplo de Lista No Ordenada: `<ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul>` Ejemplo de Lista Ordenada: `<ol type="1"> <li>Primer Elemento</li> <li>Segundo Elemento</li> <li>Tercer Elemento</li> </ol>`

<ul> (Listas No Ordenadas)
<ol> (Listas Ordenadas)
<li> (Ítem de lista)

Las listas no ordenadas (<ul>) y las listas ordenadas (<ol>) se utilizan para agrupar elementos relacionados.

En una lista no ordenada, los elementos se presentan con viñetas. Mientras que en una lista ordenada, se muestran con números o letras. Cada elemento de la lista se define con la etiqueta <li> (ítem de lista).

Para aclarar qué tipo de orden queremos en <ol>, debemos utilizar el atributo type:

Si queremos que sea de tipo numérico, se pondrá type="1".
Si queremos en letras, será con la letra type="A".

Ejemplo de Lista No Ordenada:

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

Ejemplo de Lista Ordenada:

<ol type="1">
    <li>Primer Elemento</li>
    <li>Segundo Elemento</li>
    <li>Tercer Elemento</li>
</ol>

6. Imágenes y Elementos Visuales

Imágenes con Leyendas (`<figure>` y `<figcaption>`)

Estas etiquetas añaden impacto visual y atractivo a tu contenido.

Etiqueta	Descripción	Ejemplo
`<figure>` `<figcaption>`	Para añadir una imagen con su respectiva leyenda, podemos utilizar las etiquetas `<figure>` y `<figcaption>`. `<figure>`: Envuelve la imagen. `<figcaption>`: Se utiliza para agregar el texto de la leyenda.	`<figure> <img src="ruta/imagen.jpg" alt="Descripción"> <figcaption>Leyenda de la imagen.</figcaption> </figure>`
`<img>` Atributo: `src` (URL) Atributo: `alt` (Descripción de la imagen)	Se utiliza para mostrar imágenes en una página web. Su atributo `src` especifica la URL de la imagen que se va a mostrar. El atributo `alt` proporciona una descripción de la imagen que se mostrará si la imagen no se carga correctamente. También es útil para fines de accesibilidad. Nota: Al igual que `<br>`, `<img>` es una etiqueta vacía, por lo que no lleva etiqueta de cierre.	`<img src="ruta/imagen.jpg" alt="Descripción de la imagen">` (Dentro de la etiqueta de imagen, si agregamos el atributo `align`, podremos indicar si queremos colocar el texto a un lado de la imagen, aunque se recomienda CSS).
`hspace="20"` `vspace="20"`	Estos atributos indican el espacio vertical y horizontal de la imagen con su alrededor. (Obsoletos, usar CSS margin).
`border="5"`	Aplica un borde en la imagen. (Obsoleto, usar CSS border).
`<marquee>` (Obsoleto)	La etiqueta `<marquee>` se utilizaba para crear una marquesina, un efecto de movimiento horizontal o vertical de contenido. Importante: Esta etiqueta ha sido declarada obsoleta en HTML5 y su uso no se recomienda por razones de accesibilidad y usabilidad. En su lugar, se sugiere utilizar técnicas de animación con CSS o JavaScript.

7. Tablas: Organizando Datos en Filas y Columnas

Etiqueta	Descripción	Ejemplo
`<table>`	La etiqueta `<table>` se utiliza para crear la estructura principal de la tabla. Todas las demás etiquetas de la tabla se encuentran dentro de esta etiqueta.	`<table>...</table>`
`<tr>` (Table Row) `<td>` (Table Data) `<th>` (Table Header)	`<tr>`: Se utiliza para definir cada fila de la tabla. Dentro de cada fila, agregamos las celdas utilizando la etiqueta `<td>` (table data) para celdas de datos regulares o `<th>` (table header) para celdas de encabezado.	`<tr> <td>Celdas se agregarán aquí</td> </tr>`
Atributos de Celda (`<td>`) `align="center"` `rowspan="num"` `colspan="num"`	La etiqueta `<td>` se utiliza para definir celdas de datos en la tabla. `align`: Alineación del contenido (obsoleto). `rowspan`: Permite «fusionar» celdas consecutivas verticalmente (a lo largo de varias filas). `colspan`: Permite «fusionar» celdas consecutivas horizontalmente (a lo largo de varias columnas).	`<td>Dato 1</td> <td>Dato 2</td>`
`<th>` (Table Header)	La etiqueta `<th>` se utiliza para definir celdas de encabezado en la tabla. Su contenido aparece en negrita por defecto.	`<th>Encabezado 1</th> <th>Encabezado 2</th>`

Atributos de la Tabla (Mayormente Obsoletos)

Atributo	Función	Ejemplo
`border`	Define el ancho del borde de la tabla.	(Se recomienda usar CSS)
`cellspacing`	Define el espacio entre las celdas.
`cellpadding`	Define el espacio entre el contenido de las celdas y el borde.
`bordercolor=""`	Color de borde necesario para marcar las divisiones de las celdas.
`bgcolor=""`	Color de fondo de la tabla.

Combinar Celdas

Atributo Función Ejemplo

Atributo	Función	Ejemplo
`rowspan` `colspan`	`rowspan`: Para combinar celdas verticalmente. `colspan`: Para combinar celdas horizontalmente.	`<tr> <th rowspan="2">Encabezado 1</th> <th>Encabezado 2</th> </tr> <tr> <td>Dato 1</td> </tr>`

rowspan
colspan

rowspan: Para combinar celdas verticalmente.

colspan: Para combinar celdas horizontalmente.

<tr>
    <th rowspan="2">Encabezado 1</th>
    <th>Encabezado 2</th>
</tr>
<tr>
    <td>Dato 1</td>
</tr>

8. Hipervínculos (Enlaces)

Etiqueta/Atributo	Descripción	Ejemplo
`<a>` (Anchor/Ancla)	Los hipervínculos se definen mediante la etiqueta `<a>`.	`<a href="https://www.ejemplo.com" subjet="consulta"> Visita nuestro sitio web </a>`
`href` (Hypertext Reference) `subjet=""` (Para email)	Es el atributo principal de la etiqueta `<a>` y sirve para vincular el texto a una dirección o URL de destino. Puede ser: Una dirección web: `href="http://www.ejemplo.com"` Una ruta relativa: `href="carpeta/archivo.html"` Un enlace a correo electrónico: `href="mailto:correo@ejemplo.com"` El atributo `subjet` se utiliza para especificar el asunto de un email en caso de vincular a una casilla de correo.
Hipervínculos Internos (Anclas) `<a href="#ancla">` `<a name="ancla">` (Obsoleto)	Permite a los usuarios saltar a una sección específica dentro de la misma página. Se utiliza el atributo `href` junto con el identificador de la sección al que se quiere enlazar, usando el símbolo de numeral (`#`). El identificador se crea modernamente con el atributo `id` en el destino (ej. `<h2 id="seccion1">`), aunque históricamente se usaba `<a name="nombre">`.	Ejemplo de hipervínculo interno: En el destino: `<h2 id="seccion1">Sección 1</h2>` En el enlace: `<a href="#seccion1">Ir a la Sección 1</a>`
`target="_blank"`	Puedes especificar que un hipervínculo se abra en una nueva ventana o pestaña del navegador utilizando el atributo `target` con el valor `"_blank"`.	`<a href="https://www.ejemplo.com" target="_blank"> Abrir enlace en nueva ventana </a>`
Imágenes como enlaces	Los hipervínculos pueden rodear texto, imágenes o cualquier otro elemento HTML. Si quieres que una imagen sea un enlace, simplemente coloca la etiqueta `<img>` dentro de la etiqueta `<a>`.	`<a href="pagina.html"> <img src="boton.png" alt="Ir a página"> </a>`

9. Elementos Multimedia (Audio y Video)

Etiqueta/Atributo	Descripción	Ejemplo
`<img>`	La etiqueta `<img>`, vista anteriormente, se utiliza para insertar imágenes en tu página web. Puedes especificar la ruta en `src` y el texto alternativo en `alt`.	`<img src="ruta/imagen.jpg" alt="Descripción">`
`<audio>` Atributo: `src`	La etiqueta `<audio>` permite agregar elementos de audio, como música o efectos de sonido, a tu página web. Utiliza el atributo `src` para especificar la ruta del archivo de audio.	`<audio controls> <source src="audio.mp3" type="audio/mpeg"> Tu navegador no soporta la reproducción de audio. </audio>`
`<source>`	La etiqueta `<audio>` admite varios formatos de audio (MP3, OGG, WAV, etc.), y puedes proporcionar diferentes fuentes usando múltiples etiquetas `<source>`. El navegador seleccionará el formato adecuado que pueda reproducir.
`<video>`	La etiqueta `<video>` permite agregar elementos de video a tu página web. Al igual que con el audio, utiliza el atributo `src` y la etiqueta `<source>`. También admite los atributos `width` (ancho) y `height` (altura) para definir el tamaño del reproductor de video.	`<video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> Tu navegador no soporta la reproducción de video. </video>`
`<iframe>`	La etiqueta `<iframe>` se utiliza para incrustar contenido de otras páginas web o recursos multimedia de terceros, como mapas de Google o videos de YouTube.	`<iframe src="url_externa"></iframe>`

10. Formularios (`<form>`)

Etiqueta/Atributo Descripción Ejemplo

Etiqueta/Atributo	Descripción	Ejemplo
`<form>` Atributos: `action`, `method`	Esta etiqueta envuelve todo el contenido del formulario. El atributo `action` especifica la URL a la que se enviarán los datos del formulario, y el atributo `method` define cómo se enviarán los datos (`GET`, `POST` o `DIALOG`).	`<form action="/procesar_datos" method="POST"> <!-- Campos de entrada aquí --> </form>`
`<input>`	La etiqueta `<input>` se utiliza para crear diferentes tipos de campos de entrada en el formulario.

<form>
Atributos: action, method

Esta etiqueta envuelve todo el contenido del formulario.

El atributo action especifica la URL a la que se enviarán los datos del formulario, y el atributo method define cómo se enviarán los datos (GET, POST o DIALOG).

<form action="/procesar_datos" method="POST">
    <!-- Campos de entrada aquí -->
</form>

<input> La etiqueta <input> se utiliza para crear diferentes tipos de campos de entrada en el formulario.

Campos de Entrada en el Formulario (Tipos de `<input>`)

Tipo	Descripción	Ejemplo
`text`	Campo de texto para introducir texto.	`<input type="text" name="nombre">`
`password`	Campo de contraseña para introducir contraseñas (los caracteres se ocultan).	`<input type="password" name="clave">`
`email`	Campo de correo electrónico para introducir direcciones de correo.	`<input type="email" name="correo">`
`number`	Campo numérico para introducir números.	`<input type="number" name="cantidad">`
`checkbox`	Casilla de verificación para opciones binarias.	`<input type="checkbox" name="acepto_terminos">Acepto los términos y condiciones.`
`radio`	Botón de opción para seleccionar una opción de un grupo de opciones.	`<input type="radio" name="genero" value="masculino">Masculino <input type="radio" name="genero" value="femenino">Femenino`
`submit`	Botón de envío para enviar el formulario.	`<input type="submit" value="Enviar">`
`<textarea>`	La etiqueta `<textarea>` se utiliza para crear un área de texto de múltiples líneas, ideal para comentarios u observaciones más extensas.	`<textarea name="comentarios"></textarea>`
`<select>` `<option>`	La etiqueta `<select>` se utiliza para crear listas desplegables. La etiqueta `<option>` se utiliza para definir las opciones dentro de la lista.	`<select name="pais"> <option value="mexico">México</option> <option value="espana">España</option> <option value="argentina">Argentina</option> </select>`

Otros Atributos de Formulario

Atributo	Función	Ejemplo
`required`	Para hacer que un campo sea obligatorio.	`<input type="text" required>`
`maxlength`	Para limitar la cantidad de caracteres en un campo.	`<input type="text" maxlength="10">`
`pattern`	Para especificar un patrón de entrada (expresión regular) para un campo.	`<input type="text" pattern="[0-9]{5}">`

11. Marcos (Framesets) – Obsoleto

Nota: Los framesets se utilizaban para dividir una página web en secciones llamadas “frames”. Cada frame podía cargar contenido independiente. Esta práctica está obsoleta en HTML5.

Etiqueta Descripción Ejemplo

Etiqueta	Descripción	Ejemplo
`<frameset>`	Esta etiqueta se utilizaba para definir la estructura del marco y la distribución de los frames. Debías especificar la cantidad de filas y columnas y cómo se dividían (en píxeles o porcentajes).	`<frameset rows="50%, 50%"> <frame src="pagina1.html"> <frame src="pagina2.html"> <noframes> <body>Tu navegador no soporta frames.</body> </noframes> </frameset>` En este ejemplo, la página se divide en dos filas iguales, y cada fila contiene un frame que carga `pagina1.html` y `pagina2.html`, respectivamente.
`<frame>`	Esta etiqueta se utilizaba para especificar el contenido que se cargará dentro de cada frame. Se coloca dentro del elemento `<frameset>` y tiene el atributo `src`.
`<noframes>`	Se utiliza para proporcionar un contenido alternativo para navegadores que no soportan frames o que los tienen deshabilitados.

<frameset>

Esta etiqueta se utilizaba para definir la estructura del marco y la distribución de los frames. Debías especificar la cantidad de filas y columnas y cómo se dividían (en píxeles o porcentajes).

<frameset rows="50%, 50%">
    <frame src="pagina1.html">
    <frame src="pagina2.html">
    <noframes>
        <body>Tu navegador no soporta frames.</body>
    </noframes>
</frameset>

En este ejemplo, la página se divide en dos filas iguales, y cada fila contiene un frame que carga pagina1.html y pagina2.html, respectivamente.

<frame> Esta etiqueta se utilizaba para especificar el contenido que se cargará dentro de cada frame. Se coloca dentro del elemento <frameset> y tiene el atributo src.

<noframes> Se utiliza para proporcionar un contenido alternativo para navegadores que no soportan frames o que los tienen deshabilitados.

12. Botón

Etiqueta Descripción Ejemplo

Etiqueta	Descripción	Ejemplo
`<button>`	Esta etiqueta le dice al navegador web que queremos comenzar a mostrar un botón. Es más flexible que un input de tipo submit.	Suscríbete a mi canal `<button>Suscribir</button>`

<button>

Esta etiqueta le dice al navegador web que queremos comenzar a mostrar un botón. Es más flexible que un input de tipo submit.

Suscríbete a mi canal

<button>Suscribir</button>

13. Código de Colores en Hexadecimal

Para consultar códigos de colores en formato hexadecimal, puedes utilizar recursos como:

https://htmlcolorcodes.com/es/

Conceptos Misceláneos

Etiqueta <sup>: Se utiliza para minimizar el texto como exponente (ej: X²).
Entidades HTML (< y >): Se utilizan para asignar los símbolos de menor (<) y mayor (>) o agregar otros símbolos sin que el navegador los interprete como código.
Abreviatura Emmet (a*2): Multiplica la cantidad de enlaces a utilizar (útil en editores de código).

Fundamentos Esenciales de HTML y HTML5: Estructura, Etiquetas y Multimedia para Desarrollo Web

Introducción a HTML y HTML5

1. Etiquetas Básicas y Estructura Fundamental

Atributos de `<body>` (Obsoletos)

2. Etiquetas Semánticas y Estructura con HTML5

Etiquetas de Encabezado (Títulos)

Atributos de `<font>` (Obsoleto)

Párrafos y Alineación

Atributos de Párrafo (Obsoletos)

Atributo de Alineación

Etiquetas de Énfasis y Formato de Texto

3. Saltos de Línea

4. Comentarios

5. Listas y Estructuras: Organizando Contenido de Manera Eficiente

6. Imágenes y Elementos Visuales

Imágenes con Leyendas (`<figure>` y `<figcaption>`)

7. Tablas: Organizando Datos en Filas y Columnas

Atributos de Celda (`<td>`)

Atributos de la Tabla (Mayormente Obsoletos)

Combinar Celdas

8. Hipervínculos (Enlaces)

Hipervínculos Internos (Anclas)

9. Elementos Multimedia (Audio y Video)

10. Formularios (`<form>`)

Campos de Entrada en el Formulario (Tipos de `<input>`)

Otros Atributos de Formulario

11. Marcos (Framesets) – Obsoleto

12. Botón

13. Código de Colores en Hexadecimal

Conceptos Misceláneos

Deja una respuesta Cancelar la respuesta

Introducción a HTML y HTML5

1. Etiquetas Básicas y Estructura Fundamental

Atributos de <body> (Obsoletos)

2. Etiquetas Semánticas y Estructura con HTML5

Etiquetas de Encabezado (Títulos)

Atributos de <font> (Obsoleto)

Párrafos y Alineación

Atributos de Párrafo (Obsoletos)

Atributo de Alineación

Etiquetas de Énfasis y Formato de Texto

3. Saltos de Línea

4. Comentarios

5. Listas y Estructuras: Organizando Contenido de Manera Eficiente

6. Imágenes y Elementos Visuales

Imágenes con Leyendas (<figure> y <figcaption>)

7. Tablas: Organizando Datos en Filas y Columnas

Atributos de Celda (<td>)

Atributos de la Tabla (Mayormente Obsoletos)

Combinar Celdas

8. Hipervínculos (Enlaces)

Hipervínculos Internos (Anclas)

9. Elementos Multimedia (Audio y Video)

10. Formularios (<form>)

Campos de Entrada en el Formulario (Tipos de <input>)

Otros Atributos de Formulario

11. Marcos (Framesets) – Obsoleto

12. Botón

13. Código de Colores en Hexadecimal

Conceptos Misceláneos

Deja una respuesta Cancelar la respuesta

Atributos de `<body>` (Obsoletos)

Atributos de `<font>` (Obsoleto)

Imágenes con Leyendas (`<figure>` y `<figcaption>`)

Atributos de Celda (`<td>`)

10. Formularios (`<form>`)

Campos de Entrada en el Formulario (Tipos de `<input>`)