Elementos inline y block
Los elementos en HTML 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".
Por tanto, el lenguaje HTML clasifica a todos los elementos en dos grupos:
- Elementos en línea o inline elements y
- Elementos en bloque o block elements.
La diferencia entre ambos viene dada por el modelo de contenido, por el formato y la dirección.
- De forma predeterminada, los elementos de bloque comienzan en una nueva línea (Los navegadores suelen mostrar estos elementos con un salto de línea antes y después del elemento), pero los elementos en línea pueden comenzar en cualquier parte de una línea.
- En general, los elementos en bloque pueden contener elementos en línea y otros elementos en bloque.
Es muy importante tener claro en todo momento qué elementos son de línea y cuáles de bloque
Lista de elementos de línea más habituales
| Atributos | Descripción |
|---|---|
| a | Define un anchor (anclaje o hipervínculo) |
| abbr | Marca las abreviaturas del texto y proporciona el significado de esas abreviaturas |
| br | line break - ruptura (o salto) de línea |
| cite | Se emplea para marcar una cita o una referencia a otras fuentes |
| code | Delimita el texto considerado un fragmento de código fuente |
| em | emphasis – énfasis |
| i | Muestra el texto marcado con un estilo en cursiva o itálica |
| img | Imagen |
| input | Posibilita y define la introducción de datos en el formulario |
| label | Asocia un rótulo o etiqueta a un campo de un formulario |
| s | strike-through - tachado |
| select | Crea un contenedor mediante el cual el usuario puede seleccionar de una lista de opciones |
| span | Es un contenedor genérico en línea. Sirve para para aplicar estilo al texto en línea |
| strong | Marca con especial énfasis las partes más importantes de un texto |
| sub | Crea un subíndice posicionando el texto marcado por debajo de la linea |
| sup | Crea un superíndice posicionando el texto marcado por encima de la linea |
| textarea | Crea un control de entrada de texto multilínea |
| tt | Representa como texto de teletipo o ancho fijo |
| u | Muestra el texto subrayado |
| var | Marca variables de programas y similares |
Lista de elementos de bloque más habituales
| Atributos | Descripción |
|---|---|
| blockquote | Indica que el texto que encierra es una cita textual de otro texto externos |
| div | Es un elemento en bloque genérico y sirve para crear secciones o agrupar contenidos |
| dl | Crea una lista de definiciones |
| fieldset | Permite organizar en grupos los campos de un formulario |
| form | Actúa como contenedor de controles. Representa un formulario |
| h1, h2, h3, h4, h5, h6 | Crea un encabezado o título de primer, segundo, tercer, cuarto, quinto o sexto nivel para una sección del documento respectivamente |
| hr | Crea una linea de separación horizontal |
| ol | Crea una lista ordenada |
| p | Párrafo |
| pre | Permite que el texto conserve el formato y sea mostrado tal cual |
| table | Tabla |
| ul | Crea una lista no ordenada |
| dd | Descripción de una definición |
| dt | Término definido |
| li | Objeto de lista |
| td | Celda de datos de una tabla |
| th | Celda de encabezado de tabla |
| thead | Cabecera de tabla |
| tr | Fila de una tabla |
Lista de elementos de Línea o de Bloque
| Atributos | Descripción |
|---|---|
| button | Botón |
| del | Texto borrado |
| iframe | Subventana en línea |
| ins | Texto insertado |
| map | Mapa de imágenes en el lado del cliente |
| object | Objeto genérico incluído |
| script | Sentencias de script |