{"id":3697,"date":"2017-09-19T17:57:32","date_gmt":"2017-09-19T17:57:32","guid":{"rendered":"http:\/\/disenodepagina.com\/disenoweb\/?p=3697"},"modified":"2017-09-19T17:57:32","modified_gmt":"2017-09-19T17:57:32","slug":"etiqueta-article-html5","status":"publish","type":"post","link":"https:\/\/disenodepagina.com\/disenoweb\/etiqueta-article-html5\/","title":{"rendered":"Etiqueta Article HTML5"},"content":{"rendered":"

Etiqueta Article HTML5<\/h1>\n

\"Etiqueta<\/p>\n

<ARTICLE><\/a><\/div>\n

 <\/p>\n

 <\/p>\n

Seg\u00fan la especificaci\u00f3n, un elemento <article> representa lo siguiente:<\/p>\n

Este elemento representa un contenido completo, auto-contenido en un documento, p\u00e1gina, aplicaci\u00f3n o\u00a0sitio web<\/em>, que es, en principio, independiente de ser distribuido y reutilizado, por ejemplo en un RSS. Puede ser un post de un foro, un art\u00edculo de un peri\u00f3dico o revista, una entrada de un blog, un comentario de un usuario, un widget o cualquier otro elemento independiente\u00a0dise\u00f1o grafico<\/em>.<\/p>\n

Cuando los art\u00edculos est\u00e1n anidados, los art\u00edculos interiores representan contenido que en principio est\u00e1 relacionado con el art\u00edculo que los contiene. Por ejemplo, una entrada de un blog puede aceptar comentarios de usuarios, que est\u00e1n incluidos dentro del contenido principal y relacionados con el mismo\u00a0dise\u00f1o<\/em>.<\/p>\n

Por lo tanto, la etiqueta <article> se utiliza para encapsular contenido, que tiene significado en s\u00ed mismo, y que puede ser distribuido y reutilizado en otros formatos de datos. No nos referimos \u00fanicamente a contenidos cl\u00e1sicos de texto, sino que incluso un contenido multimedia con su transcripci\u00f3n, un mapa o email pueden ser totalmente v\u00e1lidos para ser incluidos en una etiqueta <article>\u00a0como crear una pagina web<\/em>.<\/p>\n

<SECTION><\/h4>\n

A diferencia del elemento <article>, este elemento es utilizado para dividir el documento (o art\u00edculos) en diferentes \u00e1reas, o como su propio nombre indica, en secciones. Seg\u00fan la especificaci\u00f3n, un elemento <section> representa lo siguiente:<\/p>\n

Representa una secci\u00f3n gen\u00e9rica de un documento o aplicaci\u00f3n. Una secci\u00f3n, en este contexto, es un grupo tem\u00e1tico de contenido, que generalmente incluye una cabecera\u00a0paginas web<\/em>.<\/p>\n

Consideremos el siguiente marcado v\u00e1lido en HTML 4:<\/p>\n

En este caso, y desde un punto de vista sem\u00e1ntico, es complicado deducir si el texto Vital caveat about the information above: does not apply on the first Thursday of the month. pertenece al contenido completo o est\u00e1 relacionado con la secci\u00f3n Fan Club uniforms. Gracias a la etiqueta <section>, es muy sencillo separar e identificar a qu\u00e9 secci\u00f3n pertenece cada contenido:<\/p>\n

Como podemos observar en los dos ejemplos anteriores, es muy sencillo agrupar contenido que pertenece a una misma secci\u00f3n, permitiendo incluirlo dentro de un contexto sem\u00e1ntico\u00a0Etiqueta Article y Section<\/em><\/strong>.<\/p>\n

Otra de las posibilidades que nos ofrece esta etiqueta, es la de dividir nuestro documento en secciones, que incluyen contenido de tem\u00e1ticas diferentes entre s\u00ed. Si adem\u00e1s queremos separar estos contenidos visualmente en dos columnas, lo l\u00f3gico ser\u00eda utilizar las tradicionales etiquetas <div> para agrupar los art\u00edculos seg\u00fan su tem\u00e1tica, y posteriormente aplicar estilos CSS o JavaScript para presentarlos en forma de pesta\u00f1as\u00a0Etiqueta Article y Section<\/em><\/strong>.<\/p>\n

En este caso, la etiqueta <div> no nos aporta ning\u00fan significado sem\u00e1ntico, tan s\u00f3lo estructural. La etiqueta <section> es la encargada de a\u00f1adir sem\u00e1ntica en estos casos\u00a0Etiqueta Article y Section<\/em><\/strong>:<\/p>\n

Etiqueta Article HTML5<\/em><\/strong><\/h2>\n

#EtiquetaArticleySection<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Etiqueta Article HTML5 <ARTICLE>     Seg\u00fan la especificaci\u00f3n, un elemento <article> representa lo siguiente: Este elemento representa un contenido completo, auto-contenido en un documento, p\u00e1gina, aplicaci\u00f3n o\u00a0sitio web, que es, en principio, independiente de ser distribuido y reutilizado, por ejemplo en un RSS. Puede ser un post de un foro, un art\u00edculo de un […]\n","protected":false},"author":2,"featured_media":3699,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[478,477,8],"tags":[535,82,529,543,138,530],"class_list":["post-3697","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","category-diseno-de-pagina","category-diseno-web","tag-como-crear-una-pagina-web","tag-diseno","tag-diseno-grafico","tag-etiqueta-article-html5","tag-pagina-web","tag-sitio-web"],"_links":{"self":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/comments?post=3697"}],"version-history":[{"count":1,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3697\/revisions"}],"predecessor-version":[{"id":3700,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3697\/revisions\/3700"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/media\/3699"}],"wp:attachment":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/media?parent=3697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/categories?post=3697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/tags?post=3697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}