{"id":7982,"date":"2017-09-11T17:33:50","date_gmt":"2017-09-11T17:33:50","guid":{"rendered":"http:\/\/disenoweb.mx\/?p=3569"},"modified":"2017-09-11T17:33:50","modified_gmt":"2017-09-11T17:33:50","slug":"semantica-html","status":"publish","type":"post","link":"https:\/\/disenoweb.mx\/blog\/semantica-html\/","title":{"rendered":"Sem\u00e1ntica HTML 5"},"content":{"rendered":"\n<h1>Sem\u00e1ntica HTML 5<\/h1>\n<p><a href=\"http:\/\/marketingweb.com.mx\/blog\/wp-content\/uploads\/desarrollo-web2.jpg\"><img data-opt-id=474817173  fetchpriority=\"high\" decoding=\"async\" class=\"size-medium wp-image-2439\" src=\"http:\/\/marketingweb.com.mx\/blog\/wp-content\/uploads\/desarrollo-web2-300x169.jpg\" alt=\"Sem\u00e1ntica HTML 5 Sem\u00e1ntica HTML 5 Sem\u00e1ntica HTML 5 desarrollo web2 300x169\" width=\"300\" height=\"169\" srcset=\"https:\/\/mlniuewdmffl.i.optimole.com\/w:300\/h:169\/q:mauto\/f:best\/https:\/\/disenoweb.mx\/blog\/wp-content\/uploads\/desarrollo-web2.jpg 300w, https:\/\/mlniuewdmffl.i.optimole.com\/w:525\/h:295\/q:mauto\/f:best\/https:\/\/disenoweb.mx\/blog\/wp-content\/uploads\/desarrollo-web2.jpg 525w\" sizes=\"(max-width: 300px) 100vw, 300px\" title=\"desarrollo-web2-300x169 desarrollo-web2-300x169\"><\/a><\/p>\n<h3><strong><em>\u00a0SEMA\u0301NTICA<\/em><\/strong><\/h3>\n<p>Una de las novedades que hemos mencionado anteriormente son las etiquetas que se han introducido en HTML5. Existen ma\u0301s de 30 nuevas etiquetas\u00a0<em><strong>sema\u0301ntica<\/strong><\/em>\u00a0que pueden ser utilizadas\u00a0en nuestras pa\u0301ginas esta\u0301ticas. Estas nuevas etiquetas se podri\u0301an clasificar en dos grupos:<\/p>\n<p>Etiquetas que extienden a las actuales de la\u00a0<strong>p\u00e1gina web<\/strong>, como &lt;video&gt;, &lt;audio&gt; o &lt;canvas&gt;, y que adema\u0301s an\u0303aden nuevas funcionalidades a los documentos HTML, que podemos controlar desde JavaScript y <a href=\"http:\/\/disenoweb.mx\/\">etiquetas que componen la web\u00a0<em><strong>sema\u0301ntica<\/strong><\/em><\/a>, es decir, que no proponen nuevas funcionalidades pero sirven para estructurar\u00a0<strong>sitios web<\/strong>, y an\u0303adir un significado concreto, ma\u0301s alla\u0301 de las etiquetas generales como &lt;div&gt;.<\/p>\n<p>En este capi\u0301tulo, veremos como transformar nuestra estructura actual de marcado basada en &lt;div&gt;, a una estructura que utiliza las nuevas etiquetas estructurales como<\/p>\n<p>&lt;nav&gt;, &lt;header&gt;, &lt;footer&gt;, &lt;aside&gt;, o &lt;article&gt;.<\/p>\n<h4>\u00a0CABECERA DEL DOCUMENTO<\/h4>\n<p>Adema\u0301s de las nuevas etiquetas introducidas por HTML5 (que veremos ma\u0301s adelante), el nuevo esta\u0301ndar propone pequen\u0303as mejoras que podemos aplicar en la definicio\u0301n de nuestros documentos, en concreto en la cabecera de los mismos.<\/p>\n<h4>\u00a0DOCTYPE<\/h4>\n<p>El esta\u0301ndar XHTML deriva de XML, por lo que comparte con e\u0301l muchas de sus normas y sintaxis. Uno de los conceptos fundamentales de XML es la utilizacio\u0301n del DTD o Document Type Definition (\u201cDefinicio\u0301n del Tipo de Documento\u201d). El esta\u0301ndar XHTML define el DTD que deben seguir las pa\u0301ginas y documentos XHTML. En este documento se definen las<strong>\u00a0plantillas web<\/strong>\u00a0que se pueden utilizar, los atributos de cada etiqueta y el tipo de valores que puede tener cada atributo.<\/p>\n<p>&lt;!DOCTYPE html<\/p>\n<p>PUBLIC \u201c-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\u201d<\/p>\n<p>\u201chttp:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\u201d&gt;<\/p>\n<p>E\u0301sta es una de las 15 declaraciones posibles declaradas en los esta\u0301ndares HTML4 y XHTML. En HTML5 se reduce la definicio\u0301n del tipo de documento a una u\u0301nica posibilidad, por lo que no tenemos que preocuparnos de elegir el tipo de documento correcto:<\/p>\n<p>&lt;!DOCTYPE html&gt;<\/p>\n<h4>ELEMENTO RAI\u0301Z HTML<\/h4>\n<p>En todo documento HTML, su elemento rai\u0301z o nodo superior siempre es la etiqueta<\/p>\n<p>&lt;html&gt;. Hasta ahora, este elemento rai\u0301z se defini\u0301a de la siguiente manera:<\/p>\n<p>&lt;html xmlns=http:\/\/www.w3.org\/1999\/xhtml<\/p>\n<p>lang=\u201den\u201d<\/p>\n<p>xml:lang=\u201den\u201d&gt;<\/p>\n<p>No hay ningu\u0301n problema en mantener esta sintaxis. Si se desea, se puede conservar, ya que es va\u0301lido en HTML5. Sin embargo, algunas de sus partes ya no son necesarias<strong>\u00a0para el dise\u00f1o de pagina web<\/strong>\u00a0, por lo que podemos eliminarlas.<\/p>\n<p>El primer elemento del que podemos prescindir es el atributo xmlns. Se trata de una herencia de XHTML 1.0, que dice que los elementos de esta pa\u0301gina esta\u0301n en el espacio de nombres XHTML, http:\/\/www.w3.org\/1999\/xhtml. Sin embargo, los elementos de<a href=\"https:\/\/en.wikipedia.org\/wiki\/HTML5\">\u00a0HTML5<\/a>\u00a0esta\u0301n siempre en este espacio de nombres, por lo que ya no es necesario declararlo expli\u0301citamente. Eliminar el atributo xmlns nos deja con este elemento de la siguiente manera:<\/p>\n<p>&lt;html lang=\u201des\u201d xml:lang=\u201den\u201d&gt;<\/p>\n<p>En este caso ocurre lo mismo con el atributo xml:lang, es una herencia de XHTML que<\/p>\n<p>podemos eliminar, quedando finalmente la etiqueta de la siguiente manera:<\/p>\n<p>&lt;html lang=\u201den\u201d&gt;<\/p>\n<h2><em><strong>Sem\u00e1ntica HTML 5<\/strong><\/em><\/h2>\n<p><a href=\"https:\/\/www.facebook.com\/disenopaginaweb\">#SemanticaHTML5<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sem\u00e1ntica HTML 5 \u00a0SEMA\u0301NTICA Una de las novedades que hemos mencionado anteriormente son las etiquetas que se han introducido en HTML5. Existen ma\u0301s de 30 nuevas etiquetas\u00a0sema\u0301ntica\u00a0que pueden ser utilizadas\u00a0en nuestras pa\u0301ginas esta\u0301ticas. Estas nuevas etiquetas se podri\u0301an clasificar en dos grupos: Etiquetas que extienden a las actuales de la\u00a0p\u00e1gina web, como &lt;video&gt;, &lt;audio&gt; o &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"ast-button\" href=\"https:\/\/disenoweb.mx\/blog\/semantica-html\/\"> <span class=\"screen-reader-text\">Sem\u00e1ntica HTML 5<\/span> Leer m\u00e1s \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":233,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","_joinchat":[],"footnotes":""},"categories":[1189,55],"tags":[66,48,182,709,806,713],"class_list":["post-7982","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","category-diseno-web","tag-crear-una-pagina-web","tag-diseno-de-pagina-web","tag-pagina-web","tag-plantillas-web","tag-semantica-html-5","tag-sitios-web"],"_links":{"self":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts\/7982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/comments?post=7982"}],"version-history":[{"count":0,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts\/7982\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/media?parent=7982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/categories?post=7982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/tags?post=7982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}