Los elementos tienen dos variantes: elementos de bloque, que marcan secciones más grandes, o bloques, dentro del documento, y elementos en línea, que son para trozos más pequeños, normalmente contenidos dentro de una línea.

El navegador web coloca nuevas líneas (piense en la tecla Enter del teclado) alrededor de los elementos de bloque para que aparezcan en su propia línea.

El siguiente código fuente:

<p>elemento p</p><div>elemento div</div>
<section>elemento section</section>
<b>elemento b</b>
<i>elemento i</i>
<span>elemento span</span>
<code>elemento code</code>
<p>elemento p</p><p>elemento p</p><p>elemento p</p>

Se representa como algo parecido a lo siguiente:

Observe que los elementos de bloque se representan en su propia línea (con espacio adicional debajo del elemento p), mientras que los elementos inline están todos en la misma línea.

En las versiones antiguas de html, la distinción entre elementos de bloque y en línea era una parte firme del lenguaje html, junto con una regla que establecía que los elementos en línea debían estar encerrados dentro de un elemento de bloque para ser válidos sintácticamente.

Con html 5 esta distinción se ha relajado mucho, y es posible usar CSS para convertir un elemento dado en bloque o en línea.

Elementos de bloque

Aquí hay algunos de los elementos más comunes, y más útiles, con comportamiento predeterminado de bloque:

Elementos en línea

Aquí hay algunos de los elementos en línea más comunes juntamente con sus usos y atributos predeterminados:

Elementos de objetos

Estos tres elementos son especiales, porque en lugar que encerrar texto insertan objetos. Como no hay nada que contener, no tienen etiqueta de cierre:

Caracteres especiales

Los elementos <, >, y & tienen significados especiales en HTML, y no pueden usarse para representarse a si mismos en un documento HTML. Cuando quiera usarlos literalmente (como en ejemplos de código HTML), necesitará marcarlos con códigos especiales:

El marcado para un ejemplo como este:

<h2>Usando Caracteres Especiales para marcar código fuente HTML</h2>
<p>
Marcar código HTML requiere caracteres especiales para reemplazar a <, >, y &.
</p>

Se ve como esto:

<h2>Usando Caracteres Especiales para marcar código fuente HTML</h2>
<p>
Marcar código HTML requiere caracteres especiales para reemplazar a <, >, and &.
</p>

No es bonito, pero funciona.

Ejercicios:

1. Copie pagina_minima.html a una página llamada bloque.html y haga lo siguiente en el nuevo documento:
   • Establezca el título y la cabecera de primer nivel (<h1></h1>) a Elementos de bloque.
   • Cree una subsección (con un elemento <h2></h2>) etiquetada como Texto en un elemento Preformateado. Copie y pegue el siguiente texto entre las etiquetas <pre></pre>:

     Este             texto
     
             se      extiende              en        varias
     
        líneas
     
                          y             tiene             muchos
     
       espacios         en blanco              
     
     adicionales.

   • Añada un elemento de párrafo (entre etiquetas <p></p>) con texto que describa lo que ve encima.
   • Cree una subsección debajo del párrafo que ha creado en el ejercicio previo etiquetada como El Mismo Texto en un Elemento de Párrafo. Copie y pegue el mismo texto del ejercicio previo, pero póngalo dentro de un elemento de párrafo (<p></p>) en vez de en un elemento preformateado (<pre></pre>).
   • Visualice su página en su navegador. Añada un nuevo elemento de párrafo con texto que describa lo que ve.
   • Añada dos párrafos más con cualquier texto que le guste (este sería un gran momento para aprender sobre texto lorem ipsum y usarlo aquí). Ponga estos dos párrafos dentro de un elemento de división lógica (<div></div>). Mire de nuevo la página en el navegador. ¿Ha cambiado algo? Añada uno o más párrafos describiendo el efecto del div.
   Su página bloque.html completada debería verse así.
2. Copie minimal_page.html a una página llamada inline.html y haga lo siguiente:
• Establezca el título y la cabecera de primer nivel a Elementos Inline.
• Añada varios párrafos al documento, con ejemplos de cada elemento en línea de la lección (excepto para <a></a>, que se introducirá en la lección 6). Incluya texto describiendo el uso de cada elemento donde se haya usado.
• Añada un párrafo describiendo qué le ocurre al texto cuando está incluido entre elementos span.
Su página inline.html completada debería verse así.

3. Copie minimal_page.html a una página llamada object.html. Establezca el título y la cabecera de primer nivel a Elementos Object. Experimente con los elementos <br> y <hr>. Añada un párrafo a este documento describiendo qué hacen. Utilice algunos párrafos más con la letra de una de sus canciones favoritas, usando elementos <br> para insertar nuevas líneas en los lugares adecuados.

   Su página object.html completada podría verse como algo parecido a esto.

4. Copie minimal_page.html a una página llamada special.html. Establezca el título y la cabecera de primer nivel a Caracteres Especiales. Añada los párrafos siguientes a su documento:

   

   Para hacerlo necesitará utilizar caracteres especiales.

5. Compruebe su página con el Servicio de validación del W3C. Si su página tiene errores sintácticos, corríjalos.