Ampliando conocimientos sobre HTML5: etiqueta <main>

Como no es la primera vez que os doy la vara con el tema, quizá convendría que os dierais un garbeo por las entradas de cómo estructurar adecuadamente una web en HTML5 si no recordáis bien las bases que voy a mencionar por aquí.

Cuando comencé con aquellas publicaciones, os comentaba que una página web bien estructurada en HTML5, ha de constar de las siguientes partes, únicas pero repetibles:

Cabecera <header>
Pie <footer>
Dirección <address>
Navegación <nav>
Sección <section>
Artículo <article>
Apartado <aside>
Grupo de encabezados <hgroup>

Esto quería decir que es conveniente englobar correctamente cada apartado del contenido de nuestra web con esas etiquetas, pero que lejos de sólo poder usarlas una vez y en un orden, son flexibles: una sección puede contener artículos que a su vez contengan otras secciones (subsecciones); una página web puede emplear la etiqueta <header> en la cabecera de la web, pero también en las cabeceras de sus secciones y de sus artículos.

A esta lista de indispensables, es conveniente por mi parte ir añadiendo otras etiquetas, como por ejemplo, la que hoy nos ocupa: <main>

Etiqueta main de HTML5

<main> y HTML5

Vaya por delante que esta etiqueta es una novedad incluida con HTML5 y tenemos que ser conscientes de ello al emplearla, pues es admitida por la mayor parte de los navegadores modernos, salvo por Internet Explorer y, no, no hablamos del 6, hablamos de cualquier versión, por el momento. Con los demás (Chrome, Firefox, Safari, Opera), no hay problemas.

Como fuera, para curarnos en salud mientras se ponen al día y, por mejorar la accesibilidad de nuestra web, es recomendable emplear este elemento adjuntándole la coletilla role="main" (ver en el código de ejemplo de más abajo). Coletilla que, aunque suene redundante, resulta ser una especificación ampliamente admitida por los navegadores, de tal manera que, los que no reconozcan la etiqueta, sí sabrán a qué corresponde su rol. Esta especificación se engloba dentro de los Roles ARIA de accesibilidad (más información en el enlace).

Sabiendo esto, la siguiente advertencia es que, a diferencia de las etiquetas anteriormente listadas, <main> ha de ser única en cada página web. No puede repetirse. Ojo, no puede haber varios <main> en una misma página web, pero sí uno en cada página de vuestro website. No confundamos a estas alturas una página web con la suma de las mismas.

Pero… ¿por qué sólo un <main>? Pues porque esta etiqueta especifica el contenido principal de la página web, destacándolo sobre el resto.

Así, lo podéis asociar a la sección de mayor peso o al grueso de la información interesante que diferencia esa página específica de las demás. Es decir, NO se usa para destacar como importante la cabecera, el logotipo, el pie de pagina, los anuncios… ni otros elementos que se repitan a lo largo de las diferentes páginas de vuestra web.

Las recomendaciones de la W3C añaden que <main> no debe colocarse en el interior de <article>, <aside>, <footer>, <header> o <nav>. En el caso de la etiqueta <article>, puede englobarla, pero no pertenecer a ella. En los demás casos (<aside>, <footer>, <header> o <nav>), ni siquiera eso.

Os dejo un ejemplo de código (esbozado) por si así os queda más claro:

<body>
  <header>
    <div id="logo">El logo</div>
    <nav>...</nav>
  </header>

  <main role="main">

    <section id="productos">
    <h1>Nuestros productos</h1>
    <p>Aquí encontrarás los productos que desarrollamos.</p>
    <article id="estrella">
      <h2>Producto estrella</h2>
      <p>...</p>
    </article>
    <article id="barato">
      <h2>Producto barato</h2>
      <p>...</p>
    </article>
    </section>

  </main>

  <footer>...</footer>
</body>

<main> y CSS

Al no estar masivamente soportada por todos los navegadores, no es recomendable adjuntar estilos CSS directamente a esta etiqueta, si bien, entre otras soluciones, se puede recurrir al uso del script HTML5 Shiv -una opción para adaptar HTML5 a navegadores que no soportan todas sus funcionalidades de la que ya os hablé hace tiempo- o, en el caso específico de obligar a que las distintas versiones de Internet Explorer lo interpreten, bastaría con añadir display:block; entre las características con las que dotéis main en vuestro CSS.

