{"id":3694,"date":"2017-09-14T18:50:35","date_gmt":"2017-09-14T18:50:35","guid":{"rendered":"http:\/\/disenodepagina.com\/disenoweb\/?p=3694"},"modified":"2017-09-14T18:50:35","modified_gmt":"2017-09-14T18:50:35","slug":"estructura-tradicional-de-un-documento-html5","status":"publish","type":"post","link":"https:\/\/disenodepagina.com\/disenoweb\/estructura-tradicional-de-un-documento-html5\/","title":{"rendered":"Estructura tradicional de un documento HTML5"},"content":{"rendered":"

Estructura tradicional de un documento HTML5<\/h1>\n

\"Estructura<\/p>\n

 <\/p>\n

Estructura\u00a0tradicional\u00a0 de un documento\u00a0\u00a0HTML5<\/strong><\/em><\/a><\/h4>\n

Como hemos visto con las nuevas etiquetas sem\u00e1nticas introducidas en HTML5, \u00e9stas<\/p>\n

aportan un significado concreto al documento que estamos definiendo, y por lo tanto,<\/p>\n

afectan de manera directa a la forma en la estructuramos el contenido. Vamos a ver<\/p>\n

como podemos convertir nuestra actual p\u00e1gina con las nuevas etiquetas introducidas en<\/p>\n

\u00a0Estructura tradicional de un documento HTML5.<\/strong><\/em><\/p>\n

2.3.1 ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML 4<\/p>\n

El siguiente c\u00f3digo muestra una estructura \u00abcl\u00e1sica\u00bb de documento HTML, donde los<\/p>\n

diferentes contenidos de la web se encuentran agrupados por etiquetas <div>. Por s\u00ed<\/p>\n

mismas, estas etiquetas no aportan ning\u00fan tipo de significado dise\u00f1o grafico<\/em>, y el atributo id tampoco<\/p>\n

se lo proporciona dise\u00f1o<\/em>. Si cambiamos <div id=\u00bbheader\u00bb> por <div id=\u00bbwhatever\u00bb>, el<\/p>\n

significado sigue siendo el mismo, ninguno paginas web<\/em>.<\/p>\n

<DOCTYPE html PUBLIC\u00bb-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\u00bb<\/p>\n

\u00abhttp:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\u00bb><\/p>\n

<html><\/p>\n

<body><\/p>\n

<div id=\u00bbheader\u00bb><\/p>\n

<a href=\u00bb\/\u00bb><img src=logo.png alt=\u00bbhome\u00bb><\/a><\/p>\n

<h1>My Weblog<\/h1><\/p>\n

<p class=\u00bbtagline\u00bb><\/p>\n

A lot of effort went into making this effortless.<\/p>\n

<\/p><\/p>\n

<\/div><\/p>\n

<div id=\u00bbnav\u00bb><\/p>\n

<ul><\/p>\n

<li><a href=\u00bb#\u00bb>home<\/a><\/li><\/p>\n

<li><a href=\u00bb#\u00bb>blog<\/a><\/li><\/p>\n

<li><a href=\u00bb#\u00bb>gallery<\/a><\/li><\/p>\n

<li><a href=\u00bb#\u00bb>about<\/a><\/li><\/p>\n

<\/ul><\/p>\n

<\/div><\/p>\n

<div class=\u00bbarticles\u00bb><\/p>\n

<div class=\u00bbarticle\u00bb><\/p>\n

<p class=\u00bbpost-date\u00bb>October 22, 2009<\/p><\/p>\n

<h2><\/p>\n

<a href=\u00bb#\u00bb title=\u00bblink to this post\u00bb>Travel day<\/a><\/p>\n

<\/h2><\/p>\n

<div class=\u00bbcontent\u00bb><\/p>\n

Content goes here…<\/p>\n

<\/div><\/p>\n

<div class=\u00bbcomments\u00bb><\/p>\n

<p><a href=\u00bb#\u00bb>3 comments<\/a><\/p><\/p>\n

<\/div><\/p>\n

<\/div><\/p>\n

<\/div><\/p>\n

<div class=\u00bbaside\u00bb><\/p>\n

<div class=\u00bbrelated\u00bb><\/div><\/p>\n

<div class=\u00bbrelated\u00bb><\/div><\/p>\n

<div class=\u00bbrelated\u00bb><\/div><\/p>\n

<\/div><\/p>\n

<div id=\u00bbfooter\u00bb><\/p>\n

<p>&#167;<\/p><\/p>\n

<p>&#169; 2013&#8211;9 <a href=\u00bb#\u00bb>Arkaitz Garro<\/a><\/p><\/p>\n

<\/div><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

\u00a0ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML5<\/em><\/strong><\/h6>\n

Veamos como podemos a\u00f1adir un significado a este documento, \u00fanicamente aplicando<\/p>\n

las nuevas etiquetas sem\u00e1nticas incluidas en HTML5 pagina web<\/em>.<\/p>\n

<!DOCTYPE html><\/p>\n

<html><\/p>\n

<body><\/p>\n

<header><\/p>\n

<a href=\u00bb\/\u00bb><img src=logo.png alt=\u00bbhome\u00bb><\/a><\/p>\n

<hgroup><\/p>\n

<h1>Title<\/h1><\/p>\n

<h2 class=\u00bbtagline\u00bb><\/p>\n

A lot of effort went into making this effortless.<\/p>\n

<\/h2><\/p>\n

<\/hgroup><\/p>\n

<\/header><\/p>\n

<nav><\/p>\n

<ul><\/p>\n

<li><a href=\u00bb#\u00bb>home<\/a><\/li><\/p>\n

<li><a href=\u00bb#\u00bb>blog<\/a><\/li><\/p>\n

<li><a href=\u00bb#\u00bb>gallery<\/a><\/li><\/p>\n

<li><a href=\u00bb#\u00bb>about<\/a><\/li><\/p>\n

<\/ul><\/p>\n

<\/nav><\/p>\n

<section class=\u00bbarticles\u00bb><\/p>\n

<article><\/p>\n

<time datetime=\u00bb2009-10-22″>October 22, 2009<\/time><\/p>\n

<h2><\/p>\n

<a href=\u00bb#\u00bb title=\u00bblink to this post\u00bb>Travel day<\/a><\/p>\n

<\/h2><\/p>\n

<div class=\u00bbcontent\u00bb><\/p>\n

Content goes here…<\/p>\n

<\/div><\/p>\n

<section class=\u00bbcomments\u00bb><\/p>\n

<p><a href=\u00bb#\u00bb>3 comments<\/a><\/p><\/p>\n

<\/section><\/p>\n

<\/article><\/p>\n

<\/section><\/p>\n

<aside><\/p>\n

<div class=\u00bbrelated\u00bb><\/div><\/p>\n

<div class=\u00bbrelated\u00bb><\/div><\/p>\n

<div class=\u00bbrelated\u00bb><\/div><\/p>\n

<\/aside><\/p>\n

<footer><\/p>\n

<p>&#167;<\/p><\/p>\n

<p>&#169; 2013&#8211;9 <a href=\u00bb#\u00bb>Arkaitz Garro<\/a><\/p><\/p>\n

<\/footer><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

Partiendo de la anterior estructura, parece evidente las nuevas etiquetas que debemos<\/p>\n

utilizar. Esto no siempre es as\u00ed, y cuando estructuramos contenidos de mucho mayor \u00a0Estructura tradicional de un documento\u00a0\u00a0HTML5<\/strong><\/em><\/p>\n

alcance, lo normal es que nos surjan dudas. Un sencillo algoritmo que nos puede ayudar a como crear una pagina web<\/em><\/p>\n

Estructura tradicional de un documento HTML5<\/h2>\n

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

Estructura tradicional de un documento HTML5   Estructura\u00a0tradicional\u00a0 de un documento\u00a0\u00a0HTML5 Como hemos visto con las nuevas etiquetas sem\u00e1nticas introducidas en HTML5, \u00e9stas aportan un significado concreto al documento que estamos definiendo, y por lo tanto, afectan de manera directa a la forma en la estructuramos el contenido. Vamos a ver como podemos convertir nuestra […]\n","protected":false},"author":2,"featured_media":3533,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[478,477,8],"tags":[535,82,529,542,138,527],"class_list":["post-3694","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-estructura-tradicional-de-un-documento-html5","tag-pagina-web","tag-paginas-web"],"_links":{"self":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3694","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=3694"}],"version-history":[{"count":2,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3694\/revisions"}],"predecessor-version":[{"id":3696,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3694\/revisions\/3696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/media\/3533"}],"wp:attachment":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/media?parent=3694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/categories?post=3694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/tags?post=3694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}