LM. 1.4.1 - Elementos de bloque



Los elementos de bloque
Los elementos en HTML (lenguaje de marcas de hipertexto - Hypertext Markup Language) usualmente son elementos "en bloque" o elementos "en línea". Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque". Este artículo ayuda a explicar lo que esto significa.

Los elementos de bloque sólo deben aparecer dentro del elemento <body>.

Los navegadores suelen mostrar el elemento a nivel de bloque con un salto de línea antes y después del elemento. El siguiente ejemplo demuestra la influencia elementos en bloque:

Elementos en bloque vs. en línea
Hay un par de diferencias clave entre los elementos en bloque y elementos en línea:

  • Formateo. De forma predeterminada, los elementos de bloque comienzan en una nueva línea, pero los elementos en línea pueden comenzar en cualquier parte de una línea.
  • Modelo de contenido. En general, los elementos en bloque pueden contener elementos en línea y otros elementos en bloque. Inherente a esta distinción estructural es la idea de que los elementos en bloque crean estructuras "más grandes" que los elementos en línea.

La distinción entre elementos en bloque frente a elementos en línea se utiliza en las especificaciones de HTML hasta la 4.01. En HTML5, esta distinción dual se sustituye por un conjunto más complejo de categorías de contenido.

La categoría "en bloque" corresponde aproximadamente a la categoría de contenido dinámico en HTML 5, mientras que "en línea" se corresponde con contenido estático, pero hay categorías adicionales.

Elementos

La siguiente es una lista completa de todos los elementos en bloque de HTML (aunque "en bloque" no se define técnicamente para los elementos que son nuevos en HTML5).
<address>
Información de contacto.
<article> HTML5
Contenido de Articulo.
<aside> HTML5
Contenido adicional.
<audio> HTML5
Reproductor de audio
<blockquote>
Bloque de "cita".
<canvas> HTML5
Dibujo canvas.
<dd>
Descripción de definición.
<div>
División de documento.
<dl>
Lista de definición.
<fieldset>
Etiqueta de conjunto de campos.
<figcaption> HTML5
Leyenda de figura.
<figure> HTML5
Grupos contenido multimedia con una leyenda (ver <figcaption>).
<footer> HTML5
Sección o pie de página.
<form>
Formulario de entrada.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Niveles de cabecera 1-6.
<header> HTML5
Sección o cabecera de página.
<hgroup> HTML5
Grupos información de encabezado.
<hr>
Regla Horizontal (línea divisoria).
<li>
Elemento de lista.
<main>
Engloba el único contenido central del documento.
<nav>
Contiene enlaces de navegación.
<noscript>
Contenido para ser usado si los scripts no son soportados o permitidos.
<ol>
Lista ordenada.
<output> HTML5
Formulario de salida.
<p>
Párrafo.
<pre>
Texto preformateado.
<section> HTML5
Sección de una página web.
<table>
Tabla.
<tfoot>
Pie de tabla.
<ul>
Lista no ordenada.
<video> HTML5
Reproductor de vídeo.