¿Qué son los elementos vacíos en HTML?

En este artículo, veremos las etiquetas vacías en HTML y también nos centraremos en el propósito de usar una etiqueta vacía. Un elemento vacío es un componente que no tiene elementos incrustados ni elementos de texto. Los elementos vacíos no tienen Nodes sucesores. En otras palabras, las etiquetas que no contienen etiquetas de cierre son etiquetas vacías. Las etiquetas vacías contienen solo la etiqueta de apertura, pero realizan alguna acción en la página web.

Sintaxis:

<tag_name>

Un elemento que no tiene una etiqueta envolvente se denomina elemento vacío . Agregar las etiquetas de cierre a los elementos vacíos será una sintaxis no válida. Los elementos vacíos no tienen Nodes secundarios. En resumen, los elementos vacíos se cierran automáticamente o son anulados y no etiquetas de contenedor. Los elementos vacíos se utilizan para incrustar imágenes, listas, saltos, líneas horizontales, hipervínculos, para entrada, metadatos, áreas, etc. Por ejemplo, la etiqueta <p> tenía una etiqueta de cierre, por lo que no era un elemento vacío.

Las siguientes son las listas de elementos vacíos que se usan en HTML:

Elementos  

Descripción

<área>                          

Se utiliza para mapear una parte de una imagen para que el usuario final pueda hacer clic en ella. Se utiliza para dirigir al usuario a diferentes enlaces después de que el usuario haga clic en las partes asignadas de la imagen. Se utiliza como una etiqueta secundaria de la etiqueta <map>. 

<base> 

Para todas las URL relativas en un documento, la URL base se especifica para usar con el elemento <base>. Solo se puede usar un elemento <base> en un documento.

<br>

El elemento <br> se utiliza para un salto de línea en un texto (también se puede llamar retorno de carro). Es útil en el caso de escribir una dirección, historia, blogs, etc., donde la oración larga debe dividirse para una visibilidad clara.

<col>

La etiqueta <col> en HTML se usa para establecer las propiedades de columna para cada columna dentro de una etiqueta <colgroup>. Esta etiqueta se usa para establecer la propiedad de estilo en cada columna. Esta etiqueta no contiene etiquetas de cierre.

<incrustar>

La etiqueta <embed> en HTML se usa para incrustar aplicaciones externas que generalmente son contenido multimedia como audio o video en un documento HTML. Se utiliza como contenedor para incrustar complementos, como animaciones flash.

<hr>

Una ruptura temática entre componentes a nivel de párrafo se representa mediante el elemento <hr>. Por ejemplo, un cambio de turno en el tema dentro de una sección.

<img>

El elemento <img> se utiliza para incrustar una imagen en el documento.

<entrada>                                

Este elemento vacío se utiliza para crear controles interactivos para aplicaciones y formularios basados ​​en web, para aceptar la información del usuario, como una dirección, nombre, número de teléfono, etc., dependiendo de una variedad de tipos de datos de entrada y widgets de control disponibles. . Todos los tipos y atributos de entrada se utilizan dentro del elemento <input>.

<enlace>

El elemento HTML <link> se utiliza para establecer una conexión entre el contenido actual y un recurso externo. Por ejemplo, podemos usarlo para vincular la hoja de estilo externa o el archivo javascript, etc.

<meta>

El elemento HTML <meta> representa metadatos, es decir, información de una información.

<parámetro>            

La etiqueta <param> en HTML se usa para definir un parámetro para complementos que está asociado con el elemento <object>. No contiene la etiqueta final.

<fuente>

El elemento <source> es un elemento vacío que proporciona varios recursos multimedia para los elementos <image>, <audio> o <video>. Proporciona el mismo material multimedia en varios formatos de archivo para garantizar la compatibilidad con una amplia variedad de navegadores, ya que los navegadores admiten de manera diferente los formatos de imagen y archivo multimedia.

<pista>

La etiqueta <track> especifica pistas de texto para componentes multimedia de audio y video. Esta sección se emplea para especificar subtítulos, archivos de subtítulos u otros archivos que contienen texto, que deben estar visibles cuando se reproducen los medios. El elemento <track> es un elemento HTML vacío que se usa como elemento secundario del audio y componentes de medios de video. Le permite definir pistas de texto cronometradas (o datos basados ​​en el tiempo), por ejemplo, para manejar subtítulos automáticamente. El formato WebVTT (archivos .vtt) (pistas de texto de vídeo web) se utiliza para las pistas.

<wbr>

La etiqueta <wbr> en HTML significa oportunidad de salto de palabra y se utiliza para definir la posición dentro del texto que el navegador trata como un salto de línea. Se usa principalmente cuando la palabra usada es demasiado larga y hay posibilidades de que el navegador rompa líneas en el lugar equivocado para ajustar el texto.

El siguiente ejemplo de código ilustra el uso de elementos vacíos. Hemos utilizado sólo algunos de ellos aquí.

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <title>Empty Element</title>
  </head>
    
  <body>
    <base href="https://www.geeksforgeeks.org/" />
    <h2>br tag</h2>
    5th Floor, A-118,<br />
    Sector-136, Noida,<br />
    Uttar Pradesh - 201305<br />
    <h2>hr tag</h2>
    <hr />
    <h2>col tag</h2>
    <table>
      <colgroup>
        <col span="2" style="background-color: green" />
        <col style="background-color: red" />
      </colgroup>
      <tr>
        <th>Sr. no</th>
        <th>Title</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>1234</td>
        <td>GeeksForGeeks</td>
        <td>$10</td>
      </tr>
    </table>
    <h2>img tag</h2>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png"
      width="300"
      height="119"/>
    <h2>input tag</h2>
    <form action="page.html" method="post">
      <input type="submit" />
    </form>
  </body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por shantanujain18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *