Si quieres convertirte en un webmaster y aprender a crear un sitio web, es posible que la perspectiva de familiarizarte con el lenguaje HTML te resulte bastante desalentadora.

Sin embargo, es algo que no se puede evitar, ya que la gran mayoría de las páginas web que visites habrán sido escritas y estructuradas utilizando elementos HTML. De hecho, el HTML es ahora utilizado por más del 74% de todos los sitios web conocidos, mientras que este lenguaje también ayuda a mejorar todo, desde el diseño de tu sitio hasta la calidad del contenido que presenta.

En esta guía, exploraremos los principios básicos de HTML y sus posibles aplicaciones, antes de ver ejemplos de los elementos individuales que se utilizan al codificar tu sitio web.

¿Qué es el HTML?

En términos sencillos, HTML representa el lenguaje de marcado estándar para crear páginas web en línea. Son las siglas de Hyper Text Markup Language (Lenguaje de Marcado de Hipertexto), y su función más primordial es establecer la estructura, el diseño y la presentación de las páginas individuales. Aunque los navegadores web no muestran directamente el lenguaje HTML, desempeña un papel fundamental para ayudar a crear un sitio visible, accesible y fácil de usar.

El lenguaje HTML también se apoya en una serie de elementos individuales, que construyen gradualmente las páginas web, estructuran la presentación del contenido y dan vida a tu sitio web. Estos elementos se crean y contienen dentro de "etiquetas", que definen piezas alternativas de contenido, como títulos, párrafos y ejemplos similares.

A continuación exploraremos con más detalle estos elementos y su construcción, al tiempo que veremos cómo se pueden personalizar para introducir color, enlaces y tipografía variable en tu sitio web.

¿Dónde se utiliza el HTML?

Como podemos ver, la aplicación más común de HTML es el diseño de las páginas individuales que componen tu sitio web. Esta no es la única aplicación de la popular herramienta de codificación, sin embargo, entender sus usos adicionales te ayudará a sacar el máximo provecho del lenguaje como nuevo webmaster Así pues, estas son algunas de las formas adicionales en las que se puede aplicar el HTML:

• Crear elementos personalizables dentro de una página existente. Si tienes la intención de permitir los comentarios en los blogs o la publicación de contenido generado por los usuarios en tu sitio web, puedes utilizar fragmentos de código HTML para habilitarlo. Estos elementos permitirán a los usuarios destacar palabras clave, incrustar enlaces y dar formato a los comentarios en función de las restricciones que establezcas como moderador.
• Crear contenido adicional para el correo electrónico. El correo electrónico también utiliza el HTML como lenguaje para los mensajes de texto enriquecido, que incluyen enlaces, texto y una variedad de otros elementos que no pueden aparecer sólo en texto plano. Por lo tanto, si quieres compartir un libro electrónico relacionado con tu sitio web a través del correo electrónico, puedes utilizar HTML para optimizar el impacto de tu mensaje.
• Entender los documentos de ayuda sin conexión que se instalan en tu ordenador. Curiosamente, el HTML se utiliza como formato para los documentos de ayuda del ordenador que son accesibles sin conexión. Por lo tanto, un conocimiento básico de HTML puede ayudarte a entender los problemas de tu hardware y a resolverlos más rápidamente, lo que a su vez puede garantizar que seas capaz de restaurar tu sitio web más rápidamente en los casos en que se haya desconectado.

Estructura de la página HTML

Antes de que puedas construir una página HTML, necesitas tener los elementos básicos.

Normalmente, una página se compone de tres elementos estructurales:

1. Cabecera: La cabecera contiene contenido relevante para todas las páginas de tu sitio, como un logotipo o el nombre del sitio web, y un sistema de navegación. La cabecera se ve en cada página.
2. Cuerpo principal: Ocupa el área más grande de una página web. Contiene contenido específico de la página que se está viendo.
3. Pie de página: El contenido del pie de página suele incluir información de contacto, una dirección de envío o avisos legales. Al igual que la cabecera, el pie de página aparece en todas las páginas, pero se sitúa en la parte inferior.

Este es el aspecto de esos elementos estructurales básicos cuando se juntan:

Este es otro ejemplo, en el que se utilizan las etiquetas de cabecera y la etiqueta de párrafo para estructurar el contenido de forma estética. Además, hemos añadido una etiqueta de pie de página para el contenido que se encuentra debajo del cuerpo principal de la página:

