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 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:
Ejemplo en bloque
HTML
<p>Este párrafo es un elemento en bloque; este fondo se ha coloreado para mostrar elemento principal (o padre) del párrafo.</p>
CSS
p { background-color: #8ABB55; }
Uso
- Los elementos de bloque sólo deben aparecer dentro del elemento
<body>.
Elmentos 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.