Etiquetas de HTML5

Hola, bienvenido, a continuación voy a dar un ejemplo básico de las etiquetas de HTML5 espero sea didáctico ya que recién estoy empezando a asimilar esta tecnología y como dice Jack el destripador vamos por partes, para empezar mostraré esta imagen...

Si la viste te has podido dar cuenta que está señalada con diferentes etiquetas como header que contiene tanto el texto del encabezado como la etiqueta nav que incluirá los links de navegación.

Inicializamos el HTML5 con:

Código :

<!DOCTYPE html>

Creamos la etiqueta header:

Código :

<html>
   <body>
      <header>
      </header>
   </body>
</html>

Dentro del header incluimos el texto del encabezado y el menú de navegación usando la etiqueta nav

Código :

<html>
   <body>
      <header>
         <div>
         <h1>ANIMACION PARA EL SITE<h1>
         </div>
      <nav>
         <ul>
            <li><a href="#" title="link1">link1</a></li>
            <li><a href="#" title="link2">link2</a></li>
         </ul>
      </nav>
      </header>
   </body>
</html>

Ahora para continuar damos un vistazo nuevamente a la imagen inicial y si te puedes percatar que hay una etiqueta indicada llamada section que contiene tanto a la etiqueta article que incluye una imagen de etiquetas y la etiqueta aside que incluye un texto descriptivo de contenido.

Creamos la etiqueta section seguido al final del header

Código :

<html>
   <body>
      <header>
         <div>
            <h1>ANIMACION PARA EL SITE<h1>
         </div>
      <nav>
         <ul>
            <li><a href="#" title="link1">link1</a></li>
            <li><a href="#" title="link2">link2</a></li>
         </ul>
      </nav>
      </header>
      
      <section>
      </section>
   </body>
</html>

Luego dentro de la etiqueta section creamos las etiquetas article y aside:

Código :

<html>
   <body>
      <header>
         <div>
            <h1>ANIMACION PARA EL SITE<h1>
         </div>
         <nav>
            <ul>
               <li><a href="#" title="link1">link1</a></li>
               <li><a href="#" title="link2">link2</a></li>
            </ul>
         </nav>
      </header>
      
      <section>
         <article>
         </article>
         <aside>
         </aside>
      </section>
   </body>
</html>

En la etiqueta article incluiremos la imagen de etiquetas y en la etiqueta aside el texto del contenido

Código :

<html>
   <body>
      <header>
         <div>
            <h1>ANIMACION PARA EL SITE<h1>
         </div>
      <nav>
         <ul>
            <li><a href="#" title="link1">link1</a></li>
            <li><a href="#" title="link2">link2</a></li>
         </ul>
      </nav>
      </header>
      
      <section>
         <article>
            <div>
               <img src="estructura-tema-html5.gif" title="animacion">
            </div>
         </article>
         <aside>
            <div>
               <p>
               Hola esta es la animación para el site....
               </p>
            </div>
         </aside>
      </section>
   </body>
</html>

Ahora toca dar un vistazo más a la imagen inicial donde podrán notar que nos falta tomar en cuenta una etiqueta más que es la llamada footer y no por última la menos importante ya que contiene información relevante sobre la empresa como correo,web, teléfono, etc...

Inicializamos la etiqueta footer seguido del cierre de la etiqueta section

Código :

<html>
   <body>
      <header>
         <div>
            <h1>ANIMACION PARA EL SITE<h1>
         </div>
      <nav>
         <ul>
            <li><a href="#" title="link1">link1</a></li>
            <li><a href="#" title="link2">link2</a></li>
         </ul>
      </nav>
      </header>
         <section>
            <article>
               <div>
                  <img src="estructura-tema-html5.gif" title="animacion">
               </div>
            </article>
            <aside>
               <div>
                  <p>
                  Hola esta es la animación para el site....
                  </p>
               </div>
            </aside>
         </section>
      <footer>
      </footer>
   </body>
