Etiquetas usadas HTML

Actualidad

A Continuación veras una lista detallada y con ejemplos de las etiquetas HTML mas usadas

<html>

: Define el inicio y el final del documento HTML.

Ejemplo

<html>
  <head>
    <title>Título de la página</title>
  </head>
  <body>
    <!-- Contenido de la página -->
  </body>
</html>

<head>:

Contiene información de encabezado sobre el documento HTML, como título, enlaces a hojas de estilo y scripts.

Ejemplo:

<head>
  <title>Título de la página</title>
  <link rel="stylesheet" href="estilos.css">
</head>

<title>:

Define el título de la página que se muestra en la barra de título del navegador.

Ejemplo:

<title>Título de la página</title>

<body>:

Contiene el contenido visible de la página web.

Ejemplo:

<body>
  <h1>Título principal</h1>
  <p>Este es un párrafo de ejemplo.</p>
</body>

<h1> a <h6>:

Encabezados de nivel de título, donde <h1> es el más importante y <h6> el menos importante.

Ejemplo:

<h1>Título principal</h1>
<h2>Subtítulo</h2>

<p>:

Define un párrafo de texto.

Ejemplo:

<p>Este es un párrafo de ejemplo.</p>

<a>:

Crea un enlace a otra página web o recurso.
Ejemplo:

<a href="https://www.ejemplo.com">Enlace de ejemplo</a>

<img>:

Inserta una imagen en la página web.

Ejemplo:

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

<ul>:

Crea una lista desordenada.

Ejemplo:

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

<ol>:

Crea una lista ordenada.

Ejemplo:

<ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
</ol>

<div>:

Crea un contenedor genérico que se utiliza para agrupar elementos y aplicar estilos o manipulaciones.

Ejemplo:

<div>
  <p>Contenido dentro del contenedor div.</p>
</div>

<span>:

Define una sección en línea en el texto y se utiliza para aplicar estilos específicos a partes del contenido.

Ejemplo:

<p>Este es un <span style="color: blue;">texto resaltado</span>.</p>

<form>:

Crea un formulario interactivo que permite a los usuarios ingresar y enviar datos.

Ejemplo:

<form action="/procesar" method="post">
  <input type="text" name="nombre" placeholder="Nombre">
  <input type="submit" value="Enviar">
</form>

<input>:

Define un campo de entrada que permite a los usuarios ingresar datos.

Ejemplo:

<input type="text" name="nombre" placeholder="Nombre">

<button>:

Crea un botón interactivo en la página web.

Ejemplo:

<button type="button">Haz clic aquí</button>

<table>:

Crea una tabla para mostrar datos tabulares.

Ejemplo:

<table>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

<iframe>:

Inserta un marco o ventana incrustada que muestra contenido de otra página web.

Ejemplo:

<iframe src="https://www.ejemplo.com"></iframe>

<nav>:

Define una sección de navegación en la página web.

Ejemplo:

<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/acerca">Acerca</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

<header>:

Define la sección de encabezado de la página o de una sección específica.

Ejemplo:

<header>
  <h1>Encabezado de la página</h1>
</header>

<footer>:

Define la sección de pie de página de la página o de una sección específica.

Ejemplo:

<footer>
  <p>Derechos de autor © 2023. Todos los derechos reservados.</p>
</footer>

<section>:

Define una sección lógica o temática en la página.

Ejemplo:

<section>
  <h2>Sección de productos</h2>
  <p>Aquí se muestran los productos disponibles.</p>
</section>

<article>:

Define un contenido independiente y autónomo que puede ser distribuido o reutilizado por separado.

Ejemplo:

<article>
  <h2>Título del artículo</h2>
  <p>Contenido del artículo.</p>
</article>

<aside>:

Define contenido relacionado o complementario dentro de una página, como una barra lateral.

Ejemplo:

<aside>
  <h3>Información adicional</h3>
  <p>Contenido relacionado o destacado.</p>
</aside>

<blockquote>:}

Indica una sección de contenido citado de otra fuente.

Ejemplo:

<blockquote>
  <p>Texto citado.</p>
  <cite>Autor del texto citado</cite>
</blockquote>

<code>:

Muestra fragmentos de código en el texto de la página.

Ejemplo:

<p>El comando para imprimir en la consola es <code>console.log()</code>.</p>

<video>:

Inserta un elemento de video en la página web.
Ejemplo:

<video src="video.mp4" controls></video>

<audio>:

Inserta un elemento de audio en la página web.

Ejemplo:

<audio src="audio.mp3" controls></audio>

<form>:

Crea un formulario interactivo que permite a los usuarios ingresar y enviar datos.

Ejemplo:

<form action="/procesar" method="post">
  <!-- Campos de formulario aquí -->
  <input type="submit" value="Enviar">
</form>

Share this