Basa su sintaxis en un elemento de base al que llamamos etiqueta.

Está compuesto por etiquetas y texto, que definen los elementos del documento, como enlaces, párrafos, imágenes, etc.

AlGUNAS PARTES DE UN DOCUMENTO HTML:

Definido por: <html> </html>
 Encabezado <header> </header>
 Cuerpo <body> </body>
 Enlaces <nav> </nav>
 Secciones <section> </section>
 Pie <footer> </footer>
 Articulo <article> </article>
 Otros <aside> </aside>

BODY

El elemento <BODY> se coloca inmediatamente después del cierre de la marca </HEAD> y, en cualquier caso, dentro de los elemenos <HTML></HTML>; tiene una marca de apertura y una de cierre y delimitado por ellas figura el cuerpo del documento.
Si el elemento <HEAD> contenía metainformación (es decir, datos no visualizados materialmente por el navegador) la función de la marca <BODY> es la de mostrar los objetos (texto, imágenes, sonidos, apliques, etc.) de la página.

La sintaxis correcta del elemento <BODY> es la siguiente:


<b><BODY>
 Contenido del documento
 </BODY></b>

DIV
La etiqueta div sigue funcionando exactamente igual que lo hacía hasta el momento. Lo usaremos para definir bloques sin ningún tipo de significado, normalmente bloques que usaremos para maquetar correctamente la página o para agrupar elementos en principio sin querer dar un significado específico. Este etiqueta era la más usada en HTML 4 y nos servía tanto para representar un artículo como para la cabecera o el pie de la página usando tan solo el atributo id para diferenciarlos sin dar significado ninguno a los contenidos.
Article 
Esta etiqueta será usada para representar un contenido específico de nuestra web. Puede representar un artículo, ya sea un artículo de opinión, un entrada en un blog, un comentario en un foro, una noticia, una descarga, o simplemente un contenido estático de una web como el típico quienes somos o a qué nos dedicamos. Para que entendáis mejor esta etiqueta, la usaremos para representar el contenido típico que se publica en una RSS.
Por lo tanto, este tipo de contenido tiene un alto valor semántico ya que aporta información relevante dentro de nuestro documento. Este elemento debería tener principalmente un título (un header con un h1-h6) y podría tener un footer (con la fecha de publicación, el autor o cualquier otra información adicional) y un cuerpo con el detalle.
Por ejemplo, en el caso de mostrar un listado de noticias, lo que estaremos listando será un listado de elementos article.
Section 
La etiqueta section es quizás la más difícil de comprender. En principio se usa para representar un bloque de nuestra página que tiene valor semántico, es decir, que aporta un significado a la página. Realmente si tenemos que clasificar por la importancia del significado, el ranking sería: article sería la etiqueta que contiene la información más relevante, section la que contiene información menos relevante, y div que contiene información que no aporta significado ninguno.
Bien, vamos a intentar poner ejemplos de uso:
  • Listado de noticias: Antes hemos comentado que un listado de noticias será un listado de elementos article, pero, ¿cómo representamos este listado? Pues la mejor forma será con la etiqueta section. Este listado quedaría aproximadamente.

<section>
 <header><h1>Listado de noticias</h1></header>
 <article><header><h2>Noticia 1</h2></header></article>
 <article><header><h2>Noticia 2</h2></header></article>
 <article><header><h2>Noticia 3</h2></header></article>
 </section>

  • Bloque principal de la página: Imaginaros por ejemplo una portada que tiene una zona destacada en la que se muestra una introducción. Este bloque de contenido podría ser perfectamente un bloque section.
  • Separar elementos dentro de un artículo: Cuando se trata de un artículo muy completo podríamos estructurar la información por secciones. Por ejemplo, un articulo separado en Introducción, Desarrollo y Conclusión estaría formado por 3 section, uno para cada bloque. Igualmente podríamos usarlo para agrupar una galería de imágenes asociada al contenido o incluso un listado de enlaces relacionados directamente con el artículo.

<article>
 <header><h1>Artículo</h1></header>
 <section><header><h2>Introducción</h2></header> …TEXTO … </section>
 <section><header><h2>Desarrollo</h2></header> …TEXTO … </section>
 <section><header><h2>Conclusiones</h2></header> …TEXTO … </section>
 <section><header><h2>Galería de imágenes</h2></header> …TEXTO … </section>
 </article>

</div>
<div>
NAV
Otro elemento bastante típico y común en muchas páginas web es la zona de navegación, formada por enlaces a las zonas principales de la web, o por un menú de navegación, desplegable de enlaces, etc. Por lo visto Html5 interpreta que es una zona que deberíamos identificar y ha creado para ello la nueva etiqueta <nav>, con su respectiva etiqueta de cierre, claro, </nav>.
</div>
<div style="text-align: left;"><nav>
 <ul>
 <li><a href="cursohtml.html">Curso de Html5</a></li>
 <li><a href="cursocss.html">Curso de CSS</a></li>
 <li><a href="cursojavascript.html">Curso de Javascript</a></li>
 </ul>
 </nav></div>
<div style="text-align: left;">

Aside

El Elemento HTML Aside (<aside>) representa una sección de una página que consiste en contenido que está tangencialmente relacionado con el contenido que le rodea, que podría ser considerado independiente de ese contenido. Estas secciones son a menudo representadas como barras laterales o como inserciones y contienen una explicación al margen como una definición de glosario, elementos relacionados indirectamente, como publicidad, la biografía del autor, o en aplicaciones web, la información de perfil o enlaces a blogs relacionados.

H1 – H6

Delimitar las cabeceras de secciones de distinta importancia dentro del texto, aunque en la practica se han usado para destacar titulos con tipos de letra variables y estilo negrita.

Se contempla seis cabeceras distintas idetificadas por la letra “H” y seguidas por un numero. Asi, <h1> se usaría para el títulode más nivel y <h6> para el de menor. Normalmente las cabeceras fuerzan un salto de linea cuando se cierran, por lo que no es necesario insertar un <p> o bien un <br /> tras ellas.
 El aspecto de las cabeceras se modifica con los mecanismos proprios de las hojas de estilo.

HEADER Y FOOTER

 Cabecera y pie de un documento HTML 5. La directiva <header> puede contener titulos, subtitulos, información de la versión, los controles de navegación, etc…
 La cabecera <header> no se puede colocar dentro de un <footer> , <address> u otra <header>

FORMATEO DE TEXTO EN HTML

 Negrita <b> </b>
 Itálica o cursiva <i> </i>
 Subrayado <u> </u> tener cuidado con su utilización ya que puede confundirse con enlaces.
 Supraíndices <sup> </sup>
 Subíndices <sub> </sub>

Párafo <p> </p>

Utilización del atributo align (etiqueta atributo)
 <p align=”center”> </p>
 <p align=”right”> </p>
 <p align=”left”> </p> (valor por defecto)

COLOR, TAMAÑO Y TIPO DE LETRA

 Fuente <font> </font> HOJAS DE ESTILO CSS
 Atributo face. Tipo de letra va entre comillas porque se pueden definir varios
 Atributo size. Tamaño de letra puede ser del 1 al 7
 Atributo color. .

HOJAS DE ESTILO

<link rel=”stylesheet” href=“nombre.css”>

Acerca del autor: Rodrigo Paszniuk

Ingeniero Informático, amante de la tecnología, la música, el ciclismo y aprender cosas nuevas.

Posts Relacionados

  • Google Google Web Designer, editor HTML5 para la creación de contenido
  • pure-css-framework Pure, Framework CSS de Yahoo!
  • web2-0 Plantillas HTML5/CSS3 Responsive gratuitas o casi