Describir los elementos vacíos en HTML

La mayoría de los elementos HTML están rodeados de etiquetas de inicio y finalización para especificar el inicio y el final del elemento.

Hay un grupo especial de elementos que solo tienen etiquetas de inicio y no contienen ningún contenido, estos elementos se denominan elementos vacíos. Los elementos vacíos no tienen etiquetas finales y solo pueden tener atributos, pero no contienen ningún tipo de contenido. Estos elementos pueden tener una barra invertida antes de finalizar la etiqueta de inicio, pero eso es completamente opcional. Ejemplos de tales elementos son <br> , <hr> , <img> , <input> , <link> , <base> , <meta> , <param> , <area> , <embed> , <col> , < pista> , <fuente>

Características:

  • Los elementos vacíos no tienen etiquetas finales.
  • Los elementos vacíos no pueden tener contenido en su interior.
  • Los elementos vacíos tienen atributos.
  • Los elementos vacíos no se pueden anidar.

Los siguientes son algunos de los elementos vacíos.

Etiqueta HTML <br>: esta etiqueta se utiliza para insertar saltos de línea en el texto en HTML. Acepta atributo claro que indica dónde comenzar la siguiente línea.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>    
    <p>Hi Geeks! <br>Welcome to GeeksforGeeks</p>
  
</body>
</html>

Producción:

Etiqueta HTML <hr>: esta etiqueta se utiliza para insertar una regla horizontal en documentos HTML para separar diferentes secciones del documento. Puede tener atributos como Alinear, sin sombra, ancho, tamaño.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<body>
          
    <p>Welcome to GeeksforGeeks</p>
  
    <hr>        
    <p>A computer science portal for geeks</p>
  
</body>    
</html>                    

Producción:

etiqueta <hr>

Etiqueta HTML <img>: esta etiqueta se utiliza para agregar imágenes a las páginas web HTML. Puede tener atributos como src , alt , height , width , ismap , loading, etc.

Ejemplo:

HTML

<!DOCTYPE html>
  
<html>
<body>        
    <h2 style="color:green">GeeksforGeeks</h2>
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png" 
         width="320" height="100" alt="Geeksforgeeks.org" >
</body>    
</html>                    

Producción:

Etiqueta HTML <input>: esta etiqueta se utiliza para insertar un campo de entrada que puede aceptar diferentes tipos de entradas según el valor delatributo de tipo . También puede tener atributos como nombre , alt , marcador de posición, etc.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<body>
  <h2 style="color:green">GeeksforGeeks</h2>
  <input type="text" placeholder="Enter name...">    
</body>
</html>

Producción:

Etiqueta HTML <enlace>: esta etiqueta se utiliza para definir un enlace entre un documento HTML y un recurso externo. Puede tener atributos como rel, charset , disabled , href , etc.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
   <link rel="stylesheet" 
         type="text/css"
         href="style.css">
</head>
  
<body>
   <h2>GeeksforGeeks</h2>
</body>
</html>

CSS

h2
{
    color: green;
}

Producción:

Etiqueta HTML <base>: esta etiqueta se utiliza para especificar una URL base (que se agregará al inicio) para todos los enlaces presentes en esa página. Solo puede haber 1 URL base en una sola página.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
    <base href=
"https://media.geeksforgeeks.org/wp-content/uploads/20220113144322/"
          target="_blank"/>
  
</head>
  
<body>
    <img src="G-100x34.PNG" 
         width="150px" 
         height="150px">
</body>
</html>

Producción:

etiqueta <base>

Etiqueta HTML <meta>: se utiliza para especificar información sobre las páginas web HTML que utilizan los motores de búsqueda. Puede tener atributos como nombre , contenido , conjunto de caracteres , etc.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="description" content=
      "A Computer Science portal for geeks. 
       It contains well written, well thought 
       and well explained computer science and 
       programming articles, quizzes and practice/competitive
       programming/company interview Questions.">
</head>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <p>A computer science portal for geeks</p>
  
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por saxenaanjali239 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 *