Bloque HTML y elementos en línea

En este artículo, conoceremos el elemento de bloque HTML y el elemento en línea , además de comprender la implementación a través del ejemplo. Todos los documentos HTML que representan el contenido web dependerán del tipo de elemento, es decir, bloque o en línea, que son valores de visualización predeterminados. Entenderemos ambos conceptos a través de los ejemplos.

Ejemplo: Este ejemplo ilustra el uso del elemento a nivel de bloque y el elemento en línea.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <div>GeeksforGeeks</div> 
    Checkout the GeeksforGeeks
    <a href="https://www.geeksforgeeks.org/" 
       alt="GeeksforGeeks">
      official</a> website for the articles on various courses. 
</body>
  
</html>

Producción:

Elementos en bloque y en línea

En el ejemplo anterior, hemos utilizado la etiqueta <div> que siempre comienza en una nueva línea y captura todo el ancho disponible. Hemos utilizado la etiqueta de anclaje de elemento en línea <a> que se utiliza para proporcionar un enlace a un texto. El elemento en línea no comienza en una nueva línea y captura solo el espacio alrededor del elemento.

Elementos de nivel de bloque: un elemento de nivel de bloque siempre comienza en una nueva línea y se extiende hacia la izquierda y hacia la derecha tanto como puede, es decir, ocupa todo el espacio horizontal de su elemento principal y la altura es igual a la altura del contenido.

Etiquetas admitidas:

elemento div: El elemento <div> se utiliza como contenedor para otros elementos HTML. No tiene atributos requeridos. Style , class e id son los atributos comúnmente utilizados.

Sintaxis:

<div>GFG</div>

Ejemplo: El siguiente código ilustra la implementación de la etiqueta <div>.

HTML

<!DOCTYPE html>
<html>
<title>Block-level Element</title>
  
<body>
    <div>
        <h1>GeeksforGeeks</h1>
        <h3>GeeksforGeeks is a science portal for geeks.</h3>
        <h3>
          You can give reviews as well as 
          contribute posts on this portal.
        </h3>
    </div>
</body>
  
</html>

Producción:

Elemento de bloque

Elementos en línea: un elemento en línea es lo opuesto al elemento a nivel de bloque. No comienza en una nueva línea y ocupa solo el ancho necesario, es decir, solo ocupa el espacio delimitado por las etiquetas que definen el elemento HTML, en lugar de interrumpir el flujo del contenido.

Etiquetas admitidas:

elemento span: la etiqueta <span> se utiliza como contenedor de texto. No tiene atributos requeridos. Style , class e id son los atributos comúnmente utilizados.

Sintaxis:

<span>GFG</span>

Ejemplo: El siguiente código ilustra la implementación de la etiqueta <span>.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
    body {
        text-align: center;
    }
      
    h1 {
        color: green;
    }
    </style>
</head>
<body>
    <!-- Sapn element. -->
    <h1>Geeks
      <span style="color: red"> for</span>
      Geeks
    </h1> 
</body>
  
</html>

Producción:

Elemento en línea

Navegadores compatibles:

Google Chrome 93.0
MozillaFirefox 91.0
Microsoft Edge 93.0
IE 11.0
Safari 14.1
Ópera 78.0

Publicación traducida automáticamente

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

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta