HTML: todo lo que necesitas saber

El archivo de texto con la base de la página web se escribe en HTML (HyperText Markup Language), que es un lenguaje de marcado de hipertexto. Vamos a entender qué significa este término en detalle.

El hipertexto es un sistema de texto en el que los desarrolladores escriben elementos del sitio y los vinculan entre sí con enlaces. Gracias al hipertexto, podemos seguir enlaces en un sitio web, abrir videos e imágenes. Y el marcado de hipertexto son las reglas según las cuales los desarrolladores crean el texto de una página web.

Cuando abres cualquier sitio web en Internet, el navegador carga desde el servidor un archivo HTML, que es un archivo de texto con información sobre la estructura del sitio. Gracias a este archivo, el navegador entiende el diseño de la página, el orden en que se muestran los encabezados y el texto, de dónde cargar imágenes, videos y scripts.

¿Para qué sirve HTML?

El objetivo principal de HTML es estructurar y formatear el contenido en un sitio web.

HTML crea una estructura jerárquica en una página web utilizando encabezados, párrafos, listas y tablas. Esta estructura ayuda al usuario a orientarse más fácilmente en el sitio.

Además, HTML muestra texto, imágenes, tablas, videos y audio. Y también, gracias al código HTML, podemos seguir enlaces en Internet de un sitio a otro.

Posibilidades de HTML

Con HTML puedes:

• Realizar marcado de texto. Formatear texto, resaltar fragmentos, crear listas, agregar notas al pie.
• Insertar medios. HTML permite colocar imágenes, audio, video y mapas en un sitio web.
• Crear enlaces y navegación. Los hipervínculos y las listas de menú ayudan a encontrar información más rápidamente y orientarse en la página.
• Crear tablas. A menudo, es conveniente presentar información en forma de tabla. HTML puede trabajar con tablas.
• Crear formularios. Los formularios son necesarios para registrar visitantes del sitio por teléfono y correo electrónico, procesar pedidos, encuestas y recopilar comentarios, comentarios y sugerencias.

Incluso puedes crear un diseño simple con HTML, por ejemplo, establecer el color del texto. Pero los desarrolladores hacen un diseño de página más complejo con CSS, un lenguaje de estilos creado específicamente para trabajar junto con HTML.

HTML no tiene suficientes capacidades para "dar vida" a los sitios web, hacerlos funcionales e interactivos. Aquí es donde entra en juego el lenguaje de programación JavaScript, que nos permite interactuar con formularios en un sitio web, ver elementos dinámicos y animaciones.

Quizás también te interese:

• ¿Qué es el desarrollo Front-end?
• Vale la pena aprender JavaScript

Cómo se ve el código HTML

Es bastante sencillo echar un vistazo al código HTML. Simplemente presiona la tecla F12 en cualquier página web o haz clic derecho y elige "Ver código fuente" o "Inspeccionar elemento". Los nombres de estos comandos pueden variar según el navegador que utilices.

Así es como se ve el código HTML de este artículo.

El código HTML se escribe y guarda en un documento, que es un archivo de texto con la extensión .html o .htm. Puedes escribir un archivo HTML en cualquier editor de texto, incluso en el Bloc de notas de Windows. No necesitas estar conectado a Internet para ver archivos HTML.

Si creas varios archivos HTML en una carpeta y colocas enlaces hipertexto dentro de ellos, puedes seguir esos enlaces de un documento a otro.

¿Qué son las etiquetas HTML?

Las etiquetas HTML son comandos que le dicen al navegador qué y en qué orden mostrar en la pantalla. Cada etiqueta tiene un nombre que se encuentra entre corchetes angulares.

La página HTML más simple consta de tres etiquetas: <html>, <head> y <body>.

Las etiquetas <head> y <body> se utilizan solo una vez en la página.

Un archivo HTML siempre comienza con la etiqueta <!DOCTYPE html>, que le indica al navegador cómo mostrar correctamente la página.

En la etiqueta <head> </head> se almacena información de servicio, como el título y la codificación de la página.

Dentro de la etiqueta <body> </body> se coloca el contenido de la página que se muestra en el navegador, como texto, imágenes y videos.

Una página mínima completa se ve así.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mi primera página</title>
  </head>
  <body>
    <p>Hola, mundo</p>
  </body>
</html>

El atributo lang de la etiqueta <html> indica el idioma de la página, lo que ayuda a los lectores de pantalla y a los buscadores. La etiqueta <meta charset="utf-8"> define la codificación de caracteres, necesaria para que se vean bien las tildes y la ñ. La etiqueta <meta name="viewport"> hace que la página se ajuste al ancho de la pantalla en los teléfonos, y es la base para el diseño adaptable que se explica más abajo.

En la etiqueta <title> </title> se encuentra el título de la página web. El navegador lo mostrará como el nombre y lo guardará en la descripción si guardas la página en tus marcadores.

La etiqueta <img> coloca una imagen en el lugar adecuado de la página.

Existen etiquetas emparejadas y no emparejadas, la mayoría son emparejadas. Una etiqueta emparejada consta de una etiqueta de apertura y una etiqueta de cierre. La etiqueta de cierre contiene un elemento adicional /, que se llama "barra diagonal".

Por ejemplo, la etiqueta, que contiene texto, es emparejada:

<p>¡Gloria a los robots!</p>

