Qué es HTML y cómo utilizarlo (guía para principiantes)

HTML es la base de la mayoría de las páginas web: es la forma en que les decimos a los navegadores que estructuren el contenido en títulos, encabezados, párrafos, imágenes, enlaces, listas, formularios, tablas y más.

En esta guía de HTML para principiantes aprenderemos qué es y para qué se utiliza. Luego veremos cómo escribir HTML y revisaremos algunos de los elementos y atributos más comunes en el lenguaje. Finalmente, terminaremos con algunos recursos que puedes emplear para continuar aprendiendo y usar HTML.

Por ejemplo, HTML se puede usar para especificar qué parte del documento es un título, cuál es una lista y cuál es una imagen. También se puede emplear para vincular una palabra, incrustar una imagen, poner una fuente en cursivas y más.

Publicado por primera vez por Tim Berners-Lee en 1989, HTML ahora se usa en el 94 % de todos los sitios web, y probablemente en todos los que visitas. 

Video de Bitech Studio

Como se mencionó anteriormente, HTML es el acrónimo de hypertext markup language. Analicemos esto palabra por palabra para comprender mejor lo que realmente significa HTML.

Hypertext o hipertexto es un texto que contiene referencias a otro texto o páginas, también conocido como hipervínculos. Los hipervínculos permiten ir a cualquier parte de la web con un clic del mouse. En lugar de leer una página web en el orden lineal que el autor presentó como en la versión impresa; podemos usar hipervínculos para saltar a otra sección de la misma página, a una página diferente en el sitio web actual o a un sitio web completamente nuevo. 

Por ejemplo, aquí hay un hipervínculo que envía a un artículo del blog sobre cómo hacer una página web en HTML. Los hipervínculos también pueden abrir un PDF o un correo electrónico, o bien multimedia: un archivo de video o audio.

Vincular información de esta manera, revolucionó la web. Juntos, HTML e internet hacen posible que cualquier persona acceda a todo tipo de información en el mundo, en el orden que desee.

Markup o marcado se refiere a cómo HTML «marca» la página con anotaciones dentro del archivo HTML. Estas anotaciones no se muestran en la página web en sí; funcionan detrás de escena y les dicen a los navegadores cómo mostrar el documento a los visitantes. Pronto aprenderemos más sobre esto.

Language o idioma es la parte más sencilla de entender. Como cualquier lenguaje, HTML se compone de una sintaxis y un alfabeto únicos. Pero ¿qué tipo de lenguaje es exactamente? Abordemos esta pregunta, a continuación.

¿Es HTML un lenguaje de programación?

Si HTML es o no técnicamente un lenguaje de programación, es un debate continuo entre los desarrolladores y expertos web.

La mayoría definen HTML como un lenguaje de «marcado», no como un lenguaje de programación; algunos otros argumentan que los dos no se excluyen mutuamente.

Para entender esta distinción, tenemos que conocer la definición de un lenguaje de programación. Todos los lenguajes de programación tienen algún propósito funcional: necesitan «hacer» algo, ya sea evaluar expresiones, declarar variables o modificar datos. 

Estos lenguajes no solo instruyen a las computadoras qué hacer, sino también cómo hacerlo. JavaScript es el lenguaje de programación más utilizado en el desarrollo web. Otros lenguajes de programación populares incluyen Python, Java y C/C++.

HTML, por otro lado, realmente no «hace» nada. Simplemente les da a los navegadores el contenido que necesitan mostrar. A HTML no le importa cómo el navegador presenta el contenido, siempre que se muestre. En otras palabras, HTML tiene un propósito estructural, no funcional.

Aun así, algunos desarrolladores usan esta misma lógica para argumentar que HTML es solo un lenguaje de programación declarativo. Según el profesor David Brailsford de la Universidad de Nottingham, por ejemplo, los lenguajes declarativos están mucho más restringidos que otros lenguajes porque piden algo y no les importa cómo sucede, pero eso no los hace menos lenguajes de programación. Puedes ver su argumento completo en este video.

Video de Computerphile

Si bien, este es un punto de discusión interesante y rico, probablemente no afectará la forma en que codificas en HTML.

Cuál es la diferencia entre HTML y HTML5

Sea o no un lenguaje de programación, HTML es un lenguaje que ha evolucionado a lo largo del tiempo. Esto significa que a pesar de que existe desde el año 1993, no siempre ha tenido las mismas funcionalidades aunque sí se han conservado sus principios estructurales.

Hoy en día, la mayoría de los desarrolladores utilizan la versión 5.3 de HTML, que es la más actualizada y que comúnmente conocemos como HTML5. Esta versión busca ofrecer elementos y atributos nuevos a los usuarios, adecuados a las necesidades de programación web modernos.

Por ejemplo, con HTML5 tienes soporte nativo para documentos de audio y video, una mayor compatibilidad con soportes de gráficos y conectividad con bases de datos, por lo que se puede enlazar a una memoria local. Así, puedes incluir objetos que potencian la experiencia de navegación y depender no solo de la memoria caché para almacenar datos temporales.

