Etiquetas básicas introductoras al html5

Etiquetas básicas introductoras al html5

5
(2)

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 básicas introductoras al html5 1
algunas etiquetas básicas útiles y/o típicas html para profundizar y repasar

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.

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 2

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

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

2 Comentarios
  • David
    Publicado a las 07:09h, 01 noviembre Responder

    Buenos dias Francesc.
    Soy David Estradera.
    He comenzado un curso contigo en Santa Coloma de Gramanet y estoy chafardeando en tu página. Concretamente en el tutorial HTML. He picado el programita «Etiquetas recomendadas» pero me dá error. Lo he verificado bien y me sigue dando error.
    Te molesto para preguntarte; Hago bien mirando este tutorial o igual no debería, por ser una publicación del 2012?
    Entendería perfectamente que no me contestaras hasta el lunes. Pero si a pesar de los niños, la mujer, el perro y la suegra… eres otro enfermo que no deja de trabajar nunca y puedes contestar te lo agradeceré y así aprovecho por las noches.
    Gracias por tu tiempo festivo.

    • Francesc Ricart
      Publicado a las 07:30h, 06 noviembre Responder

      Buenos días David!
      Entiendo que te refieres al botón que enlaza aquí? Sigue siendo válido, el html5 no ha cambiado tanto. Es un buen material de consulta una vez ya estás familiarizado con todas las etiquetas.
      Si ves más puntos a mejorar para esto estamos,
      ¡Nos vemos en clase!

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.