La etiqueta <img>, que permite colocar una imagen en un sitio web, no es emparejada:

<img src='robot-bender.jpg' alt='Bender, el robot de la serie Futurama'>

Cada etiqueta tiene atributos. Estos amplían las capacidades de las etiquetas: establecen estilos, agregan enlaces, controlan multimedia.

En el ejemplo anterior se muestran dos atributos principales de la etiqueta no emparejada <img>, que son src y alt. El atributo src agrega un enlace al archivo de imagen, el atributo alt es el texto alternativo de la imagen que mostrará el navegador si el archivo de imagen no se carga. También lo leen los lectores de pantalla, por eso conviene escribirlo como una descripción natural de la imagen, sin guiones y sin empezar con "imagen de".

Es importante recordar las etiquetas de cierre. Si una etiqueta no se cierra o se cierra incorrectamente, el diseño de la página puede romperse y el sitio se mostrará incorrectamente.

Para presentar la información de manera lógica y secuencial, se utilizan encabezados, párrafos y listas.

Encabezados

Los encabezados en HTML son elementos que se utilizan para crear encabezados y subencabezados en una página web. Estos definen la importancia y la jerarquía de la información en la página.

En HTML se utilizan seis etiquetas de encabezado: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La etiqueta <h1> generalmente se utiliza para el encabezado principal de la página, y las etiquetas <h2>-<h6> se utilizan para subencabezados y otros encabezados en la página.

Los encabezados organizan el contenido y ayudan a los lectores de pantalla a recorrer la página. Google los usa como una señal de la estructura del texto, pero según su guía de SEO no importa si aparecen fuera de orden, así que no dependas de ellos para posicionar tu página. Por accesibilidad, conviene mantener un orden lógico, con un <h1> y luego <h2>, <h3> y así sucesivamente, sin saltarte niveles.

Párrafo

Un párrafo es un elemento que se utiliza para crear bloques de texto en una página. Cada párrafo de texto se crea con una etiqueta emparejada <p> </p>.

Es más fácil leer y comprender el texto dividido en párrafos que una "tela" continua. Los párrafos dividen el contenido en bloques lógicamente relacionados.

Listas

Las listas ordenan la información en una página y mejoran su comprensión. Por lo general, se utilizan listas numeradas y listas sin numerar.

Las listas sin numerar o con viñetas se agregan a la página con la etiqueta <ul></ul>. Estas listas se utilizan cuando el orden de los elementos no es importante.

Para crear una lista numerada se utiliza la etiqueta <ol></ol>.

Cada elemento en una lista de cualquier tipo se introduce con la etiqueta <li></li>. Esta etiqueta debe cerrarse después de cada elemento.

Etiquetas semánticas

HTML5 agregó etiquetas que describen el papel de cada parte de la página, en lugar de usar bloques genéricos para todo. Las más comunes son estas.

• <header> para la cabecera de la página o de una sección.
• <nav> para el menú de navegación.
• <main> para el contenido principal, que se usa una sola vez por página.
• <section> y <article> para agrupar contenido por temas o para piezas independientes, como una entrada de blog.
• <footer> para el pie de página.

Estas etiquetas hacen el código más fácil de leer y mejoran la accesibilidad, porque los lectores de pantalla pueden saltar entre las partes de la página.

Ventajas y desventajas de HTML

Ventajas de HTML

• Simplicidad y accesibilidad. HTML es un lenguaje de marcado simple que es fácil de aprender y usar. Puedes escribir código en él en cualquier editor de texto.
• Diseño adaptable. Con la etiqueta meta viewport y las media queries de CSS, la misma página HTML se adapta a teléfonos inteligentes, tabletas y monitores grandes.
• Flexibilidad. Con HTML, puedes crear sitios web simples sin usar elementos interactivos que cambian. Por ejemplo, páginas de destino, sitios web de empresas, portafolios, catálogos, directorios, instrucciones, blogs pequeños.

Desventajas de HTML

• Capacidades limitadas. HTML es un lenguaje de marcado, no un lenguaje de programación. No se puede hacer sitios web modernos solo con HTML. HTML, por ejemplo, no puede crear páginas web dinámicas que cambien en tiempo real sin recargar la página. Para crear algo más complejo, no puedes prescindir de CSS y JavaScript.
• Compatibilidad incompleta de las últimas versiones de HTML y los navegadores. Algunos navegadores tardan en incorporar las nuevas funciones y etiquetas. Antes de usar una etiqueta nueva conviene revisar su compatibilidad en MDN o en Can I use. Internet Explorer, que causaba muchos de estos problemas, dejó de recibir soporte en 2022 en varias versiones de Windows 10.

¿Es HTML un lenguaje de programación?

No. Los lenguajes de programación son necesarios para crear sitios web complejos que realicen tareas e interactúen con los usuarios.

Para procesar datos ingresados en formularios, intercambiar esta información con bases de datos almacenadas en servidores, crear animaciones, se utilizan lenguajes de programación como JavaScript, PHP y Python.

HTML no procesa datos, solo los muestra. Y HTML tampoco puede realizar cálculos, por lo que llamarlo un lenguaje de programación sería incorrecto.

Puedes aprender HTML en los cursos de Códica: realiza estos cursos para dar tu primer paso en la carrera de desarrollador front-end.