</html>

Para finalizar, incluimos datos e información de la empresa dentro de la etiqueta footer

Código :

<html>
   <body>
      <header>
         <div>
            <h1>ANIMACION PARA EL SITE<h1>
         </div>
      <nav>
         <ul>
            <li><a href="#" title="link1">link1</a></li>
            <li><a href="#" title="link2">link2</a></li>
         </ul>
      </nav>
      </header>
      <section>
         <article>
            <div>
               <img src="estructura-tema-html5.gif" title="animacion">
            </div>
         </article>
         <aside>
            <div>
               <p>
               Hola esta es la animación para el site....
               </p>
            </div>
         </aside>
      </section>
      <footer>
         <div>
            <span>CopyRight 2013</span>
            <a href="#">Netesa Latinoamerica</a>
            <a href="#">www.netesa.pe</a>
         </div>
      </footer>
   </body>
</html>

Espero que les haya servido para familiarizarse un poco con las etiquetas y también dejar la interrogante de si el uso de las tablas es viable en HTML5 o si es algo desfasado su utilización. Solo eso, cuídense y saludos...

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Por elizabeth el 31 de Diciembre de 2012

El nav necesariamente debe estar dentro del header? He visto ejemplos en los que no lo hacen
Por jhonatanAsm el 02 de Enero de 2013

el header va dentro del body mmmm....
fail tuyo o así se ha estandarizado?
salu2.
Por jhonatanAsm el 02 de Enero de 2013

jajaja, sorry confundí header con head :s,
pero igual ya no es necesario q aparezca el head?
Por Mariux el 02 de Enero de 2013
jhonatanAsm :
jajaja, sorry confundí header con head :s,
pero igual ya no es necesario q aparezca el head?

Dentro del head es donde debes enlazar las hojas de estilo, js's y establecer el title. En el post solo nombró las etiquetas nuevas y quizás por ello que ovbió esa etiqueta.

Código :
```
<!DOCTYPE HTML>
<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
   
</body>
</html>
```
Por HtrMancera el 02 de Enero de 2013

Animación?
Por jhonatanAsm el 03 de Enero de 2013

entendido,
gracias
Por nasho el 04 de Enero de 2013

@elizabeth
El nav lo puedes insertar en cualquier parte dentro de body.

Todo depende de la estructura del sitio.
Por diseño web oviedo el 08 de Enero de 2013

¿Donde consideras que es mas apropiado aplicar los CSS a la propia etiqueta HTML (Ej. footer) o a las capas interiores (Ej. <footer><div>)?
Por nasho el 09 de Enero de 2013
Eso depende del diseño.

Podría ser en ambos... algo como:
Código :
```
footer{background-color:#222; color:#BBB;}
footer div{margin:auto; width:1000px;}
```
Por ironsnake_81 el 10 de Enero de 2013

Buenas, tengo una inquietud... que diferencia hay entre la etiqueta section y article... lo digo porque en muchos casos veo que está el section y adentro el article o el article y dentro el section... o que tipo de casos vendría a ser... muchas gracias y felicitaciones por el sitio!
Por HtrMancera el 10 de Enero de 2013

si hicieras un blog, los section serian como su nombre lo indica, las diferentes secciones del blog, como el aside y la columna principal y cada article seria un post o entrada del blog.
Por jhonatanAsm el 11 de Enero de 2013

una sección contiene varios articulos,
pero un artículo no puede contener varias secciones.

así se recomienda, pero como html5 no valida esto. hay desarroladores que lo utilizan
a su libre albedrío . salu2
Por alessandro15 el 19 de Febrero de 2013

si quieres dividir un article en varias partes, mejor usa <div>
Por pepito el 27 de Mayo de 2013

Osea puedo insertar la etiqueta nav dentro de la etiqueta header, que bueno ya me estaba dando escopetazos.

Saludos.

Etiquetas de HTML5

Publica tu comentario

o puedes...