Elementos HTML en bloque y en linea

Cada elemento HTML tiene un valor de visualización predeterminado, según el tipo de elemento que sea.

Hay dos valores de visualización: bloque y en linea (inline).

Elementos a nivel de bloque

Un elemento de nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y la derecha tanto como sea posible).

El elemento <div> es un elemento a nivel de bloque.

Listado de elementos a nivel de bloque

Veamos una lista con los elementos a nivel de bloque:

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfood>
<ul>
<video>

Elementos en línea

Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho que sea necesario.

Este es un elemento <span> dentro de un párrafo.

Listado de elementos en línea

Veamos una lista con los elementos en línea:

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kdb>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

El elemento <div>

El elemento <div> a menudo se usa como contenedor para otros elementos HTML.

El elemento <div> no tiene atributos requeridos, pero el estilo, la clase y la identificación son comunes.

Cuando se usa junto con CSS, el elemento <div> se puede usar para diseñar bloques de contenido.

Ejm

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. 
  It is the most populous city in the United Kingdom, 
  with a metropolitan area of over 13 million inhabitants.</p>
</div>

El elemento <span>

El elemento <span> es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.

El elemento <span> no tiene atributos requeridos, pero el estilo, la clase y la identificación son comunes.

Cuando se usa junto con CSS, el elemento <span> se puede usar para dar estilo a partes del texto.

Ejm

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> 
eyes and my father has <span style="color:darkolivegreen;font-weight:bold">
dark green</span> eyes.</p>

Resumen

Hay dos maneras de mostrar valores: en línea (inline) y en bloque.
Un elemento de nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible.
Un elemento en línea no comienza en una nueva línea y solo ocupa tanto ancho como sea necesario.
El elemento <div> es un nivel de bloque y a menudo se usa como contenedor para otros elementos HTML.
El elemento <span> es un contenedor en línea utilizado para marcar una parte de un texto o una parte de un documento.