Código html: qué es y todo lo que debes saber

El término “codigo html” es uno de los más utilizados dentro del ámbito de la programación y, generalmente, se define como el lenguaje que se usa para crear páginas web, pero la realidad es que va mucho más allá de eso y conlleva un proceso un tanto complejo aunque nos parezca sencillo porque convivimos con él diariamente en internet.

¿Quieres saber más a fondo qué es el código html, cómo funciona y todo lo que conlleva este lenguaje de marcado? A continuación te lo explicamos.

¿Qué es el código html?

El código html, cuyo significado es Lenguaje de Marcado de Hypertexto, en español, no es un lenguaje de programación, como suele pensarse. Se trata más bien de un lenguaje de marcado que es a través del cual se define la estructura de un contenido.

El hipertexto es lo que permite que se pueda navegar por medio de la red y dentro de las páginas web, pues facilita que al dar clic en un texto, llamado hipervínculo, puedas dirigirte a la siguiente página. 

HTML se conforma por una serie de elementos que se emplean para enmarcar diferentes partes de un contenido para que se observen o se comporten de una manera determinada. Por ejemplo, dar un formato diferente a una parte del texto o crear hipervínculos a otros sitios. 

Se encarga de todo lo relacionado con la estructura de un sitio web, como secciones, encabezados, párrafos, etcétera.

Cómo surgió el código html

El codigo html y la web nacieron en paralelo, gracias a que, en 1989, el científico Tim Berners Lee requería trabajar y compartir documentos con otros profesionales, por lo que tuvo la idea de crear enlaces a los contenidos.

Así fue como Tim Berners propuso un novedoso sistema de hipertexto para compartir documentos y, en conjunto con Robert Cailliau, ingeniero en sistemas, creó la propuesta WorldWideWeb, que ganó el concurso.

La primera versión de HTML estaba conformada por 18 etiquetas, mismas que sirvieron para que en 1990 se publicara la primera página web. 13 de esas 18 etiquetas se mantienen hasta ahora.

Ya para 1993, la Organización Europa para la Investigación Nuclear (CERN) liberó el codigo html para todas las personas.  

Para qué sirven los códigos HTML

Los codigos HTML no solo brindan orden y organización a los contenidos y a la información que se encuentra en internet, sino que también sirven como enlace entre la información y los motores de búsqueda, como Google, Yahoo! y Bing.

Lo que hacen es indicarles a los navegadores web cómo tienen que leer la información que se encuentra en los sitios web para después presentarla frente a los visitantes. 

Si una etiqueta HTML no está bien configurada, los navegadores pueden interpretarla de distintas formas. Por ejemplo, mostrar una página de error, quedarse en blanco (sin cargar), entre otras. Por ello, el código HTML debe estar bien estructurado y sin ambigüedades para que todo se muestre correctamente.

Codigo HTML, CSS y Javascript

Estos tres elementos se complementan para crear una página web. El código HTML es lo que da la estructura a una página, mientras que el CSS (Cascading Style Sheets) es lo que determina cómo se van a presentar los elementos HTML. Por ejemplo, fuentes, colores, etcétera. 

Si bien se pueden escribir o determinar los estilos dentro del codigo HTML, lo recomendable es que se haga uso de los archivos CSS para que haya una mejor organización y para aislar la estructura del estilo. 

Finalmente, Javascript se encarga de crear comportamientos dinámicos y conseguir una más y mejor interactividad para brindar una óptima experiencia del usuario. 

Gracias a Javascript se puede decidir qué acción se desencadena a partir de que los usuarios hacen clic en un elemento de la página o si se desplaza a través de ella.

¿Cómo funciona un código html?

Con el codigo HTML no se pueden crear funcionalidades dinámicas, pero se pueden crear y estructurar secciones, párrafos, etiquetas y atributos a través de etiquetas, que son códigos cortos escritos en un archivo de texto. 

Una vez escritos, se guardan como archivo html y se leen a través de un navegador, como Chrome, que lee y traduce el texto a una forma visible.

Los componentes básicos del código HTML son:

Las etiquetas 

Son fragmentos de código que se encargan de separar el texto normal del código html y que son procesados por los navegadores. 

