Si necesitas crear un sitio web rápidamente para la escuela o para tus propios asuntos, utiliza esta plantilla. Puedes rellenarla con lo que quieras: añadir textos, imágenes o conectar cualquier estilo. Por ejemplo, usando awsm.css.
Plantilla Simple HTML
Esta plantilla incluye algunos elementos que la hacen más completa y práctica:
- Un archivo CSS básico: Le da un aspecto inicial al sitio web, definiendo colores, tipografías y margen de los elementos.
- Diseño responsive: Se adapta a distintos tamaños de pantalla para que tu sitio web se vea bien en teléfonos, tablets y computadoras.
- Un favicon: Un pequeño icono que se muestra en la pestaña del navegador.
- Más información en
<head>: Incluye metadatos como la descripción del sitio, palabras clave y el autor. - Estructura semántica optimizada: Utiliza etiquetas semánticas como
<header>,<main>,<article>,<footer>,<aside>,<nav>y<figure>para una mejor organización del contenido.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Sitio Web</title>
<link rel="stylesheet" href="./styles/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="description" content="Un sitio web sencillo y rápido para mostrar información personal o de un proyecto.">
<meta name="keywords" content="HTML, CSS, plantilla, sitio web, desarrollo web">
<meta property="og:title" content="Título de la página en OG">
<meta property="og:description" content="Descripción de la página en OG">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/">
</head>
<body>
<header>
<h1>Mi Sitio Web</h1>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="about.html">Acerca de</a></li>
<li><a href="contact.html">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<article>
<section>
<h2>Primera Sección</h2>
<p>Aquí puedes escribir sobre tu proyecto, experiencias, hobbies, etc.</p>
<img src="https://htmldesdecero.es/medios/2022/04/Logo-panel-HTML.png" alt="Una imagen relacionada con el contenido de la sección.">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</section>
<section>
<h2>Segunda Sección</h2>
<p>Más información sobre tu sitio web.</p>
<p>Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</section>
<section>
<h2>Tercera Sección</h2>
<p>Contenido adicional.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
</section>
</article>
</main>
<footer>
<p>© 2024 Mi Sitio Web. Todos los derechos reservados.</p>
<p><a href="#">Política de privacidad</a> | <a href="#">Términos de uso</a></p>
</footer>
<!-- aquí puedes conectar jquery <script src="scripts/app.js" defer></script> -->
</body>
</html>CSS básico:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
article {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
section {
margin-bottom: 20px;
}
img {
max-width: 100%;
height: auto;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
footer a {
color: #fff;
text-decoration: none;
}Breve Análisis
Si tienes un poco de tiempo, veamos el código y entendamos de qué se compone el sitio web y por qué es necesaria cada línea.
Doctype ayuda al navegador a comprender cómo mostrar la página.
<!DOCTYPE html>Dentro de la etiqueta <html>, indicamos el idioma de la página, por ejemplo:
<html lang="es">Damos un nombre a la codificación de la página, para el idioma español se adapta utf-8.
<meta charset="utf-8">Luego viene la magia que ayuda a que nuestro sitio web se vea un poco mejor. Simplemente es necesaria, por ahora no te preocupes.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Conectamos el archivo con los estilos, en este caso style.css, pero si tú lo llamas de otra manera, debes cambiarlo por el nombre de tu archivo. Si no funciona o no se ve el archivo, lee sobre los enlaces absolutos y relativos.
<link rel="stylesheet" href="./styles/style.css">En este bloque, incluimos un favicon, un pequeño icono que se muestra en la pestaña del navegador.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">Agregamos una descripción breve del sitio web y palabras clave relevantes.
<meta name="description" content="Un sitio web sencillo y rápido para mostrar información personal o de un proyecto.">
<meta name="keywords" content="HTML, CSS, plantilla, sitio web, desarrollo web">En este bloque, escribe qué título, descripción y enlace se mostrarán en la tarjeta de la cinta si alguien publica tu sitio web en las redes sociales.
<meta property="og:title" content="Título de la página en OG">
<meta property="og:description" content="Descripción de la página en OG">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/"><header> – el encabezado del sitio web, un bloque que puede repetirse en cualquier página.
<header>
</header>Luego vienen <h1> y <h2> – los encabezados del primer y segundo nivel.
<h1>Este es mi sitio web</h1>
<h2>Primera sección</h2>A continuación, la navegación. En la plantilla, se realiza mediante la navegación superior <nav>, en la que los enlaces se realizan en forma de lista <ul> y se envuelven en la etiqueta <li>.
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="about.html">Acerca de</a></li>
<li><a href="contact.html">Contacto</a></li>
</ul>
</nav>Una de las partes más importantes de la página es la etiqueta semántica <main>, que contiene el contenido principal que pertenece solo a esta página y no se repite en otras.
<main></main>Dentro de <main>, se utiliza la etiqueta <article> para agrupar un artículo o una sección de contenido independiente:
<article>
</article>En el ejemplo, se utiliza <article> para contener las tres secciones de contenido de la página.
Para organizar el contenido dentro del <article>, se utiliza la etiqueta <section>:
<section>
</section>Cada <section> representa una parte temática del contenido del <article>. En este caso, tenemos tres secciones:
- Primera Sección
- Segunda Sección
- Tercera Sección
img, imagen o fotografía. Obligatoriamente con el atributo alt, es importante, no lo olvides.
<img src="images/image.png" alt="Una imagen relacionada con el contenido de la sección.">Párrafo p, aquí simplemente escribimos cualquier texto que queramos mostrar en la página.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>El footer de la página, que generalmente contiene información de copyright o enlaces a políticas de privacidad.
<footer>
<p>© 2025 Mi Sitio Web. Todos los derechos reservados.</p>
<p><a href="#">Política de privacidad</a> | <a href="#">Términos de uso</a></p>
</footer>Si quieres conectar JavaScript y añadir elementos interactivos, puedes hacerlo en este bloque, simplemente debes descomentarlo.
<!-- aquí puedes conectar jQuery <script src="scripts/app.js" defer></script> -->Código Demostración
See the Pen Template_HTML by Alex (@htmldesdecero) on CodePen.
No te limites a copiar y pegar código. Es importante que comprendas la lógica detrás de cada etiqueta HTML y cómo se relacionan entre sí. Si te dedicas a aprender los fundamentos, podrás crear sitios web más complejos y personalizados en el futuro.
Y eso es todo, adapta la plantilla a tu gusto.
Recuerda que este es solo el comienzo. ¡No dudes en experimentar y seguir aprendiendo sobre HTML y CSS para crear increíbles sitios web!
