Glosario HTML

¿Qué es HTML? Explicación de los fundamentos del Lenguaje de marcado de hipertexto

que es html

HTML significa lenguaje de marcado de hipertexto, y le permite al usuario crear y estructurar secciones, párrafos, encabezados, enlaces y elementos de cita en bloque (blockquotes) para páginas web y aplicaciones.

HTML no es un lenguaje de programación, lo que significa que no tiene la capacidad de crear una funcionalidad dinámica. En cambio, hace posible organizar y formatear documentos, de manera similar a Microsoft Word.

Cuando trabajamos con HTML, utilizamos estructuras de código simples (etiquetas y atributos) para marcar una página web. Por ejemplo, podemos crear un párrafo colocando el texto encerrado dentro de una etiqueta inicial <p> y de cierre </p>.

<p>Esta es la forma de insertar un párrafo en HTML.</p>
<p>¡Puedes tener más de uno!</p>

En general, HTML es un lenguaje de marcado que es realmente sencillo y fácil de aprender incluso para los principiantes absolutos en la construcción de sitios web.

La historia de HTML

HTML fue inventado por Tim Berners-Lee, un físico del instituto de investigación CERN en Suiza. Se le ocurrió la idea de un sistema de hipertexto basado en Internet.

Hipertexto significa un texto que contiene referencias (links) a otros textos a los que los usuarios pueden acceder de inmediato. Publicó la primera versión de HTML en 1991, que constaba de 18 etiquetas HTML. Desde entonces, cada nueva versión del lenguaje HTML viene con nuevas etiquetas y atributos (modificadores de etiqueta) para el marcado.

Según la Referencia de elementos HTML de Mozilla Developer Network, actualmente hay 140 etiquetas HTML, aunque algunas de ellas ya están obsoletas (no son compatibles con los navegadores modernos).

Debido a un rápido aumento de la popularidad, HTML ahora se considera un estándar web oficial. Las especificaciones de HTML son mantenidas y desarrolladas por el World Wide Web Consortium (W3C). Puedes consultar el último estado del lenguaje en cualquier momento en el sitio web de W3C.

La actualización más importante del lenguaje fue la introducción de HTML5 en el 2014. Se agregaron varias etiquetas semánticas nuevas al marcado, que revelan el significado de su propio contenido, como <article>, <header> y <footer>.

¿Cómo funciona HTML?

Los documentos HTML son archivos que terminan con una extensión .html o .htm. Puedes verlos usando cualquier navegador web (como Google Chrome, Safari o Mozilla Firefox). El navegador lee el archivo HTML y muestra su contenido para que los usuarios de Internet puedan verlo.

Por lo general, el sitio web promedio incluye varias páginas HTML diferentes. Por ejemplo: las páginas de inicio, las páginas de acerca de y las páginas de contacto, todas tendrán documentos HTML separados.

Cada página HTML consta de un conjunto de etiquetas (también denominadas elementos), a las que te puedes referir como los componentes básicos de las páginas web. Crean una jerarquía que estructura el contenido en secciones, párrafos, encabezados y otros bloques de contenido.

La mayoría de los elementos HTML tienen una apertura y un cierre que utilizan la sintaxis <etiqueta> </etiqueta>.

A continuación, puedes ver un ejemplo de código de cómo se pueden estructurar los elementos HTML:

<div>
  <h1>Título principal</h1> 
  <h2>Subtítulo interesante</h2>
  <p>Primer párrafo</p> 
  <img src="/" alt="Imagen"> 
  <p>Segundo párrafo con un <a href="https://ejemplo.com">hipervínculo</a></p>
</div>
  • El elemento más externo es una división simple (<div> </div>) que puedes usar para marcar secciones de contenido más grandes.
  • Contiene un encabezado (<h1> </h1>), un subtítulo (<h2> </h2>), dos párrafos (<p> </p>) y una imagen (<img>).
  • El segundo párrafo incluye un enlace (<a> </a>) con un atributo href que contiene la URL de destino.
  • La etiqueta de imagen también tiene dos atributos: src para la ruta de la imagen y alt para la descripción de la imagen.

Resumen de las etiquetas HTML más utilizadas

Las etiquetas HTML tienen dos tipos principales: de bloque y en línea.

  • Los elementos de nivel de bloque ocupan todo el espacio disponible y siempre comienzan una nueva línea en el documento. Los encabezados y párrafos son un gran ejemplo de etiquetas de bloque.
  • Los elementos en línea solo ocupan el espacio que necesitan y no comienzan una nueva línea en la página. Por lo general, sirven para dar formato a los contenidos internos de los elementos a nivel de bloque. Los enlaces y las cadenas resaltadas son buenos ejemplos de etiquetas en línea.

Etiquetas de bloque

Las tres etiquetas de nivel de bloque que todo documento HTML debe contener son <html>, <head> y <body>.

  1. La etiqueta <html> </html> es el elemento de más alto nivel que encierra a toda página HTML.
  2. La etiqueta <head> </head> contiene información meta como el título y el conjunto de caracteres de la página.
  3. Finalmente, la etiqueta <body> </body> encierra todo el contenido que aparece en la página.
<html>
  <head>
    <!-- INFORMACION META-->  
  </head>
  <body>
    <!-- CONTENIDO DE LA PAGINA -->
  </body>