Como punto a considerar, HTML5 solo es compatible con los navegadores más modernos, por lo que algunas páginas pueden resultar inaccesibles para sistemas operativos viejos. Sin embargo, su fácil sintaxis y el alto nivel de seguridad que ofrece ha hecho que usar esta versión del lenguaje sea lo más común entre desarrolladores.

Al final del día, HTML5 solo es una versión de HTML, por lo que al hacer alusión al lenguaje de hipertextos, generalmente, nos referimos a esta variante. Con eso en mente, pasemos a lo siguiente: ¿para qué se usa HTML?

Para qué se usa HTML

HTML se utiliza principalmente para crear páginas web. Debido a que es de código abierto y es compatible con todos los navegadores modernos, HTML es de uso gratuito y garantiza que tu texto, imágenes y otros elementos se muestren según lo previsto. Sin HTML, todas las páginas web serían archivos de texto sin formato que se verían así:

Imagen de Quelinka

Con HTML, no solo puedes formatear documentos con encabezados, párrafos, listas y otros elementos, sino también puedes incrustar imágenes, videos, archivos de audio y otros elementos multimedia a través de hipervínculos. Y puedes vincularte a otras páginas web en el mismo sitio web o desde otro. Esto permite a los visitantes navegar fácilmente por tu sitio web y saltar entre páginas web almacenadas en diferentes servidores.

Incluso después de agregar encabezados, imágenes e hipervínculos, aún tendrías una página web muy básica, y eso es así por diseño. Se supone que HTML crea una base simple sobre la cual se pueden agregar hojas de estilo en cascada o Cascading style sheets (CSS) y JavaScript (JS). Con CSS, puedes personalizar el estilo y diseño, cambiando el color, la fuente y la alineación de los elementos. Con CSS y JS agregas funciones dinámicas como ventanas emergentes y controles deslizantes de fotos.

HTML también se usa para crear otras herramientas, además de páginas web. Puedes emplearlo para:

• Hacer tablas para organizar datos.
• Crear formularios para recopilar información del usuario, procesar transacciones, hacer reservas o realizar un pedido.
• Crear correos electrónicos.

Ventajas y desventajas de HTML

HTML no solo es un gran recurso para crear sitios web, sino que es necesario implementarlo si se quiere crear un espacio digital en la red. Al final del día, este lenguaje es el fundamento de la internet, por lo que sin él es simplemente imposible crear páginas web.

Sin embargo, esto no significa que con él puedas hacer todo lo necesario para crear sitios web de principio a fin (sobre todo si te interesa crear páginas realmente atractivas para los visitantes). Es por ello importante hablar de las ventajas y desventajas que tiene este lenguaje.

Ventajas de HTML

• Es un lenguaje estandarizado por la World Wide Web Consortium (o W3C), por lo que tienes la seguridad de que tus documentos serán interpretables por todos los navegadores.
• Es un lenguaje con elementos limitados, lo que lo hace relativamente fácil de aprender.
• Escribir documentos en este lenguaje es muy simple y no se necesita más que un editor de texto para poner en marcha el desarrollo de proyectos.
• Es un lenguaje gratuito, tanto para su uso como para su implementación.
• Al ser un estándar, HTML es ampliamente compatible con otros lenguajes de orden superior. 
• Los documentos creados con este lenguaje son realmente ligeros, por lo que puedes tener el contenido total de un sitio en algunos MB de almacenamiento.

Desventajas de HTML

• Es un lenguaje estático; significa que no puedes crear contenidos dinámicos ni de otro tipo que no sea textual.
• La creación de tablas o arreglos de información complejos puede requerir mucho tiempo.
• La discreta cantidad de elementos que puedes usar al escribir tus documentos hace que no exista libertad creativa para diseñar sitios web.
• El diseño final de una página requiere que el programador conozca otros lenguajes.
• Al editar el texto de tus documentos, te ves forzado a hacerlo también en los que uses para el diseño del sitio, ya sea CSS, JavaScript u otros.
• Si bien sus actualizaciones no son comunes; al crear una nueva versión, los usuarios tienen que editar el código o no será interpretado adecuadamente por todos los navegadores.

Pero a pesar de estas desventajas, ya sea que desees crear páginas web, tablas, formularios o correos electrónicos, necesitarás saber cómo escribir HTML. Analicemos el proceso, a continuación.

Cómo funciona HTML

HTML funciona como un lenguaje que ayuda a elaborar páginas web mediante comandos que ordenan a un navegador a mostrar cierta información al visitante. Gracias a este es posible definir la estructura de un sitio y englobar a todos los elementos que deberán aparecer en el mismo.

Su funcionamiento requiere de tres grandes pasos: la escritura y la carga, que corresponden a los desarrolladores web; y la interpretación, que se lleva a cabo por parte de los navegadores.

Escritura del código

