Artículos de Tecnología

¿Qué es HTML y sus tags? Elementos a nivel de bloque

Beatriz Moura
Beatriz Moura

¿Qué es HTML y sus tags? Parte 3: elementos a nivel de bloque

portada

Este artículo es parte de una serie de cinco artículos sobre HTML y sus tags:

  1. ¿Que és HTML y sus tags? Estructura básica
  2. ¿Que és HTML y sus tags? Elementos inline
  3. ¿Que és HTML y sus tags? Block-level
  4. ¿Que és HTML y sus tags? Elementos de un formulario
  5. ¿Que és HTML y sus tags? Atributos de los elementos

En el artículo anterior vimos qué son los elementos inline y cómo se comportan, ahora pasemos a otro tema para entender qué son y cuales son los elementos block level.

Elementos block level

Los elementos a "nivel de bloque" ocupan todo el espacio de su elemento padre (container).

< header >

Define el encabezado de la página, generalmente en el encabezado identificamos el sitio, con el logo.

Página de un navegador web, en el  lado izquierdo está escrito Header, sobre un rectángulo morado.

< main >

Comprende el contenido principal del cuerpo de la página.

Página de un navegador web, en el lado izquierdo dice Header, sobre un rectángulo morado, debajo dice Main sobre un gran rectángulo rojo.

< footer >

Define el contenido o el final de la página, el pie de página, generalmente ponemos contactos, redes sociales, direcciones, información "institucional" en general.

Página de un navegador web, en el lado izquierdo dice Header, sobre un rectángulo morado, debajo dice  Main sobre un rectángulo rojo grande y un poco más abajo Footer de página en un pequeño rectángulo rosa.

< section >

Dentro del contenido principal, esta tag comprende una sección de página.

< article >

Incluir un artículo de página, muy utilizado en blogs y páginas de creación de contenidos, también indica el contenido textual principal de la página.

< aside >

Representa una sección que hace referencia a otro contenido de la página, como una definición, una explicación adicional, advertencias, biografía del autor , o sea, contenido complementario.

< nav >

Contempla el menú de navegación de las páginas del sitio, y dentro insertamos la lista y links con la tag <a href=""></a>.

< div >

Al igual que las otras tags, también funciona como container, pero la gran diferencia es que el div no tiene valor semántico, es solo una división de la página con fines de layout.

< p >

Representa un párrafo.

< h1 >...< h6 >

La familia de encabezamiento o headings, define los títulos de la página. Este grupo de elementos tiene un alto valor semántico y una organización jerárquica, yendo de <h1> a <h6>, es decir, la h1 de mayor valor semántico y la h6 de menor valor semántico.

Imagen donde aparecen varios ¡Hola Mundo! de diferentes tamaños y al lado derecho codigo en HTML utilizando en el encabezamiento de h1 hasta h6.

< hr >

Esta tag construye una línea horizontal entre elementos, lo que representa semánticamente una ruptura de contenido.

< video >

Utilizada para insertar videos en un sitio web, la etiqueta tiene atributos como width que recibe como valor el ancho del video en píxeles, heightque recibe como valor la altura del video en píxeles. En caso de no proporcionarse estos atributos, se utilizará el ancho y la altura patrón del video. El atributo controls (cuando está presente) nos permite controlar el video. El atributo src recibe como valor el enlace o directorio del archivo de video.

<video src="" controls></video>

Vea el resultado.

Continua...

En este artículo vimos qué son los elementos block level y cuales son estos elementos, en el próximo capítulo veremos qué elementos podemos usar para componer un formulario.

img-autora

Beatriz Moura

Estudiante de Análisis y Desarrollo de Sistemas, cambié el área de la salud y me sumergí en programación. Apasionada por desarrollo Front-end y aficionada al UX/UI Design. Descubrí la pasión por enseñar al hacer mentorías durante otra graduación, donde fui presidenta de la Liga Académica y Directora de Medios en el Directorio Académico. Actualmente soy instructora y Desarrolladora de Software en Alura y ya hice parte del Scuba Team Front-end.

Traducido para Alura Latam por Ingrid da Silva

Artículos de Tecnología

En Alura encontrarás variados cursos sobre . ¡Comienza ahora!

Precios en:
USD
  • USD
  • BOB
  • CLP
  • COP
  • USD
  • PEN
  • MXN
  • UYU

Semestral

  • 272 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro y comunidad exclusiva para resolver tus dudas
  • Luri, la inteligencia artificial de Alura

    Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana

  • Acceso a todo el contenido de la plataforma por 6 meses
US$ 65.90
un solo pago de US$ 65.90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Anual

  • 272 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro y comunidad exclusiva para resolver tus dudas
  • Luri, la inteligencia artificial de Alura

    Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana

  • Acceso a todo el contenido de la plataforma por 12 meses
US$ 99.90
un solo pago de US$ 99.90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Acceso a todos
los cursos

Estudia las 24 horas,
dónde y cuándo quieras

Nuevos cursos
cada semana