Etiquetas básicas introductoras al html5

5
(2)

Publicado

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.

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.

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

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.

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.

Ejercicios recomendados


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

Todavía no hay votos. Sé el primero en valorar la entrada.

  1. Avatar de David
    David

    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.

    1. Avatar de Francesc Ricart

      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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *