¬°Enlaces internos en HTML! (3 tipos m√°s usados)

enlaces internos en html

Algo que es vital conocer en HTML, es sobre los enlaces, existen varios tipos de enlaces pero en esta ocasión hablaremos sobre los enlaces internos en HTML.

El mundo del desarrollo web es algo fascinante que, a cualquiera que les guste dise√Īar y ser innovador en el internet le interesara.

Actualmente el desarrollo de paginas web es bastante sencillo y más con HTML, existen varias plataformas y CMS que nos ayudan a este proceso de creación de páginas web, pero qué mejor manera de aprender a hacer páginas web conociendo más sobre HTML.

Entre los conceptos basicos que hay que aprender para entender mas sobre el HTML, podemos destacar los siguientes:

  • Enlaces.
  • Etiquetas multimedia (img, v√≠deo, iframe).
  • Dise√Īo responsivo
  • Hojas de estilo
  • Etiquetas de cabecera.
  • Etiquetas de texto (p√°rrafos, contenedores, encabezados).
  • Columnas.
  • Colores en hexadecimal.

Entre otros conceptos.

Unos de los conceptos que es necesario conocer es sobre los enlaces, mismos que nos ayudaran a enlazar varias paginas web con la que desarrollamos.

En el caso de los enlaces internos en HTML, nos ayudan mucho cuando queremos tener una mayor accesibilidad en nuestra web.

Si inicias en este campo de desarrollo web y que empieces a desarrollar p√°ginas web en HTML, el concepto de los enlaces internos en HTML te ayudara bastante.

A lo largo de este post, conoceremos que son los enlaces internos en HTML, así como algunos ejemplos, otros tipos de enlaces que hay y cómo es que los enlaces se relacionan con el SEO, es decir, el posicionamiento orgánico web.

Podemos asegurarte que despues de leer este post, te sera mas facil comprender y aplicar con mayor facilidad los enlaces internos en HTML y los demás tipos de enlaces, cabe mencionar que este post no solo es para los que se inician en HTML, si no para aquellos que quieran retroalimentarse en esta cuestión y aprender la relación que guarda con el SEO.

Sin m√°s comencemos con este tema que te resultara bastante interesante.

¬°Enlaces internos en HTML, un concepto necesario de aprender!
¬°Enlaces internos en HTML, un concepto necesario de aprender!

Los IDE son ideales para empezar a desarrollar páginas web con HTML, ya que otorga grandes facilidades para su programación.

Consejo para empezar en HTML.

Conceptos b√°sicos de enlaces en HTML

Al Igual que todo tema que hay en este mundo, existen conceptos b√°sicos que son necesarios saber para que las cosas sean m√°s sencillas de comprender, ya que si no hay una base previa, el aprendizaje ser√° un poco m√°s complicado.

HTML viene de las siglas que significa HyperText Markup Language (lenguaje de marcas de hipertexto).

En este caso hablaremos sobre unos conceptos de HTML que son necesarios saber, entre los cuales se desprende el de los enlaces internos en HTML, tema en el que nos basaremos principalmente.

Cabe mencionar que no se mencionan todos los conceptos sobre el HTML solo nos basaremos en los que competen con los enlaces internos en HTML.

Los conceptos generales en HTML son los siguientes:

  • Partes de una p√°gina web.
  • T√≠tulos o encabezados
  • P√°rrafos.
  • Listas.
  • Tablas.
  • Atributos y estilos
  • y por su puesto, enlace

¬ŅQue es un enlace?

Los enlaces son una manera f√°cil y muy pr√°ctica de acceder a otras p√°ginas web, contactarnos a un correo electr√≥nico, comunicarnos directamente a una red social (WhatsApp, Facebook, etc), accesar de manera r√°pida a cualquier parte de una p√°gina web o acceder y/o descargar alg√ļn fichero (im√°genes, videos, documentos, etc).

Cabe mencionar que los enlaces tienen atributos que hacen que funcione de una manera más óptima y que vaya de acuerdo a las necesidades que se solicitan.

En HTML , los enlaces son identificables con la etiqueta <a></a> acompa√Īada siempre por su atributo principal “href=”.

Los enlaces podemos encontrarlos en diferentes parte de una web, como por ejemplo:

  • Dentro de la cabecera de la web, es decir, entre las etiquetas <head></head>.
  • En el cuerpo (etiqueta <body>) de la web, ya sea en textos, p√°rrafos incluso en t√≠tulos.
  • En im√°genes.
  • En botones y otros lugares m√°s.
¬°Enlaces, concepto de donde se desprende los enlaces internos en HTML.
¬°Enlaces, concepto de donde se desprende los enlaces internos en HTML.

<a href=”Direccion-web.com”>Haz click aqui</a>

