HTML: bloques

Todos los elementos HTML se pueden clasificar en dos categorías (a) Elementos de nivel de bloque (b)Elementos en línea.

Elementos de bloque

Los elementos de bloque aparecen en la pantalla como si tuvieran un salto de línea antes y después de ellos. Por ejemplo, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr Los elementos />, <blockquote> y <address> son todos elementos de nivel de bloque. Todos comienzan en su propia nueva línea, y todo lo que les sigue aparece en su propia nueva línea.

Elementos en línea

Los elementos en línea, por otro lado, pueden aparecer dentro de oraciones y no tienen que aparecer en una nueva línea propia. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < Los elementos code>, <cite>, <dfn>, <kbd> y <var> son todos elementos en línea.

Agrupar elementos HTML

Hay dos etiquetas importantes que usamos con mucha frecuencia para agrupar otras etiquetas HTML (i) etiqueta <div> y (ii) etiqueta <span>

La etiqueta <div>

Esta es la etiqueta de nivel de bloque muy importante que juega un papel importante en la agrupación de otras etiquetas HTML y la aplicación de CSS en un grupo de elementos. Incluso ahora, la etiqueta <div> se puede usar para crear un diseño de página web donde definimos diferentes partes (izquierda, derecha, arriba, etc.) de la página usando la etiqueta <div>. Esta etiqueta no proporciona ningún cambio visual en el bloque, pero tiene más significado cuando se usa con CSS.

Ejemplo

A continuación se muestra un ejemplo simple de etiqueta <div>. Aprenderemos la hoja de estilo en cascada (CSS) en un capítulo aparte, pero la usamos aquí para mostrar el uso de la etiqueta <div> -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML div Tag</title>
   </head>
	
   <body>
      <!-- First group of tags -->
      <div style = "color:red">
         <h4>This is first group</h4>
         <p>Following is a list of vegetables</p>
         
         <ul>
            <li>Beetroot</li>
            <li>Ginger</li>
            <li>Potato</li>
            <li>Radish</li>
         </ul>
      </div>

      <!-- Second group of tags -->
      <div style = "color:green">
         <h4>This is second group</h4>
         <p>Following is a list of fruits</p>
         
         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
            <li>Strawberry</li>
         </ul>
      </div>
   </body>
   
</html>

Esto producirá el siguiente resultado:

La etiqueta <span>

HTML <span> es un elemento en línea y se puede usar para agrupar elementos en línea en un documento HTML. Esta etiqueta tampoco proporciona ningún cambio visual en el bloque, pero tiene más significado cuando se usa con CSS.

La diferencia entre la etiqueta <span> y la etiqueta <div> es que la etiqueta <span> se usa con elementos en línea mientras que la etiqueta <div> se usa con elementos a nivel de bloque.

Ejemplo

A continuación se muestra un ejemplo simple de etiqueta <span>. Aprenderemos la hoja de estilo en cascada (CSS) en un capítulo separado, pero la usamos aquí para mostrar el uso de la etiqueta <span> -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML span Tag</title>
   </head>
	
   <body>
      <p>This is <span style = "color:red">red</span> and this is
         <span style = "color:green">green</span></p>
   </body>
	
</html>

Esto producirá el siguiente resultado:

↰ Previous page Next page ↱