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 HTML 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 usar 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 usar 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. 

Mira este breve video para obtener una definición rápida de HTML, luego profundizaremos:

Video de Bitech Studio

Como se mencionó anteriormente, HTML es un 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 de blog sobre cómo hacer una página web en HTML. Los hipervínculos también pueden abrir un PDF, correo electrónico o multimedia, como 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 todo 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. Mira lo dividida que está esta página de resultados de Google sobre el tema:

Si bien la mayoría define HTML como un lenguaje de «marcado», no como un lenguaje de programación, algunos 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 necesita mostrar. A HTML no le importa cómo el navegador muestra 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 codifica en HTML. Con eso en mente, pasemos a 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 que 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 sitio. 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 puedes agregar funciones dinámicas como ventanas emergentes y controles deslizantes de fotos.

HTML también se usa para crear otras cosas además de páginas web. Puedes usarlo 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 con HTML

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 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: debe contener un atributo href, cuyo valor especifique el destino del enlace. De lo contrario, 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. Sin embargo, 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.

Antes de explicar cómo crear un archivo HTML, veamos qué herramientas necesitarás. 

Cómo usar HTML

Para comenzar a usar HTML, necesitas un editor de texto como Notepad++ o SublimeText. 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 SublimeText 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, hacer clic con el botón derecho y elegir 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 crear un sitio web con HTML, 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.

A continuación, te explicaremos el proceso paso a paso para que puedas crear un archivo HTML para tu proyecto web. Haremos el archivo HTML 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>

A continuación, 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 incluiré 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, hay que 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>

A continuación 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. 

Elementos HTML comunes

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.

A continuación, 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, harás 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>-<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, deben seguir 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 la configuras 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 maximiza 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.

A continuación 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 o lectores de pantalla.

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

A continuación, 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 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». Luego, aparecerá un cuadro emergente que dice «El búho es un pájaro», como se muestra en la captura de pantalla a continuación.

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 para principiantes o 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.

A continuación, veremos al menos un ejemplo de cada uno de estos tipos 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 para principiantes. Se 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 tus 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 en tres niveles: principiante, intermedio y avanzado, para que puedas desarrollar tus habilidades con el tiempo. Para obtener acceso a todo el contenido del sitio puedes suscribirte a 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. A continuación, 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 hay que 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 para aquellos que no tienen absolutamente ningún conocimiento previo de HTML o CSS. Comienza con una descripción general de 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, explica 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 te hayas 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.

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.

Como tal, HTML es el lenguaje predominante de la World Wide Web. Eso hace que el lenguaje sea importante no solo para las personas que intentan convertirse en programadores, sino también para los especialistas en marketing como tú. Conocer los conceptos básicos de este lenguaje de marcado te permitirá realizar cambios en tu sitio web sin necesidad de depender de un desarrollador, ahorrándote a ti y a tu empresa tiempo y dinero.