Ejemplo de un enlace sencillo.

¬ŅQu√© tipos de enlaces existen?

Existen diferentes tipos de enlaces, su objetivo es enlazar, pero que cambian un poco algunos aspectos. Los tipos de enlaces que existen son:

  • Enlaces internos en HTML.
  • Enlaces externos en HTML.
  • Enlaces locales.
  • Enlaces remotos.
  • Enlaces de identificador o de clases (ID/class).
  • Enlaces para correos electr√≥nicos.
  • Enlaces para WhatsApp.
  • Enlaces para im√°genes.
  • Enlaces para descargar ficheros.

M√°s adelante se hablara de algunos de estos enlaces.

¡Los diferentes tipos de enlaces, es aquí donde se desprende los enlaces internos en HTML!
¡Los diferentes tipos de enlaces, es aquí donde se desprende los enlaces internos en HTML!

¬ŅQue es una clase?

Las clases (identificadas en HTML como “class”) son una especie de enlace, pero que act√ļa de manera diferente, su funcionamiento es similar, ya que tambi√©n enlaza, pero lo que hace la clase es que da formato a elementos de HTML (como son p√°rrafos, tablas, contenedores, listas, etc) desde una hoja de estilo CSS, ya sea de manera local o de manera externa, por eso es que act√ļa de una manera algo similar, pero esto no quiere decir que sean lo mismo.

Las clases deben de llevar un nombre para que sean fáciles de distinguir, por eso es recomendable ponerles nombres sencillo y que no sea difícil de recordar, ya que si no se pone el mismo nombre, no habrá cambios en el elemento.

Consejo para las clases en HTML
¬°Las clases son muy diferentes a los enlaces internos en HTML!
¬°Las clases son muy diferentes a los enlaces internos en HTML!

Ejemplo b√°sico de una clase

Aquí se muestra un ejemplo de una clase básica en HTML

<div class=”col-md-6″>…</div>

<div class=”pie”> donde la clase pie est√° definida de la siguiente manera:
.pie{
background-color: #F8CB4F;
color: #ffffff;
border-radius: .25rem;
margin: 0 0.25em;
}

En el primero se ve una clase sencilla, en el segundo es una clase un poco mas avanzada

¬ŅQue es una identificador (ID)?

Un identificador o tambi√©n conocido como ID, es como su misma palabra lo dice, un identificador que le otorga un valor √ļnico, esto con el fin de identificar el elemento al vincularlo, es decir, que hace una funci√≥n muy similar a la clase y al enlace, pero que act√ļa de manera diferente a los ya mencionados.

Lo que los caracteriza es que no contiene espacios en blanco (como en la clase) y su valor no debe de repetirse en todo el documento.

Los ID son más específicos, es decir, solo pueden identificar a un solo elemento, así que si quieres usarlos debes de tener muy en cuenta esto, ya que si quieres usarlo mas de una vez, habra una confusión en el código.

Consejo para los identificadores (ID) en HTML
¬°Los identificadores son muy diferentes a los enlaces internos en HTML!
¬°Los identificadores son muy diferentes a los enlaces internos en HTML!

Ejemplo b√°sico de una clase ID

Aquí se muestra un ejemplo de un identificador básico en HTML

<p id=”objeto1″>Esto es un p√°rrafo para identificador</p>
Donde el identificador est√° definido de la siguiente manera:

#objeto1{
background-color: #F8CB4F;
color: #ffffff;
margin: 0 0.25em;
}

Ejemplo b√°sico de un identificador en HTML

Conociendo 3 tipos de enlaces m√°s usados en HTML

Ahora bien, ya hemos visto un poco de los conceptos que hay sobre los enlaces, es hora de conocer un poco sobre los enlaces m√°s usados en HTML.

Como se mencionaba en uno de los títulos anteriores, se enlisto los tipos de enlaces que se usan en HTML, pero en este apartado, hablaremos de los tres más usados con mayor frecuencia y que son los más conocidos por los desarrolladores, los cuales son:

  • Enlaces internos en html.
  • Enlaces externos en html.
  • Y los enlaces locales.
Enlaces internos en HTML, enlaces externos en HTML y enlaces locales.
Enlaces internos en HTML, enlaces externos en HTML y enlaces locales.

Comencemos por el que nos interesa hablar en este post.

Enlaces internos en html

Los enlaces internos son aquellos que enlazan a subpáginas o páginas web que están en el mismo dominio de la página principal, haciendo más referencia a la navegación del usuario en el sitio web.

Esto pr√°cticamente se refiere a cuando el usuario quiere ir a otra parte de los sitio web, como por ejemplo una landing page, un blog, un foro, un articulo, etc; y que pueden ser de gran utilidad en el SEO, cosa que veremos m√°s adelante.