Están hechas con algunos elementos específicos como:

• El carácter “menor que” <, es decir, la etiqueta de apertura.
• La palabra o carácter que determina la etiqueta que se está escribiendo.
• El número de atributos HTML que se quiera emplear.
• El carácter “mayor que” >, que es la etiqueta de cierre.

Actualmente, existen más de 140 etiquetas html.

Los atributos

En HTML, los atributos aportan información extra a las etiquetas y se colocan siempre en la etiqueta de apertura. 

Siempre que se hace uso de un atributo se tiene que especificar el valor del mismo; puede aportar una cantidad exacta, una característica o algún otro elemento. Este valor se expresa entre comillas, después del signo “=”. 

Algunos de los atributos HTML más utilizados son:

• align: alineación. Puede contener valores como center, left, right o justify.
• border style: estilo de borde. Los valores son solid, dotted, dashed, double, etcétera.
• height: definición de altura. Por ejemplo, 10px, 12 em, etc.
  
  

Existen muchos atributos y, sin importar cuál se use, se tiene que escribir así:

Atributo= “valor”, el nombre del atributo, seguido del signo igual (=) y entre comillas agregar el valor. Toda la información tiene que estar en la etiqueta de apertura.

Por ejemplo, si se quiere tener un elemento estilo para añadir el color verde y la tipografía Garamond, quedaría algo así:

<p style= “color:green;font-family:garamond” </p> y así se añadiría este atributo.

Lo que hacen los navegadores con esta información es leer los archivos html, tanto etiquetas como atributos, y mostrarlos a los usuarios. Las etiquetas muestran a los navegadores dónde inicia y dónde finaliza un elemento, mientras que los atributos se encargan de describir las características de un elemento.

Gran parte de los elementos tiene etiqueta de apertura y de cierre, pero hay excepciones, como los elementos vacíos. Estos no requieren etiqueta de cierre porque carecen de contenido. Por ejemplo:

<img src= “ /” alt= “Image”>. Esta etiqueta contiene un atributo src y uno alt, que es el texto descriptivo, pero no tiene contenido ni etiqueta final.

Lo anterior se debe a que una imagen no contiene información a la que afectar. Su objetivo es simplemente colocar o desplegar una imagen en la página html en el lugar en que se coloque.

Cuál es la estructura básica de los códigos HTML

Sin importar el tipo de documento que estés creando para tu página web, la primera línea de tu documento tiene que ser la etiqueta <!DOCTYPE html>, lo que va a permitir que el código pueda ser leído por cualquier navegador.

Las etiquetas básicas para crear un contenido en formato HTML son:

1. HTML

Parece obvio, pero se tiene que incluir la etiqueta <html> al inicio del documento para indicar a los navegadores que la página en cuestión contiene código html y sea leído de esa manera. 

Teniendo esto en cuenta, el último elemento de nuestro documento tiene que ser </html>. 

2. Encabezado

El encabezado tiene como objetivo principal incluir toda la información del funcionamiento de un sitio web. 

Se marca a partir de la etiqueta <head> </head> y contiene elementos como título de la página, estilos, metadatos, entre otros elementos.

3. Cuerpo

En la etiqueta <body> tiene que ir todo el contenido o los elementos individuales de la página; por ejemplo, fotos, párrafos, formularios, videos o cualquier otra funcionalidad que desees añadir. 

Con estas tres etiquetas tienes listo el esqueleto de tu página web, pero la tarea no está cumplida al cien todavía. Se tienen que añadir otras etiquetas para introducir texto.

4. Títulos y subtítulos

Los títulos y subtítulos son muy importantes no solo en cuanto a la estructura y distribución del texto de una página, sino también en cuanto a posicionamiento web, pues es lo que comunica a los navegadores los temas relevantes de una página.

Las etiquetas de títulos y subtítulos son <h1> <h2> <h3> hasta el <h6> y sirven para jerarquizar la información de lo más general a lo más específico. Por ejemplo:

<h1> este es el título </h1>

<h2> este es un encabezado de una sección </h2>

<h3> esta es una subsección </h3>

Lo anterior da como resultado:

Este es el título (H1)

