Elementos HTML adicionales

En actividades anteriores, aprendiste lo siguiente:

  • Conceptos básicos de los elementos y las etiquetas HTML
  • Cómo estructurar una página web
  • HTML semántico y prácticas recomendadas

Con este artículo, podrás ampliar tus conocimientos sobre HTML y cubrir elementos HTML adicionales.

Elementos de contenido de texto

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

Estos elementos admiten la creación de contenido de texto y agregan estructura, estilo y significado. Hay varios tipos de contenido de texto que pueden incorporar los siguientes elementos.

El elemento de bloque entrecomillado

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

En este ejemplo, se muestra cómo usar el elemento <blockquote>, que muestra una cita famosa de Mahatma Gandhi. Hay muchas citas excelentes que proporcionan contenido y significado memorables. Piensa en algunas de tus figuras inspiradoras favoritas y sus citas.

Usa el elemento <blockquote> cuando uses citas y hagas referencia a información de una fuente. El elemento <blockquote> crea una sangría y alineación únicas en la presentación, y usa una etiqueta de apertura y de cierre. Un elemento <blockquote> resulta especialmente útil cuando se usan comillas más largas que cubren varias líneas de texto.

También puedes usar varios elementos dentro de un elemento <blockquote>, como un encabezado, un párrafo o una lista.

El elemento <details>

<details>
   <summary>Details</summary>
   Additional Information
</details>

A menudo, una página web tiene una sección de preguntas frecuentes e información adicional que está disponible para el usuario. Hay secciones de Preguntas frecuentes que son comunes para la información del producto, el itinerario del viaje o cualquier tipo de situación de pregunta y respuesta.

El elemento <details> es útil porque se usa un widget divulgado que contiene información adicional. El elemento incluye una función integrada de activación y desactivación, y el usuario puede abrirla y cerrarla. Cuando el botón de activación está abierto, se expande el contenido de información adicional, y el usuario puede leerlo. Cuando se cierra el botón de activación, se oculta el contenido de información adicional para el usuario. Para asignarle un nombre al widget <details>, usa el elemento <summary>.

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

Este es el elemento <figure> en acción. Aquí puedes ver que <figure>, que se usa junto con el elemento <figcaption>, se puede usar para mejorar la experiencia visual.

Ves imágenes por toda la Web y otros datos visuales útiles todo el tiempo. Los elementos visuales ayudan a atraer la atención del visitante y crear una gran experiencia del usuario. El elemento <figure> es una forma de etiquetar una imagen, una tabla, un gráfico, etc. Funciona mediante la creación de contenido autónomo en relación con el contenido principal.

El elemento <time>

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

El elemento <time> proporciona significado y significado semántico, lo que permite una mejor funcionalidad con actividades como programar una cita en línea, publicar una fecha y hora para un artículo de blog, archivos, etc. Algunos ejemplos de sitios web que usarían el elemento <time> incluyen usar el Calendario de Google, publicar un artículo en vivo en una plataforma o leer archivos históricos en línea del sitio web de una biblioteca.

El elemento <time> hace referencia a la hora y puede representar la hora de un reloj de 24 horas o una fecha específica que se puede ajustar para la zona horaria y la ubicación. Este elemento requiere una etiqueta de apertura y de cierre, <time> y </time>. Puedes agregar el atributo datetime para que las fechas se puedan leer en un formato apto para la lectura automática.

Metadatos de documentos

<title>Sarah's Favorite Food Recipes</title>

Cada vez que escribes la URL de un sitio web, hay un nombre <title> que se puede leer en la barra del navegador o en la pestaña de la página web. Es el nombre del título que se le asigna a una página web. Este elemento es importante, y los motores de búsqueda lo utilizan para mostrar una lista de páginas web relacionadas en los resultados de la búsqueda. La longitud del título puede variar de corto y descriptivo, a más largo y más descriptivo.

Situación: tienes una página web en la que estás pensando, pero no recuerdas la URL específica de un sitio web. Escribe las palabras clave en un motor de búsqueda. El motor de búsqueda te ayuda a localizar la página web que estás buscando y puedes ver el nombre <title> que aparece en la búsqueda.

Elementos de contenido incorporados

Además del contenido de texto, hay una variedad de elementos de contenido adicionales para usar.

El elemento <iframe>

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

Cuando terminas de comprar artículos en línea y haces clic en tu opción de pago, como PayPal o Apple Pay, estas funciones se suelen agregar a una página web con una <iframe>. Ver un mapa en línea para buscar una empresa local es otra experiencia común. Estos tipos de experiencias del usuario en una página web se pueden agregar con un iframe. En el ejemplo anterior, se puede ver la URL de Wikipedia dentro de un iframe, titulada "Wikipedia".

El elemento <iframe> te permite insertar contenido de otra fuente e incorporar un marco en una página web. Crea un marco rectangular y muestra contenido en el navegador. Un marco permite presentar un diseño con forma de ventana dentro de un elemento <iframe>. Es una forma eficaz de agregar contenido a tu página web para mejorar la experiencia.

Elementos del formulario

<progress max="100" value="30"> 30% </progress>

Cuando mires un video más largo o una clase, o completes una solicitud extensa, tener una barra de progreso visual puede ser útil para hacer un seguimiento de tu progreso. El elemento <progress> es útil para este tipo de situaciones.

Este elemento se representa como una barra visual con un color de fondo. La barra visual puede variar en tamaño y color de fondo. Con la barra de progreso, tienes la opción de usar los atributos max y value. El atributo max establece el número de punto flotante y el atributo value indica cuánto progreso se realizó en una tarea.

Guion

<canvas id="canvas"></canvas>

Para poder dibujar gráficos y animaciones en tiempo real, usa el elemento <canvas>. Coloca el elemento <canvas> en tu página web HTML para crear un lienzo. Este elemento requiere código JavaScript para que la funcionalidad dibuje y cree gráficos.

Elementos de contenido de la tabla

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

El elemento <table>

El elemento <table> crea una tabla. Este es el punto de partida para agregar elementos adicionales con filas y columnas. Las tablas aparecen con frecuencia en las páginas web, ya que son una forma útil de organizar y mostrar la información. Un caso de uso para usar el elemento <table> es presentar información tabular al usuario, como el tipo de información que puedes encontrar en una hoja de cálculo.

El elemento <th>

El elemento <th> es el encabezado de un grupo de celdas.

El elemento <tr>

El elemento <tr> define una fila de celdas dentro de una tabla. Desde aquí, puedes agregar datos de celda específicos.

El elemento <td>

El elemento <td> crea la celda y agrega el contenido necesario.

Conclusión

En este artículo, descubriste elementos HTML adicionales y desarrollaste tus habilidades de programación. Aprendiste más sobre el contenido, el texto intercalado, el contenido incorporado y los elementos de la tabla. Ahora conoces los elementos HTML adicionales. ¡Sigue así!