{"id":7985,"date":"2017-09-14T19:05:22","date_gmt":"2017-09-14T19:05:22","guid":{"rendered":"http:\/\/disenoweb.mx\/?p=3579"},"modified":"2017-09-14T19:05:22","modified_gmt":"2017-09-14T19:05:22","slug":"estructura-html4-html5","status":"publish","type":"post","link":"https:\/\/disenoweb.mx\/blog\/estructura-html4-html5\/","title":{"rendered":"Estructura en HTML4 y HTML5"},"content":{"rendered":"\n

Estructura en HTML4 y HTML5<\/h1>\n

\"Estructura<\/p>\n

Estructura en HTML5 y HTML4<\/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

Estructura en HTML5 y HTML4.<\/strong><\/em><\/p>\n

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

El siguiente c\u00f3digo muestra una estructura \u201ccl\u00e1sica\u201d 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=\u201dheader\u201d> por <div id=\u201dwhatever\u201d>, el<\/p>\n

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

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

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

<html><\/p>\n

<body><\/p>\n

<div id=\u201dheader\u201d><\/p>\n

<a href=\u201d\/\u201d><img src=logo.png alt=\u201dhome\u201d><\/a><\/p>\n

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

<p class=\u201dtagline\u201d><\/p>\n

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

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

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

<div id=\u201dnav\u201d><\/p>\n

<ul><\/p>\n

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

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

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

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

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

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

<div class=\u201darticles\u201d><\/p>\n

<div class=\u201darticle\u201d><\/p>\n

<p class=\u201dpost-date\u201d>October 22, 2009<\/p><\/p>\n

<h2><\/p>\n

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

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

<div class=\u201dcontent\u201d><\/p>\n

Content goes here\u2026<\/p>\n

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

<div class=\u201dcomments\u201d><\/p>\n

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

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

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

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

<div class=\u201daside\u201d><\/p>\n

<div class=\u201drelated\u201d><\/div><\/p>\n

<div class=\u201drelated\u201d><\/div><\/p>\n

<div class=\u201drelated\u201d><\/div><\/p>\n

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

<div id=\u201dfooter\u201d><\/p>\n

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

<p>&#169; 2013&#8211;9 <a href=\u201d#\u201d>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=\u201d\/\u201d><img src=logo.png alt=\u201dhome\u201d><\/a><\/p>\n

<hgroup><\/p>\n

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

<h2 class=\u201dtagline\u201d><\/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=\u201d#\u201d>home<\/a><\/li><\/p>\n

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

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

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

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

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

<section class=\u201darticles\u201d><\/p>\n

<article><\/p>\n

<time datetime=\u201d2009-10-22\u2033>October 22, 2009<\/time><\/p>\n

<h2><\/p>\n

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

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

<div class=\u201dcontent\u201d><\/p>\n

Content goes here\u2026<\/p>\n

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

<section class=\u201dcomments\u201d><\/p>\n

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

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

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

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

<aside><\/p>\n

<div class=\u201drelated\u201d><\/div><\/p>\n

<div class=\u201drelated\u201d><\/div><\/p>\n

<div class=\u201drelated\u201d><\/div><\/p>\n

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

<footer><\/p>\n

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

<p>&#169; 2013&#8211;9 <a href=\u201d#\u201d>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 en HTML5 y HTML4<\/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 en HTML4 y HTML5<\/em><\/h2>\n

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

Estructura en HTML4 y HTML5 Estructura en HTML5 y HTML4 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 actual …<\/p>\n

Estructura en HTML4 y HTML5<\/span> Leer m\u00e1s \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":1172,"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,1202,182,715],"class_list":["post-7985","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-estructura-en-html4-y-html5","tag-pagina-web","tag-paginas-web"],"_links":{"self":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts\/7985","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=7985"}],"version-history":[{"count":0,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts\/7985\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/media\/1172"}],"wp:attachment":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/media?parent=7985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/categories?post=7985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/tags?post=7985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}