¿Qué es HTML y para qué sirve?

HTML es el lenguaje con el que se define el contenido de las páginas web. Corresponde a las siglas en inglés de Lenguaje de Marcado de Hipertexto, básicamente son un conjunto de etiquetas que el navegador interpreta y se emplean para definir el texto y otros elementos que compondrán una página web, como imágenes, listas, tablas, vídeos, etc.

El lenguaje HTML sirve para describir la estructura básica de una página y organizar la forma en que se mostrará su contenido, además de que HTML permite incluir enlaces hacia otras páginas o documentos.

Hay que mencionar que el HTML no es un lenguaje de programación, ya que no cuenta con funciones aritméticas, variables o estructuras de control propias de estos lenguajes, por lo que el HTML únicamente sirve para crear páginas web estáticas. Sin embargo, este lenguaje es muy útil ya que combinado con otros lenguajes de programación obtenemos páginas web dinámicas como las que conocemos hoy en día.    

Historia del HTML

El HTML nace en 1980 cuando el científico Tim Berners-Lee propuso un nuevo sistema de hipertexto para compartir documentos. Surge ante la necesidad de encontrar documentos que te aporten información relacionada con el tema que necesitas y que, además, puedas acceder a ellos desde cualquier parte del mundo. 

Es por ello por lo que un grupo de expertos con Berners-Lee de cabecilla deciden crear un nuevo proyecto: el World Wide Web (WWW). Una de las bases de este proyecto es el lenguaje HTML, que como ya hemos mencionado permitirá que cada uno de los documentos que están en internet tengan un formato unificado y que le dé una estructura. 

La forma de hacerlo es a través de etiquetas con un orden determinado. Recordemos que este lenguaje sólo podrá ser procesado por un navegador como los que usamos a diario, como el que posiblemente estés empleando ahora para leer este artículo. Los más conocidos son Safari, Chrome, Firefox y Opera, entre otros.

¿Qué son las etiquetas HTML?

El lenguaje HTML está compuesto por etiquetas. Estas son fragmentos de texto rodeados por corchetes cuyo uso es escribir el código HTML. Se delimitan usando paréntesis angulares (“< >”) de la siguiente forma: <etiqueta>. Las etiquetas se utilizan para describir algo que se quiere representar en una página web, su apariencia.

Tipos de etiquetas

El HTML tiene definidas gran variedad de etiquetas para distintos usos en este artículo te vamos a explicar las más esenciales.

1. Etiquetas de apertura.  → Son el inicio. Indican dónde comienza el elemento o donde comienza a tener efecto. Consisten en el nombre del elemento encerrado entre los corchetes angulares.
2. Etiquetas de cierre.  → Son lo mismo que las etiquetas de apertura, pero estas indican donde finaliza el elemento. Además, se diferencian de las otras ya que antes de escribir el elemento entre los corchetes, debemos escribir una barra diagonal “/ ”.
3. Etiqueta de sección superior.  → Esta etiqueta indica la parte superior del texto o encabezado.
4. Etiquetas de título. → Se usa para indicar que lo que se pondrá a continuación es el título de la página web. 
5. Etiquetas de cuerpo.  → Esta etiqueta indica la parte del cuerpo o desarrollo del texto.
6. Etiqueta de sección inferior. → Indica la parte inferior del texto. Puede ser una conclusión o la parte con iconos de redes sociales.
7. Etiqueta de título.  → Título o encabezado de la página.
8. Etiqueta de subtítulo.  → Título de nivel 2 o subtítulo.
9. Etiqueta de apartado.  → Subapartado. También hay <h4>, <h5>, <h6>…
10. Etiquetas de párrafo.   → Hace que cada elemento o texto aparezca en una nueva línea agrupado.
11. Etiquetas de negrita.  → Sirven para que el texto que encierran se encuentre resaltado.
12. Etiquetas de cursiva.   → Los elementos que encierra aparecen en cursiva.
13. Etiquetas de imagen.  → Se emplea para insertar una imagen en la página en el lugar donde se quiere incluir. ¡Cuidado! Esta etiqueta no necesita una de cierre.
14. Etiquetas de tachado.  → Los elementos que encierra aparecen tachados.
15. Etiquetas de enlace  → Permite generar un vínculo o link.

Cada una de las etiquetas debe acabar con su equivalente de cierre. Debemos tener claro que es muy importante que por cada etiqueta que abramos, deberemos incluir la correspondiente etiqueta de cierre. Así conseguiremos un código HTML bien formado y que los navegadores puedan interpretar sin espacio a error ni ambigüedad.

Ejemplos

Un ejemplo del uso de los títulos y subtítulos podría ser:

