Qué es el HTML y para qué sirve 【Guía】

---

Si sabes algo de los sitios web seguro que has oído algo sobre HTML y es que, sin HTML, no existiría la web tal y como la conocemos. Todos los sitios web que visitas usan HTML, incluso si tú tienes una web y la estás gestionando, estás usando HTML, aunque no veas ni una sólo línea de código, como por ejemplo si usas algún gestor de contenidos.

---

Qué es el HTML y para qué sirve

TABLA DE CONTENIDOS

• ¿Qué es HTML?
• ¿Cómo funciona HTML?
• ¿Cuál es la estructura de una web HTML?
• Etiquetas HTML más habituales

---

Si sabes algo de los sitios web seguro que has oído algo sobre HTML y es que, sin HTML, no existiría la web tal y como la conocemos. Todos los sitios web que visitas usan HTML, incluso si tú tienes una web y la estás gestionando, estás usando HTML, aunque no veas ni una sólo línea de código, como por ejemplo si usas algún gestor de contenidos.

¿Qué es HTML?

HTML significa HyperText Markup Language, lo que podemos traducir como Lenguaje de Marcado de Hipertexto.

Se trata del lenguaje de marcado que utilizan los sitios web para mostrar todo el contenido, como imágenes, enlaces, texto, listas, etc... y es un estándar, así que se encuentra en el desarrollo de todos los sitios web o al menos, en su gran mayoría.

HTML está limitado, ya que no se trata de un lenguaje de programación propiamente dicho, si no de un sistema de marcado, así que el desarrollo de un sitio en HTML está pensado para páginas estáticas y poco más.

Pero se complementa con CSS y JavaScript, pudiendo crear sitios web dinámicos y adaptables, aunque la estructura de la web siga siendo HTML, que es lo que interpretan los navegadores web.

¿Cómo funciona HTML?

HTML funciona con un sistema de etiquetas para, las cuales se abren y se cierran, para que un navegador web pueda interpretar lo que quiere "decir" el HTML.

Existen etiquetas HTML para realizar muchas indicaciones y no podemos explicarte cada una de ellas aquí, pero si podemos indicarte cómo funciona con algunos ejemplos.

Por ejemplo, si quieres escribir un párrafo la etiqueta que lo define es : p y siempre está acompañada de los símbolos <...>. Para cerrar la etiqueta se añadiría una barra oblicua. Aquí tienes un ejemplo práctico:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Como verás, hemos empezado con la etiqueta p y hemos finalizado con /p. Se abre una etiqueta y se cierra. Esta sería la base de HTML.

HTM está muy unido a CSS y a JavaScript y hoy en día es prácticamente imposible encontrar una web que no tenga CSS o JavaScript o en su defecto otro tipo de lenguaje que complemente al HTML.

• HTML
  El HTML tenemos la estructura de la web y también el contenido. Texto,, dónde poner un enlace, una imagen, etc...
• CSS
  CSS es la hoja de estilos y sirve para definir cómo presentar el HTML en una web. Los espacios entre las tablas, colores, tipografía, etc... Todo eso se define en el CSS. De esta forma, si le dices que un enlace de texto debe de cambiar de color cuando pasa el ratón por encima, en el CSS definirás los colores, mientras que en HTML indicarás dónde está el texto con el enlace.
• JavaScript
  JavaScript es un lenguaje de programación que se utiliza para generar el dinamismo y la integración de los sitios web y que HTML no puede ofrecer. Junto con HTML y CSS es el tercer pilar básico de un sitio web actual.

¿Cuál es la estructura de una web HTML?

Si creas una web con HTML verás que tiene una estructura definida, al menos en su base y si entras en cualquier sitio web, no te costará mucho identificar esta estructura, ya que la llevas viendo desde hace tiempo.

La primera parte es la cabecera o header en inglés. Lo encontrarás en la parte superior de la web y lo más habitual es encontrar el logotipo o nombre de la web, un menú y algún elemento más.