Este es un encabezado de una sección

Esta es una subsección

5. Párrafos

Los párrafos se señalan dentro del codigo html a partir de las etiquetas <p> </p> y son esenciales para organizar toda la información en texto en párrafos y añadir saltos de línea para que sea mucho más sencillo leer el contenido.

6. Imágenes

Otro elemento importante dentro de cualquier página web y código HTML, son las imágenes, que se insertan a través de la etiqueta <img>. Lo puedes combinar con:

• El atributo src para decidir la ubicación de la imagen, es decir, en dónde aparecerá.
• El atributo alt para otorgarle un título y que los navegadores lo lean y muestren esas imágenes en las búsquedas. 

7. Hipervínculos

Los hipervínculos sirven para insertar enlaces hacia otros sitios, por ejemplo, a tus redes sociales o cualquier otro sitio web con el que desees conectar tu página. 

Se coloca a través de la etiqueta <a href=”https://sitioweb.com”> </a> y puedes agregar el texto que quieras que aparezca para enlazar al sitio. Solo tienes que añadir este texto después:

<a href=”https://sitioweb.com”> Visita nuestro Facebook </a> y se visualizará el enlace dentro del texto Visita nuestro Facebook. 

Principales diferencias entre HTML y HTML5

El codigo HTML ha sufrido múltiples variaciones y actualizaciones desde su creación. Una de las principales actualizaciones fue el HTML5, que se dio en el año 2015.

HTML5 introdujo nuevos controles de formulario, etiquetas semánticas para describir contenidos, como <footer>, <article>, etcétera, entre otras novedades, por ejemplo:

• Controles de audio y video.
• Bases de datos SQL y caché de aplicaciones para almacenar datos, en comparación con HTML que utiliza cookies para almacenar datos temporales.
• Permite que Javascript se ejecute en segundo plano.
• Admite datos de arrastrar y soltar.
• Mayor compatibilidad con dispositivos móviles.

Ventajas y desventajas del código html

El código html tiene puntos buenos y puntos negativos, como cualquier otro lenguaje informático. Primero veamos los pros y después los contras, para que sepas si es lo que necesitas.

Ventajas del código html

Ideal para principiantes

HTML es un código con un marcado limpio y la curva de aprendizaje es realmente poco pronunciada, por lo que será sencillo de aprender.

Excelentes medios de soporte 

Al ser un lenguaje muy utilizado, puedes encontrar fácilmente recursos y tutoriales en comunidades para resolver los problemas que se presenten.

Accesibilidad

El codigo html es de código abierto y totalmente gratuito, además de que se puede ejecutar en cualquier navegador, pudiendo acceder a él de manera sencilla, fácil y rápida. 

Flexibilidad

Se puede complementar con otros lenguajes informáticos.

Desventajas del código html

Es estático

El código html es preferible para páginas web estáticas porque, si se desea agregar algo dinámico, se necesita Javascript o un lenguaje de back-end, como el PHP, para complementar.

Además, no permite el manejo de base de datos.

Aspecto variable

Algunos navegadores web pueden tardar en leer este código y hacer que el aspecto de las páginas varíe, según el navegador que se emplee porque se trata de un lenguaje interpretado. 

Por ejemplo, determinados navegadores pueden no leer las etiquetas más recientes si no reciben actualizaciones al respecto.

Funcionalidad limitada

La funcionalidad del código html es limitada. Hay muchas cosas que no se pueden conseguir solo con este lenguaje informático, por lo que tienes que aprender algunos otros que lo complementen.

Esto no siempre es necesario, pero se debe tener en cuenta, en caso de que se requieran elementos o funciones más avanzadas posteriormente. 

Conclusión

El código HTML es el lenguaje de marcado más importante. Sin HTML, no existiría el internet tal como lo conocemos hoy en día.

Una de las ventajas de HTML es que te permite hacer pruebas de manera inmediata, pudiendo visualizar el resultado del código por medio del navegador web. 

Lo mejor de todo es que es relativamente sencillo ir conociéndolo y entendiéndolo para crear páginas web estáticas, mismas que se pueden complementar con CSS (estilo) y Javascript (funcionalidad).