HTML es una parte vital de la web tal como la conocemos. Se suele pensar que parte del trabajo relacionado con esta área lo realizan solo los programadores y desarrolladores de software. No obstante, los profesionales de SEO, las consultoras web en Valladolid y los especialistas en marketing digital deben tener una buena comprensión de las bases de HTML, ya que se encargan de realizar servicios de auditoría SEO en los que es imprescindible tener conocimientos al respecto. En este sentido, contar con Seovalladolid.es puede ser de gran ayuda para optimizar eficazmente tu sitio web.
Aquí explicaremos algunos conceptos básicos del lenguaje, para qué sirve y cómo utilizarlo para el posicionamiento SEO.
¿Qué es HTML y para qué sirve?
HTML significa lenguaje de marcado de hipertexto. Y aunque a veces se confunde con los lenguajes de programación, no lo es con exactitud. Como lenguaje de marcado, HTML solo permite crear la estructura de visualización de las páginas. Un lenguaje de programación real, como Java o C++, contiene la lógica de los comandos a ser ejecutados.
Las etiquetas son los elementos básicos de la codificación HTML. Se utilizan para dar formato al texto, estructurar y priorizar el contenido de una página. Las etiquetas también le dicen al navegador cómo mostrar la página en cuestión. Para el usuario de Internet son invisibles, a menos que se acceda al código fuente.
Aunque simple, HTML es la base de los diseños de páginas web. Es responsable del formato de texto básico, como las negritas, o la adición de imágenes y enlaces a otras páginas. Es una estructura fundamental de un sitio web, por lo que es muy necesario para el posicionamiento en los motores de búsqueda y la indexación de los contenidos.
Por eso, un buen consultor SEO debe tener los conocimientos y nociones básicas acerca de este lenguaje de marcado para poder aplicar de forma correcta sus estrategias SEO y sus estrategias de linkbuilding. Para una revisión detallada de tu implementación de SEO, considera nuestro servicio de auditoría de seovalladolid.es.
Lo básico que debes saber para empezar a usar HTML
Te presentamos los primeros pasos y algunos tips básicos que debes saber al empezar con HTML. Indistintamente de si aprendes por tu cuenta o contratas a una agencia de posicionamiento, es indispensable que conozcas algunos términos esenciales de este lenguaje de codificación. Además, trabajar con una empresa SEM puede complementar tus esfuerzos de SEO, maximizando la visibilidad de tu sitio web a través de campañas publicitarias efectivas.
Etiquetas
Tu navegador lee el archivo HTML y transcribe el resultado en la imagen que ven los usuarios. El lenguaje HTML estructura y da significado al contenido del archivo. Las etiquetas se suceden o anidan y muestran tu contenido. El navegador las lee y las muestra de forma consecutiva.
Las etiquetas a usar están predefinidas y hay diferentes reglas a seguir que se aprenden fácilmente:
- Las etiquetas van entre < >. Por ejemplo, el título de una página se escribe como .
- Las etiquetas HTML vienen en pares: y . La primera es la “etiqueta de apertura” y la segunda es la “etiqueta de cierre”.
- Los elementos del contenido que se quieran codificar deben estar delimitados entre la etiqueta de inicio y la etiqueta de cierre. Por ejemplo, palabra en negrita.
- Pocos elementos HTML pueden ser contenido vacío.
- Todos los elementos vacíos se cierran solo con la etiqueta de inicio.
Encabezados
Los encabezados hacen que un sitio sea más accesible al establecer una jerarquía. Se establecen con las etiquetas del H1 al H6. Definen el formato y la estructura de los encabezados según el grado de importancia (de mayor a menor) de cada título.
También ayudan a resaltar temas importantes. Son necesarios para enfatizar palabras clave importantes para fines de optimización de motores de búsqueda. Por ejemplo:
- Título 1
- Encabezado2
- Encabezado3
Mientras que los párrafos se definen con las etiquetas
:
- Párrafo 1.
- Párrafo 2.
En el caso de los enlaces o hipervínculos a sitios HTML se definen con la etiqueta :
- Este es un enlace.
- Esta etiqueta está compuesta de dos partes: un valor, que en este caso es la URL a la que apunta el hipervínculo, y el atributo, que en este caso es el texto que sirve de fachada al enlace, también denominado “anchor text” (texto ancla o de anclaje).
Formato
El formato HTML se realiza con etiquetas como o , que se pueden usar para poner el texto en negrita e itálica (cursiva), respectivamente.
Te dejamos una lista de algunas de las etiquetas para el formato de texto en HTML más utilizadas:
- Define un texto enfatizado.
- Establece un texto con importancia semántica aumentada.
- Define el texto en negrita.
- Define el texto en cursiva.
- Muestra el texto subrayado.
- Define el estilo tachado.
- Representa una cita textual entre comillas.
Inserta un salto de línea.
Divisores
Se conocen como
. Estas pequeñas y útiles etiquetas
funcionan como contenedores para otros elementos en el HTML. Ayudan a separar el contenido en secciones.
Por ejemplo, probablemente hayas visto un divisor con una etiqueta de identificación, como
. Esto indica que todo lo contenido dentro de este contenedor específico tiene que ver con la parte de promoción del correo electrónico. Los divisores también pueden contener lenguaje de código de estilo CSS para diseñar varios elementos a la vez.
Atributos
Se usan para extender la etiqueta de un elemento y pueden incluir cualquier cosa, desde identificación hasta estilos y más.
Un atributo debe tener un nombre y un valor. Por ejemplo:
. El
nombre en este ejemplo es el “id” y el valor es “promotion”.
El valor tendrá un hashtag, se pondrá entre comillas o tendrá un punto. Puedes añadir tantos atributos en una sola etiqueta de apertura como desees, solo recuerda que esos estilos e información se aplicarán a todo el contenido en el contenedor de ese
Los más comunes son:
- href=“ ” especifica el enlace que se usará al crear un hipervínculo en HTML. Ej: href=“www.sitioweb.com”>Content.
- id=“ ” identifica un elemento en particular o un contenedor divisor (no puede haber ID duplicados).
- align=“ ” especifica la alineación del contenedor, ya sea centrada, a la derecha o a la izquierda.
- alt=“ ” añade una descripción a las imágenes.
- class=“ ” especifica qué nombre de clase aplicar a un elemento. Un nombre de clase contiene parámetros preestablecidos para aplicar a piezas específicas de contenido.
- title=“ ” añade un título.
- style=“ ” estiliza elementos particulares.
- lang=“ ” especifica el idioma del elemento, lo que también es muy beneficioso para los lectores de pantalla. Por ejemplo, el español se especifica como “es” y el inglés “en”.
Enlaces
La vinculación a páginas internas y externas, conocida como enlazado. Le muestra a Google que una página está conectada con el resto de tu propio sitio web o con otros sitios externos.
Además, también permite a los lectores hacer clic en otras partes útiles de tu sitio para complementar con más información. Este enfoque de SEO muestra a los motores de búsqueda y a los lectores que comprendes qué más podrían estar buscando y entonces aumenta el tráfico a otras páginas.
Los enlaces son básicamente la dirección del documento en la web. Los hipervínculos pueden apuntar a cualquier recurso ya sea una página HTML, una imagen, un archivo de sonido o un vídeo.
El elemento de anclaje es y esto define tanto los anclajes como los hipervínculos. La sintaxis del enlace se verá así:
- Texto del enlace
Todas las referencias de hipertexto se pueden clasificar en tres estructuras básicas: interna, local y global. Sus principales funciones son:
- En el enlazado interno los enlaces anclan a la página actual.
- El local enlaza con otras páginas dentro del mismo dominio.
- Los enlaces globales apuntan a otro dominio fuera de tu sitio.
Por ejemplo:
- Interno href=“#nombre de ancla”
- Local href=“…/pics/picturefile.jpg”
- Global href=“https://seovalladolid.es/link-building /”