<h1>Esta es una etiqueta H1. Utilízala como título principal del documento</h1>
<h2>Esta es una etiqueta H2. Utilízala en los encabezados de secciones.</h2>
<h3>Esta es una etiqueta H3. Utilízala en sub-secciones, un H2 por ejemplo puede tener diferentes sub-secciones</h3>
<h4>Esta es una etiqueta H4. Utilízala en sub-sub-secciones</h4>
<h5>Esta es una etiqueta H5. No se usan muy a menudo</h5>

HTML VIEWER:

Un ejemplo sencillo de código HTML básico podría ser:

<!DOCTYPE html>
<html>
	<head>
		<title>Este es el título que se vemos en las serps o las pestañas del navegador</title>
	</head>
	<body>
		<h1>Título principal del documento</h1>
		<h2>Subtítulo</h2>
    <p>Párrafo</p>
    <ul>
      <li>Elemento de lista desordenada</li>
    </ul>
    <ol>
      <li>Elemento de lista ordenada</li>
    </ol>
    <p>Este es un ejemplo de<strong>texto destacado</strong>, <em>texto en cursiva</em> y <del>texto tachado</del>. También veremos cómo es un <a href="#">vínculo</a>.</p>
    <p>Finalmente, vamos a poner una imagen</p>
    <a href="https://www.vadavo.com/" target:"_blank" class="imagen">
      <img src="https://www.vadavo.com/blog/wp-content/uploads/2023/07/Que-es-html-y-para-que-sirve.jpg" height="100px"/>
    </a>
	</body>
</html>

Y con estas etiquetas al abrirlo en un navegador mostrará en la pantalla lo siguiente:

Errores en las etiquetas

Si abrimos una etiqueta y esta no tiene su correspondiente cierre, estaríamos ante un código HTML mal construido, y esto los navegadores lo pueden interpretar de distintas maneras. 

Ejemplo:

Si quiero poner por html un title h2 llamado «buenos días», debo abrir y cerrar la etiqueta, es decir <h2>Buenos días</h2> Si me olvido del cierre </h2> no se mostrará.

Al abrir un HTML mal construido nos puede mostrar lo siguiente:

• Una página de error
• Que el navegador se quede en blanco
• La página tal y como esperábamos sin aparente error

Documento HTML

Cuando conocemos las etiquetas necesarias para crear una estructura básica de HTML debemos saber dónde escribirlas y cómo abrirlas para tener una página web.

Tenemos que crear un documento HTML, este es un archivo con una extensión .html, para ello abrimos el desarrollador de texto más simple que tengamos como puede ser el Bloc de notas, Gedit o TextEdit y ahí procederemos a escribir el texto y las etiquetas necesarias para la creación de una página.

HTML y CSS: Una combinación indispensable

Aunque HTML es el lenguaje fundamental para construir páginas web, no puede funcionar solo si queremos crear sitios web visualmente atractivos y funcionales. Aquí es donde entra en juego CSS (Hojas de estilo en cascada), un lenguaje que permite controlar el estilo y la presentación de las páginas web.

Mientras que HTML se encarga de la estructura y el contenido, CSS se ocupa de la presentación. Permite controlar aspectos como el color, la tipografía, el espaciado, el tamaño y la disposición de los elementos en la página.

El uso conjunto de HTML y CSS nos permite separar la estructura y el contenido de la presentación, lo que facilita la gestión y el mantenimiento de los sitios web. Además, el uso de CSS permite crear diseños responsivos que se adaptan al tamaño de la pantalla del dispositivo del usuario.

Recursos para aprender HTML

Existen numerosos recursos en línea para aprender HTML, tanto gratuitos como de pago. Algunos de los más populares son:

• Mozilla Developer Network (MDN): Ofrece una amplia variedad de tutoriales y guías para aprender HTML, CSS, JavaScript y otros aspectos de la creación de páginas web.
• W3Schools: Una de las fuentes más respetadas y utilizadas para aprender HTML y otros lenguajes web.
• Codecademy: Esta plataforma de aprendizaje interactivo ofrece un curso gratuito de HTML y CSS para principiantes.

Al final, HTML es la columna vertebral de la web y un conocimiento indispensable para cualquier persona que quiera dedicarse a la creación de páginas web, ya sea de manera profesional o como hobby.

La práctica constante es esencial para dominar HTML, así que te animamos a que vayas probando y experimentando con las etiquetas y las estructuras que hemos presentado en este artículo. No tengas miedo a cometer errores, incluso los programadores más experimentados los cometen y son una de las mejores formas de aprender.

Conclusión

Ahora que ya has visto cómo crear una estructura básica HTML de una web, ha llegado el momento de que utilices el código mostrado y pruebes a ir añadiendo nuevas etiquetas, para seguir construyendo y aprendiendo.

Esperamos que este post te haya servido de ayuda. Si quieres aportar algo o tienes cualquier duda, por favor, ¡no dudes en dejarnos un comentario! 😉