</html>
  • Los encabezados tienen 6 niveles en HTML. Van desde <h1> </h1> a <h6> </h6>, donde h1 es el encabezado de nivel más alto y h6 es el más bajo. Los párrafos están encerrados por <p> </p>, mientras que las citas en bloque usan la etiqueta <blockquote> </blockquote>.
  • Las divisiones son secciones de contenido más grandes que normalmente contienen varios párrafos, imágenes, a veces citas en bloque y otros elementos más pequeños. Podemos marcarlos usando la etiqueta <div> </div>. Un elemento div también puede contener otra etiqueta div en su interior.
  • También puedes usar las etiquetas <ol> </ol> para las listas numeradas y <ul> </ul> para las que no estén numeradas. Los elementos individuales de la lista deben estar encerrados por la etiqueta <li> </li>. Por ejemplo, así es como se ve una lista básica no numerada en HTML:
<ul>
    <li>Elemento de lista 1</li>
    <li>Elemento de lista 2</li>
    <li>Elemento de lista 3</li>
</ul>

Etiquetas en línea

Muchas etiquetas en línea se utilizan para dar formato al texto. Por ejemplo, una etiqueta <strong> </strong> representaría un elemento en negrita, mientras que las etiquetas <em> </em> lo mostrarían en cursiva.

Los hipervínculos también son elementos en línea que requieren etiquetas <a> </a> y atributos href para indicar el destino del enlace:

<a href="https://ejemplo.com/">¡Clic aquí!</a>

Las imágenes son elementos en línea también. Puedes agregar una usando <img> sin ninguna etiqueta de cierre. Pero también necesitarás usar el  atributo src para especificar la ruta de la imagen, por ejemplo:

<img src="/imagenes/ejemplo.jpg" alt="Imagen de ejemplo">

Evolución de HTML. ¿Qué diferencia hay entre HTML y HTML5?

Desde sus inicios, HTML ha pasado por una evolución increíble. W3C publica constantemente nuevas versiones y actualizaciones, mientras que los hitos históricos también obtienen nombres particulares.

HTML4 (hoy en día comúnmente denominado “HTML”) fue publicado en 1999, mientras que la última versión importante se publicó en 2014. Con el nombre de HTML5, la actualización ha introducido muchas características nuevas en el lenguaje.

Una de las características más esperadas de HTML5 es el soporte nativo para la incorporación de audio y video. En lugar de usar Flash Player, podemos simplemente incrustar videos y archivos de audio en nuestras páginas web utilizando las nuevas etiquetas <audio> </audio> y <video> </video>. También incluye soporte incorporado para gráficos vectoriales escalables (SVG) y MathML para fórmulas matemáticas y científicas.

HTML5 introdujo algunas mejoras semánticas también. Las nuevas etiquetas semánticas le informan a los navegadores sobre el significado del contenido, lo cual beneficia tanto a los lectores como a los motores de búsqueda.

Las etiquetas semánticas más populares son <article> </article>, <section> </section>, <aside> </aside>, <header> </header> y <footer> </footer>. Para encontrar más diferencias únicas, considera la posibilidad de consultar nuestra comparación detallada de HTML y HTML5.

Pros y contras de HTML

Como la mayoría de las cosas, HTML viene con un puñado de ventajas y desventajas.

Pros:

  • Un lenguaje ampliamente utilizado con muchos recursos y una gran comunidad.
  • Se ejecuta de forma nativa en todos los navegadores web.
  • Viene con una curva de aprendizaje plana.
  • Es de código abierto y completamente gratis.
  • Marcado limpio y consistente.
  • Los estándares web oficiales son mantenidos por el World Wide Web Consortium (W3C).
  • Fácilmente integrable con lenguajes de backend como PHP y Node.js.

Contras:

  • Se utiliza principalmente para páginas web estáticas. Para obtener funcionalidad dinámica, es posible que necesites usar JavaScript o un lenguaje de backend como PHP.
  • No le permite al usuario implementar la lógica. Como resultado, todas las páginas web deben crearse por separado, incluso si utilizan los mismos elementos, por ejemplo, encabezados y pies de página.
  • Algunos navegadores adoptan las nuevas características lentamente.
  • El comportamiento del navegador a veces es difícil de predecir (por ejemplo, los navegadores más antiguos no siempre muestran las etiquetas más recientes).

¿Cómo se relacionan HTML, CSS y JavaScript?

Si bien el HTML es un lenguaje poderoso, no es suficiente para construir un sitio web profesional y totalmente responsive. Solo podemos usarlo para agregar elementos de texto y crear la estructura del contenido.

Sin embargo, HTML funciona extremadamente bien con otros dos lenguajes de front-end: CSS y JavaScript. Juntos, pueden crear una rica experiencia de usuario e implementar funciones avanzadas.

  • CSS es el responsable de los estilos, como el fondo, los colores, los diseños, el espaciado y las animaciones.
  • JavaScript te permite agregar una funcionalidad dinámica como controles deslizantes, ventanas emergentes y galerías de fotos.

Puedes ver al HTML como una persona desnuda, CSS como la ropa y JavaScript como los movimientos y gestos.

Entonces… ¿Qué es HTML?

HTML es el lenguaje de marcado principal de la web. Se ejecuta de forma nativa en todos los navegadores y es mantenido por el World Wide Web Consortium.

Puedes usarlo para crear la estructura de contenido de sitios web y aplicaciones web. Es el nivel más bajo de tecnologías de frontend, que sirve como base para el estilo que se puede agregar con CSS y la funcionalidad que se puede implementar mediante JavaScript.

Gustavo B.

Gustavo es un apasionado por la creación de sitios web. Se enfoca en la aplicación de estrategias SEO en Hostinger para España y Latinoamérica, así como la creación de contenidos de alto nivel. Cuando no está aplicando nuevos trucos en WordPress lo puedes encontrar tocando la guitarra, viajando o tomando un curso online.

Agrega un Comentario

Dale clic aquí para dejar un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

¡Comienza a ahorrar hoy mismo!

Alojamientos con todo incluido y nombre de dominio por

0
96
/mes