{"id":2708,"date":"2014-08-19T12:15:30","date_gmt":"2014-08-19T11:15:30","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=2708"},"modified":"2015-05-01T22:34:07","modified_gmt":"2015-05-01T21:34:07","slug":"cuando-se-usa-la-etiqueta-div","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/","title":{"rendered":"\u00bfCu\u00e1ndo se usa la etiqueta div?"},"content":{"rendered":"<p><a href=\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2710 size-medium\" src=\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code-300x213.png\" alt=\"\u00bfCu\u00e1ndo se usa la etiqueta div?\" width=\"300\" height=\"213\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code-300x213.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code.png 376w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>La aparici\u00f3n de HTML5 y sus nuevas etiquetas sem\u00e1nticas ha provocado que la etiqueta de divisi\u00f3n <em>div<\/em> se utilice cada vez menos en nuestras p\u00e1ginas webs. Teniendo alternativas sem\u00e1nticas como header, section, aside, footer o main entre otras, es com\u00fan que nos preguntemos para qu\u00e9 y cu\u00e1ndo se usa\u00a0 la etiqueta div en estos momentos.<\/p>\n<p>En la versi\u00f3n anterior de HTML, la etiqueta div se defin\u00eda como un elemento de estructuraci\u00f3n gen\u00e9rico para una p\u00e1gina. Normalmente se usaban los atributos de id y clase para asignar nombres que representaran sem\u00e1ntica mente de qu\u00e9 parte de divisi\u00f3n se trataba. Actualmente, la especificaci\u00f3n de W3 define la etiqueta de la siguiente manera:<\/p>\n<p style=\"padding-left: 30px;\"><em>The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.<a href=\"http:\/\/www.w3.org\/html\/wg\/drafts\/html\/master\/grouping-content.html#the-div-element\"> W3 Specification<\/a><\/em><a href=\"http:\/\/www.w3.org\/html\/wg\/drafts\/html\/master\/grouping-content.html#the-div-element\">\u00a0<\/a><\/p>\n<p style=\"padding-left: 30px;\"><em>(Traducci\u00f3n) El elemento div no tiene ning\u00fan significado especial. Se puede utilizar con los atributos \u201cid\u201d, \u201cclass\u201d, \u201clang\u201d y \u201ctitle\u201d para marcar una seminatica com\u00fan a un grupo de elementos consecutivos.<\/em><\/p>\n<p>Por tanto, esta etiqueta ha quedado relegada a un uso m\u00e1s minoritario y carece de sem\u00e1ntica propia. Su uso actual es para estilizar con hojas de estilo contenidos de una web que carezca de etiqueta sem\u00e1ntica. Supongamos que tengo un listado de art\u00edculos de compra en una web. El conjunto de todos los art\u00edculos probablemente sea una etiqueta de tipo <em>&lt;section&gt;<\/em> y cada uno de los art\u00edculos de compra sea representado por una etiqueta de tipo <em>&lt;article&gt;<\/em>. Pero cada art\u00edculo me gustar\u00eda que el fondo de cada art\u00edculo sea de color blanco para que el lector est\u00e9 c\u00f3modo con la lectura del mismo, pero entre el blanco y el art\u00edculo me gustar\u00eda que tuviese un fondo de color lima de 5 p\u00edxeles de anchura y dos esquinas redondeadas. Probablemente para hacer este efecto dentro de la etiqueta <em>&lt;article&gt;<\/em> veamos la necesidad de invocar otra etiqueta auxiliar para estilizar m\u00e1s c\u00f3modamente. Aqu\u00ed es cuando entra en escena la divisi\u00f3n <em>&lt;div&gt;<\/em>.<\/p>\n<p>Espero que os haya podido haya servido este art\u00edculo para optimizar mejor vuestros sitios y vosotros \u00bfC\u00f3mo aplic\u00e1is la etiqueta <em>div<\/em> en vuestras p\u00e1ginas? \u00a1Espero vuestros comentarios!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La aparici\u00f3n de HTML5 y sus nuevas etiquetas sem\u00e1nticas ha provocado que la etiqueta de divisi\u00f3n div se utilice cada vez menos en nuestras p\u00e1ginas webs. Teniendo alternativas sem\u00e1nticas como header, section, aside, footer o main entre otras, es com\u00fan que nos preguntemos para qu\u00e9&#8230;<\/p>\n","protected":false},"author":8,"featured_media":2710,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[297],"class_list":["post-2708","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-div"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u00bfD\u00f3nde, c\u00f3mo y cu\u00e1ndo se usa la etiqueta div?<\/title>\n<meta name=\"description\" content=\"Teniendo alternativas sem\u00e1nticas como header, section, aside, o footer entre otras, es com\u00fan que nos preguntemos para qu\u00e9 y cu\u00e1ndo se usa la etiqueta div.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfD\u00f3nde, c\u00f3mo y cu\u00e1ndo se usa la etiqueta div?\" \/>\n<meta property=\"og:description\" content=\"Teniendo alternativas sem\u00e1nticas como header, section, aside, o footer entre otras, es com\u00fan que nos preguntemos para qu\u00e9 y cu\u00e1ndo se usa la etiqueta div.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2014-08-19T11:15:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-01T21:34:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code.png\" \/>\n\t<meta property=\"og:image:width\" content=\"376\" \/>\n\t<meta property=\"og:image:height\" content=\"268\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Antonio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonio\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/\"},\"author\":{\"name\":\"Antonio\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/12b6fc1aa9d549637166ed59d78390f9\"},\"headline\":\"\u00bfCu\u00e1ndo se usa la etiqueta div?\",\"datePublished\":\"2014-08-19T11:15:30+00:00\",\"dateModified\":\"2015-05-01T21:34:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/\"},\"wordCount\":416,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code.png\",\"keywords\":[\"div\"],\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/\",\"name\":\"\u00bfD\u00f3nde, c\u00f3mo y cu\u00e1ndo se usa la etiqueta div?\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code.png\",\"datePublished\":\"2014-08-19T11:15:30+00:00\",\"dateModified\":\"2015-05-01T21:34:07+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/12b6fc1aa9d549637166ed59d78390f9\"},\"description\":\"Teniendo alternativas sem\u00e1nticas como header, section, aside, o footer entre otras, es com\u00fan que nos preguntemos para qu\u00e9 y cu\u00e1ndo se usa la etiqueta div.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code.png\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code.png\",\"width\":376,\"height\":268},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00bfCu\u00e1ndo se usa la etiqueta div?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/12b6fc1aa9d549637166ed59d78390f9\",\"name\":\"Antonio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d9c296a0ba9a57dd139f1c02aeeb960b9d3d89e21210644d50bfd015643626d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d9c296a0ba9a57dd139f1c02aeeb960b9d3d89e21210644d50bfd015643626d8?s=96&d=mm&r=g\",\"caption\":\"Antonio\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/antonio\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00bfD\u00f3nde, c\u00f3mo y cu\u00e1ndo se usa la etiqueta div?","description":"Teniendo alternativas sem\u00e1nticas como header, section, aside, o footer entre otras, es com\u00fan que nos preguntemos para qu\u00e9 y cu\u00e1ndo se usa la etiqueta div.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/","og_locale":"es_ES","og_type":"article","og_title":"\u00bfD\u00f3nde, c\u00f3mo y cu\u00e1ndo se usa la etiqueta div?","og_description":"Teniendo alternativas sem\u00e1nticas como header, section, aside, o footer entre otras, es com\u00fan que nos preguntemos para qu\u00e9 y cu\u00e1ndo se usa la etiqueta div.","og_url":"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/","og_site_name":"Blog Escola Espai","article_published_time":"2014-08-19T11:15:30+00:00","article_modified_time":"2015-05-01T21:34:07+00:00","og_image":[{"width":376,"height":268,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code.png","type":"image\/png"}],"author":"Antonio","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Antonio","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/"},"author":{"name":"Antonio","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/12b6fc1aa9d549637166ed59d78390f9"},"headline":"\u00bfCu\u00e1ndo se usa la etiqueta div?","datePublished":"2014-08-19T11:15:30+00:00","dateModified":"2015-05-01T21:34:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/"},"wordCount":416,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code.png","keywords":["div"],"articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/","url":"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/","name":"\u00bfD\u00f3nde, c\u00f3mo y cu\u00e1ndo se usa la etiqueta div?","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code.png","datePublished":"2014-08-19T11:15:30+00:00","dateModified":"2015-05-01T21:34:07+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/12b6fc1aa9d549637166ed59d78390f9"},"description":"Teniendo alternativas sem\u00e1nticas como header, section, aside, o footer entre otras, es com\u00fan que nos preguntemos para qu\u00e9 y cu\u00e1ndo se usa la etiqueta div.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code.png","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code.png","width":376,"height":268},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2014\/08\/cuando-se-usa-la-etiqueta-div\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"\u00bfCu\u00e1ndo se usa la etiqueta div?"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/12b6fc1aa9d549637166ed59d78390f9","name":"Antonio","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d9c296a0ba9a57dd139f1c02aeeb960b9d3d89e21210644d50bfd015643626d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d9c296a0ba9a57dd139f1c02aeeb960b9d3d89e21210644d50bfd015643626d8?s=96&d=mm&r=g","caption":"Antonio"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/antonio\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/08\/code.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/2708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=2708"}],"version-history":[{"count":5,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/2708\/revisions"}],"predecessor-version":[{"id":3503,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/2708\/revisions\/3503"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/2710"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=2708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=2708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=2708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}