El punto de partida de cualquier código HTML son las etiquetas individuales, que sirven para crear todos los elementos cruciales y ayudan a estructurar tus páginas web.

A continuación, echaremos un vistazo a las etiquetas más comunes antes de explorar cómo se pueden aprovechar para generar elementos específicos en la página:

Etiquetas de encabezamiento

Todos los documentos en línea, incluidas las páginas web, comienzan con un encabezamiento. Estos se construyen mediante etiquetas HTML, y el lenguaje permite actualmente hasta seis elementos de tamaño variable que también te permiten estructurar tu contenido con títulos adicionales, subtítulos y líneas de texto en negrita. Para comenzar tu encabezamiento, basta con anteponer al texto correspondiente la etiqueta

,

,

,

,

o

en función del tamaño deseado.

A continuación, debes aplicar una etiqueta de cierre al final del encabezamiento para encapsular el texto, y se mostrará de la siguiente manera en formato HTML:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

Una vez confirmado, esto se traducirá en la siguiente estética en la página de destino de tu sitio web:

Esta es la rúbrica 2

Esta es la rúbrica 3

Esta es la rúbrica 4

Esta es la rúbrica 5

Esta es la rúbrica 6

Aquí se ven claramente los distintos tamaños de los encabezados variables, así como el hecho de que el navegador añade una línea antes y después del encabezado. También te darás cuenta de que la etiqueta de cierre al final del texto del encabezamiento tiene una estética ligeramente diferente, pero esto lo veremos en el siguiente capítulo cuando veamos cómo utilizar las etiquetas para definir elementos específicos.

Etiquetas de párrafo

Un principio similar se aplica a las etiquetas de párrafo inicial, que se representan con

. Esto te permite estructurar tu contenido y dividirlo en párrafos relevantes, lo que a su vez se traduce en una experiencia de lectura más fácil y fluida. Una vez más, la etiqueta

debe colocarse al principio del texto correspondiente, antes de aplicar la etiqueta de cierre alternativo al final para completar el efecto. Sin embargo, a diferencia de las etiquetas de encabezamiento, no hay varias numéricas que puedan alterar el tamaño del texto que aparece en el párrafo.

Fuera del formato HTML, esto descompondrá el texto de la siguiente manera en tu página web terminada:

Etiquetas de salto de línea

Los primeros ejemplos representan las etiquetas HTML más básicas, pero hay otras que utilizan un formato diferente y tomas de cierre alternativas. Por ejemplo, los saltos de línea, que crean una distinción en la que las líneas de texto se rompen y continúan en la línea siguiente. Existe una diferencia fundamental entre los saltos de línea y los párrafos en el ámbito de HTML, ya que mientras estos últimos son elementos de bloque estándar que contienen texto, los primeros crean una separación dentro de un elemento

existente.

Por ello, los saltos de línea representan un elemento vacío en HTML y, por tanto, no están definidos por etiquetas de apertura o cierre. En su lugar, están representados por la etiqueta
, que puede insertarse en elementos

existentes para separar el texto y, potencialmente, resaltar piezas importantes de información. El único espacio entre el carácter y la barra diagonal es crucial, ya que, de lo contrario, la etiqueta no es reconocible en formato HTML.

Una vez aplicado, esto romperá el texto de la siguiente manera:

Como puedes ver, puedes aplicar saltos de línea tantas veces como quieras dentro de un elemento de párrafo existente, siempre que añadan valor y faciliten la digestión de la información. También verás que las etiquetas de apertura y cierre de párrafo no se modifican, y que las etiquetas de salto de línea se utilizan para modificar la disposición del texto incluido en ellas.

Este es uno de los ejemplos de cómo se pueden utilizar las etiquetas HTML para modificar los elementos existentes, lo que desempeña un papel fundamental en la definición de la disposición visual de tus páginas web y contenidos.

Líneas horizontales

Del mismo modo, hay otras etiquetas que se pueden utilizar dentro del elemento

o para separar más cuerpos de texto en tu página web. Una de las más utilizadas es la etiqueta

, que ayuda a crear un elemento vacío que dibuja una línea visual y horizontal entre secciones alternas de un documento en línea. Puede que quieras colocar una línea entre dos cuerpos de texto, por ejemplo, para reenfocar al lector o simplemente para introducir un nuevo elemento visual. Así es como se crea una ruptura de este tipo en HTML:

