¿Qué es y para qué sirve HTML?

HTML es una de las bases del desarrollo web. Cada vez que navegas por internet, HTML esta presente en todos los sitios de internet, ya sea un blog o una tienda online.

Este lenguaje es interpretado por tu navegador y es la base de la que se componen los contenidos de las páginas.

Si te interesa saber más sobre este lenguaje, en este artículo te hablaré sobre su origen, estándares y los elementos que lo componen. También te mostraré cómo puedes añadir o editar HTML en WordPress.

¡Suscríbete a nuestro boletín!

¡No te enviaremos spam, lo prometemos! Enviamos a nuestros suscriptores nuestro contenido en WordPress, hosting, marketing digital y programación.

Enviar

Este campo es obligatorio.

+ Información básica sobre protección de datos

• Responsable:

  RAIOLA NETWORK, S.I. C.I.F.: B27453489 Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo) Telefono: +34 982776081 e-mail: info@raiolanetworks.es

• Finalidad:

  Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.

• LEGITIMACIÓN:

  Consentimiento del interesado y contratación de productos y/o servicios del Responsable

• Destinatario

  No se ceden datos a terceros, salvo obligación legal. Personas físicas o jurídicas directamente relacionadas con el Responsable Encargados de Tratamiento adheridos al Privacy Shield

• DERECHOS:

  Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.

• INFORMACIÓN ADICIONAL:

  Se puede consultar la política de privacidad de forma más detallada aquí.

Ha leído y acepta nuestra política de privacidad *

¡Te has suscrito a nuestro newsletter!

HTML es un acrónimo de Hyper Text Markup Language que, traducido al español, toma el significado de Lenguaje de Marcado de Hiper Texto. De primeras, puede que este nombre te suene como algo muy técnico, así que te voy a explicar en detalle el significado de su nombre:

• Hyper Text: Hipertexto, básicamente, viene a significar un texto que contiene links o enlaces a otros textos. Por ejemplo, cuando navegas por una página web y haces clic en un enlace, eso es un hipertexto. Como dato adicional, el concepto de hipertexto fue acuñado por Ted Nelson en torno a 1965.
• Markup language: Un lenguaje de marcado contiene directrices para escribir o codificar nuestros textos. Estas reglas, que marcan este tipo de lenguajes, pueden afectar a cómo debe ser la estructura de los textos o su formato.

Un error que puedes cometer al empezar con HTML es referirte a él como un lenguaje de programación. Esta afirmación es errónea, pues HTML es un lenguaje de marcado y no de programación. Si quieres ahorrarte miradas de soslayo de los programadores más puristas, evita decir: «He programado una página con HTML».

Ahora que ya has entendido estos conceptos, puedes comprender mejor el significado de HTML. Antes de seguir con la definición técnica, me gustaría explicarte con una analogía la implicación que tiene HTML en el desarrollo web.

Si una página web fuese una persona, HTML sería el esqueleto, el encargado de construir y posicionar la cabeza o definir cuántos brazos o piernas tiene esa persona. Si quisieras que fuera rubia o morena, harías uso del lenguaje CSS, que es el encargado de dar estilo al HTML que construyas. Por último, los lenguajes de programación serían los encargados de dar dinamismo a la persona, dotándola de movimiento y habilidades.

Básicamente, HTML vendría a ser los cimientos del desarrollo web.

Actualmente, HTML es el lenguaje de marcado estándar utilizado para la creación de páginas web. Este lenguaje proporciona una serie de elementos que definen la estructura de un sitio web y pueden ser interpretados por nuestro navegador web.
 

Para hablar sobre el origen de HTML debemos hacer mención a Tim Berners-Lee, quien es considerado el creador de este lenguaje de marcado. Tim trabajaba en el Laboratorio Europeo de Física de Partículas en Ginebra, el CERN.

En este sector la colaboración en esencial y fue este el motivo por el que se le ocurrió una forma novedosa de compartir documentos. Constaba de un formato de texto digital donde se pudiera pasar de una página a otra con sólo hacer clic, disponiendo de enlaces de texto que conectaran directamente con otros documentos relevantes o trabajos de investigación.

