HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear páginas web. Con HTML, los desarrolladores pueden estructurar y presentar el contenido de una página web utilizando una variedad de etiquetas. En este artículo, exploraremos las etiquetas HTML más comunes y su descripción.
Etiquetas de encabezado
Las etiquetas de encabezado se utilizan para definir los niveles de encabezado en una página web. Hay seis niveles de encabezado, desde <h1> hasta <h6>. El encabezado principal de la página generalmente se define con <h1>, mientras que los encabezados secundarios se definen con <h2>, <h3>, y así sucesivamente.
Etiquetas de párrafo
Las etiquetas de párrafo se utilizan para definir bloques de texto en una página web. El texto dentro de las etiquetas <p> se muestra en un nuevo párrafo. Por ejemplo:
<p>Este es un párrafo de ejemplo.</p>
<p>Este es otro párrafo de ejemplo.</p>
Esto se mostrará como:
Este es un párrafo de ejemplo.
Este es otro párrafo de ejemplo.
Etiquetas de enlace
Las etiquetas de enlace se utilizan para crear enlaces a otras páginas web o recursos. La etiqueta <a> se utiliza para definir un enlace y el atributo href se utiliza para especificar la URL de destino. Por ejemplo:
<a href="https://www.ejemplo.com">Enlace de ejemplo</a>
Esto se mostrará como:
Etiquetas de imagen
Las etiquetas de imagen se utilizan para insertar imágenes en una página web. La etiqueta <img> se utiliza para definir una imagen y el atributo src se utiliza para especificar la URL de la imagen. Por ejemplo:
<img src="imagen.jpg" alt="Descripción de la imagen">
Esto mostrará la imagen «imagen.jpg» en la página web, con la descripción «Descripción de la imagen» si la imagen no se puede cargar.
Etiquetas de lista
Las etiquetas de lista se utilizan para crear listas de elementos. Hay dos tipos principales de listas en HTML: listas ordenadas y listas desordenadas.
Las listas ordenadas se crean con la etiqueta <ol> y cada elemento de la lista se define con la etiqueta <li>. Por ejemplo:
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
Esto se mostrará como:
- Elemento 1
- Elemento 2
- Elemento 3
Las listas desordenadas se crean con la etiqueta <ul> y también se definen los elementos de la lista con la etiqueta <li>. Por ejemplo:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
Esto se mostrará como:
- Elemento 1
- Elemento 2
- Elemento 3
Etiquetas de tabla
Las etiquetas de tabla se utilizan para crear tablas en una página web. La etiqueta <table> se utiliza para definir una tabla, mientras que las etiquetas <tr> y <td> se utilizan para definir filas y celdas de la tabla, respectivamente. Por ejemplo:
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
<tr>
<td>Celda 3</td>
<td>Celda 4</td>
</tr>
</table>
Esto se mostrará como:
| Celda 1 | Celda 2 |
| Celda 3 | Celda 4 |
Etiquetas de formulario
Las etiquetas de formulario se utilizan para crear formularios interactivos en una página web. Las etiquetas <form>, <input>, <select> y <button> son algunas de las etiquetas más comunes utilizadas en los formularios.
La etiqueta <form> se utiliza para definir un formulario y el atributo action se utiliza para especificar la URL a la que se enviarán los datos del formulario. Por ejemplo:
<form action="procesar.php" method="POST">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<input type="submit" value="Enviar">
</form>
Esto creará un formulario con un campo de texto para el nombre y un botón de envío. Cuando se envíe el formulario, los datos se enviarán a «procesar.php» utilizando el método POST.
Etiquetas de estilo y formato
Las etiquetas de estilo y formato se utilizan para dar estilo y formato al contenido de una página web. Algunas de las etiquetas más comunes incluyen <strong>, <em>, <u>, <del> y <code>.
La etiqueta <strong> se utiliza para resaltar o enfatizar el texto. Por ejemplo:
<p>Este es un texto <strong>importante</strong>.</p>
Esto se mostrará como:
Este es un texto importante.
La etiqueta <em> se utiliza para enfatizar el texto de manera más sutil. Por ejemplo:
<p>Este es un texto <em>enfático</em>.</p>
Esto se mostrará como:
Este es un texto enfático.
La etiqueta <u> se utiliza para subrayar el texto. Por ejemplo:
<p>Este es un texto <u>subrayado</u>.</p>
Esto se mostrará como:
Este es un texto subrayado.
La etiqueta <del> se utiliza para mostrar texto tachado. Por ejemplo:
<p>Este es un texto <del>tachado</del>.</p>
Esto se mostrará como:
Este es un texto tachado.
La etiqueta <code> se utiliza para mostrar código o texto de máquina. Por ejemplo:
<p>Este es un <code>código</code> de ejemplo.</p>
Esto se mostrará como:
Este es un código de ejemplo.
Etiquetas de multimedia
Las etiquetas de multimedia se utilizan para insertar contenido multimedia en una página web, como imágenes, videos y audio. Algunas de las etiquetas más comunes incluyen <img>, <video>, <audio> y <iframe>.
La etiqueta <img> se utiliza para insertar imágenes, como se mencionó anteriormente.
La etiqueta <video> se utiliza para insertar videos en una página web. Por ejemplo:
<video src="video.mp4" controls></video>
Esto mostrará el video «video.mp4» en la página web con controles de reproducción.
La etiqueta <audio> se utiliza para insertar archivos de audio en una página web. Por ejemplo:
<audio src="audio.mp3" controls></audio>
Esto mostrará el archivo de audio «audio.mp3» en la página web con controles de reproducción.
La etiqueta <iframe> se utiliza para insertar contenido de otras páginas web en una página web. Por ejemplo:
<iframe src="https://www.ejemplo.com" width="500" height="300"></iframe>
Esto mostrará el contenido de «https://www.ejemplo.com» en un marco de 500 píxeles de ancho y 300 píxeles de alto.
Etiquetas de estructura
Las etiquetas de estructura se utilizan para definir la estructura de una página web. Algunas de las etiquetas más comunes incluyen <header>, <nav>, <main>, <section>, <article> y <footer>.
La etiqueta <header> se utiliza para definir la cabecera de una página web. Por ejemplo:
<header>
<h1>Título de la página</h1>
<nav>
<a href="inicio.html">Inicio</a>
<a href="acerca.html">Acerca de</a>
<a href="contacto.html">Contacto</a>
</nav>
</header>
Esto mostrará un encabezado con un título y una barra de navegación.
La etiqueta <nav> se utiliza para definir una sección de navegación en una página web.
La etiqueta <main> se utiliza para definir el contenido principal de una página web.
La etiqueta <section> se utiliza para definir secciones de contenido en una página web. Por ejemplo:
<section>
<h2>Sección 1</h2>
<p>Contenido de la sección 1.</p>
</section>
<section>
<h2>Sección 2</h2>
<p>Contenido de la sección 2.</p>
</section>
Esto mostrará dos secciones con títulos y contenido.
La etiqueta <article> se utiliza para definir un artículo independiente en una página web. Por ejemplo:
<article>
<h2>Título del artículo</h2>
<p>Contenido del artículo.</p>
</article>
Esto mostrará un artículo con un título y contenido.
La etiqueta <footer> se utiliza para definir el pie de página de una página web. Por ejemplo:
<footer>
<p>© 2022 Ejemplo.com</p>
</footer>
Esto mostrará un pie de página con el año y el nombre del sitio web.
Estas son solo algunas de las etiquetas HTML más comunes utilizadas para estructurar y presentar el contenido en una página web. Hay muchas más etiquetas disponibles en HTML, cada una con su propia función y propósito. Al dominar estas etiquetas, los desarrolladores web pueden crear páginas web efectivas y bien estructuradas.
