HTML
Elementos vacíos

Angular 2 AngularJS ASP.NET CSS Java Language JavaScript jQuery PHP Python Language twitter-bootstrap
Buscar..


Introducción

No todas las etiquetas HTML son de la misma estructura. Si bien la mayoría de los elementos requieren una etiqueta de apertura, una etiqueta de cierre y contenido, algunos elementos, conocidos como elementos vacíos, solo requieren una etiqueta de apertura ya que ellos mismos no contienen ningún elemento. Este tema explica y demuestra el uso correcto de los elementos nulos en HTML

Observaciones

Un elemento vacío no puede tener ningún contenido, pero puede tener atributos. Los elementos vacíos se cierran automáticamente, por lo que no deben tener una etiqueta de cierre.

En HTML5 , los siguientes elementos son nulos:

  • area
  • base
  • br
  • col
  • embed
  • hr
  • img
  • input
  • keygen
  • link
  • meta
  • param
  • source
  • track
  • wbr

Elementos vacios

HTML 4.01 / XHTML 1.0 Strict incluye los siguientes elementos nulos:

  • area : area definida en la que se puede hacer clic en una imagen
  • base : especifica una URL base desde la cual se basan todos los enlaces
  • br - salto de línea
  • col - columna en una tabla [obsoleta]
  • hr - regla horizontal (línea)
  • img - imagen
  • input - campo donde los usuarios ingresan datos
  • link - vincula un recurso externo al documento
  • meta - proporciona información sobre el documento
  • param - define parámetros para plugins

Los estándares HTML 5 incluyen todas las etiquetas no en desuso de la lista anterior y

  • command : representa un comando que los usuarios pueden invocar [obsoleto]
  • keygen : facilita la generación de claves públicas para certificados web [obsoleto]
  • source : especifica fuentes de medios para elementos de picture , audio y video

El siguiente ejemplo no incluye elementos vacíos: 

<div>
    <a href="http://stackoverflow.com/">
        <h3>Click here to visit <i>Stack Overflow!</i></h3>
    </a>
    <button onclick="alert('Hello!');">Say Hello!</button>
    <p>My favorite language is <b>HTML</b>. Here are my others:</p>
    <ol>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>PHP</li>
    </ol>
</div>

Observe cómo cada elemento tiene una etiqueta de apertura, una etiqueta de cierre y un texto u otros elementos dentro de las etiquetas de apertura y cierre. Las etiquetas nulas, sin embargo, se muestran en el siguiente ejemplo: 

<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png" />
<br>
<hr>
<input type="number" placeholder="Enter your favorite number">

Con la excepción de la etiqueta img, todos estos elementos nulos tienen solo una etiqueta de apertura. La etiqueta img, a diferencia de cualquier otra etiqueta, tiene un cierre automático / antes del signo mayor que la etiqueta de apertura. Es una buena práctica tener un espacio antes de la barra.



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow