comment 0

Curso de programación web desde cero: Clase 2

HTML 5: etiquetas semánticas básicas

(Lo lees en 5:47)

En esta tercera clase del curso de programación web desde cero de Incoming Startup, vamos a ver un poco más en detalle el lenguaje semántico HTML y su última versión, la que usamos actualmente, que no es otra que HTML5.

Qué es HTML 5

Antes de comenzar, sería recomendable dar un rápido vistazo a lo visto anteriormente sobre HTML en nuestra segunda clase.

HTML5 es la última versión revisada y estandarizada para utilizar el lenguaje semántico en la web moderna, y su filosofía es adaptar el lenguaje al contenido de la web moderna, incluyendo muchas etiquetas más específicas que antes no eran necesarias pero ahora son muy útiles como la etiqueta <nav> con la cual le indicamos al navegar cuál es nuestra barra de navegación.

Además de incluir nuevas etiquetas, también incluye etiquetas para reproducción multimedia como <audio> y <video>.
Pero no solo eso, ya que también nos permite escribir archivos locales de nuestros usuarios de hasta 5MB evitando las odiosas cookies,etc.

Algunas etiquetas de HTML 5 básicas

Logo de HTML 5 semántica

Logo de HTML 5 semántica

Este es un curso básico, y por lo tanto no podemos ver todas las etiquetas existentes en HTML 5. El objetivo del curso es que aprendas las bases para que, practicando, seas capaz de crear aplicaciones y páginas web.
Eso si, recuerda que puedes consultar todas las etiquetas HTML5 y las recomendaciones para HTML5 de la W3C: aquí.

La W3C es el World Wide Web Consortium, una comunidad internacional, cuya función y objetivo es garantizar el crecimiento de la web a largo plazo, dentro de un estándar.

Pero sí debemos conocer y usar las más importantes ya que, recuerda, es vital que el navegador tenga la información necesaria para interpretar correctamente nuestras páginas y aplicaciones web.

Las etiquetas semánticas más importantes en HTML5 son:

<header>: con la etiqueta semántica header, le indicamos al navegador cual es la cabecera de nuestra web. Aunque también podemos establecer varias cabeceras dentro de nuestra web. En muchos sitios web se coloca el logo en el header, y la barra de navegación, formularios de búsqueda,etc.

<nav>: con la etiqueta nav le indicamos cuales son nuestros elementos de navegación. Nuestro menú o cualquier elemento que exista para ayudar al usuario a navegar a través de nuestro sitio web.

<section>.: con section indicamos al navegador cuales son las zonas de contenido real de la web. En el caso de un blog, un section puede ser la zona donde se visualizan los artículos. Puede haber varios section en nuestra página, y debemos usarlos por cada tipo de información o contenido. Por ejemplo, imagina que tenemos una web donde tenemos artículos, una zona de galería de fotos, y un reproductor multimedia. Podríamos indicar cada una de estas zonas con un “section”, y le estaremos indicando al navegador que el contenido de nuestra página se divide en esas secciones.

<article>: es un artículo, y son generalmente los elementos que se encuentran dentro de las secciones “section”.

<aside>: Hay una confusión muy importante con la etiqueta aside (y con muchas otras). Realmente aside no se utiliza para los sidebar de una web. Al menos no exclusivamente.
Debemos etiquetar como aside los elementos que no tienen relación directa con el contenido de nuestra página. Por ejemplo, la zona de un blog donde podemos compartir un artículo.

<figure>: la etiqueta figure se utiliza para indicar al navegador un contenido de imagen, un esquema,etc. En definitiva, cualquier contenido visual.

<figcaption>: es un elemento que se utiliza en el interior de un figure y sirve para indicar una leyenda o un texto que apoya o documenta esa imagen o esquema visual de la que forma parte.

<audio> <video>: ambas son las etiquetas por excelencia para incluir elementos multimedia en nuestras páginas. Pero son etiquetas tan importantes que merecen un capítulo especial más adelante.

<footer>: con la etiqueta footer le indicamos al navegador que es el último elemento de nuestra página, el de cierre.

La estructura jerárquica de estas etiquetas serían algo parecido a esto:

Ejemplo estructura HTML 5

Ejemplo estructura HTML 5

Si te fijas en el código HTML que acompaña esta imagen, estamos viendo las etiquetas de la anterior clase junto con las nuevas. Míralas detenidamente, crea tu propia estructura HTML, juega con ella, prueba cosas, intenta añadir nuevas,etc.

