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 por mucho tiempo. Te invitamos a leer la siguiente explicación sencilla sobre lo qué son los códigos HTML y cómo funcionan junto a algunos ejemplos sencillos y actualizados.

¿Qué son los códigos HTML?

HTML es un lenguaje que nos permite estructurar nuestra web de manera organizada y comprensible para los motores de búsqueda.

Muchas personas tienden a confundir los códigos HTML con un lenguaje de programación, pero no es así.

El HTML es un lenguaje informático basado en el etiquetado o modelado de información que se utiliza para desarrollar sitios web en Internet. Con este lenguaje, es posible estructurar nuestra web, es decir, marcar enlaces, párrafos, secciones, encabezados, citas, entre otros.

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 y esquematización textual de tu página web.

Descubre qué es HTML y para qué sirve.

Por lo tanto, este tipo de lenguaje nos permite presentar una información en Internet de forma organizada y jerarquizada, usando las famosas tags, lo cual significa etiquetas en Hipertexto.

No obstante, todos los sitios web en Internet utilizan este lenguaje HTML, por lo que aprender algunos códigos simples podrían 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?

Las etiquetas HMTL funcionan como marcadores de la información, de forma que indica de que se trata cada sección y cómo debe ser presentada.

En primer lugar, imaginemos que debemos queremos redactar un artículo sencillo para nuestra web.

Sabemos que este debe contener una estructura determinada, es decir, debe llevar un título, subtítulos, una introducción breve, imágenes, entre otros.

De la misma manera, 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, tenemos que 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?

Ver el código HTML de un sitio web es bastante sencillo.

Una forma muy clara de ver los códigos de un sitio web, es visitar el sitio web, y en cualquier espacio vacío, darle clic derecho a tu mouse. Luego, 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 te mostrarán los códigos HTML que conforman ese sitio web.

A primera vista, te parecerá una serie de textos sin sentido alguno y además, muy complicado de entender. Pero ya verás que no es nada difícil.

¿Cuál es el formato de un archivo HTML? ¿Una página puede tener varios archivos en HTML?

Cada archivo HTML es solo un archivo de texto sin formato, pero con una extensión de archivo .html en lugar de .txt, y está compuesto por muchas etiquetas HTML y el contenido de una página web, como bien señalamos en líneas anteriores.

Por otro lado, un sitio web a menudo contiene muchos archivos HTML que enlazan entre sí, y que asimismo dan forma a un sitio web para que este sea leído correctamente por nuestros navegadores y buscadores, para así mostrarla.

¿Cómo podemos identificar las etiquetas HTML de una web?

Cada etiqueta HTML tiene dos signos que permiten identificar cada etiqueta: un signo de apertura y uno de cierre.

Ahora bien, las etiquetas HTML de una web son las “palabras clave” que no podemos ver a simple vista, ya que permanecen ocultas dentro del código fuente, como pudimos comprobar hace un momento.

Así pues, la forma en la que podemos detectarlas dentro de los códigos, es a través de un par de signos bien conocidos: menor que < y mayor que >.

En este sentido, las etiquetas HTML deben tener dos partes, una apertura (menor que <) y una parte de cierre (mayor que >). Dentro de estos signos estará encapsulado el nombre de la etiqueta. Por ejemplo:

<Title> que significa: “Título”.

Adicional a esto, debemos tener en cuenta que la etiqueta de cierre tiene el mismo texto que la etiqueta de apertura, pero tiene un carácter de barra diagonal (/) añadido. Así, podemos entender esto como el carácter que cierra esa etiqueta HTML.

Por ejemplo:

<Title>Mi página web </Title>

Sin embargo, hay algunas etiquetas que son una excepción a esta regla donde no se requiere una etiqueta de cierre.

Así pues, la etiqueta <img> para mostrar imágenes es un ejemplo claro de esta excepción. También lo es la etiqueta BR que indica un salto de línea.

Estructura de un archivo básico de códigos HTML

Primero, para comenzar a escribir los códigos HTML de tu página web, es necesario contar con un editor de texto de HTML. Uno de los más usados y recomendados es el editor Sublime Text, ya que proporciona herramientas que facilitan el desarrollo de los códigos.

Especialistas del área, también recomiendan los editores: Brackets, Adobe Dreamweaver, Atom Editor, entre otros.

Ahora bien, un documento de HTML básico debe comenzar siempre con el código de apertura HTML, seguido su código HTML de cierre. Así:

<html>

</html>

Entre estos dos, incluimos la etiqueta “head” que significa “cabecera” y en ella incluimos la etiqueta Title junto a su correspondiente Title de cierre.

La etiqueta “head” nos permite identificar el sitio web que no se muestra en la página, es decir, su nombre, descripción, o cualquier otro elemento especial.

En este caso, solo nos limitamos a modo de ejemplo, a señalar el Título de la página, como veremos a continuación:

<html>

<head>

<title> Título de la página web </title>

</head>

</html>

