{"id":2372,"date":"2016-06-11T20:21:47","date_gmt":"2016-06-12T02:21:47","guid":{"rendered":"http:\/\/ottogarcia.com\/?p=2372"},"modified":"2016-06-11T20:21:47","modified_gmt":"2016-06-12T02:21:47","slug":"estructura-basica-documento-html5","status":"publish","type":"post","link":"https:\/\/ottogarcia.com\/nuevo_sitio\/herramientas\/estructura-basica-documento-html5\/","title":{"rendered":"Estructura b\u00e1sica de un documento de HTML5"},"content":{"rendered":"

En\u00a0HTML5<\/em>\u00a0la\u00a0estructura<\/em>\u00a0interna\u00a0b\u00e1sica<\/em>\u00a0de una p\u00e1gina web se ha simplificado, se crearon nuevas etiquetas para las diferentes secciones de las que se compone una p\u00e1gina, lo m\u00e1s novedoso de HTML5 son las nuevas API y los nuevos elemento y la sem\u00e1ntica para darle m\u00e1s dinamismo a las p\u00e1ginas con menos c\u00f3digo y facilitando al programador el maquetado de las paginas web.
\n<\/p>\n

Entre las principales ventajas de HTML5 es la inclusi\u00f3n de elementos sem\u00e1nticos, o marcados sem\u00e1nticos, que nos ayudan a definir las distintas secciones\/divisiones de una p\u00e1gina web.<\/p>\n

En las versiones anteriores a HTML5 se sol\u00eda utilizar la etiqueta<\/p>\n

\n

para realizar las divisiones de una p\u00e1gina web, pero actualmente es recomendado utilizar los elementos sem\u00e1nticos ya que describen claramente su prop\u00f3sito.<\/p>\n

Como se puede observar mediante marcadores sem\u00e1nticos se puede diferenciar claramente el contenido que referencia cada etiqueta.<\/p>\n

\"\"<\/p>\n

A continuaci\u00f3n veamos nuestro c\u00f3digo completo:<\/p>\n

<!DOCTYPE html><br>\n<html lang=\"es\"><br>\n<head><br>\n<title>Titulo de la web<\/title><br>\n<meta charset=\"utf-8\" \/><br>\n<link rel=\"stylesheet\" href=\"estilos.css\" \/><br>\n<link rel=\"shortcut icon\" href=\"\/favicon.ico\" \/><br>\n<link rel=\"alternate\" title=\"RSS\" type=\"application\/rss+xml\" href=\"\/feed.rss\" \/><br>\n<\/head><br>\n<body><br>\n<header><br>\n<h1>Mi sitio web<\/h1><br>\n<p>Mi sitio web creado en html5<\/p><br>\n<\/header><br>\n<section><br>\n<article><br>\n<h2>Titilo de contenido<h2><br>\n<p> Contenido (ademas de imagenes, citas, videos etc.) <\/p><br>\n<\/article><br>\n<\/section><br>\n<aside><br>\n<h3>Titulo de contenido<\/h3><br>\n<p>contenido<\/p><br>\n<\/aside><br>\n<footer><br>\npie de p\u00e1gina<br>\n<\/footer><br>\n<\/body><br>\n<\/html><\/pre>\n
Lo que produce el siguiente resultado.<\/p>\n
\n
Mi sitio web<\/h1>\n
Mi sitio web creado en html5<\/p>\n<\/header>\n
\n
\n
Titilo de contenido<\/h2>\n
Contenido (ademas de imagenes, citas, videos etc.)<\/p>\n<\/article>\n<\/section>\n