A estas alturas de curso, deberías entender y comprender el código de la imagen. Como aclaración: pongo el código como imagen para que tengas que escribirlo, ya que es la mejor forma de aprender, escribiendo, no copiando y pegando.
Si hay algo que no entiendes, léete las clases anteriores, y lo anteriormente comentado en esta. De todas formas ya sabes que responderé todas las dudas que tengas en los comentarios.

Es importante ir cogiendo una buena base de estructura semántica para cuando empieces tus proyectos crear la mejor estructura posible. Para ello es bueno ir empezando a practicar y pensar que estructura harías en determinadas páginas o proyectos web.

Por ejemplo, en incomingstartup.com, la estructura semántica de estas etiquetas HTML5 sería así:

Estructura semántica de Incoming Startup

Estructura semántica de Incoming Startup

En este caso hay una etiqueta header, donde están situados el logo el título de la página. Una zona nav para los menús de navegación y la barra de búsqueda, que en el fondo, es una forma de navegar por la web. Luego, el contenido del blog, va en un section, y de entre de él, todos los artículos, cada uno como un article, los cuales se encuentran encabezados por una imagen catalogada semánticamente como figure.

Inspeccionar elemento y herramientas de desarrollador en navegadores

Ahora que ya conoces los elementos de semántica básica de HTML5, puedes ver como han estructurado el contenido tus webs favoritas, y así averiguar como lo han estructurado. Es una muy buena forma de aprender: ver como lo hacen otros.

Para ello, todos los navegadores tienen herramientas de desarrollador, que permiten, como en este caso, “Inspeccionar elemento”.

Menú contextual en Chrome para inspeccionar elemento.

Menú contextual en Chrome para inspeccionar elemento.

Estas herramientas las iremos viendo en profundidad poco a poco, pero las que nos interesan ahora son las pestañas que muestran el código HTML, que en este caso es “Elements” y los estilos CSS de la página en la pestaña “Styles”, tal y como muestran las siguientes imágenes:

Panel de herramientas de desarrollador en Chrome.

Panel de herramientas de desarrollador en Chrome.

Panel de Elements, donde podemos ver la semántica de la web.

Panel de Elements, donde podemos ver la semántica de la web.

Panel de herramientas para ver los estilos CSS de los elementos.

Panel de herramientas para ver los estilos CSS de los elementos.

One More Thing

Antes de irnos, y como doy por supuesto que vas a practicar, te dejo un tip de Sublime Text, que es el editor de código que uso en la actualidad.
Si usas como editor de código Sublime Text, entre otras cosas, puedes escribir realmente poco:

Expandiendo código en Sublime Text gracias a Emmet.

Expandiendo código en Sublime Text gracias a Emmet.

Si sigues el curso podrás saber como realizar estos trucos tan productivos.

Conclusión

En el post de hoy hemos visto lo que es HTML5 y sus etiquetas semánticas básicas para estructurar la web moderna, e incluso hemos visto el ejemplo de este blog.
También hemos conocido que existen herramientas en los navegadores para ver el código fuente de cualquier página web, lo que nos permite cómo se ha realizado cualquier página web.

Visto lo básico de HTML5, ya podemos ir empezando cosas mucho más interesantes, como nuestros primeros pasos con maquetaciones, los elementos de caja, etc.

Y recuerda que cualquier duda, sugerencia o petición puedes hacerlo en los comentarios, así como cualquier aportación a los temas que se tratan.

Si te ha gustado el artículo, por favor, ayúdame a difundirlo, y si conoces a alguien a quien le pueda interesar aprender programación web desde cero, también. Te estaré muy agradecido :)

¿Has encontrado alguna dificultad en el post de hoy? ¿Qué te ha parecido?

Post relacionados:
Curso de programación web: clase 0
Clase 1, Tu primera web app.
Clase 3, Maquetación web básica.
Clase 4, Id, clases y normalize.
Clase 5, Display block, inline e inline-block.
Clase 6, Position.
Clase 7, Instalando fuentes desde Google Web Fonts.
Clase 8, Fuentes seguras, añadiendo tus propias fuentes a tu proyecto web.

Clasificado como: Código

Sobre el autor

Escrito por

Me llamo Francisco Gallardo , y soy diseñador de productos de software, mobile y web. Soy diseñador de UX, de interfaces y desarrollador web y iOS.

Leave a Reply