Sintaxis

A continuación un breve ejemplo de este tipo de enlace:

Si la pagina principal es starteq.net y quremos enlazar a otro recurso del mismo dominio, la sintaxis quedaría:
<a href=”starteq.net/blog/>Blog</a>

Ejemplo de enlace interno
Ejemplo de enlaces internos en html
Ejemplo de enlaces internos en html

Enlaces externos en html

Los enlaces externos son aquellos que vinculan al sitio web que lo usa y que apunta a otro sitio web de diferente dominio, es decir, te llevan a otra p√°gina web distinta a la que se estaba navegando.

Este tipo de enlaces permite al usuario no solo navegar en la web principal, si no que también tendrán la posibilidad de irse a otros sitios que le resulte de interés, además las páginas vinculadas, contienen temas similares a la pagina de partida.

Mas adelante veremos como es que estos enlaces se relacionan con el SEO.

Sintaxis

A continuación un breve ejemplo de este tipo de enlace:

Si la pagina principal es cocpsa.com y queremos enlazar a un recurso externo, la sintaxis queda asi:
<a href=”https://starteq.net/”>Ir a Starteq</a>

Ejemplo de un enlace externo
Ejemplo de un enlace externo en html
Ejemplo de un enlace externo en html

Enlaces locales

A diferencia de los enlaces internos en html, este tipo de enlaces se encargan de vincular a otras partes del sitio web, es decir, a diferentes secciones del mismo cuerpo de la p√°gina, a esta acci√≥n se le llama anclaje y muy √ļtil para la accesibilidad y mejorar la experiencia de usuario.

Sintaxis

A continuación un breve ejemplo de este tipo de enlace:

<a href=”#abajo”>Ir abajo</a>

Ejemplo de un enlace local.
Ejemplo de enlace local en html
Ejemplo de enlace local en html

Otros tipos de enlaces usados en HTML

No solo existen los enlaces internos en html, tambi√©n existen otros tipos de enlaces que son muy √ļtiles en las p√°ginas web y que tambi√©n son muy usados por los desarrolladores.

En un principio los enlaces anteriores eran muy ocupados, pero conforme fueron avanzando las tecnologías de desarrollo web, surgieron más tipos de enlaces que se fueron adaptando a las nuevas necesidades que fueron surgiendo, estos enlaces son los siguientes:

  • Enlaces para descargar ficheros.
  • Enlaces para im√°genes.
  • Enlaces a correos electr√≥nicos.
  • Enlaces para WhatsApp.

Enlaces para descargar ficheros

Es muy com√ļn encontrar en las webs, encontrar enlaces que nos permiten descargar ficheros (im√°genes, videos, documentos, libros, etc), es decir, solo con hacer clic sobre ellos, podremos obtener un fichero en especial.

Este tipo de enlaces se utiliza principalmente en las p√°ginas o sitios web que deciden regalar o dar acceso a alg√ļn tipo de fichero, es decir, que obtengan dicho archivo de una manera f√°cil y sencilla, sin intermediarios ni plataformas, de manera m√°s directa.

Enlace para descargar ficheros, otro tipo de enlace adem√°s de los enlaces internos en HTML.
Enlace para descargar ficheros, otro tipo de enlace adem√°s de los enlaces internos en HTML.

<a href=”download/acme-doc-2.0.1.txt” download=”Acme Documentation (ver. 2.0.1).txt”>Bajar texto</a>

Ejemplo de un enlace para descargar ficheros

Enlaces para im√°genes

Poner contenido multimedia en las web es bastante sencillo, desde im√°genes o videos, se utilizan enlaces especiales para poner este tipo de contenido, el m√°s usado es el enlace para im√°genes.

Este enlace puede jalar imágenes mediante carpetas que estén en el mismo directorio de la página web o jalando de otros sitios webs, es decir, mediante una URL se puede poner dicha imagen, algo que resulta bastante conveniente si es que se quiere ahorrar espacio en las carpetas y dicho sea de paso que a dichas imágenes se les puede poner un enlace que direccione a una web.

Enlace para im√°genes, otro tipo de enlace adem√°s de los enlaces internos en HTML.
Enlace para im√°genes, otro tipo de enlace adem√°s de los enlaces internos en HTML.

<img src=”IMG A.jpg”></img>

<a title=”Los Tejos” href=”http://www.lostejos.com”><img src=”IMG A.jpg”></a>

El primero es una imagen simple, el segundo es un enlace en la imagen

Enlaces a correos electrónicos

Este tipo de enlaces permite comunicarnos de forma directa mediante un correo electrónico, con la persona o empresa que lo haya puesto.