Aquí, la ruptura entre los caracteres hr y la barra oblicua pone de manifiesto la construcción de un elemento vacío, mientras que, una vez más, no se requiere ninguna etiqueta de cierre para completar el efecto Esto creará la siguiente imagen:

Etiquetas de la imagen

Las etiquetas de imagen también representan elementos vacíos en HTML, lo que significa, una vez más, que no presentan una etiqueta de cierre. Como sólo contienen atributos relacionados con la URL de la imagen que estás incrustando en el sitio, se definen simplemente con la etiqueta al principio del elemento. Pueden colocarse en cualquier lugar de tu sitio web, aunque no es habitual incluirlas en elementos existentes, como párrafos o títulos. Así es como se presenta una típica etiqueta de imagen HTML:

También debes proporcionar un texto alternativo para tu imagen, que ayude a las personas a visualizarla en caso de que los tiempos de carga sean lentos o se utilice un lector de pantalla. De este modo, si el navegador no encuentra la imagen, mostrará el valor del atributo alternativo a los espectadores. Una vez más, se utiliza la etiqueta de imagen, pero se incluye un conjunto diferente de atributos:

Elementos HTML

Anteriormente, hemos visto cómo se utilizan las etiquetas HTML simples para definir los elementos de la página, y también hemos explorado cómo se pueden personalizar aún más utilizando elementos vacíos que contienen etiquetas de imagen y de salto de línea. Esto nos ayuda a comprender la relación que existe entre las etiquetas y los elementos, y cómo pueden utilizarse para definir diferentes tipos de contenido en tu sitio web.

Aunque todos los aspectos del lenguaje HTML están representados por una etiqueta, por ejemplo, un elemento definido que incluya contenido debe tener una etiqueta de inicio y otra de cierre. Así, los títulos y los párrafos son elementos HTML porque utilizan etiquetas de inicio y de cierre para encapsular y aumentar el texto correspondiente. En cambio, los elementos vacíos contienen atributos o no tienen contenido, lo que permite utilizarlos dentro de elementos existentes sin necesidad de una etiqueta de cierre.

Definición de los elementos HTML

Cuando se utilizan ejemplos como los encabezados y los párrafos, la aplicación correcta de las etiquetas de inicio y cierre es crucial. La etiqueta de inicio (como

o

) es la que define el elemento en cuestión, por ejemplo, mientras que la etiqueta de cierre garantiza que ese elemento no se continúe en el resto de la página web. Si no utilizas la etiqueta de cierre al final del párrafo deseado, por ejemplo, el texto aparecerá en un solo bloque antiestético y muy difícil de leer.

Todas las etiquetas de cierre son idénticas a las de inicio, salvo que las primeras llevan una barra inclinada antes de los caracteres correspondientes. Así, en el caso de un

encabezado, la etiqueta de cierre será

, mientras que para los párrafos siempre se utilizará

para definir la ruptura del texto. Esto requiere atención al detalle mientras se codifica, y es importante tener en cuenta al programar los encabezamientos que el número que utilices (como h1 o h2) se aplica tanto en las etiquetas de inicio como en las de cierre.

Uso de elementos HTML anidados

A estas alturas, está claro que los documentos HTML y las páginas web están formados por un árbol de varios elementos, que sirven como bloques de construcción para una serie de activos. También hemos visto cómo estos elementos pueden formarse y utilizarse para estructurar el contenido en línea, y ahora continuaremos examinando los elementos HTML anidados.

Al igual que los elementos vacíos y las etiquetas independientes (como
) pueden incorporarse a elementos HTML definidos, los denominados elementos anidados también pueden alojarse dentro de contenidos como títulos y párrafos. Entre ellos se encuentran ejemplos como la negrita y la cursiva y el texto subrayado, y pueden aplicarse para añadir personalidad a tu contenido y atraer la atención del lector hacia puntos específicos de interés.

Texto en negrita, cursiva y tachado en HTML

Supongamos que quieres resaltar una palabra dentro de un elemento de párrafo existente. Puedes conseguirlo poniéndola en negrita, utilizando simples etiquetas dentro del elemento estándar

. Utilizando HTML, lo programarás de la siguiente manera:

