ADNDC / RADIO

7 dic 2015

HTML 5 Etiqueta Aside - Fuera o dentro de Article

Esta etiqueta se presenta como uno de los tantos nuevos elementos en HTML 5.
Debido a su complejidad y a los diferentes campos donde puede ser aplicada no queda del todo claro para muchos desarrolladores web su funcionamiento.
Debemos entender ante todo que la etiqueta </aside> nace como una etiqueta complementaria a la información que estamos incluyendo en nuestro proyecto. No hay que confundirla con la etiqueta Div pues ésta aun es mucho más genérica, o sea, no tiene tanto valor semántico como lo tiene Aside.

¿Concretamente, dónde podemos y debemos aplicar Aside?
Primeramente, debemos comprender su lógica.  La importancia de </aside> dependerá de su posición y los elementos que estén interviniendo en su funcionamiento.  Por ejemplo, podemos incluirla dentro y fuera del elemento </article>.

Cuando se encuentre dentro de </article> entonces </aside> debe presentar un contenido meramente relacionado con el </article> que lo está conteniendo, de tal manera que si el elemento </article> fuera eliminado o movido de lugar, </aside> quedaría sin sentido. Un buen ejemplo sería que en </article> hablemos de un tema específico, por ejemplo, la vida de Albert Einstein y en alguna parte del artículo mencionar una de sus frases célebres, o algún contenido extra que complete información del artículo, entonces </aside> actuaría como complemento de </article>

Aquí el ejemplo:
<article>
                 <header>
                               <hgroup>
<h1>ALBERT EINSTEIN</h1>
<h3>entre la ciencia y el amor</h3>
</hgroup>
               </header>
                 <section>
                              <p>Aquí el contenido que habla de Albert Einstein</p>
               </section>
                 <aside>
                                <p>Datos extra para completar el contenido de Albert Einstein</p>
               </aside>
</article>

Sin embargo, el uso más común de esta etiqueta es tal y como lo hemos visto en nuestro vídeo tutorial de Youtube, (clic aquí para ver el vídeo) donde </aside> juega un papel más genérico desarrollando así enlaces a diferentes contenidos que pueden o no ser relacionados con nuestro contenido general, o sea, </aside> pasaría a ser una etiqueta hija directa de </body> y por lo tanto contiene información que no tienen que ver precisamente con la idea original.  Normalmente, cuando la utilizan de esa manera suele contener tags, banners, publicidad, redes sociales, opiniones de usuarios etc.   Por lo general la colocan en los laterales de la página, pero no es una regla. 

