Etiquetas básicas introductoras al html5

Etiquetas básicas introductoras al html5

Print Friendly, PDF & Email
Etiquetas básicas introductoras al html5
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.

Entradas relacionadas:

Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.
- 588
El uso de tablas html es un clásico dentro del mundo web.  Se usan como recurso para introducir datos en un documento web y nunca para maquetar. ¡O así debería ser! Veamos thead, tbody, tfoot, caption...
Imágenes en html: la etiqueta img
- 358
Hoy en día se nos hace difícil imaginar aquellas primeras páginas web sin imágenes. La etiqueta de html se propuso por primera vez en 1993 por Marc Andreessen. En esta entrada presentamos la etiqueta...
Como hacer espacios en blanco con html
- 121
Has intentado separar palabras en blanco pulsando el espaciador? Seguramente has comprobado que no funciona. En esta publicación vemos un ejemplo de como se debe hacer con HTML.
Factores que afectan al tiempo de carga de una página web
- 256
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Creación de formularios html
- 543
En esta entrada repasamos las etiquetas html imprescindibles para escribir formularios así como los atributos más importantes de todos.
Como indicar a Google la modificación y corrección de contenidos mediante html
- 62
Cuando escribes contenidos en Internet es inevitable cometer errores. ¿Sabes como corregirlos semánticamente para que los navegadores se enteren de que has escrito una corrección o actualización?
Etiquetas audio y video de html5
- 25
Resumen de clase de las etiquetas audio y video html5. Apuntes html del certifiado de profesionalidad IFCD01110
Introducción al HTML
- 533
El HTML es un lenguaje de marcado que constituye uno de los pilares de la web. Es un idioma que se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir contenido y es...
Mapas de imagen en html
- 265
Los mapas de imágenes son una funcionalidad HTML para las imágenes muy curiosa que permiten definir diferentes enlaces asociados a distintas zonas de una misma imagen. A pesar de haber caído en desuso...
Listas ordenadas, no ordenadas y de definiciones en HTML y listas anidadas
- 547
Una lista html es una relación de datos agrupados y que tienen una temática en común. Las listas pueden ser ordenadas, no ordenadas y de definiciones. Veamos en este escrito como es su sintaxis, que a...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.