Estructura base de un documento de HTML5

0


HTML5 ofrece mayo facilidad en cuanto al crear nuestra pagina web, Con nuevas etiquetas que nos guían en en el camino.

Estructura base de un documento de HTML5

No hace mucho se utilizaba el siguiente <!DOCTYPE> aunque algunos todavía lo siguen usando.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

Ahora HTML5 lo ha simplificado, todo lo que debemos hacer es  declarar que el documento es HTML:

<!DOCTYPE html>

 

Mucho mas simple de acordarse, ¿verdad? Ahora, otra etiqueta que ha sufrido un cambio en HTML5 es  la clasica etiqueta con la que comenzamos a crear nuestra web. Ahora una pagina web tiene 1 solo idioma  y esto es algo que debe ser respetado ya que buscadores toman en cuenta estos pequeños puntos. Recuerda que si quieres tener una web multiidioma crea por lo menos un subdominio.

Anteriormente era:

<html>

 

A continuación  la etiqueta en si no ha cambiado, pero dentro de ella debemos  siempre declarar la Codificación de Caracteres que se lo declara dentro de un meta con el atributo charset, UTF-8 es el mas común y conocido, Te recomiendo que lo agregues al principio de tu proyecto porque agregarselo después es un dolor de cabeza. se lo realiza de la siguiente manera:

<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
</head>

 

Importante: Hay que recordar que HTML es un lenguaje de maquetación, NO podemos escribir dentro de nuestro documento otro tipo de código como CSS o Javascript esto debe encontrarse linkeados dentro de la etiqueta Head con la etiqueta link.

Las etiquetas link son las que enlazan nuestros estilos CSS, los Favicones y los Feeds. Estas son muy cortas con excepción de el feed que sigue casi igual, solo que ahora usaremos algo que ya existia,  el atributo REL que usamos en los links para cuestiones de SEO.asemos a las etiquetas link, son las que enlazan nuestros estilos CSS, los Favicones y los Feeds. Estas son muy cortas con excepción de el feed que sigue casi igual, solo que ahora usaremos algo que ya existia,  el atributo REL que usamos en los links para cuestiones de SEO.

<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" />

 

Y con esto acabamos con la parte No visible de la web, ahora es turno del cuerpo o BODY esta etiqueta sigue siendo utilizada, pero para la division de la web se han incorporado unos nuevas como : HEADER en estas se encuentra el nombre del sitio, logo y una descripción.

Se recomienda usar un H1 en el header, pero hay que recordar que NO se puede incluir más de una H1 por cuestiones de SEO.

<header>
<h1>Mi sitio web</h1>
Mi primer sitio web en html5</header>

 

Como ya lo han de haber notado HEADER es equivalente a que se haya creado un DIV con un id=”header” solo que ahora hay una etiqueta especial para el header

Contenido o SECTION usamos un  H2 de titulo y el contenido en etiquetas dentro de una etiqueta ARTICLE que se usa par articulos o post, Todo esto es por cuestiones de SEO, ejemplo.

Titilo de contenido</pre>
<h2>
 Contenido (ademas de imagenes, citas, videos etc.)</h2>
<pre><section><article>
<h2></h2>
</article></section>

 

SECTION es el equivalente a un DIV con ID=”contenido” ARTICLE a un DIV con ID=”post” o “articulo”

Otra etiqueta nueva e interesante es ASIDE que se la usa pra barras laterales, sidebars o para plugins de redes sociales.

<aside>
<h3>Titulo de contenido</h3>
contenido</aside>

 

ASIDE es nuestro equivalente a un DIV con ID=”sidebar”

Y ahora la Ultima parte de una web: el FOOTER que ahora ya tiene su propia etiqueta como el HEADER, la etiqueta es <footer>. Fácil de recordar… , ejemplo

<footer>
 </span>
    <p><span>Tustutoriales, Casi todos los derechos reservados</span></p>
 <span>
</footer>

 

Ahora veremos el código completo:

<!DOCTYPE html>

<html lang="es">

<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="estilos.css" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="alternate" title="Webs RSS" type="application/rss+xml" href="/feed.rss" />
</head>

<body>
    <header>
       <h1>Mi sitio web</h1>
       <p>Mi sitio web creado en html5</p>
    </header>
    <section>
       <article>
           <h2>Titilo de contenido<h2>
           <p> Contenido (ademas de imagenes, citas, videos etc.) </p>
       </article>
    </section>
    <aside>
       <h3>Titulo de contenido</h3>
           <p>contenido</p>
    </aside>
    <footer>
      </span>
        <p><span>Tustutoriales, Casi todos los derechos reservados</span></p>
      <span>
   </footer>
</body>
</html>

 

Si se preocupan con la compatibilidad, el único navegador atrazado es Internet Explorer 6, que lastimosamente sigue siendo usado, Necesitan usar el HTML5 Enabling Script. para evitar problemas.

 


Mira toda la información que hay sobre este tema: Tutoriales Webmaster .
Publicación: . Actualización: .
Publicado por bloggordo.


     


Dejanos un comentario

*


*