Aquí, el elemento anidado tiene una etiqueta de inicio y otra de cierre, cada una de las cuales sigue un formato similar a las asociadas a los títulos y párrafos. Se pueden utilizar sin problemas dentro de los elementos existentes, y en este caso, producirá los siguientes resultados:

Ahora digamos que también quieres cambiar la tipografía de esta palabra para que también sea cursiva. Esto se puede conseguir simplemente añadiendo otro elemento anidado, que debería codificarse así

Como puedes ver, las etiquetas de inicio y cierre en cursiva se han incorporado simplemente al elemento

. Esto transformará ahora el contenido dentro del elemento para que aparezca de la siguiente manera:

Por supuesto, puedes decidir que prefieres resaltar esta palabra de otra manera. Para ello, puedes utilizar un elemento anidado alternativo, como el tachado (que se representa con las etiquetas y . Estas etiquetas pueden aplicarse de la misma manera dentro del elemento

, apareciendo así en HTML:

En este caso, el texto aparecerá así en tu documento o página de destino:

Esto ofrece una visión de los elementos que pueden formar las etiquetas, que a su vez definen la estructura de tus páginas web y el contenido que presentan. No sólo esto, sino que también se pueden utilizar elementos vacíos y anidados para definir mejor tu contenido.

Atributos HTML

Si las etiquetas son los bloques que construyen y definen los elementos, los atributos HTML pueden utilizarse para personalizar sus características (como el estilo, el color y el idioma). Todos los elementos HTML tienen atributos centrales, que proporcionan información básica y se especifican siempre dentro de la etiqueta stat. Suelen venir en parejas, por lo que suelen aparecer con el siguiente formato: name="valor"

En términos sencillos, el nombre representa la propiedad que quieres establecer, mientras que el valor se refiere a los criterios específicos que quieres incorporar.

Hay un gran número de atributos que se pueden aplicar a tus elementos HTML, pero los más relevantes para los webmasters noveles son:

El atributo "lang

El atributo más básico define el idioma del documento y sus elementos. Se declara mediante el atributo "lang", y aunque se pasa fácilmente por alto, tiene la ventaja de hacer el contenido más accesible para los lectores de pantalla y los motores de búsqueda. Normalmente se presenta al principio del documento con el siguiente formato:

Tras el atributo lang, las dos primeras letras especifican el idioma (que en este caso es el inglés). Tras el guión, las dos letras siguientes establecen el dialecto, aunque no estará presente en todos los idiomas. Es importante que aciertes con este atributo si quieres llegar con éxito a tu público.

El atributo 'align'

Ya hemos hablado del formato de los atributos HTML (name="value"), y la mejor encarnación de esto ocurre cuando intentas alinear el contenido dentro de tus elementos. Puedes decidir centrar todos los párrafos de una página concreta, por ejemplo, siendo la alineación la propiedad que deseas establecer. En consecuencia, "centro" es el valor del atributo, aunque tienes la opción de alinear tu texto a la izquierda o a la derecha.

Esto alineará tus elementos

en el centro de la página, y creará un diseño uniforme que se adapte a la naturaleza específica de tu sitio web (ver más abajo):

El atributo 'href'

Si vas a construir un sitio web visible, es importante que incorpores tanto enlaces entrantes como salientes. Construir una cartera de enlaces que incluya enlaces de retorno a páginas de destino internas también es una estrategia viable, por lo que tendrás que aprender a codificarlos en HTML.

Los enlaces HTML se definen con la etiqueta , que incluye el enlace de destino junto con el texto ancla afiliado que albergará la URL. Es el atributo 'href' el que especifica la dirección del sitio, sin embargo, éste se incorpora como parte de la etiqueta de inicio. Se codifica en HTML como sigue:

Esto resalta claramente la distinción entre la etiqueta de inicio y la de cierre, y se traducirá así en tu página de destino:

El atributo 'color'

Este es otro atributo importante, ya que el uso del color puede dar vida a tu sitio web y ayudar a crear contrastes importantes y una fuerte estética de diseño. En HTML, un color puede especificarse utilizando su nombre, aunque también es posible utilizar un valor RGB o HEX para lograr este objetivo. Sin embargo, la primera opción es la más fácil de seguir, ya que también puede aplicarse a los títulos, párrafos y otros elementos de tu página.

Se trata de un atributo de estilo, en el que el color que elijas representa el valor que quieras establecer. Al aplicar el color rojo al encabezamiento principal, por ejemplo, se verá así:

Una vez aplicado, este elemento aparecerá así en tu sitio web:

El color del texto se establece utilizando el rojo

Una vez más, hay una clara distinción entre las etiquetas de inicio y cierre que definen el elemento, mientras que éste es uno de los atributos más fáciles de aplicar en HTML. También destaca el formato name="value de los atributos HTML, lo que hace que el proceso de aprendizaje y aplicación de los mismos sea mucho más fácil en tu sitio web.

Pruébalo tú mismo

Con una comprensión básica de HTML y sus elementos individuales, el siguiente paso es emprender algunos proyectos sencillos y aplicar tus conocimientos teóricos para resolver los retos prácticos.

En el ejercicio que se detalla a continuación, hemos presentado un texto excepto y hemos pedido que se formateen varios aspectos utilizando HTML Utiliza la guía y todo lo que has aprendido hasta ahora para completar el reto mientras te preparas para codificar tu propio sitio web.

Preguntas:

1. Completa el elemento de cabecera con la etiqueta de cierre correcta.
2. Poner la cabecera en negrita.
3. Inserta una línea horizontal bajo la cabecera.
4. Utiliza el atributo de color y sombrea "Gracias por visitarnos" en verde
5. Inserta este hipervínculo (https://www.w3schools.com/html/) en el texto de anclaje "Saber más"
6. En la cabecera de la página, utiliza el formato name="valor" para alinear los párrafos a la izquierda

Estadísticas y datos del lenguaje HTML

1. Los elementos HTML, head y body han formado parte de la especificación HTML desde mediados de la década de 1990 y, hasta hace unos años, eran los principales elementos utilizados para dar estructura a los documentos HTML. Sin embargo, la situación ha cambiado drásticamente en los últimos años, ya que HTML5 ha añadido un montón de nuevas etiquetas que pueden utilizarse para añadir un rico significado semántico a la estructura de un documento HTML.
2. Los documentos HTML deben comenzar con una Declaración de Tipo de Documento (informalmente, un "doctype"). En los navegadores, el doctype ayuda a definir el modo de representación. HTML5 no define una DTD; por tanto, en HTML5 la declaración de doctype es más sencilla y corta.
3. Los navegadores móviles han adoptado plenamente HTML5, por lo que crear proyectos preparados para móviles es tan fácil como diseñar y construir para sus pantallas táctiles más pequeñas, de ahí la popularidad del diseño responsivo. Hay algunas etiquetas meta geniales que también te permiten optimizar para móviles.
4. el 78% de los desarrolladores de contenido están de acuerdo en que la estructura es adecuada para crear aplicaciones móviles, y el 68% dice que es adecuada para diseñar cualquier tipo de aplicación.
5. HTML5 también viene con un montón de grandes APIs que te permiten construir una mejor experiencia de usuario y una aplicación web más robusta y dinámica - aquí hay una lista rápida de APIs nativas:
   • Arrastrar y soltar (DnD)
   • Base de datos de almacenamiento sin conexión
   • Gestión del historial del navegador
   • Edición de documentos
   • Reproducción temporizada de medios
6. HTML5 no está controlado por una empresa. Una de sus mejores características reside en el hecho de que es un estándar abierto. Los desarrolladores tienen libertad para dejar fluir su creatividad y añadir todas las funciones y características que puedan.
7. En comparación con otros navegadores, cada actualización de Google Chrome se asegura de incluir soporte para HTML5. Además, el reproductor por defecto de YouTube es ahora HTML5 y los anuncios Flash de Google se están convirtiendo en HTML5.
8. Uso de HTML5 por los desarrolladores (por región):
   • América del Norte y América Latina - 70%
   • América del Sur - 61%
   • ASPAC - 60%
   • Australia - 60%
   • Europa - 59%
   • África - 50 %

Conclusión

Aunque el HTML se creó en 1991 (la primera versión del lenguaje de codificación se lanzó en 1995), se ha convertido rápidamente en una herramienta fundamental para el diseño de sitios web funcionales y visualmente atractivos. El nivel de influencia de HTML sigue evolucionando también, y la última iteración (HTML5) está siendo adoptada por un número creciente de sitios web en todo el mundo.

En este sentido, aprender los elementos básicos de HTML y cómo aplicarlos es el paso más importante que darás para establecer un sitio web exitoso, visible y, en última instancia, competitivo.