{"id":7984,"date":"2017-09-13T16:17:36","date_gmt":"2017-09-13T16:17:36","guid":{"rendered":"http:\/\/disenoweb.mx\/?p=3576"},"modified":"2017-09-13T16:17:36","modified_gmt":"2017-09-13T16:17:36","slug":"links-html5","status":"publish","type":"post","link":"https:\/\/disenoweb.mx\/blog\/links-html5\/","title":{"rendered":"Links en HTML5"},"content":{"rendered":"\n<h1>Links en HTML5<\/h1>\n<p><img data-opt-id=939010911  fetchpriority=\"high\" decoding=\"async\" class=\"size-full wp-image-43\" src=\"https:\/\/mlniuewdmffl.i.optimole.com\/w:auto\/h:auto\/q:mauto\/f:best\/http:\/\/disenoweb.mx\/wp-content\/uploads\/2015\/10\/home_slider_bg.jpg\" alt=\"Links en HTML5 Links en HTML5 Links en HTML5 home slider bg\" width=\"2000\" height=\"891\" title=\"home_slider_bg home_slider_bg\"><\/p>\n<h4><a href=\"http:\/\/marketingweb.com.mx\/diseno-web.html\">\u00a0Links en HTML5<\/a><\/h4>\n<div class=\"page\" title=\"Page 11\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<p>Dentro del elemento head, las etiquetas &lt;link&gt; son una manera de acceder o declarar contenido externo al documento actual, que puede cumplir distintos objetivos:<\/p>\n<p>Es una hoja de estilo contiene las reglas CSS que su navegador debe aplicar al presente documento.<\/p>\n<p>Es un feed que contiene el mismo contenido que esta <em>pagina web<\/em> , pero en un formato esta\u0301ndar (RSS).<\/p>\n<p>Es una traduccio\u0301n de esta <em>paginas web<\/em> en otro idioma.<\/p>\n<p>Es el mismo contenido que esta<em> pagina web<\/em>, pero en formato PDF.<\/p>\n<p>Es el pro\u0301ximo capi\u0301tulo de un libro en li\u0301nea de la cual esta pa\u0301gina es tambie\u0301n una parte.<\/p>\n<p>En <strong><em>Links en HTML5<\/em><\/strong>, se separan estas relaciones de enlace en dos categori\u0301as:<\/p>\n<p>Enlaces a recursos externos que se van a utilizar para mejorar el documento actual, y enlaces de hipervi\u0301nculos que son enlaces a otros documentos.<\/p>\n<p>El tipo de relacio\u0301n ma\u0301s utilizado (literalmente) es el siguiente:<\/p>\n<pre> &lt;link rel=\"stylesheet\" href=\"style-original.css\" type=\"text\/css\" \/&gt;\n<\/pre>\n<p>Esta relacio\u0301n es utilizada para indicar el archivo donde se almacenan las reglas CSS que se desean aplicar al documento. Una pequen\u0303a optimizacio\u0301n que se puede hacer en <em><strong>Links enHTML5<\/strong><\/em> es eliminar el atributo type. So\u0301lo hay un lenguaje de estilo para la web, CSS, asi\u0301 que ese es el valor predeterminado para el atributo type:<\/p>\n<p>&lt;link rel=\u201dstylesheet\u201d href=\u201dstyle-original.css\u201d \/&gt; 2.2 NUEVAS ETIQUETAS SEMA\u0301NTICAS<\/p>\n<p>En 2004, Ian Hickson, el autor de la especificacio\u0301n de HTML5, analizo\u0301 1.000.000.000 de pa\u0301ginas web utilizando el motor de Google, intentando identificar la manera en la que la web real estaba construida. Uno de los resultados de este ana\u0301lisis, fue la publicacio\u0301n de una lista con los nombres de clases ma\u0301s utilizados. Este estudio revela que los desarrolladores utilizan clases o IDs comunes para estructurar los documentos. Esto llevo\u0301 a considerar que quiza\u0301s fuese una buena idea crear etiquetas concretas para reflejar estas estructuras.<\/p>\n<p>Este tipo de etiquetas que componen la web sema\u0301ntica nos sirven para que cualquier mecanismo automa\u0301tico (un navegador, un motor de bu\u0301squeda, un lector de feeds\u2026) que lea un sitio web sepa con exactitud que\u0301 partes de su contenido corresponden a cada una de las partes ti\u0301picas de un sitio. Observando esas etiquetas sema\u0301nticas estructurales,<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"layoutArea\"><\/div>\n<\/div>\n<div class=\"page\" title=\"Page 12\">\n<div class=\"layoutArea\"><\/div>\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<p>cualquier sistema podra\u0301 procesar la pa\u0301gina y saber co\u0301mo esta\u0301 estructurada. Veamos algunas de estas etiquetas que introduce HTML5 en este sentido.<\/p>\n<p>&lt;section&gt;&lt;\/section&gt;: se utiliza para representar una seccio\u0301n \u201cgeneral\u201d dentro de un documento o aplicacio\u0301n, como un capi\u0301tulo de un libro. Puede contener subsecciones y si lo acompan\u0303amos de h1-h6 podemos estructurar mejor toda la pa\u0301gina creando jerarqui\u0301as del contenido, algo muy favorable para el buen posicionamiento web.<\/p>\n<p>&lt;article&gt;&lt;\/article&gt;: representa un componente de una pa\u0301gina que consiste en una composicio\u0301n auto\u0301noma en un documento, <em>como crear una pagina web<\/em>, aplicacio\u0301n, o sitio web con la intencio\u0301n de que pueda ser reutilizado y repetido. Podri\u0301a utilizarse en los arti\u0301culos de los foros, una revista o el arti\u0301culo de perio\u0301dico, una entrada de un blog, un comentario escrito por un usuario, un widget interactivo o cualquier otro arti\u0301culo independiente de contenido. Cuando los elementos de &lt;article&gt; son anidados, los elementos interiores representan los arti\u0301culos que en principio son relacionados con el contenido del arti\u0301culo externo. Por ejemplo, un arti\u0301culo de un blog que permite comentarios de usuario, dichos comentarios se podri\u0301an representar con &lt;article&gt;.<\/p>\n<p>&lt;aside&gt;&lt;\/aside&gt;: representa una seccio\u0301n de la pa\u0301gina que abarca un contenido relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Este elemento puede utilizarse para efectos tipogra\u0301ficos, barras laterales, elementos publicitarios, para grupos de elementos de la navegacio\u0301n, u otro contenido que se considere separado del contenido principal de la pa\u0301gina <em>dise\u00f1o<\/em>.<\/p>\n<p>&lt;header&gt;&lt;\/header&gt;: representa un grupo de arti\u0301culos introductorios o de navegacio\u0301n. Esta\u0301 destinado a contener por lo general la cabecera de la seccio\u0301n (un elemento h1-h6 o un elemento hgroup), pero no es necesario.<\/p>\n<p>&lt;nav&gt;&lt;\/nav&gt;: representa una seccio\u0301n de una pa\u0301gina que enlaza a otras pa\u0301ginas o a otras partes dentro de la pa\u0301gina. No todos los grupos de enlaces en una pa\u0301gina necesita estar en un elemento nav, so\u0301lo las secciones que constan de bloques de navegacio\u0301n principales son apropiados para el elemento de navegacio\u0301n.<\/p>\n<p>&lt;footer&gt;&lt;\/footer&gt;: representa el pie de una seccio\u0301n, con informacio\u0301n acerca de la pa\u0301gina\/seccio\u0301n que poco tiene que ver con el contenido de la pa\u0301gina, como el autor, el copyright o el an\u0303o.<\/p>\n<p>&lt;hgroup&gt;&lt;\/hgroup&gt;: representa el encabezado de una seccio\u0301n. El elemento se utiliza para agrupar un conjunto de elementos h1-h6 cuando el ti\u0301tulo tiene varios niveles, tales como subti\u0301tulos o ti\u0301tulos alternativos.<\/p>\n<p>&lt;time&gt;: representa o bien una hora (en formato de 24 horas), o una fecha precisa en el calendario gregoriano (en formato ISO), opcionalmente con un tiempo y un desplazamiento de zona horaria\u00a0<em><strong>Links enHTML5<\/strong><\/em>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2><em><strong>Links en HTML5<\/strong><\/em><\/h2>\n<p><a href=\"https:\/\/www.facebook.com\/disenopaginaweb\">#LinksenHTML5<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Links en HTML5 \u00a0Links en HTML5 Dentro del elemento head, las etiquetas &lt;link&gt; son una manera de acceder o declarar contenido externo al documento actual, que puede cumplir distintos objetivos: Es una hoja de estilo contiene las reglas CSS que su navegador debe aplicar al presente documento. Es un feed que contiene el mismo contenido &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"ast-button\" href=\"https:\/\/disenoweb.mx\/blog\/links-html5\/\"> <span class=\"screen-reader-text\">Links en HTML5<\/span> Leer m\u00e1s \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":123,"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":[714,70,712,1201,182,715],"class_list":["post-7984","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","category-diseno-web","tag-como-crear-una-pagina-web","tag-diseno","tag-diseno-grafico","tag-links-en-html5","tag-pagina-web","tag-paginas-web"],"_links":{"self":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts\/7984","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=7984"}],"version-history":[{"count":0,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts\/7984\/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=7984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/categories?post=7984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/tags?post=7984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}