Elementos Span/div
Un elemento <span> es un elemento en línea que se utiliza para agrupar elementos en línea en un documento HTML. No tiene un significado semántico propio y su propósito principal es aplicar estilos o comportamientos a partes específicas de un texto sin afectar la estructura del documento.
Por otro lado, <div> es un elemento de bloque que se utiliza para crear divisiones o secciones en un documento HTML. A menudo se utiliza para agrupar y contener otros elementos HTML y se utiliza comúnmente con CSS para aplicar estilos o para manipular el diseño de la página web. Al igual que <span>, <div> tampoco tiene un significado semántico propio.
<span>
El elemento <span> se utiliza para agrupar elementos en línea o simplemente aplicar estilo al texto combinándolo con los atributos class e id. Este elemento tampoco proporciona ningún cambio visual, pues tiene su utilidad cuando se usa con las hojas de estilo CSS. Por tanto, todos los elementos de línea que se quieran agrupar deberán ir entre las etiquetas <span> (de apertura) y </span> (de cierre).
<div>
El elemento <div> se utiliza para crear secciones o agrupar contenido; se trata de un elemento contenedor muy importante a nivel de diseño web. Este elemento no proporciona un cambio visual en el bloque, pero tiene su utilidad cuando se usa con las hojas de estilo CSS. Por tanto, todos los elementos que queramos agrupar deberán ir dentro de las etiquetas <div> (de apertura) y </div> (de cierre).
Elementos línea/bloque
fhsrkhfis
Elementos de línea
Los elementos de línea ocupan el mínimo espacio horizontal, y de esta manera permiten que otros elementos de línea se coloquen a su lado. Esto significa que este tipo de elementos ocupan únicamente el espacio necesario para mostrar su contenido. El ejemplo más significativo son los enlaces.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <del>, <dfn>, <em>, <i>, <iframe>, <img>, <input>, <ins>, <kdd>, <label>, <map>, <mark>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <tt> y <var>.
Elementos de bloque
Los elementos de bloque siempre empiezan en una línea nueva y ocupan todo el espacio disponible hasta el final de la línea. Esto significa que ocupan la anchura máxima hasta encontrar los límites del elemento contenedor superior. Estos elementos no permiten que otro elemento se pueda colocar a su lado.
< address >, < blockquote >, < dd >, < div >, < dl >, < dt >, < fieldset >, < form >, < h1 >, < h2 >, < h3 >, < h4 >, < h5 >, < h6 >, < hr >, < li >, < noscript >, < ol >, < p >, < pre >, < table >, < tbody >, < tfoot >, < thead > y < ul >.
En el ejemplo observe como los elementos linea aparecen en linea horizontal uno enseguida del otro, sin embargo los elementos bloque ocupan el ancho completo de la pagina y crean un salto de linea.