El HTML es parte fundamental de las normas web, en conjunto con otras tecnologías como el CSS o el JavaScript. Ya que este lenguaje es la base para construir páginas en Internet, es importante conocerlo para crear nuestras propias webs.

Las páginas web son herramientas de divulgación de información con múltiples fines: desde brindar conocimiento, hasta generar oportunidades de negocio. Sea cual sea el propósito de la tuya, todas ellas tienen en común un lenguaje con el cual son construidas: el HTML.

¿Qué es y para qué sirve el HTML?

HTML son las siglas en inglés para Hypertext Markup Language, que se traduce como lenguaje de marcación de hipertexto.

A pesar de tener un nombre complicado, el HTML no es más que un lenguaje usado para crear páginas webs por medio de marcadores (tags) y atributos, que definen cómo el contenido va a ser presentado en un navegador web.

Seguro te estarás preguntando en este punto: ¿qué es un hipertexto? Este concepto hace referencia a un texto con bloques interconectados, que contienen palabras, imágenes, sonidos, tablas y otros elementos.

Además, pueden tener rutas que apuntan a otros hipertextos, rutas conocidas como los hipervínculos, hyperlinks o links.

La creación de HTML es atribuida a Tim Berners-Lee, uno de los inventores del World Wide Web.

La idea era crear un ambiente en que los científicos tuvieran la posibilidad de divulgar sus investigaciones para que sus colegas los consultaran con relativa facilidad. Berners-Lee acabó creando el HTML como un lenguaje estándar para elaborar esos documentos.

Desde su implementación, en los inicios de la década de los 90, el HTML pasó por diversas mejoras que lo convierten hoy en la base para blogs, ecommerce, redes sociales y todo tipo de páginas accesibles desde un navegador web.

¿Cuáles son los elementos principales del HTML?

Ahora que sabes lo que es el HTML, vamos a ver los principales marcadores que definen las funciones de los elementos que forman parte de la página.

Pero primero es necesario recordar que estos tags son identificadas con un signo de menor que (<), seguido del nombre de la etiqueta y un signo mayor que (>). La mayoría de los tags deben ser cerradas, lo que se hace con un barra (/) entre el signo “<” y el nombre de la etiqueta.

Tranquilo, todo estará más claro con los siguientes ejemplos

Párrafo (<p>)

El tag (<p>)debe abrirse y cerrarse para definir un párrafo.

(<p>)Este es un párrafo en HTML.(</p>)

Encabezado (<h1>), (<h2>), (<h3>), (<h4>), (<h5>), (<h6>)

Las heading tags o las etiquetas de cabecera, ayudan a crear una jerarquía entre las partes del texto, que lo separa en secciones. El < h1 > es el encabezado más relevante, seguido del (<h2>), (<h3>) y así sucesivamente al (<p>), de menor importancia.

(<h1>)Título principal(</h1>)

(<p>)Párrafo de introducción.(</p>)

(<h2>)1. Primer intertítulo(</h2>)

(<p>)Párrafo de la primera sección.(</p>)

(<p>)Otro párrafo de la primera sección.(</p>)

(<h2>)2. Segundo intertítulo(</h2>)

(<p>)Párrafo de la segunda sección.(</p>)

(<p>)Otro párrafo de la segunda sección.(</p>)

(<h2>)3. Tercer intertítulo(</h2>)

(<p>)Párrafo de la tercera sección.(</p>)

(<h3>)3.1. Intertítulo dentro da tercera sección(</h3>) (<p>)Parágrafo de la sección 3.1.(</p>)

(<h3>)3.2. Otro intertítulo de la tercera sección(</h3>)

(<p>)Párrafo de la sección 3.2.(</p>)

Ancla (<a>)

El tag de anclaje define un enlace a otra página. El atributo “href” determina el destino de este link.

<a href=”>https://marketingads.co/wp-content/uploads/2019/01/marketing-ads-logo-34.png>Marketing Ads</a>

Lista de pedidos (<ol>)

style="font-size: 16px !important; color: #000000;"> Se muestra una lista ordenada con elementos numerados. Cada elemento debe estar etiquetado con el tag (<li>) (elemento de la lista).

(<ol>)

(<li>)SEO (</li>)

(<li>)Links patrocinados (</li>)

(<li>)Redes sociales (</li>)

(</ol>)

Lista desordenada (<ul>)

El tag de lista desordenada muestra los elementos como bulletpoints.

(<ul>)

(<li>)Automatización de marketing(</li>)

(<li>)Generación de leads(</li>)

(<li>)Email marketing(</li>)

(</ul>)

Tabla (<table>)

El tag de la tabla muestra información en forma de filas y columnas. Dentro del tag (<table>), usamos los tags (<tr>) para representar las filas, (<th>) para representar los encabezados y (<td>) para representar cada celda.

(<table>)

(<tr>)

(<th>)Nombre(</th>)

(<th>)Sobrenombre(</th>)

(</tr>)

(<tr>)

(<td>)Jonah(</td>)

(<td>)Berger(</td>)

(</tr>)

(<tr>)

(<td>)Ann(</td>)

(<td>)Handley(</td>)

(</tr>)

(<tr>)

(<td>)Neil(</td>)

(<td>)Patel(</td>)

(</tr>)

(</table>)