¬ŅQu√© es HTML? Explicaci√≥n de los conceptos b√°sicos del lenguaje de marcado de hipertexto

HTML son las siglas de Hypertext Markup Language. Permite al usuario crear y estructurar secciones, párrafos, encabezados, enlaces y citas en bloque 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, permite 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 la página de un sitio web. Por ejemplo, podemos crear un párrafo colocando el texto adjunto dentro de una etiqueta de inicio <p> y de cierre </p>.

< p > Así es como se agrega 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 principiantes en la creación de sitios web.

La historia del HTML

El HTML fue inventado por Tim Berners-Lee, 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 (enlaces) a otros textos a los que los espectadores pueden acceder de inmediato. Public√≥ la primera versi√≥n de HTML en 1991, que consta de 18 etiquetas HTML. Desde entonces, cada nueva versi√≥n del lenguaje HTML vino con nuevas etiquetas y atributos (modificadores de etiquetas) 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 al rápido aumento de la popularidad, HTML ahora se considera un estándar web oficial. Las especificaciones HTML son mantenidas y desarrolladas por el World Wide Web Consortium (W3C). Puede consultar el estado más reciente del idioma en cualquier momento en el sitio web del W3C.

La mayor actualización del lenguaje fue la introducción de HTML5 en 2014. Agregó 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 en. extensión html o .htm. Puede verlos luego 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, acerca de las páginas, las páginas de contacto tendrían documentos HTML separados.

Cada p√°gina HTML consta de un conjunto de etiquetas (tambi√©n llamadas elementos ), a las que puede referirse 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 <tag> </tag>.

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

< div >
  < h1 > El título principal </ h1 > 
  < h2 > Una subpartida pegadiza </ h2 >
  < p > P√°rrafo uno </ p > 
  < img src = "/" alt = "Imagen" >   
  < P > El apartado dos con un < un href = "https://example.com" > hipervínculo </ a > </ p > 
</ div >
  • El elemento m√°s externo es una divisi√≥n simple (¬†<div> </div>¬†) que puede 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.

Descripción general de las etiquetas HTML más utilizadas

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

  1. Los elementos a 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.
  2. Los elementos en l√≠nea solo ocupan el espacio que necesitan y no comienzan una nueva l√≠nea en la p√°gina. Suelen servir para formatear el contenido interno de elementos a nivel de bloque. Los enlaces y las cadenas destacadas son buenos ejemplos de etiquetas en l√≠nea.

Etiquetas a nivel 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 nivel m√°s alto que incluye todas las p√°ginas HTML.
  2. La etiqueta <head> </head> contiene metainformaci√≥n como el t√≠tulo y el juego de caracteres de la p√°gina.
  3. Finalmente, la etiqueta <body> </body> encierra todo el contenido que aparece en la p√°gina.
< html >
  < cabeza >
    <! - INFORMACION META ->  
  </ cabeza >
  < cuerpo >
    <! - CONTENIDO DE LA PAGINA ->
  </ cuerpo >
</ html >
  • Los encabezados tienen 6 niveles en HTML.¬†Van de¬†<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 los blockquotes 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 dentro de √©l.
  • Tambi√©n puede usar¬†¬†¬†etiquetas¬†<ol> </ol>¬†para listas ordenadas y¬†<ul> </ul>¬†para¬†listas¬†¬†desordenadas.¬†Los elementos individuales de la lista deben ir encerrados con la¬†etiqueta¬†<li> </li>¬†.¬†Por ejemplo, as√≠ es como se ve una lista desordenada b√°sica 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

Se utilizan muchas etiquetas en línea para dar formato al texto. Por ejemplo, una etiqueta <strong> </strong> mostrarí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 vínculo:

< Un href = "https://example.com/" > Haga clic en mí! </ a > 

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

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

Si desea obtener más información sobre las etiquetas HTML, considere consultar nuestra hoja de trucos HTML completa (que también está disponible para descargar).

Evoluci√≥n HTML. ¬ŅQu√© difiere entre HTML y HTML5?

Desde los primeros d√≠as, HTML ha experimentado una evoluci√≥n incre√≠ble. El W3C publica constantemente nuevas versiones y actualizaciones, mientras que los hitos hist√≥ricos tambi√©n reciben nombres dedicados.

HTML4 (actualmente conocido como ¬ęHTML¬Ľ) se public√≥ en 1999, mientras que la √ļltima versi√≥n principal sali√≥ 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 incrustaciones de audio y video. En lugar de usar Flash Player, podemos simplemente incrustar videos y archivos de audio en nuestras páginas web usando las nuevas etiquetas <audio> </audio> y <video> </video>. También incluye soporte integrado para gráficos vectoriales escalables (SVG) y MathML para fórmulas matemáticas y científicas.

HTML5 tambi√©n introdujo algunas mejoras sem√°nticas. Las nuevas etiquetas sem√°nticas informan a los navegadores sobre el significado del contenido, lo que 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 diferencias m√°s √ļnicas, considere revisar nuestra¬†comparaci√≥n en profundidad de HTML y HTML5.

Pros y contras de HTML

Como la mayor√≠a de las cosas, HTML viene con un pu√Īado de fortalezas y limitaciones.

Pros:

  • Un idioma muy utilizado con muchos recursos y una gran comunidad detr√°s.
  • Se ejecuta de forma nativa en todos los navegadores web.
  • Viene con una curva de aprendizaje plana.
  • De c√≥digo abierto y completamente gratuito.
  • Marcado limpio y consistente.
  • Los est√°ndares web oficiales los mantiene el World Wide Web Consortium (W3C).
  • F√°cilmente integrable con lenguajes backend como¬†PHP¬†y Node.js.

Contras:

  • Se utiliza principalmente para p√°ginas web est√°ticas. Para una funcionalidad din√°mica, es posible que deba utilizar JavaScript o un lenguaje de backend como PHP.
  • No permite que el usuario implemente 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 nuevas funciones lentamente.
  • El comportamiento del navegador a veces es dif√≠cil de predecir (por ejemplo, los navegadores m√°s antiguos no siempre muestran etiquetas m√°s nuevas).

¬ŅC√≥mo se relacionan HTML, CSS y JavaScript?

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

Sin embargo, HTML funciona muy bien con otros dos lenguajes frontend: CSS (hojas de estilo en cascada) y JavaScript. Juntos, pueden lograr una rica experiencia de usuario e implementar funciones avanzadas.

  • CSS es responsable de estilos como fondo, colores, dise√Īos, espaciado y animaciones.
  • JavaScript le permite agregar funciones din√°micas como controles deslizantes, ventanas emergentes y galer√≠as de fotos.

Piense en HTML como una persona desnuda, CSS como la ropa y JavaScript como movimientos y modales.

Entonces ‚Ķ ¬ŅQu√© es HTML?

HTML es el principal lenguaje de marcado de la web. Se ejecuta de forma nativa en todos los navegadores y es mantenido por el Consorcio World Wide Web. Puede usarlo para crear la estructura de contenido de sitios web y aplicaciones web. Es el nivel más bajo de tecnologías frontend, que sirve como base para el estilo que puede agregar con CSS y la funcionalidad que puede implementar usando JavaScript.

Artículos Relacionados

Artículos Destacados

Deja un comentario

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