← Volver al listado

HTML para el dueño del sitio: lo mínimo que debe entender al aceptar el trabajo

HTML es el "esqueleto" de la página: títulos, texto, botones, formularios, enlaces. Sin él, el navegador no sabe dónde está el título principal, el precio del producto ni el formulario de contacto. No necesita escribir marcado usted mismo, pero entender HTML al aceptar el sitio del contratista ayuda a detectar errores antes del pago: títulos vacíos para SEO, formularios rotos, "imagen en lugar de texto" para Google, falta de alt en fotos, H1 duplicado en cada página. No es un curso de programación - es una lista de verificación sensata de 30 minutos.

  • HTML - estructura de la página que leen navegador y buscador
  • Para qué sirve al dueño - aceptar el trabajo con criterio, no perder SEO ni conversión por el marcado
  • Qué revisar - títulos, formularios, enlaces, alt en imágenes, diseño móvil
  • Relación con CSS y JS - HTML define "qué", CSS - "cómo se ve", JavaScript - "cómo se comporta"
  • Riesgo principal - pantalla bonita con marcado vacío o defectuoso debajo

HTML en lenguaje sencillo

HTML (HyperText Markup Language) es un lenguaje de marcado, no de programación. Describe bloques con etiquetas: <h1> - título principal, <p> - párrafo, <a> - enlace, <form> - formulario, <img> - imagen.

Ejemplo (simplificado):

<h1>Reforma de apartamentos en Tashkent</h1>
<p>Plazo desde 14 días. Medición gratuita.</p>
<a href="/contacts/">Enviar solicitud</a>

El navegador no muestra HTML como código - construye la página con estas instrucciones. Google y Yandex también usan HTML: qué hay en <title>, cuál es el <h1>, si los enlaces tienen texto.

Tecnología Rol Analogía
HTML Estructura y sentido de los bloques Armazón del edificio
CSS Colores, fuentes, márgenes, responsive Acabados y fachada
JavaScript Clics, carrito, sliders, chat Ascensor, aire acondicionado
PHP / backend Datos del servidor, pedidos, email Instalaciones ocultas
SQL / BD Pedidos, clientes, productos Almacén de datos

Importante: un sitio en WordPress, Tilda, Bitrix o Django igual entrega HTML al navegador. El CMS solo lo genera automáticamente. Al aceptar revisa el resultado, no el código manual.

Qué revisar al aceptar el sitio: checklist del dueño

1. Títulos y marcado SEO

  • Un <h1> por página - tema principal. Dos H1 en una misma página - hay que corregir.
  • Jerarquía H2, H3 - lógica: sección de servicios → subservicio.
  • <title> (pestaña del navegador) - único, con palabra clave, no "Inicio" en todas.
  • Meta description - descripción útil para el snippet, no vacía ni copiada.

Sin código: abra cada página clave, mire la pestaña; recorra los títulos - uno principal, el resto secundarios.

2. Texto vs "imagen con texto"

Si precios o promos están solo en JPG/PNG, el buscador no leerá precios ni condiciones. Para una auditoría SEO es señal roja.

Regla: texto importante - en HTML. Imagen - ilustración, no única fuente.

3. Imágenes: alt y velocidad

  • Cada <img> necesita alt - descripción corta ("Cocina reformada, frentes blancos").
  • Logo - alt con nombre de la empresa.
  • Decoración - alt="" vale; en fotos de producto no omitir el atributo.

4. Enlaces

  • "Llamar" → tel:+998..., Telegram → enlace real.
  • Enlaces internos sin 404.
  • Texto del enlace con sentido, no "clic aquí" repetido.

5. Formularios

  • Campos con name e id - si no, CRM y correo reciben leads vacíos.
  • Botón enviar - <button type="submit">, no un div sin acción.
  • Tras enviar - mensaje claro, no pantalla en blanco.
  • En móvil: tel para teléfono, email para correo.

6. Versión móvil

HTML + CSS deben dar texto legible sin scroll horizontal. Menú, teléfono clicable, formulario completo. Afecta UX y promoción GEO.

7. Idioma y codificación

  • lang="es" en <html>.
  • Caracteres correctos - UTF-8.

Semántica: por qué importan las etiquetas correctas