Con este enlace, es más fácil la comunicación por correo electrónico, ya que con solo hacer clic en él, el usuario podrá mandar un correo sin la necesidad de redactarlo y copiar la dirección de dicho correo.

Enlace a correos electronicos, otro tipo de enlace adem√°s de los enlaces internos en HTML.
Enlace a correos electronicos, otro tipo de enlace adem√°s de los enlaces internos en HTML.

<a href=”mailto:elcorreoquequieres@correo.com”>Aqu√≠ el texto que quieras</a>

Ejemplo b√°sico de un enlace a correo electronico

Enlaces para WhatsApp

Algo que resulta muy √ļtil al igual que los enlaces internos en HTML, son los enlaces a WhatsApp, es decir, as√≠ como el enlace de correo, con solo hacer clic en este tipo de enlace, el usuario tiene la oportunidad de comunicarse con la persona o empresa que puso el enlace por medio de esta red social.

Algo bastante conveniente ya que la gran mayoría de la gente usa esta aplicacion de WhatsApp.

Enlaces para WhatsApp, otro tipo de enlace adem√°s de los enlaces internos en HTML.
Enlaces para WhatsApp, otro tipo de enlace adem√°s de los enlaces internos en HTML.

<a href=”https://api.whatsapp.com/send?phone=5215512345678&text=texto%20prueba”>Texto va aqui</a>

Ejemplo de en enlace a WhatsApp

Los enlaces y el SEO, ¬ŅQue tienen en com√ļn?

El SEO es una de las mejores maneras para posicionar y que garantiza que el sitio o contenido al que se le est√° aplicando, ser√° de calidad para los motores de b√ļsqueda, pero ¬Ņque tiene que ver los enlaces internos en HTML con el SEO?

Uno de los factores que toma en cuenta para el posicionamiento de un contenido, son precisamente los enlaces internos en HTML, ya que entre m√°s enlaces contenga, dar√° a entender que hay m√°s contenido de valor en el sitio web.

El SEO es algo muy importante para las web y es algo en que nos especializamos, as√≠ que si deseas un servicio de SEO o de cualquier otro tipo, haz CLIC AQU√ć, para que te informes un poco mejor.

En esta gr√°fica se  muestra los resultados del SEO y algunas palabras claves en algunos paises que lo aplican.
En esta gr√°fica se muestra los resultados del SEO y algunas palabras claves en algunos paises que lo aplican.

Si has aplicado el SEO en tu web o no sabes si tu web est√° optimizada, haz CLIC AQU√ć para que obtengas una auditor√≠a SEO de tu web y veas como est√° optimizada ante los motores de b√ļsqueda.

Volviendo al tema, los enlaces internos en HTML son un factor muy importante para el posicionamiento web de una p√°gina, pero no solo los internos, si no que tambi√©n los enlaces externos tambi√©n entran como factor de posicionamiento, ya que entre mas links externos tenga el sitio web (apuntados a sitios de calidad o de tendencia) ser√° mejor tomado en cuenta por el motor de b√ļsqueda.

De hecho, una de las técnicas que relaciona directamente a los enlaces externos para el posicionamiento orgánico es el LINKBUILDING, una técnica muy efectiva que usa a los enlaces externos para lograr el posicionamiento.

Gr√°fica que muestra los resultados de un buen linkbuilding.
Gr√°fica que muestra los resultados de un buen linkbuilding.

¬°Enlazate con nosotros y comienza ya!

A lo largo de este post, hemos visto que son los enlaces internos en HTML, además de que como es que funcionan, de una manera breve, ya que si nos detallaremos en como funciona, se tendrían que ver mas aspectos, es decir sus atributos que tiene este tipo de enlace.

Además de que vimos su sintaxis y cómo es que intervienen en el SEO, pero no solo ese tipo de enlaces, si no también los enlaces externos, además de que, se exploraron algunos otros tipos de enlaces y se vieron algunas ejemplificaciones de los mismos.

Tener una web con estas caracter√≠stica es m√°s f√°cil de lo que crees, puedes construirla tu mismo o acercarte con nosotros, los especialistas,nosotros te guiaremos para que tu web sea la n√ļmero uno en los resultados de b√ļsqueda.

¬°En hora buena, has aprendido sobre los enlaces internos en html!
¬°En hora buena, has aprendido sobre los enlaces internos en html!

Erick (Equipo Devloteq)

Soy una persona que cree en la disciplina, en la constancia, el "no puedo no existe", siempre hay una manera de realizar las cosas. Me gusta mucho la m√ļsica, soy m√ļsico ademas de practicar deportes de contacto como el MMA.
¬ŅQue te pareci√≥?
[Total: 2 Promedio: 5]

Deja un comentario

Tu dirección de correo electrónico no será publicada.



- Publicación: 09/11/2020 - Actualización: 06/12/2020 -