Primero, es necesario saber que la implementación de HTML se basa en el uso de texto para dar indicaciones estandarizadas a una plataforma de navegación. Esto significa que todas las instrucciones que escribas en este lenguaje serán seguidas por los interpretadores de código. Basta con que uses un editor de texto para escribir un documento HTML.

Al escribir tu código, utilizarás dos grandes grupos de cosas: elementos y atributos. Estos tienen las siguientes características:

• Elementos: hacen referencia a las indicaciones utilizadas para definir qué función tiene cada parte de tu texto, ya sea un título, parte del cuerpo, un pie de página; si es una imagen, un video o, incluso, una caja de diálogo. Básicamente, los elementos sirven para informar al sistema qué es cada una de las líneas de tu código.
• Atributos: que añaden funcionalidades a ciertos elementos para darles un formato específico o para relacionar elementos dentro de tu texto. Usualmente, se dice que los atributos son descripciones sobre cómo debe ser un elemento.

Carga del código

Una vez escrito tu documento, será necesario guardarlo en un formato reconocible para los navegadores web. En este caso, es crucial que el archivo tenga el formato .html. Así, las plataformas de búsqueda podrán saber que tu documento contiene la información necesaria para desplegar el contenido de tus sitio de una manera ordenada. 

Para llevar a cabo este paso, necesitarás contar con acceso y licencia de uso a un web hosting, incluso si este es gratuito. En él deberás cargar tus documentos en HTML. Debido a su configuración, los servicios de hosting automatizan la apertura de los archivos, por lo que solamente deberás validar que los navegadores interpretan de modo adecuado tus datos. 

Interpretación del código

Cuando accedes a un sitio web, los navegadores interpretan la suma de elementos y atributos de los documentos HTML para transformarlos en una representación visual de lo que nos interesa mostrar. Así, el código HTML le da las instrucciones necesarias al navegador para que sepa qué función desempeña cada parte del texto, dónde la tiene que situar y qué debe mostrar a los visitantes.

Como hemos mencionado, HTML no es un lenguaje que ofrezca mucha libertad creativa en torno al diseño. Es por eso que comúnmente el uso de este lenguaje va acompañado de otros lenguajes como CSS o JavaScript, que ofrecen funcionalidades de diseño y permiten dar mayor dinamismo y visualizar a los sitios web. 

Cómo escribir HTML

HTML, básicamente, es una estructura que consta de etiquetas y atributos. Para ayudarte a visualizar esta sintaxis, aquí hay un gráfico:

Echemos un vistazo más de cerca a cada componente.

Etiquetas HTML

Los elementos HTML se designan mediante etiquetas. La mayoría de los elementos tienen una etiqueta de apertura y cierre. Las etiquetas de apertura preceden al texto y contienen el nombre del elemento entre corchetes «<» y «>». Las etiquetas de cierre son idénticas a las etiquetas de apertura, excepto por una barra inclinada hacia atrás que precede al nombre del elemento. HTML te permite crear diversos elementos que serán proyectados en las páginas, por ejemplo al poner el color de fondo.

Supongamos que deseas agregar un párrafo a tu página web y el texto del párrafo es «Esto es un párrafo». Lo envuelves con las etiquetas de párrafo HTML: <p></p>. Entonces, el HTML se verá así:

Juntas estas tres cosas son todo lo que necesitas para crear un elemento de párrafo en HTML.

La mayoría de los elementos HTML son iguales: una etiqueta de apertura, una etiqueta de cierre y contenido intermedio. Algunos elementos HTML, como <br> (pausa), solo tienen una etiqueta de apertura, por lo que se denominan etiquetas vacías.
 
Los nombres de los elementos no distinguen entre mayúsculas y minúsculas. Es decir, se pueden escribir en mayúsculas, minúsculas o alguna combinación de las dos. Por ejemplo, la etiqueta <p> también se puede escribir como <P>. Aun así, se considera una buena práctica escribir siempre el nombre en minúsculas.

Atributos HTML

HTML es ante todo una forma de estructurar. Si bien todos los elementos HTML necesitan etiquetas, solo algunos requieren atributos. Un atributo proporciona información adicional sobre el elemento HTML y esta información puede ser esencial o no esencial.

Por ejemplo, un elemento de imagen siempre debe tener un atributo de origen cuyo valor sea la URL de la imagen o la ruta del archivo; de lo contrario, el navegador no sabrá qué imagen proyectar. Lo mismo ocurre con el elemento ancla, que se utiliza para crear hipervínculos: requiere contener un atributo href, cuyo valor especifique el destino del enlace; de un modo opuesto, si un visitante hace clic en el elemento ancla, el navegador no lo enviará a ninguna parte.

No es esencial incluir otros atributos, pero se considera una buena práctica. Por ejemplo, un navegador puede representar una imagen sin el atributo alt, que contiene el texto alternativo de la imagen. Aun así, un lector con discapacidad visual puede tener problemas para comprender lo que transmite la imagen sin una descripción del alt text.