Etiqueta Uso
<header> Cabecera
<nav> Menú
<main> Contenido principal
<article> Artículo, noticia
<section> Sección lógica
<footer> Pie con contactos

Para el dueño: Google entiende mejor dónde está el texto principal. Todo en <div> puede verse bien pero peor para SEO.

Al aceptar pregunte: "¿El contenido principal está en <main>? ¿Los títulos no son divs?"

HTML, CSS y JavaScript: quién responde en la aceptación

Queja Causa probable A quién
"Fuente o color feo" CSS Diseñador
"Botón no funciona / carrito vacío" JavaScript Frontend
"Google no ve texto" HTML / SSR Dev + SEO
"No llegan emails del formulario" Backend (PHP) Backend
"En móvil todo se mueve" CSS + HTML Maquetación

Si no hay texto en el marcado - no es diseño, es HTML y contenido.

Errores típicos del contratista

Duplicados y placeholders

  • Mismo <title> en 20 páginas.
  • H1 "Bienvenido" en todos los landings.
  • <meta description> vacío o "Lorem ipsum".

Constructor vs custom

Tilda, Webflow, tema WordPress - HTML generado. Está bien si puede editar title, H1, alt en admin.

Señal roja: sitio en Tilda sin acceso a textos y meta - dependencia total.

Texto oculto

Texto blanco sobre blanco, keywords en display:none - riesgo de penalización. Pida mostrar que no hay bloques ocultos.

iframe en lugar de contenido

Página entera en PDF embebido - débil para SEO. Mejor texto HTML + PDF aparte.

Cómo ver HTML sin programar

  1. Ver código fuente - clic derecho → "Ver código fuente". Busque <h1>, <title>, <form>.
  2. DevTools (F12) - Elements: clic en bloque → ve la etiqueta.
  3. Extensiones SEO - title, description, H1 en pantalla.
  4. Google Search Console - indexación tras el lanzamiento.
  5. Validador W3C - opcional; muchos errores críticos - motivo de conversación.

Ruta de 30 minutos: inicio, servicio, contacto, una ficha - en cada una: title, H1, formulario, teléfono, alt en imágenes.

Cuándo exigir correcciones HTML

Situación Acción
Sin title/H1 únicos en páginas clave Antes de firmar
Lista de precios solo en PNG Pasar texto a HTML
Formulario "envía" pero sin correos Revisar backend y HTML
Sitio en blanco sin JS Contenido en HTML para SEO (véase JavaScript)
Sin alt en productos Antes de anuncios

No exija W3C perfecto en CMS - exija resultado: aparece en buscadores, llegan leads, móvil usable.

Resumen

HTML es la base invisible por la que juzgan navegador, buscador y calidad del contratista. Basta con:

  • distinguir HTML / CSS / JS;
  • checklist corto al aceptar;
  • no aceptar imagen en lugar de texto ni meta vacíos;
  • acceso al CMS para title, H1 y alt.

El HTML malo cuesta posiciones y leads que nunca encontraron el formulario.

Preguntas frecuentes

¿Debo aprender HTML como dueño del negocio?

No para el día a día - admin del CMS y checklist bastan. Sí a nivel básico si acepta el sitio personalmente y controla SEO. 2-3 horas evitan un error de title en la home.

¿En qué se diferencia HTML de CSS?

HTML - "qué hay": título, párrafo, lista, formulario. CSS - "cómo se ve": tamaño, color, márgenes. Problemas de estructura y texto - HTML; de apariencia - CSS.

No escribí HTML - ¿de dónde sale en mi WordPress?

CMS y constructores generan HTML automáticamente. Usted edita en la interfaz; el sistema arma el marcado. Revise resultado (title, H1, alt). Sobre PHP y CMS: WordPress, Bitrix y OpenCart.

¿Cómo sé que el HTML está mal hecho?

Señales: mismo title en todas las páginas; varios H1 o ninguno; texto solo en imágenes; formularios sin etiquetas; enlaces rotos; sin alt en productos. Herramientas: código fuente, extensión SEO, Search Console, auditoría SEO semestral.

¿El HTML afecta SEO y ventas?

Sí. Title y H1 orientan la búsqueda; el texto HTML se indexa; alt ayuda en imágenes; formularios bien marcados fallan menos en móvil; tel: genera llamadas. El HTML malo drena tráfico meses sin drama visible.

Contacto