Con ese propósito en mente, Tim Berners-Lee comenzó a desarrollar el lenguaje de marcado HTML y todo el sistema que lo hacía funcional. Tras varios prototipos creó lo que hoy conocemos como World Wide Web o red informática mundial.
 

Cuando se desarrolló HTML tuvo una gran acogida, por lo que muchas empresas vieron el potencial y empezaron a desarrollar y comercializar lo que hoy conocemos como navegadores web.

Este hecho dio pie a un gran problema para los desarrolladores web, pues cada navegador interpretaba las páginas web de manera diferente.

Para intentar solucionar esta problemática surgió el World Wide Web Consortium, más conocido como W3C. Este organismo se puso como objetivo estandarizar todo lo relacionado con el ecosistema del World Wide Web que Berners-Lee inventó.

Así surgió la primera versión del estándar de HTML, denominado HTML 2.0. Gracias a ello las páginas web empezaron a tener cierta compatibilidad, pero este estándar fue escaso en contenido, por lo que navegadores del momento como Netscape Navigator o Internet Explorer empezaron a crear su propias etiquetas HTML que solo eran interpretables por su navegador.

Posteriormente ha ido evolucionando en varias versiones. A día de hoy, el estándar utilizado corresponde a la versión de HTML 5 y la similitud en la interpretación del lenguaje HTML entre navegadores ha aumentando considerablemente.

Si quieres consultar todas las etiquetas disponibles y estudiar más a fondo el lenguaje HTML, puedes consultar la web de W3CSchools.

También puedes saber si una determinada página web cumple con los estándares o no a través del validador de W3C.
 

Los elementos de los que se compone HTML se denominan etiquetas. Hoy en día existen alrededor de 140 que pueden ser utilizadas.

Estos componentes se incorporan en un documento HTML. La mayoría están compuestas por una etiqueta de apertura y otra de cierre, aunque existen elementos que carecen de etiqueta de cierre.

Estas etiquetas permiten a los navegadores web entender el contenido de una página e interpretarla de una forma determinada.

Además, algunas de ellas otorgan al contenido un contexto semántico y jerárquico, por lo que es esencial saber utilizarlas correctamente si queremos estructurar de forma óptima nuestra web.

El uso de una buena estructura, jerarquía y unas prácticas correctas de hipervínculos te ayudará a posicionar correctamente tu web ya que los mayores buscadores, como Google, tienen muy en cuenta este aspecto para sus resultados.

Esta tarea suele realizarla un profesional SEO, que realiza un estudio de los contenidos de tu página web y aplica las medidas que vea convenientes. Por ejemplo, puede optimizar la jerarquía de los títulos de un artículo de tu blog.
 

Una etiqueta de HTML esta compuesta por:

• Etiqueta de apertura: Indica el principio de la etiqueta y se escribe entre los símbolos menor que «<» y mayor que » >». Entre la apertura de inicio o apertura se dispondrán los atributos o propiedades de la etiqueta.
  
• Etiqueta de cierre: Indica el final de la etiqueta. Su sintaxis es similar a la apertura de etiqueta, terminando por el signo de mayor que «>», con la diferencia de que el signo del principio, el menor que «<«, va seguido de una barra, es decir «</».
  
  No siempre es necesario indicar la etiqueta de cierre. En algunos elementos bastará con indicar la apertura de la etiqueta.
  Anteriormente, cuando en un elemento no era necesario especificar el cierre de etiqueta, se indicaba añadiendo una barra en la propia etiqueta de apertura justo antes del signo mayor que «/>». Esta práctica actualmente está en desuso.
• Contenido: El contenido es lo que encontramos entre la apertura y el cierre.
  
• Atributos: Los atributos son propiedades que las etiquetas pueden tener. Algunos atributos son exclusivos de ciertas etiquetas. Los atributos se definen con el nombre del atributo, seguido del signo de igual «=» y su valor entre comillas simples o dobles.
  
  En algunos atributos no es necesario que asignemos un valor como tal y bastará con escribir el nombre del atributo.