Suele ser un contenido fijo en una web, independientemente de la página o artículo en el que te encentres.

La etiqueta HTML de la cabecera es

y la sintaxis básica sería:

<header>
	---contenido cabecera---
</header>

La segunda parte de una web HTML es el cuerpo o body y es donde encontraremos el contenido principal del sitio.

Si se trata de un sitios de noticias, estarán en el body, si se trata de un blog, los posts estarán en el body y si se trata de una tienda online, lo productos, etc....

La sintaxis básica sería la siguiente:

<body>
	---contenido de la web ---
</body>	

Y por último nos encontraríamos con el pie de página o footer, donde sueles encontrar la forma de contactar con la web o la información de contacto en general, mapas, redes sociales, etc...

También se suelen encontrar los enlaces a los términos y condiciones o la política de privacidad.

La sintaxis del pie de página en HTML es la siguiente:

<footer>
---contenido del pie de página ---
</footer>

Hay que destacar, que en HTML 5 tenemos la etiqueta head, donde encontrarás los enlaces a los archivos CSS y JavaScript, así como el título de la web. La información que se añade en la etiqueta head no se visualiza en la web, sólo es información interna.

La estructura también es muy sencilla:

<head>
---contenido del head ---
</head>

Si juntamos todos esto podemos estructurar el HTML de un sitio web de una forma muy sencilla y básica. Ten en cuenta que, para añadir estilos y dinamismo, habría que crear el archivo CSS y las aplicaciones JavaScript, pero esto podría ser la base HTML de una web:

<!DOCTYPE html>
<html>
  <head>
    <title>Título de la web</title>
  </head>
  <body>
    <header>
      <img src="logo.jpg" alt="Logo web">
      <nav>
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
        </ul>
      </nav>
    </header>
    <main>
      Contenido del sitio web
    </main>
    <footer>
      Enlaces de contacto - Redes sociales, etc...
    </footer>
  </body>
</html>

Como verás, la etiquetas HTML se abren y se cierran, pero dentro de cada una de ellas se puede añadir más etiquetas HTML para estructurar el contenido.

Todo empieza con etiqueta y termina con y dentro encontramos el resto de etiquetas.

Etiquetas HTML más habituales

Existen muchas etiquetas HTML, pero algunas de las más utilizadas y comunes son las siguientes:

• 'html'
  Es la etiqueta principal y define el principio del documento.
• 'head'
  Aquí podemos definir el título de la página y los enlaces JavaScript y CSS. Imprescindible hoy en día.
• 'title'
  El título de la web y el que verán los usuarios en la ventana del navegador web.
• 'body'
  Todo el cuerpo de la web se engloba en esta etiqueta. Texto, imágenes, vídeos, etc...
• 'h1'
  Con los h se define el encabezado de la web y tienen un orden jerárquico. h1, h2, h3, etc...
• 'p'
  Con esta etiqueta añadimos párrafos en le web.
• 'a'
  Los enlaces son imprescindibles en HTML y esta es su etiqueta. Se puede añadir un enlace a un texto, a una imagen...
• 'img'
  Con esta etiqueta podemos añadir imágenes en nuestro HTML. Se puede añadir una URL para definir la ruta de la imagen de una web.

Como imaginarás hay muchas más etiquetas HTML, pero no es posible añadir todas en este artículo.

Recuerda que las etiquetas HTML luego se cierran añadiendo la barra oblicua, como por ejemplo:

<html>
...
</html>

Conclusión

Con HTML se crean las páginas web desde el principio de la World Wide Web.

Como sus capacidades son limitadas y más en los estándares de hoy en día, es necesario combinarlo con nuevas características, como CSS o JavaScript.

La última versión de HTML es la 5 y en cada nueva versión se añaden nuevas funcionalidades para adaptar el sistema de marcado a las necesidades de la web actuales.