HTML y CSS para Principiantes: Aprende a Crear Páginas Web [Guía 2026] ¿Qué son HTML y CSS? HTML (HyperText Markup Language) es el lenguaje estándar para estructurar el contenido de las páginas web, definiendo elementos como encabezados, párrafos e imágenes. Por otro lado, CSS (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación visual de esos documentos HTML, controlando aspectos como colores, fuentes y diseño. ¿Alguna vez te has preguntado cómo se construyen las páginas web que visitas a diario? Detrás de cada sitio interactivo y visualmente atractivo se encuentran dos lenguajes fundamentales: HTML y CSS. Para los principiantes que desean aprender HTML y CSS, comprender estos dos pilares es el primer paso crucial en el camino del desarrollo web. En esta guía completa de 2026, te llevaremos de la mano a través de los conceptos esenciales, desde la estructura básica hasta técnicas de diseño avanzadas y responsivas, asegurando que adquieras los conocimientos necesarios para crear tus propias páginas web. Prepárate para dominar el HTML y CSS básico y construir los cimientos de tu carrera como desarrollador web. Punto Clave HTML define la estructura y el contenido de una página web, mientras que CSS se encarga de su estilo y presentación. El modelo de caja de CSS es fundamental para entender cómo los elementos ocupan espacio en la pantalla. Flexbox y CSS Grid son herramientas poderosas para crear diseños complejos y responsivos. Las media queries permiten que tu diseño se adapte perfectamente a diferentes dispositivos (mobile-first). La práctica constante y el uso de herramientas como VS Code son esenciales para el aprendizaje efectivo. 1. HTML y CSS: Los pilares de la web para principiantes En el vasto universo digital, HTML y CSS son la pareja dinámica que da vida a internet. HTML, cuyo significado es "lenguaje de marcado de hipertexto", actúa como el arquitecto que construye el esqueleto de tu página web. Es el encargado de organizar el contenido, estructurando todo, desde los títulos y párrafos hasta las imágenes y enlaces. Sin HTML, una página web sería solo texto sin formato, ilegible y desorganizado. Es la base sobre la que se asienta toda la información que los usuarios ven y los motores de búsqueda indexan. Por su parte, CSS, o "hojas de estilo en cascada", es el diseñador de interiores. Una vez que HTML ha establecido la estructura, CSS interviene para embellecerla, dándole color, tipografía, disposición y adaptabilidad. Con CSS, puedes transformar un documento HTML básico en una experiencia visual cautivadora y profesional. Comprender la relación simbiótica entre ambos es clave para cualquier persona que desee aprender HTML CSS. HTML proporciona el significado semántico y la estructura, mientras que CSS se encarga de la estética y la presentación. Juntos, permiten no solo que los usuarios interactúen con contenido bien organizado, sino que también facilitan que los motores de búsqueda interpreten la jerarquía y relevancia del mismo. Esto es crucial en estrategias de SEO avanzado, donde la estructura semántica, a menudo potenciada por la combinación de HTML y CSS, influye en cómo los algoritmos de búsqueda segmentan y valoran el contenido principal frente a los elementos de plantilla. Al dominar estos lenguajes, no solo estarás construyendo sitios web, sino también sentando las bases para una presencia digital efectiva y optimizada. Conviértete en un experto en diseño web ¿Listo para llevar tus habilidades más allá del HTML y CSS? Nuestro curso Experto en Diseño y Programación Web con PHP te proporcionará las herramientas para construir sitios dinámicos y funcionales. ¡Inscríbete hoy y transforma tu pasión en una carrera! Ver Curso 2. Desglosando HTML: Estructura y etiquetas semánticas esenciales La estructura de una página web en HTML no es solo una convención; es un mapa para los navegadores y, fundamentalmente, para los motores de búsqueda. Una estructura bien definida facilita el rastreo, la indexación y la comprensión del contenido. Cada documento HTML moderno comienza con <!DOCTYPE html>, una declaración crucial que indica a los navegadores que deben renderizar la página usando los estándares de HTML5. A continuación, el elemento raíz es <html lang="es">, que encierra todo el contenido de la página y especifica el idioma principal, un detalle importante para la accesibilidad y el SEO internacional. Dentro del elemento <html>, encontramos dos secciones principales: <head> y <body>. El <head> es el "cerebro" de la página, invisible para el usuario final, pero vital para el navegador y los motores de búsqueda. Aquí se incluyen metadatos como <meta charset="UTF-8"> para la codificación de caracteres, <meta name="viewport" content="width=device-width, initial-scale=1.0"> para la responsividad, el <title> de la página (un factor SEO crítico) y enlaces a hojas de estilo CSS externas (<link rel="stylesheet" href="style.css">). El <body>, por otro lado, es el "cuerpo" visible, donde reside todo el contenido que los usuarios interactúan y los motores de búsqueda rastrean como el contenido principal de la página. Es en esta sección donde aplicamos las etiquetas semánticas. Etiquetas HTML semánticas: Guías para la web Las etiquetas semánticas son elementos HTML5 que describen el propósito del contenido que encierran, no solo su apariencia. Para un motor de búsqueda, un <div> y un <header> pueden verse similares, pero la etiqueta semántica <header> comunica claramente que su contenido es una introducción o un grupo de navegación. Esto mejora la accesibilidad y el SEO, ayudando a los algoritmos a identificar el SEO semántico y la relevancia temática de tu página. Algunos de los más importantes son: <header>: Contiene contenido introductorio o enlaces de navegación. <nav>: Define un conjunto de enlaces de navegación. <main>: Representa el contenido dominante y único del documento. Solo debe haber uno por página. <section>: Un grupo temático de contenido, típicamente con un encabezado. <article>: Contenido independiente y auto-contenido, como una entrada de blog o un comentario. <aside>: Contenido relacionado con el contenido principal pero que se puede considerar separado (por ejemplo, barras laterales). <footer>: Pie de página de un documento o sección, generalmente contiene información de autoría, derechos de autor o enlaces relacionados. Utilizar estas etiquetas de manera consistente no solo mejora la estructura de tu código, sino que también contribuye significativamente a cómo los motores de búsqueda interpretan tu contenido y, por ende, a tu posicionamiento. Una buena estructura semántica es tan importante como las entidades SEO que definas en tu texto. Consejo: Siempre utiliza etiquetas semánticas cuando sea posible en lugar de <div> genéricos. Esto no solo mejora la legibilidad de tu código, sino que también es crucial para la accesibilidad y la optimización para motores de búsqueda, ya que ayuda a los rastreadores a comprender la estructura y el significado de tu contenido. 3. Las 15 etiquetas HTML más importantes con ejemplos prácticos Para todo principiante en HTML, dominar un conjunto de etiquetas fundamentales es esencial. Estas etiquetas son los bloques de construcción básicos con los que interactuarás la mayor parte del tiempo al crear páginas web. A continuación, presentamos 15 etiquetas vitales, con ejemplos sencillos para que puedas verlas en acción: <h1> a <h6>: Encabezados para definir la jerarquía de títulos. <h1> es el más importante, <h6> el menos. <h1>Título Principal de la Página</h1> <h2>Subtítulo de una Sección</h2> <p>: Párrafos de texto. <p>Este es un párrafo de texto en tu página web.</p> <a>: Enlaces o hipervínculos. El atributo href especifica la URL de destino. <a href="https://www.aprender21.com">Visita Aprender21</a> <img>: Inserta imágenes. Requiere los atributos src (ruta de la imagen) y alt (texto alternativo para SEO y accesibilidad). <img src="mi-imagen.jpg" alt="Descripción de la imagen"> <ul> y <li>: Listas desordenadas (no numeradas). <li> son los elementos de la lista. <ul> <li>Elemento uno</li> <li>Elemento dos</li> </ul> <ol> y <li>: Listas ordenadas (numeradas). <ol> <li>Primer paso</li> <li>Segundo paso</li> </ol> <div>: Contenedor genérico sin significado semántico. Muy usado para agrupar elementos y aplicar estilos CSS. <div class="contenedor-principal"> <p>Contenido dentro de un div.</p> </div> <span>: Contenedor en línea genérico. Útil para aplicar estilos a una parte específica del texto. <p>Este es un <span style="color: blue;">texto resaltado</span> dentro de un párrafo.</p> <form>: Crea un formulario interactivo. <form action="/submit-form" method="POST"> <!-- Campos del formulario aquí --> </form> <input>: Campos de entrada dentro de un formulario (texto, email, contraseña, etc.). <input type="text" placeholder="Tu nombre"> <input type="email" placeholder="Tu correo"> <button>: Botones interactivos. <button type="submit">Enviar</button> <table>, <tr>, <th>, <td>: Estructura tablas. <tr> (fila), <th> (encabezado de columna), <td> (celda de datos). <table> <tr> <th>Producto</th> <th>Precio</th> </tr> <tr> <td>Curso HTML</td> <td>$49</td> </tr> </table> <strong> y <em>: Para enfatizar texto. <strong> indica importancia (negrita), <em> indica énfasis (cursiva). <p>Este texto es <strong>muy importante</strong> y este otro es <em>enfatizado</em>.</p> <br>: Salto de línea. <p>Primera línea.<br>Segunda línea.</p> <hr>: Línea horizontal temática para separar contenido. <p>Contenido superior.</p> <hr> <p>Contenido inferior.</p> La práctica constante con estas etiquetas es fundamental. Intenta combinarlas y ver cómo se relacionan para construir estructuras más complejas. 4. Dominando CSS: El modelo de caja y los selectores Una vez que tienes la estructura HTML lista, es el momento de darle estilo con CSS. El concepto más fundamental en CSS, y a menudo el que más cuesta comprender a los principiantes en CSS, es el Modelo de Caja (Box Model). Imagina cada elemento HTML en tu página como una caja rectangular. Esta caja no solo contiene tu contenido, sino que también tiene un "relleno" (padding), un "borde" (border) y un "margen" (margin) a su alrededor. Entender cómo estos componentes interactúan es crucial para controlar el espaciado y la disposición de los elementos en tu diseño. El modelo de caja de CSS: Contenido, relleno, borde y margen Contenido (Content): Es el área donde se muestra el texto, las imágenes o cualquier otro medio. Sus dimensiones se definen con las propiedades width y height. Relleno (Padding): Es el espacio entre el contenido y el borde. Se usa para dar "aire" al contenido y evitar que se pegue al borde. Se puede aplicar a los cuatro lados (padding), o individualmente (padding-top, padding-right, padding-bottom, padding-left). Borde (Border): Una línea que rodea el padding y el contenido. Puedes controlar su estilo (sólido, punteado), color y grosor (border-width, border-style, border-color). Margen (Margin): Es el espacio exterior al borde, que separa un elemento de otros elementos adyacentes. Al igual que el padding, se puede aplicar a los cuatro lados o individualmente. Los márgenes pueden colapsar en la dirección vertical. Aquí tienes un ejemplo de cómo se vería el modelo de caja aplicado con CSS: .caja-ejemplo { width: 200px; height: 100px; padding: 20px; /* 20px de relleno alrededor del contenido / border: 5px solid #3498db; / Borde sólido azul de 5px / margin: 30px; / 30px de margen alrededor de toda la caja / background-color: #ecf0f1; / Color de fondo para ver el contenido / } Selectores CSS: La clave para estilizar tus elementos Los selectores CSS te permiten "apuntar" a elementos HTML específicos para aplicarles estilos. Son la forma en que le dices al navegador qué parte de tu documento HTML debe verse de cierta manera. Hay varios tipos de selectores: Selector de Elemento: Selecciona todos los elementos de un tipo específico. p { color: #333; font-size: 16px; } (Afecta a todos los párrafos) Selector de Clase: Selecciona elementos con un atributo class específico. Se define con un punto (.). Puedes aplicar una misma clase a múltiples elementos. .destacado { background-color: yellow; } (Afecta a <p class="destacado">, <span class="destacado">, etc.) Selector de ID: Selecciona un único elemento con un atributo id específico. Se define con un hash (#). Los ID deben ser únicos en una página. #titulo-principal { text-align: center; } (Afecta a <h1 id="titulo-principal">) Selector de Atributo: Selecciona elementos basándose en un atributo HTML o su valor. input[type="submit"] { background-color: green; color: white; } (Afecta a todos los inputs con type="submit") Pseudo-clases: Selecciona elementos que están en un estado particular (por ejemplo, al pasar el ratón por encima). a:hover { color: orange; / El enlace cambia a naranja al pasar el ratón / } (Afecta a todos los enlaces cuando el cursor está sobre ellos) La combinación de estos selectores, junto con una buena comprensión del modelo de caja, te dará un control total sobre el diseño y la apariencia de tus páginas web. Consejo: Usa el inspector de elementos de tu navegador (F12 en Chrome/Firefox) para visualizar el modelo de caja de cualquier elemento en tu página. Es una herramienta invaluable para depurar y entender cómo se aplican los estilos y ocupan espacio tus elementos. 5. Diseños adaptables: Introducción a Flexbox En el mundo moderno del desarrollo web, los diseños estáticos son cosa del pasado. La variedad de dispositivos, desde pequeños smartphones hasta monitores ultra-anchos, exige que nuestras páginas sean fluidas y adaptables. Aquí es donde Flexbox entra en juego como una herramienta revolucionaria para la maquetación unidimensional. Flexbox, o "Módulo de Caja Flexible", es un modelo de diseño que te permite organizar elementos de forma eficiente a lo largo de un eje (horizontal o vertical) y distribuir el espacio sobrante. Es ideal para componentes como barras de navegación, galerías de imágenes o cualquier conjunto de elementos que necesiten alinearse y distribuirse dinámicamente. Para usar Flexbox, simplemente defines un contenedor (un elemento padre) como un "contenedor flex" y sus hijos directos se convierten en "elementos flex". Las propiedades de Flexbox se aplican tanto al contenedor como a los elementos. Aquí exploraremos algunas de las propiedades más importantes, enfocándonos en el contenedor: Propiedades clave de Flexbox (aplicadas al contenedor) display: flex;: Convierte el elemento en un contenedor flex. flex-direction: Establece la dirección del eje principal (row, row-reverse, column, column-reverse). .contenedor-horizontal { display: flex; flex-direction: row; / Elementos uno al lado del otro / } justify-content: Alinea los elementos a lo largo del eje principal (horizontal por defecto si flex-direction es row). .centrar-horizontal { display: flex; justify-content: center; / Centra los elementos horizontalmente / } .espacio-entre { display: flex; justify-content: space-between; / Espacio uniforme entre elementos / } align-items: Alinea los elementos a lo largo del eje transversal (vertical por defecto si flex-direction es row). .centrar-vertical { display: flex; align-items: center; / Centra los elementos verticalmente / height: 150px; / Para que haya espacio para centrar / } flex-wrap: Controla si los elementos flex deben ajustarse a la siguiente línea si no caben en una sola. .wrap-elementos { display: flex; flex-wrap: wrap; / Los elementos saltan a la siguiente línea si es necesario / } 10 ejemplos de uso de Flexbox Para ilustrar el poder de Flexbox, aquí tienes 10 escenarios comunes con su configuración básica: Barra de navegación horizontal: .nav-bar { display: flex; justify-content: space-around; } Elementos centrados horizontalmente: .container { display: flex; justify-content: center; } Elementos centrados verticalmente: .container { display: flex; align-items: center; height: 100px; } Elementos centrados en ambos ejes: .container { display: flex; justify-content: center; align-items: center; height: 100vh; } Tarjetas que se ajustan a la siguiente línea: .card-grid { display: flex; flex-wrap: wrap; justify-content: space-around; } Diseño de dos columnas (izquierda fija, derecha flexible): .layout { display: flex; } .sidebar { width: 200px; } .main-content { flex: 1; } Elementos de formulario alineados: .form-group { display: flex; align-items: center; } .form-label { margin-right: 10px; } Pie de página con elementos a los extremos: .footer { display: flex; justify-content: space-between; } Iconos alineados en un botón: .button { display: flex; align-items: center; gap: 5px; } Lista de elementos apilados (columna): .stacked-list { display: flex; flex-direction: column; } Flexbox simplifica enormemente la creación de diseños complejos y responsivos que antes requerían trucos con flotadores o posicionamiento. Es una herramienta indispensable en el arsenal de cualquier desarrollador web. ¿Buscas ir más allá del Front-end? Conocimientos en HTML y CSS son la base, pero para crear aplicaciones web completas y dinámicas, necesitas dominar el Back-end. Nuestro programa Experto en Diseño y Programación Web con PHP te equipará con habilidades tanto de Front-end como de Back-end, abriendo un mundo de oportunidades. ¡No te quedes atrás! Ver Curso 6. Maquetación bidimensional: Fundamentos de CSS Grid Mientras que Flexbox es excelente para organizar elementos en una sola dimensión (fila o columna), CSS Grid Layout revoluciona la maquetación al permitirnos diseñar en dos dimensiones a la vez: filas y columnas. Es la herramienta definitiva para crear estructuras de diseño complejas y robustas para páginas completas, gestionando tanto el contenido principal como las barras laterales, encabezados y pies de página de manera intuitiva y potente. Si buscas mejorar la arquitectura de tu sitio para los motores de búsqueda, Grid, junto con un HTML semántico, puede ser tu mejor aliado. Para empezar con CSS Grid, al igual que con Flexbox, debes definir un contenedor como un "contenedor de cuadrícula" (grid container). Sus hijos directos se convertirán automáticamente en "elementos de cuadrícula" (grid items) que podrás posicionar y dimensionar dentro de la cuadrícula. Propiedades clave de CSS Grid (aplicadas al contenedor) display: grid;: Convierte el elemento en un contenedor de cuadrícula. grid-template-columns: Define el número y el tamaño de las columnas de la cuadrícula. Puedes usar unidades fijas (px), porcentajes (%), o la unidad fr (fracción de espacio disponible). .mi-grid { display: grid; grid-template-columns: 1fr 2fr 1fr; / Tres columnas: la del medio es el doble de ancha / grid-template-columns: 200px 1fr auto; / Columna fija, flexible y de ancho automático / } grid-template-rows: Define el número y el tamaño de las filas de la cuadrícula (funciona de forma similar a grid-template-columns). .mi-grid { display: grid; grid-template-rows: 100px auto 50px; / Encabezado, contenido principal, pie de página / } grid-gap (o gap): Establece el espacio entre las filas y columnas (espacio entre celdas). .mi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; / 20px de espacio entre todas las celdas / } repeat(): Una función muy útil para no repetir valores cuando se tienen muchas filas o columnas del mismo tamaño. .mi-grid { display: grid; grid-template-columns: repeat(4, 1fr); / Crea 4 columnas de igual tamaño / } auto-fit / auto-fill con minmax(): Permiten crear cuadrículas responsivas que se adaptan automáticamente al número de columnas según el tamaño disponible. .galeria-responsive { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; } Este ejemplo crea una cuadrícula de columnas que tienen un ancho mínimo de 250px y se expanden para ocupar el espacio disponible de manera equitativa, ajustándose automáticamente a la cantidad de columnas. Tabla comparativa: Flexbox vs. CSS Grid Aunque a menudo se les compara, Flexbox y CSS Grid no son excluyentes; son complementarios. La siguiente tabla te ayudará a entender cuándo usar cada uno: Característica Flexbox CSS Grid Propósito principal Maquetación unidimensional (filas O columnas). Maquetación bidimensional (filas Y columnas). Uso ideal Componentes pequeños, barras de navegación, alineación de elementos en una línea, distribución de espacio. Diseños de página completos, estructuras complejas (cabeceras, barras laterales, contenido principal, pies de página). Control de tamaño Basado en el contenido y la distribución de espacio en un solo eje. Control explícito sobre el tamaño de filas y columnas. Comportamiento de elementos Los elementos fluyen dentro del eje principal y secundario. Los elementos se colocan en celdas explícitas de la cuadrícula. Ejemplo Centrar un botón, alinear ítems de menú, distribución de tarjetas en una fila. Diseño de un blog con sidebar, layout de un dashboard, galería de productos con columnas y filas. La combinación de Flexbox para componentes internos y CSS Grid para el layout general de la página es una estrategia poderosa y moderna para crear interfaces robustas y altamente responsivas. 7. Diseño responsivo: Páginas web para todos con Media Queries En la era actual, donde los usuarios acceden a la web desde una infinidad de dispositivos con distintos tamaños de pantalla (desde relojes inteligentes hasta televisores), el diseño responsivo es una necesidad, no un lujo. Crear páginas web responsivas significa que tu sitio se verá y funcionará correctamente en cualquier dispositivo, adaptando su diseño, contenido y funcionalidad. El corazón del diseño responsivo en CSS son las Media Queries. ¿Qué son las Media Queries? Las Media Queries son reglas CSS que te permiten aplicar estilos específicos solo si se cumplen ciertas condiciones del dispositivo o del entorno de visualización. Por ejemplo, puedes decir: "Aplica estos estilos si la pantalla tiene un ancho máximo de 768px". Esto es fundamental para adaptar tu diseño a diferentes puntos de interrupción o "breakpoints". Enfoque Mobile-First (primero móvil) La mejor práctica moderna para el diseño responsivo es el enfoque "Mobile-First". Esto significa que primero diseñas y desarrollas para la experiencia más pequeña (móviles) y luego, progresivamente, añades estilos para pantallas más grandes. ¿Por qué? Porque es más fácil añadir complejidad y elementos a un diseño básico que intentar simplificar un diseño complejo para pantallas pequeñas. Además, los dispositivos móviles tienen recursos limitados, lo que fomenta un código más eficiente y ligero desde el principio. Esta aproximación también tiene beneficios claros en el SEO local y la experiencia de usuario móvil, que son factores de ranking. Ejemplo con 3 Breakpoints comunes Aquí tienes un ejemplo práctico de cómo usar Media Queries para adaptar un diseño a tres tamaños de pantalla comunes: / ------------------------------------- / / ESTILOS BASE (MOBILE-FIRST) / / ------------------------------------- / body { font-family: Arial, sans-serif; margin: 0; padding: 15px; background-color: #f4f4f4; } .contenedor { display: flex; flex-direction: column; / Por defecto, en columna para móviles / gap: 15px; padding: 10px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .item { background-color: #e9e9e9; padding: 15px; border-radius: 5px; text-align: center; } / ------------------------------------- / / BREAKPOINT TABLET: min-width: 768px / / Se aplican estos estilos si la pantalla es al menos de 768px de ancho / / ------------------------------------- / @media (min-width: 768px) { .contenedor { flex-direction: row; / En tablet, los elementos se ponen en fila / flex-wrap: wrap; / Permitir que salten de línea / justify-content: space-around; / Distribuir espacio / } .item { flex: 1 1 45%; / Cada ítem ocupa casi la mitad del ancho / max-width: 45%; } body { padding: 25px; } } / ------------------------------------- / / BREAKPOINT DESKTOP: min-width: 1024px / / Se aplican estos estilos si la pantalla es al menos de 1024px de ancho / / ------------------------------------- / @media (min-width: 1024px) { .contenedor { max-width: 1200px; margin: 20px auto; / Centrar el contenedor principal / } .item { flex: 1 1 30%; / Cada ítem ocupa casi un tercio del ancho */ max-width: 30%; } } En este ejemplo: Los estilos base están diseñados para dispositivos móviles (los .contenedor y .item se apilan verticalmente). A partir de 768px (tablets), los elementos se organizan en filas y se envuelven, ocupando casi la mitad del ancho del contenedor. A partir de 1024px (desktops), los elementos se distribuyen en tres columnas, y el contenedor principal se centra con un ancho máximo. Dominar las Media Queries y el enfoque Mobile-First te permitirá crear experiencias de usuario impecables en cualquier dispositivo, lo cual es vital para el éxito de cualquier proyecto web en 2026. Consejo: Evita depender de un número excesivo de breakpoints. Enfócate en aquellos puntos donde tu diseño "se rompe" o donde se justifica un cambio significativo en la disposición. Menos es más en este caso para mantener tu CSS manejable. 8. Tu primera página web y herramientas esenciales para empezar Ahora que has explorado los fundamentos de HTML y CSS, es hora de poner tus conocimientos en práctica creando tu primera página web. No hay mejor manera de consolidar el aprendizaje que con un proyecto real. Te proponemos construir una sencilla página de portafolio personal. Este ejercicio no solo te dará la confianza para seguir adelante, sino que también te proporcionará un proyecto inicial para mostrar tus habilidades. Ejercicio práctico: Portafolio personal básico El objetivo es crear una página HTML con algunos elementos básicos y darle estilo con CSS. No te preocupes por la perfección, sino por aplicar lo aprendido. Estructura HTML (index.html): Estructura básica: Comienza con <!DOCTYPE html>, <html>, <head> y <body>. Encabezado: Un <header> con un <h1> con tu nombre y un <p> con tu profesión o un eslogan. Navegación: Una sección <nav> con una lista desordenada (<ul>) de enlaces (<a>) a secciones ficticias como "Sobre Mí", "Proyectos", "Contacto". Sección "Sobre Mí": Un <section> con un <h2>, un <img> de perfil (puedes usar una imagen placeholder) y varios <p> describiendo tu experiencia. Sección "Proyectos": Otro <section> con un <h2> y varios <article>. Cada <article> puede tener un <h3> (nombre del proyecto), una breve descripción (<p>) y un enlace a un repositorio (<a>). Pie de página: Un <footer> con información de contacto o derechos de autor. Estilos CSS (style.css): Vincular CSS: Asegúrate de que tu style.css esté vinculado correctamente en el <head> de tu HTML. Estilos generales: Establece una fuente base para el body y un color de fondo. Encabezado y navegación: Usa Flexbox para centrar y distribuir los elementos de la navegación. Elimina los puntos de la lista y el subrayado de los enlaces. Secciones: Aplica algo de padding y margin a tus secciones para separarlas. Imágenes: Define un max-width: 100%; para tus imágenes para que sean responsivas. Modelo de caja: Experimenta con padding y margin en los elementos de tu portafolio. Colores: Añade colores de fondo y texto para hacer tu portafolio visualmente atractivo. Responsividad: (Opcional, pero recomendado) Intenta usar Media Queries básicas para adaptar el diseño a móviles, quizás apilando los proyectos en lugar de tenerlos en fila. Herramientas esenciales para el desarrollo web Para que tu viaje en el desarrollo web sea más eficiente y placentero, necesitarás algunas herramientas básicas: Visual Studio Code (VS Code): Es el editor de código más popular y potente. Es gratuito, de código abierto y altamente personalizable. Ofrece autocompletado inteligente, resaltado de sintaxis, depuración integrada y una vasta biblioteca de extensiones. Extensión Live Server (para VS Code): Una extensión indispensable. Te permite lanzar un servidor local con tu proyecto y recarga automáticamente la página en el navegador cada vez que guardas un cambio en tu código. Esto acelera drásticamente el proceso de desarrollo al ver tus modificaciones en tiempo real. Navegador Web (Chrome, Firefox): Utiliza las herramientas de desarrollador integradas (generalmente accesibles con F12) para inspeccionar elementos, depurar CSS, probar responsividad y analizar el rendimiento de tu página. Al dominar estas herramientas y practicar con proyectos como el portafolio personal, estarás en el camino correcto para convertirte en un desarrollador web competente. La inversión en aprender HTML CSS es la puerta de entrada a un mundo de posibilidades en el desarrollo y diseño digital. Infografía: guía visual con conceptos y datos clave sobre html y css para principiantes: aprende a crear páginas web [guía 2026] Infografía resumen Preguntas frecuentes ¿Cuánto tiempo se tarda en aprender HTML y CSS básico? Con dedicación, los fundamentos de HTML y CSS se pueden aprender en unas pocas semanas. Para dominar y crear diseños complejos, puede llevar varios meses de práctica constante. La clave es la consistencia y la creación de proyectos. ¿Necesito saber programación para aprender HTML y CSS? No, HTML y CSS no son lenguajes de programación, son lenguajes de marcado y de hojas de estilo, respectivamente. No requieren lógica de programación como JavaScript o Python, lo que los hace ideales para principiantes absolutos en el desarrollo web. ¿Es HTML y CSS suficiente para construir una página web completa? HTML y CSS son suficientes para construir el "esqueleto" y el "aspecto" estático de una página web. Sin embargo, para añadir interactividad avanzada, funciones dinámicas o bases de datos, necesitarás lenguajes de programación como JavaScript para el frontend y lenguajes de backend como PHP o Python. ¿Cuál es la diferencia entre HTML y HTML5? HTML5 es la última versión y estándar de HTML. Incorpora nuevas etiquetas semánticas (como <header>, <footer>, <nav>, <article>, etc.), soporte nativo para video y audio, y APIs para funcionalidades avanzadas como geolocalización o almacenamiento local. Es la versión que se usa actualmente. ¿Por qué el diseño responsivo es tan importante? El diseño responsivo es crucial porque garantiza que tu sitio web se adapte y funcione bien en cualquier dispositivo (ordenadores, tablets, móviles), mejorando la experiencia del usuario y el posicionamiento en motores de búsqueda. Google prioriza los sitios web optimizados para móviles en sus resultados.