main { display: block; }

Resumiendo: Utilizaremos la etiqueta <main> una vez por página a fin de destacar el contenido principal de la misma y tendremos cuidado porque no todos los navegadores son capaces de interpretarla correctamente.

Espero que mi verborrea os haya resultado de utilidad y espero volver dentro de no mucho con más buenas prácticas sobre otras etiquetas nuevas introducidas en HTML5. Dudas y comentarios, son bienvenidos :)

22 respuestas a «Ampliando conocimientos sobre HTML5: etiqueta <main>»

  1. Hola tengo varias dudas con esta etiqueta que me gustaría que me aclararas;

    1. Cuando cometas esto en el artículo. «Es decir, NO se usa para destacar como importante la cabecera, el logotipo, el pie de pagina, los anuncios… ni otros elementos que se repitan a lo largo de las diferentes páginas de vuestra web.»
    No entiendo que quieres decir con «ni otros elementos que se repitan a lo largo de las diferentes páginas de vuestra web».

    2. En otra web sale esto :
    Incluye el contenido que es único en la página y excluye contenido que se repite en todas las páginas de la web (menú, pie de página, barra lateral, etc).
    Ahora yo comento, como se sabe un article puede contener un header, footer. Un section puede tener un header también..me imagino que esto no se cuenta en está norma es decir, como article puede llevar un header y footer ¿main puede contener a este article verdad, aunque el article lleve un header y footer o ambas?

    3. No debe incluirse el elemento dentro de elementos como article, aside, footer, header o nav. Esto lo saque también de otra web y tu comentas esto en la tuya:
    En el caso de la etiqueta , puede englobarla, pero no pertenecer a ella. En los demás casos (, , o ), ni siquiera eso.
    ¿ se puede o no? Y en caso de que si, que quieres decir con se puede englobar pero no pertenecer a ella?

    1. Antes de nada, perdona por tardar en responder (cosas del verano, cof, cof). A ver si puedo aclararte las dudas:

      1. «Otros elementos que se repitan» es todo aquello que no sea principal en la página y que, generalmente, aparece también en otras. En una web como este blog, lo principal suele ser el artículo escrito y lo demás son las cosas que se ponen en los laterales, pie o cabecera: anuncios, secciones, formas de contacto, enlaces relacionados… Muchas veces es normal ver la forma de contactar con el autor del blog en todas las páginas de su website, este podría ser uno de esos elementos que se repite y que no es «contenido principal».

      2 y 3. Hay que distinguir entre cabecera y pie de página y cabecera y pie de artículo. Ambos usan las mismas etiquetas HTML, por esto «main» puede englobar cabeceras y pies además de artículos o secciones. La idea de «main» es destacar el contenido único de cada página web (página como documento, no como sitio web), como los contenidos únicos suelen ser artículos o secciones, «main» los arropa (engloba: abrimos main, abrimos artículo, desarrollamos artículo, cerramos artículo, cerramos main), pero no debe ir dentro de ellos (uso incorrecto: abrimos artículo, abrimos main, desarrollamos artículo, cerramos main, cerramos artículo), esto es lo que quiero decir conque puede englobar a la etiqueta «article» pero no pertenecer (estar dentro) de ella.

      Espero haberte aclarado algo, si no, pregunta de nuevo ;)

  2. Hola Roser, gracias por contestar. A ver si me situó;
    1. En el primer apartado que me respondes contestas esto “En una web como este blog, lo principal suele ser el artículo escrito y lo demás son las cosas que se ponen en los laterales, pie o cabecera: anuncios, secciones, formas de contacto, enlaces relacionados…” ¿en secciones no te refieres a la etiqueta section verdad? Ya que está si puede estar dentro de main.
    2. Sé que está la cabecera y pie de página de la página y cabecera y pie de página del article. ¿Entonces main si puede englobar la cabecera y pie de página de article, pero no la cabecera y pie de página de la pagina? aquí se cumple entonces cuando comentas “Otros elementos que se repitan” es todo aquello que no sea principal en la página y que, generalmente, aparece también en otras”
    3. Entonces no debe incluirse el elemento main dentro de elementos como article, aside, footer, header o nav , pero main si puede englobar a la etiqueta article es decir, (estar article dentro de main)¿estoy en lo cierto? ¿A eso te refieres? Y cuando dijisteis “En los demás casos (aside, footer, header o nav), ni siquiera eso” ¿quieres decir que en estos casos main no puede englobar a estos cuatro elementos, que son elementos que se repiten en las páginas… y volvemos a lo de arriba, pero si a los header y footer de los article? Me imagino que si aside está dentro de article también la puede englobar main verdad, según la norma dice esto que he leído:

    La norma de aside dice: que se use para todo aquel contenido tangencial (que no es principal o importante, secundario, está relacionado pero poco) al contenido principal de la pagina, articulo. Cuando se utiliza dentro de article, el contenido debe ser específicamente relacionado con ese article (por ejemplo: glosario). Cuando se utiliza fuera de un article, el contenido debe estar relacionado con la pagina (por ejemplo lista de blog, grupos adicional de navegación…)

    Espero no liarte ya que hago muchas preguntas  pero estoy de lleno en html5 y la verdad muchas cosas no son fáciles de comprender y encima en la red la descripción de las misma etiquetas alguno autores la defines de forma diferente y al final lían mas de lo que ayudan.

    1. Isaac, vas encaminado, pero esto de la etiqueta main es mucho más sencillo: Main sirve para destacar el contenido principal de una página web. Este contenido generalmente suele ser una sección entera (marcada con la etiqueta section) o un artículo (marcado como article), pero también puede ser por ejemplo un grupo de enlaces, si eso es lo que deseáramos establecer como contenido principal. Luego están las buenas prácticas, que acotan todo lo que estamos comentando. Puede haber mil casos y mil excepciones: puedes tener, como dices, un aside dentro de un article que a su vez esté dentro de main.

      Caso práctico y sencillo de ver: un aside cargado de anuncios NO puede ser marcado con main para hacer la picaresca de darle importancia… Pero eso no quiere decir que, si hay un aside dentro de un artículo explicando algo paralelo, ya no se pueda marcar con main ese artículo, en este caso SÍ podríamos (imagina un artículo de fútbol con un aside sobre fútbol americano, no es el tema central pero conviene aclarar las diferencias y por eso aparece ahí).

      Lo que hay que entender con esta etiqueta main es que, como indica el contenido importante/principal de la página, sólo puede aparecer una vez y que no debe utilizarse para destacar cabeceras o asides por sí mismos, si no contenidos únicos como artículos o secciones.

  3. Hola de nuevo Roser se agradece muchísimo tu ayuda. Vale, voy cogiendo tus explicaciones y parece que tú mismo confirmas que sí. Estoy viendo más claro la etiqueta main con tus explicaciones, lo que tengo que tener claro es lo que tú misma comentas en el artículo: “NO se usa para destacar como importante la cabecera, el logotipo, el pie de página, los anuncios…” saber que todo lo demás puede ser main perfectamente, saber distinguir lo principal a lo que no lo es, espero estar en lo cierto.
    Me gustaría hacerte unas preguntas Roser que tiene que ver un poco con este asunto y sobre las etiquetas de html5, me gustaría si puede ser que me las aclararas por favor y me ayudaras a despejarlas.
    Como te pues anteriormente sobre aside, la norma la define asi:
    “Que se use para todo aquel contenido tangencial (que no es principal o importante, secundario, está relacionado pero poco) al contenido principal de la pagina, articulo. Cuando se utiliza dentro de article, el contenido debe ser específicamente relacionado con ese article (por ejemplo: glosario). Cuando se utiliza fuera de un article, el contenido debe estar relacionado con la pagina (por ejemplo lista de blog, grupos adicional de navegación…)”

    1. Roser que pasaría si tengo un aside dentro de un section por ejemplo, ¿este aside está relacionado con la página, ya que no está dentro de un article? Es decir, el aside dentro de article “el contenido debe ser específicamente relacionado con ese article” como te puse arriba, y si no está dentro de article, en un section, div o fuera de estos… ¿siempre va a estar relacionado con la pagina? Te comento esto porque en unas de mis paginas la tengo dividida en varios section y dentro del section tengo un contenido que lo considere un aside, pero claro ahora pienso que no se si esto está bien.

    2. En un artículo comentan y en algunos más de la red que aside viene a sustituir al sidebar o barra lateral, ¿ qué es exactamente un sidebar (barra lateral)? Creo entender que son las barras laterales que se ponen a la derecha o izquierda de la web, ¿pero se denomina asi por su contenido o por sus estilos css? Porque se supone que en html5 no importan los estilos de las etiquetas sino la semántica, es decir aunque ponga un footer en la parte alta de la web va a seguir siendo un foote, lo que importa es su contenido, aunque claro está que normalmente aparecen debajo. ¿Por tener entonces un aside o varios a la izquierda de mi web no significa que tenga una barra lateral o sí?
    Si puedes echar un vistazo por favor a este articulo a la primera pregunta que le formulan al autor y lo que el reponde, por eso mi duda con las barras laterales y el aside.
    http://www.silocreativo.com/2013/06/diseno-web-con-html5-composicion-y-estructura/

    Bueno Roser se que son muchas preguntas y espero no haberte liado pero me seria de gran ayuda tus sugerencias.

    mil gracias

    1. Buenas de nuevo, Isaac.

      Puedes pensar en los aside como si fueran notas al margen, algo que si lo lees complementa, pero si no, tampoco pasa nada. Habrá quien los use sólo para aclaraciones o quien únicamente los emplee para meter anuncios que, si están bien insertados, tendrán que ver con el contenido de la web, para que los visitantes se interesen por ellos.

      Ten en cuenta siempre que el origen de estas nuevas etiquetas de HTML5 es la estandarización. Antes, cada desarrollador web creaba sus propios div dándoles identidades (id) para diferenciar entre secciones, artículos, apartados… lo que se les ocurriera con lo nombres que se les ocurrieran. HTML5 pretende que haya una base común con la que todos desarrollemos de manera que, cuando un buscador como Google lea nuestras páginas, sepa sin confusiones lo que es una sección, lo que es un artículo o lo que es un apartado y, en función de eso, le otorgue más o menos importancia a la hora de reflejarlo en sus resultados de búsqueda.

      Respondiendo a tu primera cuestión, etiquetar con aside es como decirle al buscador que esa parte de la web es un poco menos importante que el resto porque su contenido no es el que suele abundar en la web o en el artículo/sección (si va pegado a un artículo o a una sección). Si, como fuera, no estás seguro de que ese contenido deba ir etiquetado como aside, crea simplemente un div genérico para envolverlo.

      Respecto a la otra cuestión, sí, las barras laterales son las que se ponen a derecha o izquierda en una web (en este blog, tienes una a la izquierda) y, según convenga, pueden ser asides o no. Su denominación viene de su posición, no de los estilos CSS. Piensa que antaño se maquetaban las webs con tablas, sin necesidad de ordenarlas con estilos CSS, y que igualmente había barras en los laterales y cabeceras y pies… Con lo que sí, puedes tener asides que no sean barras laterales, como también se pueden tener asides que sí sean barras laterales.

      Suerte :)

  4. Hola de nuevo Roser:
    1. Cuando me comentas esto en tu último mensaje “Su denominación viene de su posición, no de los estilos CSS” me refería que para poder poner una barra lateral en mi web tendré que hacer uso de los estilos, como puede ser la propiedad position por ejemplo. Me confirmas que antes se maquetaba con tablas y igualmente habían barras laterales sin necesidad de css, perfecto, ahora entiendo que una barra lateral se le denomina por su posición, pero como te he comentado tendré que hacer uso de css para ponerla a la izquierda o derecha, ya que hace años que dejamos las tablas para maquetar. Si por ejemplo tengo un div, le pongo algunos contenidos y los pongo a la izquierda de mi web o derecha ya ¿eso mismo seria una barra lateral?

    2. Sobre este otra respuesta que me distes no me aclaras mucho Roser:

    “Respondiendo a tu primera cuestión, etiquetar con aside es como decirle al buscador que esa parte de la web es un poco menos importante que el resto porque su contenido no es el que suele abundar en la web o en el artículo/sección (si va pegado a un artículo o a una sección). Si, como fuera, no estás seguro de que ese contenido deba ir etiquetado como aside, crea simplemente un div genérico para envolverlo”
    Te explico porque:
    En la definición que te puse de aside veo que lo que quiere decir es que si está dentro de article “el contenido debe ser específicamente relacionado con ese article” si se utiliza fuera de un article, el contenido debe estar relacionado con la pagina. Es decir mi conclusión es que si no está dentro de ninguna etiqueta article el contenido debe estar relacionado con la página y si está dentro de article el contenido debe estar relacionado con ese article. Entonces si está dentro de una etiqueta section sin estar dentro de article, solo dentro de section, entonces el contenido debería ser relacionado con la pagina.¿no? es lo que yo creo entender.

    1. Sí a las dos preguntas y, sobre el siguiente comentario del PD, se refiere a que aside es cuestión de contenido, no de estilo, aunque en algún momento puedan coincidir si se coloca un aside en una barra lateral, pero sería circunstancial.

      Tengo otros artículos en este blog sobre HTML5 con ejemplos que pueden aclararte conceptos, échales un vistazo, están enlazados en esta misma entrada ;)

      Suerte.

  5. pd: encontre este articulo en html5doctor pero la verdad no se muy bien que quiere decir, se que habla del asunto de las barras laterales y el aside y estilos.

    Conclusion

    The aside element can now represent secondary content when used outside of an article. Keep in mind that aside — and, more generally, secondary content — does not necessarily mean “sidebar”. The style of the content should not dictate the use of the element. For content that is not the primary focus of an article (or page) but is still related to the article (or page), aside is what you need, regardless of its visual design.

  6. Gracias Roser voy a echarles un vistazo aver que veo.

    Una última curiosidad. En la última respuesta que me dijiste si a todo. En especifico está: “Si por ejemplo tengo un div, le pongo algunos contenidos y los pongo a la izquierda de mi web o derecha ya ¿eso mismo seria una barra lateral?”

    Si el sidebar se refiere solo a posición, entonces si por ejemplo cojo un párrafo p, o cualquier otro elemento lo floto o lo posiciono…o aparece a la izquierda de mi web, ¿ya con eso tengo un sidebar? Me confunde un poco la verdad. Yo creo que es un cumulo de varios factores, el primero y más importante la posición como tu comentas, pero también el contenido del sidebar, que normalmente se utiliza para llevar cosas secundarias de la web. Solo por posicionar algo o aparecer a la izquierda de mi web ¿ya es una barra lateral? Por ejemplo un párrafo que ponga “hola que tal y lo ponga a la izquierda. Encontré estas dos definiciones en internet que me confunden un poco más.

    1. «Barra lateral» se refiere a la presentación de un elemento, en lugar de su contenido.
    2. El “sidebar” es el nombre que recibe en inglés la columna lateral de un blog y que sirve para incluir elementos complementarios a lo que es el contenido propiamente dicho.

    1. Isaac, hasta donde llega mi comprensión, barra lateral y sidebar significan lo mismo y son aspectos meramente formales para referirnos al contenido que se coloca a los lados en una web y, si me apuras, en periódicos, revistas… Centrándonos en el diseño web, que un sidebar luego se etiquete como aside, div, section o lo que venga al caso depende de la función que vaya a tener esa barra en el contexto de la web.

      1. Si Roser se que significan lo mismo, te puse los dos significados así porque en cada artículo venia a así. Comprendo que la barra lateral(sidebar) puede etiquetarse con aside, div, section o lo que venga al caso. Pero mi gran duda es si ¿solo por coger un div ponerle dentro “hola que tal” y colocarlo a la izquierda de mi web por ejemplo, es una barra lateral? Como te comente es un cumulo de varios factores, el primero y más importante la posición como tu comentastes anteriormente, pero también creo que el contenido de la barra lateral (sidebar), que normalmente se utiliza para llevar cosas secundarias de la web. ¿Puedo estar en lo cierto?
        Si puede echarle un vistazo
        http://actualidadydeporte.com/que-es-el-sidebar-y-para-que-sirve/
        http://abcblogs.abc.es/weblog/public/post/que-no-puede-faltar-en-tu-sidebar-14578.asp/

        1. Si está en un lateral y parece una barra, será una barra lateral, ya la hayas hecho con un div, un aside o un section y la utilices para publicidad, saludar o exponer tu biografía. Es una cuestión de diseño, no de código o de contenido, si bien, con el paso del tiempo, estas barras se han ido estandarizando y especializando con el fin de proveer recursos útiles para los visitantes de las webs, por ejemplo, en el caso de los blogs: el acceso rápido a los archivos, los calendarios o una galería de imágenes relacionadas.

          Si tu temor es no estar seguro de si funcionará o no el diseño que estás desarrollando porque no te convenza la barra, porque no sepas qué poner ahí o tan siquiera si debe haber o no barra, haz varias pruebas, deja que alguien navegue por ellas y anota sus reacciones. Así verás cuál es más práctica e intuitiva y qué cosas debes que mejorar. ¡Suerte!

  7. Hola Roser aquí estoy dándote la vara un poquito de nuevo en estas fechas de navidad…jejeje.
    Tengo una duda con la etiqueta aside que ayer me dio por revisar a ver si puedes aclarármela, si te fijas en su día estuvimos hablando de ella un poco pero ahora me di cuenta de un detalle.

    http://www.rosersantisimo.net/blog/2014/03/ampliando-conocimientos-sobre-html5-main.html

    Yo te puse esta definición:

    Cuando se utiliza dentro de article, el contenido debe ser específicamente relacionado con ese article (por ejemplo: glosario). Cuando se utiliza fuera de un article, el contenido debe estar relacionado con la pagina (por ejemplo lista de blog, grupos adicional de navegación…)”

    Pero ahora veo que en esta web que te copio, que fue de donde saque la información pone esto:

    http://html5doctor.com/aside-revisited/

    Cuando se utiliza dentro de un elemento article, el contenido debe estar específicamente relacionado con dicho artículo (por ejemplo, un glosario). Cuando se usa fuera de un elemento article, el contenido debe estar relacionado con el sitio (por ejemplo, una lista de enlaces, grupos de adicional de navegación , e incluso la publicidad si ese contenido está relacionado con la página).

    Si te fijas en la primera definición puse:

    “Cuando se utiliza fuera de un article, el contenido debe estar relacionado con la pagina”

    En la segunda:
    “Cuando se usa fuera de un elemento article, el contenido debe estar relacionado con el sitio”

    ¿Te has fijado verdad?, no sé si me confundí yo al copiar o lo saque de otro sitio la información, pero el caso es ¿Cuándo se utiliza aside fuera de article el contenido debe estar relacionado con la página esa en concreto o con el sitio? por sitio nos referimos a toda la web.

    1. Buenas de nuevo, Isaac :)

      Página web es el documento html, php, etc propiamente dicho; sitio web, el conjunto de páginas que conforman ese espacio enlazadas entre sí.

      En cualquier caso, el aside fuera de un artículo puede estar relacionado con el contenido específico de la página en la que esté integrado o del sitio en general. Fíjate en los ejemplos que citan en la misma página que me pasas:

      e.g., a blogroll, groups of additional navigation, and even advertising if that content is related to the page.

      Un saludo.

      1. Es decir se podría decir esto entonces:

        Cuando se utiliza dentro de un elemento article, el contenido debe estar específicamente relacionado con dicho artículo, Cuando se usa fuera de un elemento article, el contenido debe estar relacionado con la paguina en la que esté integrado o con el sitio en su conjunto, es decir puede ser relatico a estos 3 lugares ¿no?

  8. no me acordaba de las etiquetas html… :( ya esta corregido

    Entendido ;)

    Otra cosa más que me trae confundido esta etiqueta y aver si puedo ya terminar de comprenderla y usarla mejor Roser.

    En la mayoría de los sitios donde consultas sobe la etiqueta aside tiene un denominador común:

    1. Con las etiquetas aside y /aside, se nos invita a rodear todo aquel contenido que no es directamente contenido principal del que estamos hablando o del que estamos tratando en esa página en concreto. La norma dice que se use para todo aquel contenido tangencial al contenido principal de la página.

    http://www.comocreartuweb.com/curso-de-html/estructura-semantica-html5/etiquetas-semanticas/aside.html

    2. El Elemento HTML (aside) representa una sección de una página que consiste en contenido que está tangencialmente relacionado con el contenido que le rodea, que podría ser considerado independiente de ese contenido. Estas secciones son a menudo representadas como barras laterales o como inserciones y contienen una explicación al margen como una definición de glosario, elementos relacionados indirectamente, como publicidad, la biografía del autor, o en aplicaciones web, la información de perfil o enlaces a blogs relacionados.

    https://developer.mozilla.org/es/docs/Web/HTML/Elemento/aside

    3. La norma de aside dice: que se use para todo aquel contenido tangencial (que no es principal o importante, secundario, está relacionado pero poco) al contenido principal de la pagina, articulo. Cuando se utiliza dentro de article, el contenido debe ser específicamente relacionado con ese article (por ejemplo: glosario). Cuando se utiliza fuera de un article, el contenido debe estar relacionado con la pagina (por ejemplo lista de blog, grupos adicional de navegación…)

    http://www.comocreartuweb.com/curso-de-html/estructura-semantica-html5/etiquetas-semanticas/aside.html

    En todos aparece la palabra tangencial, incluso en la definición de la w3c, este es el denominador común, la palabra TANGENCIAL.

    Ahora bien, en la última definición que te puse la número 3, la saque de ese enlace pero la modifique un poco ya que no lo comprendía muy bien, ya que pregunte en otro blog sobre esta misma etiqueta aside al autor y me la resumió un poco más. Me definió tangencial como te indico a continuación y esa definición la saco del diccionario de la real academia española:

    La definición de tangencial es «que solo parcial y no significativamente se refiere a algo»,
    Y el agrego «es decir, está relacionado pero poco»

    Ahora viene mi caos Roser, según veo tangencia tiene varios significados:
    – No es principal
    – No es importante
    – Está relacionado pero poco
    – [Asunto o idea] que se relaciona lateral y no significativamente con el tema del que se trata
    – Secundario
    – Accesorio
    – …
    ¿Un aside se podría decir que es algo que tiene relación pero poco al contenido principal de la página o articulo?
    ¿Es lo mismo secundario, no es importante, no es principal y está relacionado pero poco, es decir si aside es algo secundario es también que tiene relación pero poco?

    Yo por ejemplo pienso de esta manera sobre aside y tangencial según llega mi comprensión:
    Aside = secundario, pues que no es tan importante en esa página, no es lo principal que se quiere mostrar.

    Aside = poco importante, pues que no es tan importante en esa página, no es lo principal que se quiere mostrar.

    Aside = está relacionado pero poco, pues aquí mi verdadero lio, ¿significa lo mismo decir que algo está relacionado pero poco con secundario, poco importante, y accesorio?

    Es que yo ahora pienso al decirme este autor la frase “está relacionado pero poco” que todo lo que este dentro de los aside van a ser cosas poco importante, secuandarias pero no sé si tiene que tener poca relacion con article/paguina o si por el contrario pueden ser cosas que no tengan ninguna relación.

    Si, sé que me he hecho un lio, lo sé… :( aclarame un poco las cosas

    1. Isaac, creo que le das demasiadas vueltas. Utiliza esta etiqueta aside cuando se ajuste a los ejemplos ya citados y si no se ajusta o crees que puede haber conflicto, no la uses. No merece la pena mortificarse por un elemento definido tan vagamente… HTML5 se ha convertido en estándar hace poco y sigue evolucionando, no es un lenguaje cerrado. No busques soluciones cerradas.

      Por cierto, cuidado con repetir los mensajes que me han salido como si se tratara de SPAM y casi no los veo ;)

      1. Ya lo sé Roser, pero soy una persona que me gusta indagar bien en las cosas y saber exactamente para que sirven  pero creo claramente que esto de la semántica a más de uno nos está trayendo cebaderos de cabeza. Al final que cada cosa tenga un significado no es tarea fácil y creo personalmente que estas etiquetas html5 a más de unos cuentos nos deja desconcertado muchos de sus significados y en muchas ocasiones

    1. Se entiende que la etiqueta section agrupa distintos elementos similares (como en una «sección») pero si consideras el logo una sección en sí mismo, podrías cambiar div por section sin mayor problema. Si además de una imagen con el logo se añade el nombre de la compañía o producto y un lema, tendría más sentido usar esa etiqueta.

¡Comenta!

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.