Elementos a nivel de bloque

Los elementos en HTML (Lenguaje de marcada para hipertextos - Hypertext markup language) usualmente son bien elementos a "nivel de bloque" o bien  elementos "en línea". Un elemento a nivel de bloque ocupa el espacio entero de su elemento padre (el contenedor), creando así un "bloque." Este artículo ayuda a explicar lo que esto significa.

Los navegadores típicamente presentan los elementos a nivel de bloque con un salto de línea antes y después del elemento .

Elementos de bloque

HTML

<p>Este párrafo es un elemento en-bloque, su fondo ha sido coloreado para mostrar el padre del párrado</p>

Este párrafo es un elemento en-bloque, su fondo ha sido coloreado para mostrar el padre del párrado

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

La diferencia entre elementos en-línea  y en-bloque son:

Formato:
Por defecto, los elementos en-bloque comienzan en una nueva linea.
Modelo de contenido
Generalmente ,los elementos en-bloque pueden contener elementos en-línea y otros elementos en-bloque. Inherentes dentro de esta distincion de estructura es la idea de que los elementos  en-bloque crean estructuras más grandes que los  elementos de linea.

La distincion entre elementos en-bloque vs elementos en-línea es utilizada en las especificaciones HTML hasta la 4.01. En  HTML5, esta distición binaria  es  reemplazada por un conjunto más completo de  categorias de contenido.  La categoría de "en-bloque" se corresponde aproximadamente con la categoría de contenido dinámico en HTML5, mientras que "en-línea" se corresponde con el contenido de de pharsing , 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 "citaa"
<canvas> HTML5
Lienzo de Dibujo
<dd>
Descripción de definición.
<div>
División de documento.
<dl>
Lista de definición
<fieldset>
Etiqueta de conjunto de campos
<figcaption> HTML5
Figura.
<figure> HTML5
Grupos contenido multimedia con una leyenda (ver <figcaption>).
<footer> HTML5
Sección o pie
<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
Información de cabeceera de grupos.
<hr>
 
Regla Horizontal (línea divisoria)
<li>
Elemento de lista.
<main>
Engloba el único contenido central del documento.
<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>
Preformatted text.
<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

Ver además

Etiquetas y colaboradores del documento

 Colaboradores en esta página: dinael, pekechis, erdavo, vltamara, teoli, MILTON.AGUILAR
 Última actualización por: dinael,