DOCTYPE html><html lang="es"><head> |
En realidad es algo demasiado corto y que no quita mucho tiempo, todo esto sigue estando en la etiqueta HEAD que no ha cambiado para nada, es algo muy parecido a XHTML, la cuestión es resumir el código.
<title>Titulo de la web |
REL es para decir, que estamos enlazando, ya que el atributo TYPE no se utiliza a menos que usemos para enlazar el FEED.
<link rel="stylesheet" href="estilos.css" /><link rel="shortcut icon" href="/favicon.ico" /><link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" /> |
Ya terminamos con la parte no visible de la pagina web, es el turno del cuerpo o BODY, esta etiqueta sigue siendo útil para lo mismo, pero a continuación empieza algo interesante que son las etiquetas de la estructura de el sitio visual.
La etiqueta HEADER es la cabecera donde va el nombre del sitio, el logotipo y descripción de la pagina web, ejemplo.
Recomiendo que solo se use un H1 en una cabecera por cuestiones de SEO, pero es posible poner mas de un H1 y HEADER.
<body><header> <h1>Mi sitio web>> |
La etiqueta HEADER es muy equivalente a crear un DIV con ID=”header”, pero ahora tenemos una etiqueta especial para ello.
Pasamos con el contenido o SECTION usando H2 de titulo y el contenido en etiquetas P dentro de una etiqueta llamada ARTICLE para articulos o post, esto por cuestiones de SEO que es muy recomendable tambien, ejemplo.
<section> <article> <h2>Titilo de contenido</h2> <p> Contenido (ademas de imagenes, citas, videos etc.) > |
SECTION es el equivalente a un DIV con ID=”contenido” y ARTICLE a un DIV con ID=”post” o “articulo”
Otra etiqueta interesante es la etiqueta ASIDE, lo que viene siendo nuestro SIDEBAR o barra lateral y es muy facil de implementar con H3 de titulo y P de contenido dentro de ella.
<aside> <h3>Titulo de contenido> |
ASIDE es nuestro equivalente a un DIV con ID=”sidebar” o “barra”
Y finalizando con el pie de la pagina con la etiqueta muy obvia FOOTER , un ejemplo.
<footer> |
FOOTER es nuestro equivalente a un DIV con ID=”footer” o “pie”
LA ESTRUCURA FINAL SERIA ASI
<html lang="es"><head><title>Titulo de la web</><meta charset="utf-8" /><link rel="stylesheet" href="estilos.css" /><link rel="shortcut icon" href="/favicon.ico" /><link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" /></><body> <header> <h1>Mi sitio web</> <p>Mi sitio web creado en html5</> </header> <section> <article> <h2>Titilo de contenido<</h2> <p> Contenido (ademas de imagenes, citas, videos etc.) </> </article> </> <aside> <h3>Titulo de contenido<> <p>contenido<p> </> <footer> Creado por mi el 2012 </></></>
