Elemento section en HTML

Elemento section en html

Un elemento section es una sección separada con su propia función dentro de un documento HTML, generalmente con un encabezado, y esta sección no tiene una etiqueta especial que pueda representar.

Por ejemplo, los enlaces de navegación se pueden colocar dentro de un elemento <nav>, pero una lista de resultados de búsqueda o un mapa con sus controles no tienen elementos HTML definidos, por lo que pueden colocarse dentro de un elemento <section>.

Aquí hay un ejemplo de código antiguo que usa el elemento <div> para dividir la página:

< div > 
  < h1 > Título </ h1 > 
  < p > Contenido </ p > 
</ div >

Si queremos usar el elemento, el <section> código se verá así:

< section > 
  < h1 > título </ h1 > 
  < p > contenido </ p > 
</ section >

Elemento section

Clasificaciones de contenidoElemento organizativo.
Contenido permitidoContenido organizacional.
AcrónimoLas etiquetas de inicio o finalización no se pueden omitir.
Elementos del padreCualquier elemento que acepte contenido normativo.Tenga en cuenta que el elemento <section>no puede ser hijo del elemento <address>.
Interfaz DOMOHTMLElement.

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
54Soportado4.111.10

Características

En este elemento se pueden utilizar propiedades globales.

Descripción de uso

  • Cada elemento debe ser <section> identificado, generalmente incluyendo el encabezado <h1>‏-<h6> dentro del elemento <section>.
  • Si el contenido de un elemento se puede publicar <section> independientemente del resto del documento, utilice el elemento en su <article> lugar.
  • No use el elemento <section> como un contenedor global y global, eso es lo que hace el elemento <div>, especialmente si la partición es para fines de formateo. La regla general es usar el elemento <section> cuando queremos que aparezca una nueva sección en el diseño de la página.

Formato predeterminado

La mayoría de los navegadores muestran el elemento <section> con la propiedad establecida display en block:

section {
  display: block;
}