Después de señalar el nombre de la página web dentro de la etiqueta <head> junto a su correspondiente cierre, procedemos a estructurar la etiqueta “Body”, la cual significa “cuerpo”, esto es el contenido visual del sitio web, es decir, todo lo que podemos ver en el sitio.

Aquí podemos añadir un Título visible en H1, que generalmente se muestra más resaltado que otros títulos visuales. También podemos añadir párrafos de texto dentro de la etiqueta <p>, como veremos en el siguiente ejemplo:

<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 la etiqueta HTML

Primero, los atributos te permiten personalizar una etiqueta, y se indican dentro de la etiqueta de apertura, por ejemplo:

<img src=»image1.jpg»>

A los atributos frecuentemente se les asigna un valor con el signo de igualdad, como:

width=»50%»

Por otro lado, la mayoría de los atributos son opcionales para una gran parte de las etiquetas, y solo se usan cuando se desea cambiar algo sobre la forma establecida en la que navegador muestra una etiqueta dentro de la página web.

Sin embargo, algunas etiquetas, como la <img> etiqueta (etiqueta de imagen), han requerido atributos tales como srcy alt que son necesarios para que el navegador muestre la página web correctamente.

Ejemplos de códigos HTML básicos

Ahora vamos a mostrarte varios ejemplos de un archivo HTML básico, que contiene todas las etiquetas esenciales.

Puedes copiar el código a continuación, pegarlo en tu editor de preferencia y guardarlo como mypage.html para iniciar tu propia página web.

Etiquetas para el Encabezado

Ahora bien, los encabezados pueden ser uno de los códigos más fáciles de aprender y además, componen una de las etiquetas más importantes para trabajar el SEO de nuestra página web en los buscadores.

Hay seis tipos diferentes, como se veremos a continuación. Para crear un encabezado, simplemente ajusta tu texto dentro de las etiquetas de encabezado que hayas seleccionado de acuerdo a tu contenido, así:

<h1> Encabezado 1 </h1>

<h2> Encabezado 2 </h2>

<h3> Encabezado 3 </h3>

Y así sucesivamente…

Etiquetas para añadir párrafos

Como es de esperar, cada uno de los encabezados contiene sus correspondientes párrafos, así como el que estás leyendo ahora mismo. Solo debes añadirlo dentro de la etiqueta <p>.

Recuerda que no debe quedar abierta, es decir, debemos cerrarla así: </p>.

<p> Párrafo </p>

Se muestra: Párrafo.

Etiquetas para mostrar enlaces

Nuestro sitio web podría no obtener mucha importancia, si antes no añadimos enlaces o links hacia otros sitios web.

Para vincular nuestros contenidos, debemos usar la etiqueta <a>, junto a la frase o palabra que contendrá el vínculo, la palabra href indica la dirección del sitio web de destino a la que desea que vaya tu vínculo, así:

<a href=»https://www.neolo.com/blog/»> ¡Visitemos el increíble Blog de Neolo! </a>

Y se muestra así:

¡Visitemos el increíble Blog de Neolo!

Etiquetas para los saltos de líneas

Como mencionamos anteriormente, los saltos de líneas no necesitan una etiqueta de cierre, ya que indican un espacio vacío dentro del texto.

Así pues, un salto de línea es esencialmente un espacio añadido entre dos líneas de texto, y lo creamos con la etiqueta <br>.

<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 las imágenes

Si queremos que nuestros visitantes obtengan una información de forma más amena, ningún artículo que mostremos en nuestra página web debe publicarse sin al menos, una imagen. De hecho, las imágenes son componentes altamente atractivos para atraer a nuevos lectores hacia nuestros contenidos.

<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;»>

Debido a que la etiqueta de imagen solo posee atributos, no es necesario cerrarla. Los atributos de este elemento incluyen «src» o URL de imagen.

Es importante añadir el título de la imagen, para optimizar el SEO de dicha imagen, así como las propiedades visuales (estilo): ancho y alto que se muestran.

Etiquetas de listas organizadas en números

Para finalizar, mencionaremos la etiqueta para crear listas ordenadas dentro de nuestro contenido web. Las listas organizadas son presentadas con números en el orden correcto.

Para crear códigos de listas, usaremos la etiqueta <ol> que es la «lista ordenada» completa, mientras que <li> es cada uno de los «elementos de lista». Puedes incluir tantos elementos de lista como necesites. Así:

<ol>

<li> Primer ítem </li>

<li> Segundo ítem </li>

<li> Tercer ítem </li>

</ol>

Etiquetas para listas desordenadas en viñetas

Solo necesitamos cambiar el nombre de la etiqueta para indicar la creación de una lista desordenada, que no es más que una lista sin orden, pero dividida en viñetas. El nombre de esta etiqueta es <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.

¿Necesitas un web hosting profesional y de confianza?

¡Obtén tu dominio y correo electrónico propio!

MÁS INFORMACIÓN

¿Te ha gustado este artculo?
Recíbe los nuevos en el newsletter mensual de Neolo o Telegram de Neolo