84 comentarios:

  1. Hola Adán, te felicito por tu artículo y queda más que claro, muchas gracias por todos esos tutoriales y sigue en esa línea.

    ResponderBorrar
    Respuestas
    1. Gracias por tu comentario José, un honor tenerte por acá. Saludos. :D

      Borrar
    2. ya no hay mas videos vdd solo llego al 13 de ahi ya no veo mas estpy subcrito en twiter face y youtuve y nunca me llegan correos que puedo hacer ?

      Borrar
    3. empece vientos estos tutoriales y estan muy bien explicado te felicito, amigo ya lei tambien lo que publicaste en el articulo esta mas explicado saludos...

      Borrar
    4. Gracias por tus tutoriales Adam JP, lo explicas todo muy claro.

      Borrar
    5. gracias Adan me has sido de mucha utilidad para mi educación virtual.

      Borrar
    6. muy interesante este aporte, estoy aprendiendo y esta es la forma mas fácil de hacerlo

      Borrar
    7. Este comentario ha sido eliminado por el autor.

      Borrar

  2. Hola buenas tardes desde Ecuador, siguiendo los tutoriales paso a paso, ya quedo mas claro con el articulo.

    ResponderBorrar
    Respuestas
    1. Gracias Amigo. Esa es la idea, que bueno que te sirvió el articulo. Saludos.

      Borrar
  3. Excelente explicación, estoy al pendiente de los próximos videos, gracias por compartir tu conocimiento
    Saludos

    ResponderBorrar
  4. Con este articulo queda mas que claro la diferencia que hay entre usar la etiqueta dentro o fuera tanto de secction o en otro lugar o etiqueta, gracias por este super articulo Adan salu2

    ResponderBorrar
  5. desde España, te agradezco tu labor, muchas gracias y continua con este tan buen proyecto.

    ResponderBorrar
  6. Muy buenos tutoriales me han servido mucho gracias

    ResponderBorrar
  7. Todo queda claro con el texto complementario de video muchas gracias por el canal a mi me a ayudado mucho para actualizarme y aprender nuevas cosas y recordar un par mas. Saludos desde la ciudad de México.

    ResponderBorrar
  8. Muy buena aclaración adan. Ahora me queda mas claro el concepto de "ASIDE"

    ResponderBorrar
  9. buen complemento, en horabuena!

    ResponderBorrar
  10. Muy buena explicacion excelente!

    ResponderBorrar
  11. Estimado Adan. Cordial saludo desde Colombia. Sigo con atención y juicio los tutoriales los cuales considero muy buenos y prácticos. Estoy a la espera de la siguiente temporada.

    Para el caso especifico de la etiqueta , veo que funciona igual que un destacad dentro de un impreso. Es un recuadro que de manera sucinta complementa el tema central a través de una frase, una dato numérico o estadístico o simplemente un comentario.

    ResponderBorrar
  12. ok muy claro entendí gracias por tu trabajo por lo menos es atendible que dependiendo como la use jugara un papel importante

    ResponderBorrar
  13. Hola desde Argentina, qué gran trabajo y qué bien explicas. Te felicito Adan. Sigue así, estoy aprendiendo HTML gracias a tu importante guía. Adelante!!! Y la etiqueta... entendido.

    ResponderBorrar
  14. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  15. Holaaaa bendiciones estaba perdido pero apareci jaja me parecio muy didactico esto de verdad que si ... para mi entendimiento aunque aun soy muy ignorante en el tema es que lo que lleve aside no necesariamente tiene que ver con el tema digamos que a side viene siendo un complemento para una informacion adicional que puede ser relacionada o no con el tema ..

    ResponderBorrar
  16. gracias Adan.
    Excelente trabajo.

    ResponderBorrar
  17. Te felicito Adan por tu manera tan sencilla de explicar

    ResponderBorrar
  18. Creo que lo entiendo, aunque en el artículo hablas sobre dentro o fuera de en lugar de dentro o fuera de tal y como comentabas en el video.
    Buenos tutoriales, espero que pronto lleguen más!!!

    ResponderBorrar
  19. Buenas tardes, quisiera saber si hay otra forma de hacer lo que propone el asíde dentro del article, osea estando el aside por fuera del article para comprender mejor, gracias.

    ResponderBorrar
  20. Hola.. Saludos Adan Te felicito, Muchas gracias eres un excelente prodefor

    ResponderBorrar
  21. Hola Adán. Gracias por tus video y comentarios. He empezado el curso de HTML5 hoy mismo y ya he llegado al video 12.

    ResponderBorrar
  22. hola Adán. gracias por tus videos. muy bueno el curso html5 te felicito y gracias por tu ayuda ..muy bien explicado el video

    ResponderBorrar
  23. Hola maestro eres el mejor, me gusta como le pones todo tu empeño en explicar claramente este curso, yo no tengo ni idea en html,espero aprender algo de ti, gracias por todo amigo.

    ResponderBorrar
  24. ya hice mi tarea jejeje genial blog

    ResponderBorrar
  25. buena definicion pero hoy en dia las reglas para meta se le debe de poner la diagonal al final. es una regla que dicta w3c

    ResponderBorrar
  26. si, queda claro. una como referencia y otra como independiente.
    muchas gracias

    ResponderBorrar
  27. excelente, saludos desde Colombia

    ResponderBorrar
  28. Excelente, ahora ya comprendo cuando veo el codigo de pagina, antes no tenia ni la menor idea de a que se referia con tanta cosa que no entendia, muy buena explicacion, saludos desde Ecuador...

    ResponderBorrar
  29. De Bolivia, aprendiendo paso a paso, muy bueno los tutos!! sigue adelante

    ResponderBorrar
  30. Muy buena información, gracias por dedicarnos su tiempo, par que podamos aprender más sobre este tema, un abrazo y sigan adelante con todas estas capacitaciones, exitos..

    ResponderBorrar
  31. Muy buenos tutoriales, muchas gracias por compartir conocimiento.
    y una pregunta, con que frecuencia suben los vídeos de HTML5? llegue al 14 y hay estoy estancado.

    ResponderBorrar
  32. Hola Adan, esta super interesante el tutorial que nos bridas; la verdad la etiqueta la entiendo como un complemento o una ayuda para poder, valga la redundancia, complementar nuestra pagina.

    ResponderBorrar
  33. Saludos cordiales amigo he visto tus turiales y quiero saber cuanto cobras por clases particulares amigos via online mi correo es ronald_40_20@hotmail.com para ver si me ayduas con la respuesta amigo soy de Ecuador Saludos cordiales..! y exitos

    ResponderBorrar
  34. german maldonado saludes
    entendí que como hija de body va ha tener mas información y así ampliamos nuestra pagina
    gracias por su enseñanza y que Dios lo bendiga siempre

    ResponderBorrar
  35. Muchas Gracias me esta sirviendo de mucho.
    Muy bueno (Y)

    ResponderBorrar
  36. Gracias por el curso y la explicación, la verdad que esa etiqueta en lo personal depende de la página web si es un Aplicación web comercial seria afuera del artículo a mi manera de ver y si es una página de información quedaría mejor como apoyo del artículo

    ResponderBorrar
  37. Hola Adán: Mi comentario te llegará tarde puesto que recién estoy por el capítulo Nº12. Por supuesto que me sirvió mucho tu explicación y me aclaró mucho todas las dudas que tenía. O sea que Aside dentro de Article sirve para afianzar el mismo. Fuera es una información más que por supuesto tiene que ver con la información general. Nuevamente muchas gracias. Espero ponerme al día muy pronto. Saludos a todo tu equipo.

    ResponderBorrar
  38. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  39. Saludos Adan: Me ha quedado claro que la función de la etiqueta -aside- es en cualquier caso, complementar y enriquecer el contenido de una página. Al colocarla dentro de -article- su mensaje y propósito, deben estar estrictamente relacionados con el texto principal; en caso de ubicarla como hija de -body- o fuera de -article- aportará información accesoria que complementará el contenido general de la página. Eres un maestro FORMIDABLE! Gracias por cada instante que dedicas a la difusión del conocimiento! Ana Quiceno.

    ResponderBorrar
  40. Nacho Larrañagajunio 19, 2016 6:40 p.m.

    Muchas Gracias Adán por compartir el conocimiento, me han servido mucho tus videos del curso de HTML5 desde cero. Saludos !!!

    ResponderBorrar
  41. Entendido podremos hacer variantes y basarnos en una especificación dependiendo del orden de ideas.

    ResponderBorrar
  42. gracias por el curso sigo en linea desde ayer refrescando conocimientos y aprendiendo de html5

    ResponderBorrar
  43. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  44. Es una etiqueta ambigua que se utiliza de dos formas siendo la mas acertada como hija de body.

    ResponderBorrar
  45. Hola, muchas gracias por tu artículo. Saludos

    ResponderBorrar
  46. Saludos Adán y a la gente de ADNDC.

    Te envío un abrazo y un gran agradecimiento por compartir lo que sabes con nosotros.

    Te cuento que soy profesional en Comunicación y Relaciones Corporativas y me interesa mucho el tema de la web, tanto que hace poco comencé a mirar tus videos sobre HTML5 para poner en práctica lo aprendido, identificar y comprender las lógicas de los lenguajes que construyen la web y lo virtual y con ello, alcanzar un grado de consciencia más amplio sobre los procesos que se desarrollan en el back stage de lo que vemos día a día en la World Wide Web.

    Me quiero tomar el atrevimiento de hacerte una amable recomebndación de tipo profesional: Cuando invites a tu comunidad para que se pase por alguno de los medios alternativos a tu canal de YouTube para ampliar algún tema que estemos tratando o tener acceso a información que consideres relevante para aclarar las dudas que puedan surgir, intenta no recriminar la "falta de interés por aprender" de quienes no consulten dicho material ya que es un error no solo discursivo que puede generar malestar en tus seguidores sino que también incurres en una falta de sintaxis al determinar a priori que alguien no está interesado en aprender cuando ya está en el capítulo 12 de una serie tan interesante como la que estoy leyendo de manera asidua y disciplinada. A cambio, podrías intentar motivar más indicando que son contenidos que permitirán tener una mayor comprensión y dominio del tema, herramienta o programa que estás explicando en el momento o cosas así. Disculpa que me tome esta atribución, pero soy comunicador y mal haría en no hacerte notar la situación.

    Te dejo un abrazo y los más sinceros agradecimientos porque he aprendido mucho con tus tutoriales.

    Hasta pronto.

    P.D: Perdona la extensión de mi post.

    ResponderBorrar
  47. Excelentes tutoriales y artículos para entender mejor el manejo de nuestras Paginas, me esta sirviendo mucho!! Gracias.

    ResponderBorrar
  48. MUCHAS GRACIAS. Me esta siendo de gran utilidad !!!

    ResponderBorrar
  49. Excelente curso, Adán! Muchísimas gracias!

    ResponderBorrar
  50. Hola hola. mas claro que el agua imposible..... gracias por esta ayuda del articulo y del tutorial

    ResponderBorrar
  51. Quedo claro la explicación.. gracias por enseñar !! abrazo

    ResponderBorrar
  52. hola ,gracias por tan interesante información,me gustaria saber despues del video#15 donde esta la continuación, de nuevo gracias

    ResponderBorrar
  53. Excelente explicación.. Saludos

    ResponderBorrar
  54. Muchas gracias, me queda mas claro la etiqueta aside, Saludos

    ResponderBorrar
  55. Gracias por tu articulo, quedo claro el punto... los blog tienen algo magico! ojala se pudieran ver los videos desde acá ^^! pero no pasa nada, me encantan sus contenidos los cuales veo por youtube, y ya te sigo por facebook que hace la veces de blog. Saludos.

    ResponderBorrar
  56. Voy con bastante retraso pero quería darte las gracias desde España!

    ResponderBorrar
  57. Listo, entendido el uso de .
    Muy bien explicados y detallados estos vídeos tutoriales de HTML5. Felicitaciones

    ResponderBorrar
  58. Excelente explicación. Ya estaría de parte del diseñador web si esta etiqueta pudiera o no estar incluida en una(s) página(s), claro esta, todo esto de la mano con el cliente y su contenido a publicar. Pienso a veces que menos es más. Suerte y que sigan los éxitos.

    ResponderBorrar
  59. Gracias por la información y por los tutoriales están muy bien explicados, estoy aprendiendo mucho, es mi primera experiencia en aprender un lenguaje de programación.

    ResponderBorrar
  60. Qué crack :3/ muy completo la explicación

    ResponderBorrar
  61. Excelente curso...lo estoy siguiendo...!! felicidades...!!!

    ResponderBorrar
  62. excelente articulo, y muchas gracias por el conocimiento impartido

    ResponderBorrar
  63. Hola Adan, estoy haciendo todos tus cursos, sos un genio, ojalá algún día seas el CEO de Google. Saludos desde Córdoba, Argentina!!!!

    ResponderBorrar
  64. Gracias Adan!,muy clara la explicaciòn

    ResponderBorrar