Ahora que entendemos la importancia de los atributos, asegurémonos de entender cómo encontrarlos y escribirlos. Un atributo siempre se encuentra en la etiqueta de apertura de un elemento HTML y tiene la sintaxis: nombre=valor o name=value.

Muchos elementos tienen su propio conjunto de atributos que afectan la forma en que se representa el contenido en la página. Los atributos se pueden escribir en cualquier orden dentro de la etiqueta de apertura. No obstante, no debes escribir varias instancias del mismo atributo dentro de la misma etiqueta HTML.

Qué se necesita para usar HTML

La creación y utilización de documentos en formato HTML es simple y, como tal, no requiere de demasiados elementos. Para hacer un uso efectivo de este lenguaje únicamente necesitarás tres componentes:

• Conocimiento: antes de escribir documentos en HTML deberás comprender los elementos y atributos que puedes usar en él, por lo que es deseable que conozcas los fundamentos del lenguaje, sus funcionalidades y la sintaxis correspondiente. 
• Procesador de textos: HTML ofrece la ventaja de requerir únicamente un procesador de texto para redactar el código detrás de un sitio web. Por ejemplo, puedes usar Notepad++ o incluso el bloc de notas de tu ordenador.
• Navegador web: una vez creado tu texto, bastará con guardarlo en formato .html y abrirlo desde un navegador para ver el resultado. Estas plataformas interpretarán tus documentos y darán estructura a los datos para mostrarlos como una página web.

Además, existen algunas herramientas diseñadas para hacer más simple el uso de HTML. Entre estas: los conversores y los revisores. Los conversores son herramientas comúnmente incluidas en los editores de texto que permiten transformar tu texto en un código HTML; mientras que los revisores se aseguran de que el texto esté bien escrito, siga la sintaxis HTML y sea compatible con diversos navegadores. 

Cómo usar HTML

Para comenzar a usar HTML, necesitas un editor de texto como Notepad++ o Sublime Text. Dado que un archivo HTML tiene un formato de texto estándar, funcionará cualquier editor de texto básico. Pero por el bien de esta demostración y dado que Sublime Text funciona para Mac y Windows, recorreremos el proceso usando este editor.

1. Descarga la última versión de Sublime Text

Ve a la página de descarga de Sublime Text  y haz clic en el que corresponda a tu sistema operativo. Se descargará un archivo zip.

2. Abre el programa

Abre el archivo zip y haz clic en Sublime Text en tu carpeta de Descargas. El editor se abrirá automáticamente.

3. Agrega HTML

Copia y pega el siguiente código HTML en el editor. Explicaremos qué significa cada uno de estos elementos en la siguiente sección.

4. Guarda el archivo HTML

Selecciona Archivo  > Guardar como en el menú Sublime. Nómbralo como «index.html». Guárdalo en tu escritorio o en otra carpeta.

5. Mira el archivo HTML en tu navegador

Ahora puedes abrir el archivo HTML en tu navegador. Puedes hacer doble clic en el archivo, cliquear con el botón derecho y seleccionar «Abrir», o arrastrarlo y soltarlo en una ventana abierta del navegador. Se verá así:

Ahora que sabes cómo usar un editor HTML, veamos cómo escribir el código real.

Cómo crear un archivo HTML

Para hacer un sitio web con este lenguaje, primero debes generar un archivo HTML. Este archivo contendrá todo el código HTML de tu página web y se cargará en tu servidor web. De esa manera, cuando un visitante busque tu sitio web, el servidor enviará el archivo HTML al navegador del visitante y el navegador mostrará la página, en consecuencia.

En seguida, te explicaremos el proceso paso a paso para que puedas crear un archivo HTML para tu proyecto web. Haremos el archivo HTML lo más simple posible para que los principiantes puedan seguirlo.

1. Agrega una declaración <!DOCTYPE>.

Para comenzar, debes declarar el tipo de documento como HTML y darle una estructura. Para hacerlo, agrega el código especial <!DOCTYPE html> en la primera línea del archivo.

<!DOCTYPE html>

2. Añade un elemento <html>

Después, querrás definir el elemento raíz del documento. Dado que este elemento indica en qué idioma vas a escribir, siempre será <html> en un documento HTML5.

En la línea debajo de la declaración DOCTYPE, agrega una etiqueta de apertura <html>. Debajo de eso, incluye una etiqueta de cierre </html>.

<!DOCTYPE html><html></html>

3. Indica un atributo de idioma

Dentro de la etiqueta de apertura del elemento html, también debes incluir un atributo lang (idioma) . Esto ayudará a los lectores de pantalla a determinar en qué idioma está el documento, lo que hará que tu sitio web sea más accesible. Sin un atributo de idioma, los lectores de pantalla utilizarán de forma predeterminada el idioma del sistema operativo, lo que podría dar lugar a errores de pronunciación del título y otro contenido de la página.

Dado que estamos escribiendo esta publicación en español, estableceremos el valor del atributo lang del archivo en «es».

<!DOCTYPE html><html lang=”es”></html>

4. Agrega una sección de cabeza y cuerpo

