HTML Semántico... Novedades en HTML5

Sala sobre HTML5 como lenguaje de marcado. Planteamientos de nuevas formas de diagramar una web. Solución de problemas de diagramación.
arturo
Site Admin
Mensajes: 13
Registrado: Sab Feb 01, 2020 10:01 pm

HTML Semántico... Novedades en HTML5

Mensaje por arturo »

¿Qué son los elementos semánticos en HTML5?

Un elemento semántico describe claramente su significado tanto para el navegador como para el desarrollador.

Ejemplos de elementos no semánticos: <div> y <span> - No dice nada sobre su contenido.

Ejemplos de elementos semánticos: <form>, <table> y <article>: define claramente su contenido.

Muchos sitios web contienen código HTML como: <div id = "nav"> <div class = "header"> <div id = "footer"> para indicar navegación, encabezado y pie de página.

En HTML hay algunos elementos semánticos que pueden usarse para definir diferentes partes de una página web:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

¿Cómo se representaría una estructura básica con estos nuevos elementos?

estructura básica HTML


Elemento HTML <section>

El elemento <section> define una sección en un documento.

Según la documentación HTML del W3C: "Una sección es una agrupación temática de contenido, generalmente con un encabezado".

Una página de inicio normalmente se puede dividir en secciones para introducción, contenido e información de contacto.

Elemento HTML <article>

El elemento <article> especifica contenido independiente y autónomo.

Un artículo debería tener sentido por sí solo, y debería ser posible leerlo independientemente del resto del sitio web.

Ejemplos de dónde se puede usar un elemento <article>:

Publicación del foro
Entrada en el blog
Artículo de periódico

Elemento HTML <header>

El elemento <header> especifica un encabezado para un documento o sección.

El elemento <header> debe usarse como contenedor para contenido introductorio.

Puede tener varios elementos <header> en un documento.

Elemento HTML <footer>

El elemento <footer> especifica un pie de página para un documento o sección.

Un elemento <footer> debe contener información sobre su elemento contenedor.

Un pie de página generalmente contiene el autor del documento, información de copyright, enlaces a los términos de uso, información de contacto, etc.

Puede tener varios elementos <footer> en un documento.

Elemento HTML <nav>

El elemento <nav> define un conjunto de enlaces de navegación.

Tenga en cuenta que NO todos los enlaces de un documento deben estar dentro de un elemento <nav>. El elemento <nav> está destinado solo para el bloque principal de enlaces de navegación.

Elemento HTML <aside>

El elemento <aside> define algo de contenido aparte del contenido en el que se coloca (como una barra lateral).

El contenido <aside> debe estar relacionado con el contenido circundante.

Elementos HTML <figure> y <figcaption>

Una imagen y una leyenda se pueden agrupar en un elemento <figure>.

El propósito de un subtítulo es agregar una explicación visual a una imagen.

El elemento <img> define la imagen, el elemento <figcaption> define el título.

Elemento HTML <main>

La etiqueta <main> especifica el contenido principal de un documento.

El contenido dentro del elemento <main> debe ser exclusivo del documento. No debe contener ningún contenido que se repita en documentos como barras laterales, enlaces de navegación, información de copyright, logotipos del sitio y formularios de búsqueda.

Nota: No debe haber más de un elemento <main> en un documento. El elemento <main> NO debe ser un descendiente de un elemento <article>, <aside>, <footer>, <header> o <nav>.

Elemento HTML <mark>

La etiqueta <mark> define el texto marcado.

Use la etiqueta <mark> si desea resaltar partes de su texto.

Elemento HTML <time>

La etiqueta <time> define una fecha / hora legible para humanos.

Este elemento también se puede usar para codificar fechas y horas de forma legible por máquina para que los agentes de usuario puedan ofrecer agregar recordatorios de cumpleaños o eventos programados al calendario del usuario, y los motores de búsqueda pueden producir resultados de búsqueda más inteligentes.

Elemento HTML <details>

La etiqueta <details> especifica detalles adicionales que el usuario puede ver u ocultar a pedido.

La etiqueta <details> se puede usar para crear un widget interactivo que el usuario puede abrir y cerrar. Cualquier tipo de contenido se puede poner dentro de la etiqueta <details>.

El contenido de un elemento <details> no debe ser visible a menos que se establezca el atributo abierto.

Elemento HTML <summary>

La etiqueta <summary> define un encabezado visible para el elemento <details>.

Saludos
Responder