Entonces, volviendo al tema.
Cuando usted crea su sitio web, debe saber, al menos, lo básico.
Y lo básico no es diseño ni colores.
Lo básico es la estructura HTML.
Entiéndalo así:
todo documento web comienza exactamente igual.
<!DOCTYPE html>
<html lang="es">
Esa línea le dice al navegador que está leyendo HTML moderno y que debe interpretarlo correctamente.
Dentro del documento existen dos macro secciones fundamentales:
- head
- body
Ejemplo mínimo y funcional:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
No es difícil.
Lo que casi nadie entiende es qué va en cada lugar y por qué.
El head no es visible para el usuario.
El head es información crítica para el navegador y para Google.
Ahí se define:
- El título del sitio
- La descripción
- Palabras clave
- Autor
- Viewport
- Datos sociales
- Prioridad informativa
Ejemplo realista:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi sitio web profesional</title>
<meta name="description" content="Sitio web optimizado para negocio y posicionamiento">
<meta name="author" content="Tu empresa">
</head>
Esto no se ve, pero define si tu web es tomada en serio.
El body es el sitio web como tal.
Es lo que el usuario ve y utiliza.
Y aquí aparece la primera diferencia entre amateur y profesional.
Un body bien construido tiene tres bloques principales:
- header
- main
- footer
<body>
<header></header>
<main></main>
<footer></footer>
</body>
No confunda head con header.
Son cosas completamente distintas.
El header es el primer punto de contacto visual del usuario y suele contener:
- Nombre del sitio
- Logo
- Navegación
- Accesos principales
<header>
<nav>
<ul>
<li>Inicio</li>
<li>Servicios</li>
<li>Contacto</li>
</ul>
</nav>
</header>
El bloque main es el contenido real, lo que se quiere comunicar o vender.
<main>
<section>
<h2>Nuestros servicios</h2>
<p>Descripción clara y directa.</p>
</section>
</main>
Y finalmente el footer, usado para información secundaria:
<footer>
<p>© 2024 Mi Empresa</p>
</footer>
Cuando se domina esta estructura, se deja de improvisar.
Se empieza a construir sitios ordenados, escalables y comprensibles.
Y recién ahí tiene sentido avanzar.
El siguiente paso no es diseño.
<h2>
(0101(--7777
</h2>