HTML nos provee de una multitud de etiquetas que podemos utilizar para crear la estructura de nuestra página web. Además, a través de ellas podrás insertar imágenes o mostrar un párrafo o texto.

A continuación te voy listar algunas etiquetas clasificadas, para que te sea más sencillo conocerlas y entenderlas.
 

Algunas etiquetas de estructura aportan a nuestro HTML un sentido semántico. Te permitirán organizar y jerarquizar el contenido, además de mostrar algunos de los elementos más básicos.

Existen dos etiquetas de estructura que cabe mencionar un poco más a fondo: las etiquetas de head y body.

La etiqueta de head contiene metadata o información sobre nuestra página, como el título, el idioma, las hojas de estilos… Mientras que la etiqueta body alberga el contenido principal de nuestra página.

Algunos ejemplos:

• <body>: Define el cuerpo del documento.
• <aside>: Representa una barra lateral.
• <footer>: Indica el pie de página.
• <header>: Representa la cabecera del documento.
• <form>: Contiene un formulario web.
• <p>: Define un párrafo o texto.
• <h1> a <h6>: Permite definir los títulos y su jerarquía.

Las etiquetas de metadatos son textos que no son visualizados por el navegador. Su funcionalidad se basa en aportar información. Para que, por ejemplo, los buscadores puedan entender en qué consiste el contenido de una página, puedes proporcionar información adicional relevante. Un ejemplo de esta etiqueta podría ser la información sobre el autor:

  <meta name="author" content="Pepito Perez">

Te listo algunos ejemplos:

• <meta>: Proporciona información sobre el contenido del documento.
• <style>: Indica los estilos (documentos CSS) que debe insertar la página.
• <title>: Define el título del documento.

Un formulario contiene una serie de etiquetas con las que el usuario puede interactuar. Pueden ser desplegables, cajas de texto que debe rellenar, opciones que puede elegir… Todos estos elementos se encuentran dentro de la etiqueta <form>.

Algunos elementos que puedes utilizar son:

• <input>: Entrada de texto de poca extensión. Haciendo uso de sus atributos, podemos limitar los datos que el usuario puede introducir. Además, podemos indicar el tipo de entrada, como un campo de contraseña.
• <textarea>: Entrada de texto que puede abarcar un gran número de caracteres. Podrías utilizar esta etiqueta, por ejemplo, para que el usuario introduzca una descripción.
• <select>: Permite crear desplegables con ciertas opciones predefinidas.

Son utilizadas en tu documento HTML para aportar algún formato a un elemento; por ejemplo, dar a un texto un formato de negrita.

Algunos ejemplos son:

• <b>: Convierte el texto en negrita.
• <strong>: Destaca un texto.
• <i>: Convierte el texto con estilo itálica.
• <output>: Representa el resultado de un cálculo.

Como su nombre indica, se utilizan para desplegar listas.

Algunas de las etiquetas de lista son:

• <ul>: Representan listas desordenadas. Cada elemento empieza con la etiqueta <li>. Por defecto, se desplegará como una lista con puntos.
• <ol>: Representan listas ordenadas. Puede usar diferente numeración, como decimal o alfabética. Cada elemento empieza con la etiqueta <li>.

Son utilizadas para desplegar tablas. Están contenidas por la etiqueta <table>.

Algunos ejemplos:

• <tr>: Define una fila de la tabla.
• <th>: Determina la cabecera de la tabla.
• <td>: Indica una columna de la tabla.

La etiqueta <script> define un código que será ejecutado. Normalmente esta etiqueta contiene código en Javascript. Si añadimos el atributo src, cargará el script que contenga dicho atributo.
 

La etiqueta <embed> define un contenedor para mostrar un contenido externo.

Algunos ejemplos de etiquetas de este tipo son:

• <audio>: Permite cargar un audio.
• <video>:Permite cargar un video.
• <img>: Carga una imagen. Podemos usar el atributo srcset para cargar diferentes imágenes según su tamaño y que se carguen en función del tamaño de la pantalla.

