📑 Tabla de contenidos
Generalmente, solemos pensar que una página web no es más que un conjunto de elementos gráficos y de textos, que reflejan la esencia de una empresa en Internet. Si bien esto es una parte de los sitios web, también lo son los códigos HTML dentro de su construcción.
Los códigos HTML pueden resultarnos algo complicado y aterrador, pero no tendrá por qué ser así, después de que leas la siguiente explicación sencilla de lo qué son los códigos HTML y cómo funcionan junto a algunos ejemplos sencillos y actualizados.
¿Qué son los códigos HTML?
Muchas personas tienden a confundir los códigos HTML con un lenguaje de programación, pero no es así. Los códigos HTML componen un lenguaje basado en el etiquetado o modelado de información que se utiliza para desarrollar sitios web en Internet.
Las siglas HTML significan "HyperText Markup Language", lo que quiere decir en español "Lenguaje de Marcas de Hipertexto", lo que efectivamente da cuenta de su significado y uso dentro de Internet. En esencia, se trata de la descripción textual de tu página web.
Este tipo de lenguaje nos permite presentar organizadamente una determinada información en la red, usando las famosas tags, lo cual significa etiquetas en Hipertexto.
Todos los sitios web en Internet utilizan este lenguaje HTML, por lo que aprender algunos códigos simples podría serte de mucho provecho para el desarrollo del sitio web de tu negocio.
¿Podemos aprender este lenguaje?
Actualmente, los códigos HTML son utilizados por muchos usuarios, incluso pueden ser empleados por cualquier persona que esté interesada, ya que se trata de un lenguaje muy sencillo de aprender. Incluso existen cursos en línea para iniciar a los niños a emplear este código.
¿Para qué sirven los códigos HTML?
Además de proporcionar el orden adecuado a la información que queremos presentar en Internet, los códigos HTML también sirven como punto de enlace entre esta información y el buscador (Google, Bing, Yahoo! Search, entre otros) que usamos para navegar en la red.
En este sentido, los códigos HTML indican al navegador cómo debe leer la información que está en un sitio web, para luego mostrarla a los visitantes.
¿Cómo funcionan los códigos HTML?
Imaginemos que queremos redactar un artículo sencillo. Sabemos que este debe contener una estructura acorde, es decir, debe llevar un título, subtítulos, una introducción breve, imágenes, entre otros.
De igual forma, las etiquetas HTML cumplen esta función de ordenar la información e indicar qué es cada uno de los segmentos presentados. En síntesis, cada uno de los sitios web es en realidad un archivo en HTML.
Así, si tenemos una etiqueta que señala un Título, entonces el navegador entenderá que esa información es un Título, igualmente pasa con los subtítulos, imágenes, párrafos, etc.
¿Cómo podemos ver los códigos HTML de una web?
Una forma muy clara de ver los códigos de un sitio web es visitar el sitio, y en cualquier espacio vacío darle clic derecho al mouse. Se desplegará un pequeño menú en el que darás un nuevo clic a "Ver código fuente de la página".
Inmediatamente, se abrirá una pestaña nueva en tu navegador donde se mostrarán los códigos HTML que conforman ese sitio web. A primera vista te parecerá una serie de textos sin sentido, pero ya verás que no es nada difícil.
¿Cuál es el formato de un archivo HTML?
Cada archivo HTML es solo un archivo de texto sin formato, pero con una extensión .html en lugar de .txt. Está compuesto por muchas etiquetas HTML y el contenido de la página web.
Por otro lado, un sitio web a menudo contiene muchos archivos HTML que enlazan entre sí, y que dan forma al sitio para que sea leído correctamente por navegadores y buscadores.
¿Cómo podemos identificar las etiquetas HTML?
Las etiquetas HTML son las "palabras clave" que no podemos ver a simple vista, ya que permanecen ocultas dentro del código fuente. La forma de detectarlas es a través de los signos menor que < y mayor que >.
Las etiquetas HTML tienen dos partes: una apertura y un cierre. Dentro de esos signos está el nombre de la etiqueta. Por ejemplo:
<title> Título de la página </title>La etiqueta de cierre tiene el mismo texto que la de apertura, pero con una barra diagonal (/) adelante. Sin embargo, hay algunas etiquetas que no requieren etiqueta de cierre, como <img> para imágenes o <br> para saltos de línea.
Estructura de un archivo básico de códigos HTML
Para comenzar a escribir códigos HTML, es necesario contar con un editor de texto. Uno de los más usados es Sublime Text. También se recomiendan Brackets, Adobe Dreamweaver y Atom Editor.
Un documento HTML básico comienza siempre con la etiqueta de apertura <html> y termina con su cierre </html>. Entre estas dos, incluimos la etiqueta <head> con el título de la página:
<html>
<head>
<title>Título de la página web</title>
</head>
</html>Después agregamos la etiqueta <body>, que es el contenido visual del sitio. Aquí podemos añadir un título visible con <h1> y párrafos de texto con <p>:
<html>
<head>
<title>Título de la página web</title>
</head>
<body>
<h1>Titular de la página principal</h1>
<p>Esto es un párrafo.</p>
</body>
</html>Atributos de las etiquetas HTML
Los atributos te permiten personalizar una etiqueta y se indican dentro de la etiqueta de apertura. Por ejemplo:
<img src="imagen1.jpg">A los atributos frecuentemente se les asigna un valor con el signo de igualdad, como width="50%". La mayoría son opcionales, pero algunos como src y alt en la etiqueta <img> son obligatorios para que el navegador muestre la página correctamente.
Ejemplos de códigos HTML básicos
Etiquetas para encabezados
Los encabezados son uno de los códigos más fáciles de aprender y además componen una de las etiquetas más importantes para el SEO. Hay seis tipos diferentes:
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>Etiquetas para párrafos
Para agregar párrafos de texto usamos la etiqueta <p>. Siempre debe cerrarse con </p>:
<p>Párrafo</p>Etiquetas para enlaces
Para vincular contenidos usamos la etiqueta <a>. El atributo href indica la dirección del sitio web de destino:
<a href="https://www.nibiru.com/blog/">¡Visitemos el increíble Blog de Nibiru!</a>Etiquetas para saltos de línea
Los saltos de línea no necesitan etiqueta de cierre. Se crean con <br> y generan un espacio vacío entre dos líneas de texto:
<p>Colocamos un salto de línea debajo de esta oración.
<br>
Colocamos un salto de línea sobre esta frase.</p>Etiquetas para imágenes
Las imágenes son componentes altamente atractivos para captar lectores. La etiqueta <img> no necesita cierre. Es importante añadir el atributo alt para optimizar el SEO de la imagen:
<img src="https://cdn.pixabay.com/photo/2016/02/10/16/37/cat-1192026_960_720.jpg"
alt="Cute Kitty"
style="width: 500px; height: 555px;">Etiquetas para listas ordenadas
Las listas ordenadas se presentan con números. Usamos <ol> para la lista completa y <li> para cada elemento:
<ol>
<li>Primer ítem</li>
<li>Segundo ítem</li>
<li>Tercer ítem</li>
</ol>Etiquetas para listas desordenadas
Las listas desordenadas se muestran con viñetas. Solo cambiamos <ol> por <ul>:
<ul>
<li>Primer ítem</li>
<li>Segundo ítem</li>
<li>Tercer ítem</li>
</ul>Por el momento eso es todo sobre el mundo de los códigos HTML. ¿Qué te han parecido estos ejemplos? Cuéntanos, te leemos.
¿Querés tener tu propia web?
