HTML - Blocos

Todos os elementos HTML podem ser categorizados em duas categorias (a) Elementos de Nível de Bloco (b)Elementos embutidos.

Elementos de Bloco

Os elementos do bloco aparecem na tela como se tivessem uma quebra de linha antes e depois deles. Por exemplo, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr Os elementos />, <blockquote> e <address> são todos elementos de nível de bloco. Todos eles começam em sua própria nova linha, e tudo o que os segue aparece em sua própria nova linha.

Elementos Inline

Os elementos embutidos, por outro lado, podem aparecer dentro de frases e não precisam aparecer em uma nova linha própria. O <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < os elementos code>, <cite>, <dfn>, <kbd> e <var> são todos elementos embutidos.

Agrupando elementos HTML

Existem duas tags importantes que usamos com muita frequência para agrupar várias outras tags HTML (i) tag <div> e (ii) tag <span>

A tag <div>

Esta é a tag de nível de bloco muito importante que desempenha um grande papel no agrupamento de várias outras tags HTML e na aplicação de CSS no grupo de elementos. Mesmo agora, a tag <div> pode ser usada para criar um layout de página da web onde definimos diferentes partes (esquerda, direita, superior, etc.) da página usando a tag <div>. Esta tag não fornece nenhuma mudança visual no bloco, mas tem mais significado quando usada com CSS.

Exemplo

A seguir está um exemplo simples de tag <div>. Aprenderemos Cascading Style Sheet (CSS) em um capítulo separado, mas usamos aqui para mostrar o uso da tag <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>

Isso produzirá o seguinte resultado -

A tag <span>

O HTML <span> é um elemento embutido e pode ser usado para agrupar elementos embutidos em um documento HTML. Esta tag também não fornece nenhuma mudança visual no bloco, mas tem mais significado quando usada com CSS.

A diferença entre a tag <span> e a tag <div> é que a tag <span> é usada com elementos embutidos, enquanto a tag <div> é usada com elementos de nível de bloco.

Exemplo

A seguir está um exemplo simples de tag <span>. Aprenderemos Cascading Style Sheet (CSS) em um capítulo separado, mas usamos aqui para mostrar o uso da tag <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>

Isso produzirá o seguinte resultado -

↰ Previous page Next page ↱