Un documento HTML se compone de dos partes: la sección principal y la sección del cuerpo. El encabezado contiene metainformación sobre la página, así como cualquier CSS interno. El navegador no muestra esta información a los lectores. 

La sección del cuerpo contiene toda la información que será visible en la parte frontal como tus párrafos, imágenes y enlaces. Para crear estas secciones, agrega una etiqueta <head></head> y luego una etiqueta <body></body> entre <html> y </html> en tu documento.

<!DOCTYPE html><html lang=”es”><head></head><body></body></html>

5. Introduce un título en la sección de encabezado

En la sección de encabezado, querrás nombrar tu documento. Escribe un nombre (iremos con «Mi página HTML» en este ejemplo) y luego envuélvelo en etiquetas <title></title>.

<head>    <title>Mi página HTML</title></head>

6. Agrega etiquetas <style> y cualquier CSS interno en la sección principal

También debes agregar etiquetas <style></style> dentro de la sección de encabezado. Entre estas etiquetas, añade cualquier CSS interno que estés usando para diseñar tu HTML. En lugar de inventar algunas reglas de CSS, solo incluiremos un comentario en CSS como marcador de posición. También puedes añadir comentarios en HTML para cualquier cosa que no desees que el navegador muestre.

Nota: en muchos documentos HTML no verás etiquetas de estilo ni CSS. Eso probablemente significa que la página está usando una hoja de estilo externa, una forma común de agregar CSS a HTML. En el caso de una hoja de estilo externa, verás un enlace en la sección principal del documento.

<head>    <title>Mi página HTML</title>    <link rel="stylesheet" href="style.css"> <!-- Este enlace es necesario si usas una hoja externa-->    <style>        /* Estas etiquetas son necesarias si usas CSS interno */    </style></head>

7. Añade elementos HTML en la sección del cuerpo

En la sección del cuerpo se requiere incluir un encabezado y un párrafo. Escribe el nombre del encabezado y lo envuelves en etiquetas <h1></h1>, y escribes el párrafo entre etiquetas <p></p>.

<body> <h1>Este es un título</h1> <p>Este es un párrafo.</p></body>

Finalmente, es una práctica común aplicar sangría a los elementos HTML anidados. Aunque esto no hace ninguna diferencia para el navegador que procesa el archivo, la sangría visualiza la estructura del documento y lo hace más fácil de leer.

Ejemplo HTML

A continuación, se muestra un ejemplo de un archivo HTML básico que cualquier principiante puede crear. Combina el código escrito en los pasos anteriores.

<!DOCTYPE html><html lang=”es”><head> <title>Mi página HTML</title> <link rel="stylesheet" href="style.css"> <!-- Este enlace es necesario si usas una hoja externa-->    <style>        /* Estas etiquetas son necesarias si usas CSS interno */ </style></head><body> <h1>Este es un encabezado</h1> <p>Este es un párrafo.</p></body></html>

En seguida, se muestra cómo se vería en el front end. Ten en cuenta que solo se representan el encabezado y el párrafo de la sección del cuerpo.

Como puedes ver, este es un archivo HTML esquelético. Para completarlo, necesitamos echar un vistazo a algunos elementos HTML más comunes. Ya hemos mencionado dos, los elementos <h1> y <p>. Echemos un vistazo más de cerca a estos elementos y otros, a continuación. 

Etiquetas HTML

La primera versión de HTML constaba de solo 18 etiquetas. Desde entonces, se han lanzado cuatro versiones con docenas de etiquetas agregadas en cada versión. En la versión más reciente, HTML5, hay 110 etiquetas HTML.

Los elementos HTML suelen aparecer en minúsculas, con una etiqueta de inicio, una etiqueta de finalización y algo de contenido en el medio.

Ahora, repasaremos los elementos más comunes y sus etiquetas.

Párrafo o Paragraph (<p>)

El elemento de párrafo HTML representa un párrafo. Al colocar etiquetas <p></p> alrededor del texto, significa que el texto comience en una nueva línea.

He aquí un ejemplo de dos párrafos:

Imagen o Image (<img>)

El elemento de imagen HTML incrusta una imagen en el documento. Requiere un atributo src (source) para representarla correctamente. También se debe incluir un atributo alt en caso de que la imagen no se cargue correctamente o el lector tenga una falla visual. Aquí hay un ejemplo de una imagen con una fuente y un atributo alt:

Encabezados o Headings (<h1> a <h6>)

Los elementos de encabezado HTML representan diferentes niveles de encabezados de sección. <h1> es el nivel de sección más alto y el más destacado, mientras que <h6> es el más bajo y, por lo tanto, menos destacado.

División (<div>)

El elemento de división de contenido HTML (div) es un contenedor genérico a nivel de bloque para «contenido de flujo o flow content». El contenido de flujo es una categoría de elementos HTML que contienen texto o contenido incrustado. Los elementos de ancla, cita en bloque y encabezado se consideran contenido de flujo.

