Etiquetas básicas introductoras al html5

Etiquetas básicas introductoras al html5

Print Friendly, PDF & Email
Valora esta entrada

El escrito de hoy es la continuación de la introducción al html y en él repasaremos las etiquetas básicas html y html5 que debemos conocer.

Existen 2 formas de aprender el html. Uno es ir desde las etiquetas más antiguas y obsoletas hacia las más modernas del html5 o viceversa. Yo soy partidario de aprender html5 directamente y hacer borrón y cuenta nueva de todo lo que ya está deprecated. Y en cualquier caso una vez se domina el stándard actual ya nos preocuparemos de hacer arqueología digital.

¿Quantas etiquetas html hay?

El número de etiquetas existentes y que por lo tanto deberíamos de conocer y saber consultar en un momento determinado viene marcado por el número de etiquetas que decidamos aprender, que en este caso es el html5.

Para dar respuesta a esta pregunta lo más lógico será hacer la consulta en el stándard oficial que marca el W3C. Evitaremos hacer esta consulta en fuentes no oficiales a pesar de que sean muy populares como es el caso de W3Schools.

Y del mismo modo evitaremos consultar fuentes no actualizadas anteriores a la aprobación del stándard de HTML5 el 28 de octubre de 2014.

clasificación de etiquetas oficial según w3c
Clasificacion tipos de etiquetas html según recomendación de 2012 del W3C

Atendiendo a este enlace del W3C (el más actual a la fecha de publicación de este artículo) encontraremos 107 etiquetas en HTML5 sin contar aquellas derivadas de versiones más antiguas como html4.01 y xhtml.

También las encontraréis todas en la documentación para desarrolladores de Mozilla.

Atendiendo al teorema de Pareto, dominando el 20% de las etiquetas deberíamos ser capaces de dominar el 80% del lenguaje de marcado o cualquiera que nos propongamos.

Etiquetas HTML5 y XHTML de contenido recomendadas.

etiquetas html introducción
Etiquetas introductoras al html5

En esta xuleta podéis diferenciar 2 tipos de etiquetas: las que tienen un significado sintáctico para los buscadores y las que no. He intentado agruparlas.

Las etiquetas h1 a h6, blockquote, hr, abbr, strong, cite, em, ins, del tienen significado semántico.

Las etiquetas p,b, i, u, s no aportan valor semántico al documento web.

Si quieres ver lo que hace cada etiqueta abre tu editor de texto favorito (sublime o brackets) y empieza a escribir.

La importancia de dominarlas todas es que cuando estamos escribiendo un documento web diluimos el mensaje que queremos transmitir si abusamos de las etiquetas semánticas. Por ejemplo si una misma keyword aparece 50 veces en un escrito muy largo no tiene sentido que siempre sea <strong>. En función del contexto unas veces será relevante y otras no.

Nota: ¡Si tiene que salir 50 veces usa sinónimos!

Es decir, que unas veces usaremos <strong> y otras alternaremos con <b>

Lo mismo sucede con los textos enfatizados. Sería un error utilizar siempre la etiqueta <em> porqué quisiéramos que el visionado por pantalla fuera en italica. Si la razón fuese meramente estética bien usaríamos la etiqueta <i> o lo hariamos mediante css.

Recordar que el HTML se debe usar para dotar de contenido y estructura a un documento web. No para temas estéticos. La presentación se la dejamos al CSS que ya trabajaremos más adelante.

Observaciones para los que venís de versiones antiguas de HTML

Para los que venís de versiones antiguas de html3.2 y html4 tener en cuenta que en el stándard actual TODAS las etiquetas se escriben SIEMPRE EN MINÚSCULAS.

Para vosotros también, por lo general, todos los atributos decorativos se han quedado obsoletos con el stándard html5. Ejemplos de etiquetas afectadas son <hr>, <body>, <img> (esta no la he explicado todavía) … etc

Así que si muchísimo ojo. Si estás aprendiendo desde cero intenta evitar estos malos hábitos. No me gusta explicar en clase etiquetas y atributos obsoletos porqué es pan para hoy y hambre para mañana.

Como curiosidad también, algunas de las etiquetas que presento en función de lo actualizada que esté la bibliografía que consultéis estarán aceptadas o no.

Ejemplos de ellos son las etiquetas <u>, <i>,<b>

Existen algunas etiquetas que estan deprecated. Etiquetas como <center>, <strike>, <pre>, <font> están obsoletas y no se deben usar.

Si estás empezando…. repito, ¡no las uses! pero apréndelas para poder saber que si lo haces mal por necesidad en alguna ocasión, entonces que sea con conocimiento de causa.

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.