Conceptos básicos de HTML

¿QUE ES HTML?

 HTML significa Lenguaje de Marcado de Hiper Texto (Hiper Text Markup Language), es decir, utilizar este lenguaje nos sirve para etiquetar un texto a fin de que un software reconozca cada una de las partes de las que se compone la estructura de dicho texto.

El software que lee este tipo de lenguaje se llama navegador y seguro que estás utilizando uno de ellos para leer esta entrada de blog. Chrome, Firefox y Safari son algunos de ellos, por mencionar los más comunes.

Etiquetas de estructura

En el código de arriba lo primero que vemos es una etiqueta que dice , esto es un estándar internacional que le dice al navegador: Oye, lo que viene es puro HTML, ¿vale?. Luego, verás de nuevo y es aquí donde realmente empieza el código HTML.

Posteriormente vemos otras etiquetas que sirven para dar estructura al documento, como que nos muestra información de cabecera (el título que se ve en el navegador o el iconito que sale en la pestaña, conocido como favicon). Y justo después está donde va toda la información de la web.

Hay otras etiquetas que nos van a servir para especificar la estructura de nuestro documento, por ejemplo:

<footer> – sección inferior, con íconos de redes sociales, por ejemplo

<nav> – menú de navegación de la web

<aside> – barra lateral

Etiquetas de bloque

Las etiquetas de bloque tienen un espacio hacia arriba y hacia abajo de lo que muestra la etiqueta. Es decir, no se pueden poner uno justo a un costado del otro, sino que inevitablemente tendrá una línea de ruptura (como cuando damos ‘Enter’). Vemos en el ejemplo de arriba:

<h1> – encabezado de nivel 1

<h2> – encabezado de nivel 2

<p> – etiqueta de párrafo

Hay otras más que también entran en esta categoría y que, para no extendernos tanto, ya no veremos, pero existe <div> para contener bloques de información o <table> que sirve para hacer una tabla con datos.

 

 Etiquetas en línea

Este tipo de etiquetas, como su nombre lo dice, son las que van “en línea” con el resto del texto, es decir, no generan una nueva línea ni separación con el resto del contenido.

Para entender mejor estas etiquetas, basta decir que son las que nos ayudan a dar formato al texto: ponerlo en negritas, cursivas, tacharlo, etc. Aquí van las más populares:

<strong> – destaca una parte del texto

<em> – enfatiza en cursivas una parte del texto

<del> – muestra un texto tachado

<a> – permite generar un vínculo (link)

Ejemplos de este tipo de etiqueta los hemos visto a lo largo de este artículo. Tenemos texto en negritas, cursivas, tachado, de código y con un vínculo.

Antes, también se utilizaba <b> para negritas, así como <i> para cursivas, pero según el estándar internacional esto ya no es recomendable, pues aunque pareciera que tienen la misma función, estas etiquetas antiguas no estaban pensadas para la accesibilidad de las nuevas plataformas. Es decir, un código <b> en un navegador para ciegos no va a destacar el texto como sí lo haría un <strong>.

 Estándares HTML

Ya que estamos hablando de la accesibilidad y estándares internacionales, es imposible no hablar de una herramienta de documentación muy útil, que aunque no es la oficial del World Wide Web Consortium (W3C), casi lo parece: W3Schools.