En el back end, los elementos div ayudan a organizar el código en secciones claramente marcadas. En el front end agregan saltos de línea antes y después del contenido. De lo contrario, no afectan el contenido o el diseño de la página a menos que se diseñen con CSS.

Aquí hay un ejemplo de div envuelto alrededor de una imagen:

Aquí, la imagen tiene el mismo aspecto que aparece sin el elemento contenedor div. Esto se debe a que no se proporcionó información de estilo a este elemento div. Para cambiar la apariencia del contenedor y, por lo tanto, la imagen dentro de ese contenedor, se debe agregar información de estilo.

Digamos, por ejemplo, que deseas centrar la imagen. Luego, podrías usar el siguiente código para centrar horizontalmente la imagen en la página:

Intervalo o Span (<intervalo>)

El elemento span de HTML es un contenedor en línea genérico para «contenido de fraseo». El contenido de fraseo se refiere al texto y cualquier marcado que contenga, como las etiquetas <abbr> y <audio>.

Las etiquetas de extensión no representan inherentemente nada, pero se usan para agrupar contenido de frases por dos razones. La primera, es aplicar información de estilo a un fragmento de texto en particular. Por ejemplo, si estás creando letras capitulares, puedes envolver la primera letra de los párrafos iniciales de cada sección de tu artículo en etiquetas de espacio.

La segunda razón para usar etiquetas de intervalo, es agrupar elementos que ya comparten valores de atributo. Por ejemplo, tal vez tengas un sitio web para hablantes de inglés que estén aprendiendo francés. El idioma predeterminado está configurado en inglés, pero en varias páginas es posible que tengas una tabla con términos en francés en la primera columna y las traducciones al inglés en la segunda columna. En ese caso, puedes envolver los términos franceses en etiquetas de intervalo con el atributo de idioma establecido en «fr».

Ancla o Anchor (<a>)

El elemento de anclaje HTML crea un hipervínculo. El elemento ancla requiere un atributo href, que especifica el destino del enlace. El destino puede ser otra sección en la misma página web u otra página en el mismo sitio, o sitios web, archivos y direcciones de correo electrónico externos.

Aquí hay un ejemplo de un enlace anidado en un párrafo:

Lista desordenada (<ul>)

El elemento de lista desordenada de HTML se usa para agrupar elementos cuando el orden no importa. Las listas de compras, por ejemplo, no necesitan seguir un orden en particular. Los elementos de la lista deben estar definidos por la etiqueta <li> y luego envueltos en el elemento <ul>.

He aquí un ejemplo de una lista desordenada. Intenta agregar algunos elementos de la lista y observa cómo cambia la lista.

Lista ordenada (<ol>)

El elemento de lista ordenada de HTML se utiliza para agrupar elementos cuando el orden es importante. Las recetas, por ejemplo, siguen un orden particular. Los pasos deben estar definidos por la etiqueta <li> y luego envueltos en el elemento <ol>.

Una lista ordenada comenzará en el número 1 por defecto. Si deseas comenzar en otro número, simplemente agrega un atributo de inicio y establece el valor en el número que deseas.

Aquí hay un ejemplo de una lista ordenada que comienza en 1. Intenta agregar pasos en diferentes partes de la lista:

Énfasis o Emphasis (<em>)

Este elemento de HTML enfatiza el texto que contiene. Los navegadores normalmente representan el texto en cursiva. Aquí hay un ejemplo del énfasis envuelto alrededor de un párrafo y anidado dentro de un párrafo:
 

Fuerte o Strong (<strong>)

El elemento strong de HTML indica que el texto que contiene es de gran importancia o urgencia. Los navegadores normalmente representan el texto en negrita. He aquí un ejemplo del elemento fuerte:

Anotación no articulada (<u>)

El elemento de anotación no articulado (unarticulated annotation) marca el texto como si tuviera algún tipo de anotación no textual. Por ejemplo, puedes usar este elemento para anotar errores ortográficos.

Si deseas subrayar el texto para cualquier otro propósito que no sea representar una anotación no textual, utiliza otro elemento HTML o propiedad CSS. Por ejemplo, si quieres subrayar el texto para la decoración, usa la propiedad de decoración de texto de CSS y configúrala como «subrayado». Si deseas subrayar el título de un libro, utiliza el elemento de cita.

Tabla o Table (<tabla>)

El elemento <table> crea una tabla para organizar el contenido de una manera que sea fácil de leer de un vistazo. Requiere otros tres elementos HTML: las etiquetas <tr>, <th> y <td>.

• La etiqueta <tr> define una fila de la tabla.
• La etiqueta <th> determina el encabezado de la tabla. 
• La etiqueta <td> establece los datos de la tabla (es decir, las celdas de la tabla).

He aquí un ejemplo de una tabla:

Regla Horizontal (<hr>)

El elemento de regla horizontal define una línea horizontal a lo largo de una página web. Se puede utilizar para marcar cualquier cambio temático, como la siguiente escena de una obra de teatro, una nueva sección de un ensayo o la conclusión de un artículo.

