Si crees que el desarrollo de contenido en sitios web está pensado para alienígenas encomendados al planeta Tierra a descifrar y crear códigos difíciles que sólo su especie puede entender ¡Es porque aún no conoces HTML! 

Si bien hay lenguajes informáticos más complicados que otros, este no es el caso del HTML. En este artículo te daremos un breve paseo por sus funciones y etiquetas más importantes.

¿Qué es HTML?

HTML son las siglas de “Hypertext Markup Lenguaje”, lo que en español significa “Lenguaje de marcas de Hipertexto”. Internet está compuesto por millones de hipertextos, es decir, enlaces que conectan una página con otra. En este sentido, HTML es un lenguaje de marcado que se utiliza para describir cómo se debe mostrar el texto y las imágenes en una página web. 

HTML no es un lenguaje de programación propiamente, ya que no puede crear una funcionalidad dinámica, por lo tanto, se considera como un lenguaje de etiquetas (tags) que le comunica al navegador cuál es la información que va aparecer en pantalla y qué características tendrá, por ejemplo: resaltados, cursivas, negritas, separaciones, viñetas, entre otros. 

¿Qué son las etiquetas HTML?

Las etiquetas HTML son códigos que se utilizan para darle forma y estructura a una página web a partir del uso de textos (título, párrafos, sombreados), imágenes, vídeos, descripciones específicas, entre otros.

La simbología de las etiquetas HTML son estándar y por lo tanto son adoptadas por todos los desarrolladores web que sin importar el idioma o el origen de la página, cumplen la misma función: darle una instrucción al navegador para que muestre el contenido a los usuarios de una cierta manera.

Por ejemplo, las etiquetas HTML le indican al navegador qué oración debe resaltar en negrita o, de todo el contexto cuál es el título a destacar. El manejo de etiquetas es sencillo de aprender, por lo que no necesitas ser un experto en desarrollo web para configurar una página en cuanto a texto, imágenes, videos, enlaces, documentos, y darle un formato específico a los contenidos.

Elementos de una etiqueta HTML:

Para escribir una etiqueta HTML debes seguir una serie de parámetros que lo distinguen de otros lenguajes. La buena noticia es que estos parámetros se cumplen en todas las etiquetas y por eso su aplicación es más sencilla. Te mostramos un ejemplo: <tipo-de-etiqueta>texto</tipo-de-etiqueta> Pero ¿Qué significan cada uno de estos elementos?

• Símbolos de apertura y cierre: se identifican con los carácteres “menor que” (<) y “mayor que” (>). Entre estos dos símbolos irá el nombre de la etiqueta que queremos que el navegador interprete. Cualquier texto qué esté encerrado de esta manera en un código HTML es una etiqueta. 

Hay modificaciones de estos caracteres que sirven para identificar inicios y cierre. Por ejemplo, cuando se quiere señalar el inicio de un párrafo se utiliza la etiqueta <p>. Terminado el párrafo, la etiqueta HTML cambia a </p>, es decir, se le agrega una barra inclinada (/) para indicar el cierre del mismo. 

• Elemento: es el texto que se encierra en los símbolos mayor qué y menos qué. Siguiendo con el ejemplo de la etiqueta <p>, la letra “p” constituye el elemento. En el caso de la etiqueta . <title>, su elemento sería la palabra “title” (título en inglés). 
• Valor del atributo: se usa para darle una característica muy específica al texto de una página web. Por ejemplo, hay atributos que sirven para indicar el tamaño, color y tipo de fuente del mismo, entre ellos: <font face=”Arial”>. Esta etiqueta nos señala que el texto que verán los usuarios en el sitio web estará en la tipografía Arial.

Listado de etiquetas HTML más importantes

Existen muchas etiquetas de HTML que se encargan de la apariencia, estructura y organización de la información que ven los usuarios en una página web. De hecho, en la actualidad podemos encontrar 142 etiquetas HTML que permiten la creación de varios elementos.

Sin embargo, hay etiquetas que son claves porque garantizan una mejor lectura de la información y ayudan con el posicionamiento web en motores de búsqueda. A continuación, veremos algunas de ellas:

1. <html>…</html>: determina que la raíz de un documento es HTML. Por lo tanto, todos los demás elementos de la estructura HTML deben ser recogidos dentro de estas etiquetas, es decir, tienen que estar al inicio y al final de toda la información que contiene la página web.
2. <head>…</head>: en el head encontramos la información sobre el documento que no se muestra al usuario. Ahí es donde escribimos las metatags fundamentales en el SEO que te explicaremos más abajo. 
3. <title>…</title>: etiqueta usada para definir el título de la página web.
4. <body>…</body>: al contrario que la etiqueta de metadatos <head>, todo lo que quieras mostrar en la página web al usuario debe ir recogido dentro de las etiquetas <body>. 
5. <h1>…</h1> a <h6>…</h6>: las etiquetas h1 se utilizan para señalar el título principal de una página web y a partir de los “h2” se indican los distintos niveles de subtítulos para explicar mejor una información. Son muy importantes porque permiten jerarquizar el contenido.  
6. <p>…</p>: se usa para señalar el inicio y el final de un párrafo que termine en punto y final.
7. <br> sirve para indicar para saltos de línea
8. <ol> </ol>: se usan para crear listas de ítems, por ejemplo, usando viñetas o remuneraciones
9. <mark> </mark>: se usan para resaltar texto un color específico
10. <strong>…</strong>: se usa para poner en negrita una palabra u oración completa:
11. <img>: sirve para añadir imágenes al documento

Meta tags

Las meta tags con códigos en HTML que sirven para darle instrucciones a las arañas web sobre cómo deben indexar la página web al motor de búsqueda. 

Las etiquetas <meta> siempre van dentro del elemento <head> y normalmente se utilizan para especificar el juego de caracteres, la descripción de la página, las palabras clave, el autor del documento y la configuración de la ventana gráfica.

Las metatags son importantes para el posicionamiento web porque el contenido que se encierra en estas etiquetas determinarán cómo van aparecer las páginas de tu sitio web en los resultados de búsqueda. 

Por ejemplo, si publicas un artículo web, cuya “meta description” contiene una palabra clave que suelen usar las personas para dar con el contenido que escribiste, es más probable que tu contenido aparezca entre los resultados de búsqueda, ya que así fue como lo especificaste en las meta tag.

<meta name=”description” content=”….”>: la meta descripción es un resumen breve del contenido de una página web que idealmente no debe exceder 140-160 caracteres.

 <meta name=”keywords” content=”…”>: las palabras o frases clave son las consultas que realizan los usuarios en los motores de búsqueda para buscar información.

 <meta name=”author” content=”…”>: sirven para señalar el autor o creador del contenido de la página web

<link rel=”canonical” href= /…>: sirve para indicarle a los buscadores cuál es la URL correcta que debe aparecer en los resultados y así evitar enlaces duplicados que afecten el SEO.

En definitiva,  HTML es un lenguaje apto para principiantes con una curva de aprendizaje baja. Sus etiquetas son fáciles de entender y aplicar y lo mejor de todo es que son estándares en el mundo de la informática.