html

1. Etiqueta <header>

2. La etiqueta header sirve para
mostrar información de cabecera
útil para un documento u otras
secciones principales.

3. Típicamente se utiliza para agregar encabezados, es
decir, h1-h6 que definen el título y subtítulos de la
sección, aunque también se puede utilizar para dar
información sobre fechas de publicación, versiones
del contenido mostrado, o enlaces de navegación
dentro del documento (por ejemplo, enlaces a la
home, información de contacto, o al mapa web de
una página). A pesar del nombre de la etiqueta, ésta
no tiene porque ir situado al principio del HTML, sino
que puede estar posicionado en cualquier posición
dentro de nuestro documento.

4. <header>!
<h1>Blog:
cundweb.blogspot.com</h1>!
<p>Clase de diseño web</p>!
</header>

5. Etiqueta <div>

6. La etiqueta <div> se utiliza
para definir una sección
dentro del documento.

7. Esta etiqueta se usa comúnmente para
agrupar un bloque de elementos, para
luego añadirle un estilo determinado.

8. <div style="color:red">!
<h3>Grupo 1</h3>!
<p>Este bloque tiene definido el
texto de color rojo.</p>!
</div>!
<div style="color:green">!
<h3>Grupo 2</h3>!
<p>Este bloque tiene definido el
texto de color verde.</p>!
</div>!

9. Atributos de la
Etiqueta <div>

10. class

11. nombre de la clase
Asigna un nombre de clase.
El atributo class actúa:
• Como selector para las hojas de
estilo(CSS), cuando se asigna
información de estilo a un conjunto de
elementos.
• Para procesos generales por parte del
usuario.

12. id

13. nombre
Asigna un nombre a un elemento.
El atributo id actúa:
• Como selector para las hojas de estilo(CSS).
• Como vínculo destino para vínculos de
hipertexto.
• Como medio de hacer referencia a un
elemento en particular desde un script.
• Como nombre de un elemento object
declarado.
• Para procesos generales por parte del
usuario.

14. style

15. estilo
Este atributo especifica
información de estilo para el
elemento actual.

16. title

17. nombre
Este atributo ofrece información
consultiva sobre el elemento
para el cual se establece.

18. dir

19. ltr o rtl
Especifica la dirección del texto.
Valores posibles:
•ltr : De izquierda a derecha (left to right).
•rtl : De derecha a izquierda (right to left).

20. lang

21. código de lenguaje!
!
Especifica el idioma base de los valores de los atributos y del texto
contenido en un elemento.
!
El atributo lang es útil para:
!
• Ayudar a los motores de búsqueda.
• Ayudar a los sintetizadores de voz.
• Ayudar al agente de usuario a hacer decisiones sobre separación de
palabras, ligaduras, y espaciado.
• Ayudar a los verificadores de ortografía y gramática.

22. etiqueta <nav>

23. Nueva semántica
con HTML 5

24. Una de las grandes innovaciones de
HTML5 ha sido la de introducir
semántica en nuestro código html de
forma que de nuestra web se pueda
extraer más información de la que
ofrecemos mediante nuestros
contenidos.
Vamos a centrarnos un poco en
como trabajábamos hasta ahora, por
ejemplo, a la hora de hacer un
menú:

25. <div class="menu">!
<ul>!
<li><a href="seccion1.html">ir a sección 1</li>!
<li><a href="seccion2.html">ir a sección 2</li>!
<li><a href="seccion3.html">ir a sección 3</li>!
<li><a href="seccion4.html">ir a sección 4</li>!
</ul>!
</div>

26. Esto que vemos es una lista de enlaces, y será
el menú principal de nuestra web. Hasta el
momento con html4 no podíamos diferenciar
entre estos enlaces que formaban el menú de
nuestra web, con un enlace externo
relacionado con, por ejemplo, una noticia de
nuestro portal.
!
La idea de html5 es darle semántica a nuestro
código, es decir, dar significado al mismo.

27. <nav>!
<ul>!
<li><a href="seccion1.html">ir a sección 1</li>!
<li><a href="seccion2.html">ir a sección 2</li>!
<li><a href="seccion3.html">ir a sección 3</li>!
<li><a href="seccion4.html">ir a sección 4</li>!
</ul>!
</nav>

28. De esta forma estamos diciendo, de una
forma transparente a los visitantes de nuestro
sitio web, que esa lista de enlaces es nuestro
menú de navegación.
Ahora la pregunta es, realmente, ¿para qué
sirve todo esto?

29. Evidentemente, el darle significado a las cosas solo tiene sentido
si luego hay alguien que es capaz de interpretar ese significado
(sino sería como hablarle a los sordos por teléfono). En nuestro
caso, los motivos pueden ser desde un mejor posicionamiento
SEO (mientras más información le demos a los rastreadores más
información podrán sacar de nuestros sitios), hasta una mejor
interpretación de los lectores para ciegos u otros tipos de
software similares.
La nueva lista de elementos que tenemos en html5 es:

30. !•!section!
!•!nav!
!•!article!
!•!aside!
!•!hgroup!
!•!header!
!•!footer!
!•!time!
!•!mark!

32. etiqueta <section>

33. La etiqueta <section> y su correspondiente etiqueta
de cierre </section> se utilizan para encerrar el código
correspondiente a una sección genérica dentro de un
documento o aplicación. Normalmente, un bloque de
texto al que perfectamente le podríamos colocar un
título o encabezado. Además, todo el contenido que
engloba ha de guardar cierta relación entre sí.

34. etiqueta <aside>

35. 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.

37. etiqueta <article>

38. 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.

39. 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.