Seleccione o Select

El elemento select define una lista desplegable de opciones, desde la cual un usuario puede seleccionar una opción (o varias si está permitido). Este elemento generalmente se usa en formularios HTML para recopilar envíos de usuarios. Puedes seleccionar una opción entre muchas, mientras se aumenta el espacio en la página web.

Sección o Section

Se trata de un elemento HTML semántico que representa secciones independientes de contenido relacionado en una página web. Por ejemplo, un elemento de sección se puede utilizar para agrupar información de contacto.

En el siguiente ejemplo, los elementos de sección se utilizan para dividir la página web en secciones «Acerca de» y «Contacto».

Salto de línea o Line Break (<br>)

El elemento line break crea un salto de línea donde se coloca. Eso significa que puedes agregarlo donde quieres que termine el texto en la línea actual y continuar en la siguiente. Este elemento se puede utilizar para mostrar poemas, letras de canciones u otras formas de contenido en las que la división de líneas sea significativa.

En seguida, se muestra un ejemplo de una dirección representada de dos formas: una con elementos de salto de línea y otra con elementos de párrafo.

Atributos más comunes en HTML 

Los atributos modifican los elementos HTML de diferentes maneras. Pueden cambiar la apariencia del elemento, aplicar identificadores únicos para que CSS pueda orientar los elementos o proporcionar la información necesaria a los lectores de pantalla.

Los atributos suelen aparecer en minúsculas y como pares de nombre/valor, con los valores entre comillas.

Ahora, veremos los atributos más comunes.

Atributo de estilo o Style Attribute

El atributo de estilo contiene CSS en línea. Este CSS anulará cualquier estilo establecido en la sección de encabezado del documento o en una hoja de estilo externa. Solo se aplicará al elemento HTML que tenga el atributo de estilo en su etiqueta de apertura.

Aquí hay un ejemplo del atributo en HTML:

Atributo de identificación o ID Attribute

El atributo ID se utiliza para identificar un solo elemento en un archivo HTML. Eso significa que el valor de un atributo de ID no debe repetirse dentro del mismo archivo. Al usar este valor único puedes apuntar a un solo elemento con CSS interno o externo.

Aquí hay un ejemplo del atributo en HTML:

Atributo de clase o Class Attribute

El atributo de clase se utiliza para identificar un grupo de elementos con el mismo nombre y personalizar ese grupo, creando efectivamente un nuevo grupo de elementos.

Los botones Bootstrap, por ejemplo, están todos etiquetados con la clase .btn, por lo que tienen el mismo estilo básico: fuente de 14 px, tamaño mediano, bordes redondeados, etc.

Aquí hay un ejemplo del atributo en HTML:

Atributo de idioma o Language Attribute

Como se mencionó, el atributo de idioma indica a los lectores de pantalla cuál es el idioma principal de la página web y cuándo necesitan cambiar a otro idioma. Este es un pequeño detalle que puede hacer que tu contenido sea más accesible para todos los lectores, sin importar de qué región sean o el idioma que hablen.

Si bien este atributo se incrusta más comúnmente en el elemento específico de HTML, también se puede usar con párrafo, div, span y otros elementos.

Aquí hay un ejemplo del atributo en HTML:

Atributo Href

Un atributo href contiene el destino de un enlace. Este atributo siempre debe incluirse con un elemento ancla.

Aquí hay un ejemplo del atributo href en HTML:

Atributo de origen o Source Attribute

Al igual que un elemento ancla necesita un atributo href, una imagen necesita un atributo fuente. Contiene la ruta al archivo de imagen o su URL.

Aquí hay dos ejemplos del atributo en HTML:

Atributo Alt

El atributo alt proporciona información descriptiva sobre el elemento HTML. Esto es importante para los lectores con discapacidad visual y para todos los lectores en caso de que el elemento no se cargue. Si es así, los lectores aún podrán deducir lo que el elemento pretendía transmitir. Al igual que el atributo de origen, la mayoría de las veces encontrarás el atributo alt con el elemento de imagen.

Aquí hay un ejemplo del atributo en HTML:

Atributo Data-*

El atributo data-* se usa para almacenar datos personalizados que son privados para la página o la aplicación. Puedes usar estos datos almacenados en el JavaScript del documento a fin de crear una experiencia más dinámica para el usuario.

El asterisco en el atributo data-* puede ser cualquier valor.

Aquí hay un ejemplo del atributo en HTML de W3Schools:

Luego podrías usar estos datos en JavaScript para activar un mensaje emergente que proporcione más información sobre cada elemento de la lista. Digamos, por ejemplo, que un visitante hizo clic en la palabra «Búho». Después, aparecerá un cuadro emergente que dice «El búho es un pájaro», como se muestra en la siguiente captura de pantalla.

Ahora que hemos cubierto los elementos y atributos más comunes en HTML, exploremos dónde puedes practicar para escribir este lenguaje y continuar aprendiendo más sobre él. Recuerda que para el desarrollo web hay ciertas fuentes con las que puedes trabajar mejor.

