Tutorial HTML

INICIO HTML Introducción HTML Editores HTML HTML básico Elementos HTML Atributos HTML Encabezados HTML Párrafos HTML Estilos HTML Formato HTML Cotizaciones HTML Comentarios HTML Colores HTML CSS HTML Enlaces HTML Imágenes HTML icono de favoritos HTML Tablas HTML Listas HTML Bloque HTML y en línea Clases HTML Identificación HTML Marcos flotantes HTML HTML JavaScript Rutas de archivo HTML Encabezado HTML Diseño HTML Responsivo HTML Código informático HTML Semántica HTML Guía de estilo HTML Entidades HTML Símbolos HTML Emoticonos HTML Juego de caracteres HTML Codificación de URL HTML HTML frente a XHTML

Formularios HTML

Formularios HTML Atributos de formulario HTML Elementos de formulario HTML Tipos de entrada HTML Atributos de entrada HTML Atributos de formulario de entrada HTML

Gráficos HTML

Lienzo HTML HTML SVG

Medios HTML

Medios HTML Vídeo HTML Audio HTML Complementos HTML HTML de YouTube

API de HTML

Geolocalización HTML Arrastrar/soltar HTML Almacenamiento web HTML Trabajadores web HTML SSE HTML

Ejemplos HTML

Ejemplos HTML Cuestionario HTML Ejercicios HTML Certificado HTML Resumen HTML Accesibilidad HTML

Referencias HTML

Lista de etiquetas HTML Atributos HTML Atributos globales HTML Compatibilidad con navegador HTML Eventos HTML Colores HTML Lienzo HTML Audio/vídeo HTML Tipos de documentos HTML Conjuntos de caracteres HTML Codificación de URL HTML Códigos de idioma HTML Mensajes HTTP Métodos HTTP Convertidor PX a EM Atajos de teclado

Bloque HTML y elementos en línea


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 línea.


Elementos a nivel de bloque

Un elemento a nivel de bloque siempre comienza en una nueva línea.

Un elemento a nivel de bloque siempre ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto como puede).

Un elemento de nivel de bloque tiene un margen superior e inferior, mientras que un elemento en línea no los tiene.

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

Ejemplo

<div>Hello World</div>

Estos son los elementos de nivel de bloque en HTML:


Elementos en línea

Un elemento en línea no comienza en una nueva línea.

Un elemento en línea solo ocupa el ancho necesario.

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

Ejemplo

<span>Hello World</span>

Estos son los elementos en línea en HTML:

Nota: ¡Un elemento en línea no puede contener un elemento a nivel de bloque!


El elemento <div>

El <div>elemento se utiliza a menudo como contenedor de otros elementos HTML.

El <div>elemento no tiene atributos requeridos, pero style, classy idson comunes.

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

Ejemplo

<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 <span>elemento es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.

El <span>elemento no tiene atributos requeridos, pero style, classy idson comunes.

Cuando se usa junto con CSS, el <span>elemento se puede usar para diseñar partes del texto:

Ejemplo

<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 del capítulo

  • Hay dos valores de visualización: bloque y en línea
  • Un elemento a 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 el ancho necesario
  • El <div>elemento es un nivel de bloque y a menudo se usa como contenedor para otros elementos HTML.
  • El <span>elemento es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.

Etiquetas HTML

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)

Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .