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.
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.
Contenido de la publicación
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.
<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.
¿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
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:
En el primero se ve una clase sencilla, en el segundo es una clase un poco mas avanzada
.pie{
background-color: #F8CB4F;
color: #ffffff;
border-radius: .25rem;
margin: 0 0.25em;
}
¿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
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{
Ejemplo básico de un identificador en HTML
background-color: #F8CB4F;
color: #ffffff;
margin: 0 0.25em;
}
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.
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:
Ejemplo de enlace interno
<a href=”starteq.net/blog/>Blog</a>
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:
Ejemplo de un enlace externo
<a href=”https://starteq.net/”>Ir a Starteq</a>
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.
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.
<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.
<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.
<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.
<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.
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.
¡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.
Erick (Equipo Devloteq)