Cómo aprender HTML

Hay cientos de recursos disponibles para aprender HTML, dirigidos a principiantes o a desarrolladores más avanzados. Según tu estilo de aprendizaje, es posible que prefieras leer publicaciones de blog, ver tutoriales en video, tomar cursos en línea, descargar un libro electrónico o usar una combinación de todos estos recursos.

Veamos, en la siguiente sección, al menos un ejemplo de cada uno de estos formatos de contenido. De esa manera, sin importar qué tipo de estudiante seas, puedes encontrar un recurso que te ayudará a aprender este idioma.

1. Guía básica sobre HTML y CSS para marketers

Si recién estás comenzando a aprender a codificar, este ebook gratuito está diseñado para enseñar HTML a principiantes. Explica qué son HTML y CSS, en qué se diferencian y cómo comenzar si eres nuevo en el desarrollo web. Como sugiere el título, esta guía está diseñada específicamente para especialistas en marketing que necesitan realizar arreglos rápidos en sus sitios web, blogs y páginas de destino.

2. LinkedIn Learning

Si eres un aprendiz visual, consulta los tutoriales en línea disponibles en LinkedIn Learning (anteriormente conocido como Lynda.com). LinkedIn Learning ofrece 42 cursos y más de 5000 tutoriales en video que cubren prácticamente todos los temas de HTML: desde formularios hasta datos semánticos y todo lo demás. Estas lecciones están organizadas para tres niveles: principiante, intermedio y avanzado, así podrás desarrollar tus habilidades con el tiempo. Para obtener acceso a todo el contenido del sitio puedes adquirir una suscripción mensual o anual.

El siguiente video es un extracto de un curso llamado «Capacitación esencial de HTML» de Jen Simmons:

Video de LinkedIn Learning

3. Codecademy

Si te abruma la gran cantidad de videos disponibles en LinkedIn Learning, prueba la clase Learn HTML de Codeacdemy. Este curso en línea comenzará con la estructura básica y los elementos de HTML. Después, puedes poner a prueba tus conocimientos creando elementos y proyectos más complejos, incluidos formularios y tablas HTML, desde cero.

Si bien, puedes completar la mayor parte del curso de forma gratuita, hay funciones profesionales como cuestionarios y proyectos que tendrás que pagar para desbloquear.

Imagen de Codecademy

4. Tutorial HTML de W3Schools

A veces es necesario aprender haciendo. El tutorial HTML de W3Schools se centra en ese concepto exacto. Con su editor de código en línea puedes comenzar con los esqueletos básicos de un documento HTML y practicar escribir HTML desde cero, o empezar con ejemplos más desarrollados y editarlos. También puedes completar ejercicios y cuestionarios para cada tema que cubre.

Imagen de W3Schools

5.  Learn HTML

Al igual que W3Schools, Learn HTML es un tutorial interactivo gratuito. Sin embargo, en lugar de tratar de ser el recurso más completo sobre HTML, Learn HTML ofrece una breve guía paso a paso para crear una página web. En cada etapa, puedes probar si entendiste la lección completando un ejercicio en el editor de código en línea. Si tu código coincide con el resultado esperado, recibirás un mensaje de éxito y se te invitará a pasar a la siguiente lección.

Imagen de Learn HTML

6. Tutorial HTML para principiantes de HTML Dog

HTML Dog creó un tutorial para principiantes de HTML, orientado a aquellos que no tienen absolutamente ningún conocimiento previo de HTML o CSS. Comienza con una descripción general sobre qué es HTML y de qué está hecho (etiquetas, elementos y atributos). Luego explica cómo crear un archivo HTML con títulos, párrafos, encabezados y otros elementos. Al final, muestra cómo crear un archivo HTML completo. 

En esto es similar a W3Schools y Learn HTML, pero te invita a crear el archivo HTML en el editor de tu elección, en lugar de uno integrado. Recomienda específicamente el bloc de notas.

Imagen de HTML Dog

7. HTML Standard por W3C

W3C es el estándar vivo para HTML. Si bien no es la introducción más fácil al tema, es la más completa. Es por eso que te recomendamos que lo consultes una vez que hayas realizado algunos cursos o tutoriales y estés familiarizado con las tecnologías web.

Imagen de W3C

8. Google Actívate

Imagen de Google Actívate

Google te ofrece un curso gratuito y en español donde aprenderás HTML y CSS de la mano de expertos en la rama. Cuenta con videotutoriales y ejercicios que te llevarán de la mano sin esfuerzo. Lo mejor es que está creado para cualquier perfil profesional, así que no necesitas tener conocimientos previos. Si quieres certificarte, puedes hacerlo y obtendrás un diploma de la Universidad de Alicante.

Como viste, HTML es el lenguaje que usamos para hablar con las computadoras. Es la forma en que los navegadores muestran textos, imágenes, párrafos y otros elementos en una página web. Y ahora podrás comenzar a usarlo.