Elementos de HTML

Elementos de nivel de bloque

Los elementos de nivel de bloque son elementos HTML que comienzan en una nueva línea y ocupan todo el ancho disponible por defecto. Crean una caja de nivel de bloque, lo que significa que tienen un salto de línea antes y después del elemento. Algunos ejemplos comunes de elementos de nivel de bloque incluyen <div>, <p> y <h1> a <h6>.

<div>Esto es un elemento de nivel de bloque.</div>

El elemento <div> es un contenedor genérico que se usa a menudo para agrupar otros elementos y aplicarles estilos o diseños. El elemento <p> representa un párrafo de texto, mientras que los elementos <h1> a <h6> representan diferentes niveles de encabezados, siendo <h1> el nivel más alto y <h6> el más bajo.

Los elementos de nivel de bloque se usan para crear la estructura principal de una página web, como encabezados, párrafos, secciones y más. Pueden contener otros elementos de nivel de bloque, así como elementos en línea.

Elementos en línea

Los elementos en línea son elementos HTML que no comienzan en una nueva línea y solo ocupan el ancho necesario. Crean una caja de nivel en línea, lo que significa que no tienen un salto de línea antes o después del elemento. Algunos ejemplos comunes de elementos en línea incluyen <span>, <a> e <img>.

<span>Esto es un elemento en línea.</span>

El elemento <span> es un contenedor genérico para contenido en línea y se usa a menudo para aplicar estilos o dirigirse a partes específicas del texto. El elemento <a> representa un hipervínculo, que permite a los usuarios navegar de una página web a otra. El elemento <img> se usa para insertar imágenes en una página web.

<a href="https://ejemplo.com">Haz clic aquí</a>

Los elementos en línea se usan para formatear o estilizar partes específicas de texto o contenido dentro de un elemento de nivel de bloque. No deben contener elementos de nivel de bloque, pero pueden estar contenidos dentro de ellos.

Elementos de texto

Los elementos de texto estructuran y formatean el contenido textual en una página web. Los elementos de texto más básicos son los encabezados y los párrafos. Los encabezados, representados por las etiquetas <h1> a <h6>, definen la jerarquía e importancia del contenido, siendo <h1> el nivel más alto y <h6> el más bajo. Los párrafos, representados por la etiqueta <p>, agrupan oraciones relacionadas.

Otros elementos de texto incluyen elementos de formato como <strong> para texto en negrita, <em> para texto en cursiva, <sup> para superíndice y <sub> para subíndice. Estos elementos añaden énfasis o un significado especial a partes específicas del texto.

Elementos estructurales

Los elementos estructurales definen la estructura general y el diseño de una página web. El elemento <div> es un contenedor genérico que agrupa otros elementos y les aplica estilos o diseños. El elemento <span> es similar a <div>, pero es un elemento en línea y se usa para aplicar estilos o dirigirse a partes específicas del texto.

Otros elementos estructurales incluyen <header>, <footer>, <nav>, <section> y <article>. El elemento <header> representa contenido introductorio o un grupo de enlaces de navegación, mientras que el elemento <footer> contiene información sobre el autor, derechos de autor o enlaces a páginas relacionadas. El elemento <nav> define un conjunto de enlaces de navegación. El elemento <section> representa una sección independiente de contenido, y el elemento <article> representa una composición autónoma, como una entrada de blog o un artículo de noticias.

Elementos multimedia

Los elementos multimedia insertan contenido multimedia en una página web. El elemento <img> muestra imágenes, mientras que los elementos <video> y <audio> insertan contenido de video y audio, respectivamente.

<img src="imagen.jpg" alt="Una descripción de la imagen">

El atributo src especifica la URL del archivo multimedia, y el atributo alt proporciona texto alternativo para lectores de pantalla y motores de búsqueda.

Elementos de lista

Los elementos de lista crean listas ordenadas y no ordenadas. Una lista no ordenada, representada por la etiqueta <ul>, se usa cuando el orden de los elementos no es importante. Una lista ordenada, representada por la etiqueta <ol>, se usa cuando el orden de los elementos importa. Los elementos de lista, representados por la etiqueta <li>, son los elementos individuales dentro de una lista.

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

Elementos de tabla

Los elementos de tabla crean tablas para mostrar datos en filas y columnas. El elemento <table> define la tabla, mientras que <tr> representa una fila de la tabla, <th> representa una celda de encabezado de tabla y <td> representa una celda de datos de tabla.

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Fila 1, Celda 1</td>
    <td>Fila 1, Celda 2</td>
  </tr>
  <tr>
    <td>Fila 2, Celda 1</td>
    <td>Fila 2, Celda 2</td>
  </tr>
</table>

Elementos de formulario

Los elementos de formulario crean formularios interactivos para la entrada de datos del usuario. El elemento <form> define el formulario, mientras que varios otros elementos crean diferentes tipos de entradas. El elemento <input> crea campos de texto, botones de radio, casillas de verificación y más, dependiendo del valor de su atributo type. El elemento <label> proporciona una etiqueta de texto para un campo de entrada, haciéndolo más accesible y fácil de usar.

Otros elementos de formulario incluyen <button> para crear botones clicables, <select> para crear menús desplegables y <textarea> para crear campos de entrada de texto de varias líneas.

<form>
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre">

  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Enviar</button>
</form>