WordPress es el CMS de código abierto más utilizado en todo el mundo. Con este dato en mente puedes imaginar la cantidad de plugins y temas que tenemos a nuestra disposición. Sin embargo, puede que en alguna ocasión necesites insertar o editar algún código HTML para que quede exactamente como desees.

WordPress proporciona varias opciones que puedes utilizar para añadir o editar tu código HTML personalizado, desde bloques específicos hasta widgets.

A continuación, te muestro diferentes formas para hacerlo.
 

La manera más sencilla y rápida de insertar código HTML es a través del bloque de HTML personalizado. Debes tener en cuenta que, por motivos de seguridad, no todas las etiquetas están permitidas, aunque no deberías tener problema alguno con las más utilizadas.

Aparte de este bloque de WordPress que es específico para inserción de HTML, la mayoría de los bloques permiten la edición de su código. Por ejemplo, podemos ver esta opción en un bloque de imagen.

Los pasos para desplegar esta opción son sencillos:

1. Haz clic en el bloque que quieras editar.
2. Nuevamente, haz clic en los tres puntos.
3. Selecciona la opción de «Editar como HTML». Al seleccionar esta opción se desplegara el código que contiene el bloque.
4. Para volver a editar de forma visual el bloque, repite los mimos pasos pero seleccionando la opción de «Editar visualmente».

La última opción con la que puedes trabajar el código HTML desde Gutenberg puede resultarte algo intimidante al principio, ya que trabajaremos con la totalidad del contenido de la página o entrada en formato HTML.

Para acceder al editor de código deberemos seguir los siguientes pasos:

1. Edita una entrada o página.
2. En la esquina superior derecha, haz clic en los tres puntos.
3. Selecciona «Editor de código». Una vez seleccionada, verás que el contenido de tu página se muestra como un único bloque de código.
4. Para volver a la edición de forma visual, repite el mismo proceso pero seleccionando «Editor visual».

Si tu instalación de WodPress hace uso del editor clásico TinyMCE podrás visualizar y editar tu contenido en formato HTML sin mucha complicación.

Para visualizar el contenido en HTML deberás seguir los siguientes pasos:

1. Desde el editor clásico, selecciona la pestaña que encontrarás en la esquina superior derecha que indica «HTML».
2. Para volver al editor visual simplemente selecciona la pestaña donde se indica «Visual».

A través de los widgets podemos insertar código HTML de forma muy rápida. Esto es especialmente útil para insertar código HTML personalizado en zonas como el footer o sidebar de tu sitio web.

Para realizarlo deberás seguir las siguientes directrices:

1. Desde el menú lateral de WordPress, en tu panel de administración, dirígete a Apariencia->Widgets.
2. Haz clic en el icono de añadir.
3. Busca el bloque de HTML personalizado y arrástralo al espacio de widgets que desees.

Otra alternativa sería usar el editor de temas de WordPress. Esta es una manera rápida de poder personalizar los templates de tu tema o plugins.

Antes de considerar editar los templates deberías de tener en cuenta estas dos consideraciones:

1. Tener instalado un tema hijo, de tal manera que las modificaciones que hagas no sean eliminadas en las actualizaciones que puedan recibir tu tema o plugins.
2. Tener especial cuidado al editar estos templates. Una mala edición puede llegar a romper tu página web. Es aconsejable que, si no tienes mucha experiencia en editar templates, realices una copia de seguridad. En nuestro hosting WordPress, puedes hacer uso de la herramienta JetBackup que permite restaurar un único archivo sin necesidad de restaurar el backup entero.
   

Para acceder al editor de temas puedes seguir los siguientes pasos:

1. En el menú de WordPress, dirígete a Apariencia-> Editor de Temas.
2. En la columna de la derecha, justo debajo de Archivos de tema, selecciona la plantilla que desees editar.
3. Una vez seleccionada, podrás empezar a editar directamente el archivo que desees desde WordPress.

Como has podido leer, HTML es un lenguaje de aprendizaje obligatorio si quieres tener unos conocimientos más profundos de la estructura que conforma las páginas web.

Esto te permitirá ampliar tus habilidades en áreas como el desarrollo o el SEO, haciéndote crecer como profesional del sector.