Elementos de ordenación
7. Elementos de ordenación en HTML5
En el proceso de maquetación de una web es necesario organizar elementos tales como imágenes, textos o tablas. Tal y como vimos en el punto de la evolución de la web, en un primer momento los elementos de una página web se organizaban en tablas. En ese momento no había ni hojas de estilo CSS ni ninguna otra herramienta que nos permitiera poner varios elementos seguidos uno detrás del otro.
En la actualidad, gracias a las hojas de estilo podemos crear nuestros propios estilos para maquetar cualquier página web. Para ello, necesitaremos conocer cómo se ordenan los elementos en un documento web.
7.1. Elementos en bloque o block
En un documento web lo más normal es ir posicionando los elementos de izquierda a derecha y de arriba a abajo dentro de la etiqueta <body>. En el caso de elementos en bloque o block como <div>, <table>, <list>, etc., estos ocupan todo el ancho del contenedor o elemento padre.
Código fuente:
<div>Elemento 1</div> <div>Elemento 2</div> <div>Elemento 3</div>
Etiquetas HTML en bloque: <address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><ol><p><pre><section><table><ul><video>
7.2. Elementos en línea o inline
Los elementos en línea o inline como <span>, <a>, <img>, etc., ocupan sólo el espacio delimitado por las etiquetas que definen el elemento en línea.
Código fuente:
<span>Elemento 1</span> <span>Elemento 2</span> <span>Elemento 3</span>
Etiquetas HTML en línea: <a><abbr><b><button><cite><code><dfn><em><i><img><input><label><q><select><small><span><strong><sub><sup><textarea><time>
7.3. Elementos flotantes o float
El comportamiento de los elementos se puede modificar haciendo que floten. Cuando a un elemento html se le aplica un estilo con la propiedad de flotar o float, el elemento sale del flujo normal y aparece posicionado a la izquierda o a la derecha de su contenedor, donde el resto de elementos de la página se posicionarán alrededor. Las propiedades de los elementos flotantes se verán a fondo en la siguiente unidad.
7.4. Posicionamiento absoluto y relativo
Los elementos pueden estar posicionados de forma absoluta o relativa.
- Posicionamiento absoluto: el elemento siempre se encuentra en el mismo lugar.
- Posicionamiento relativo: el elemento se posiciona según otros elementos.
Test
Selecciona los elementos en línea: