¿Alguna vez te has preguntado cómo se crean las páginas web que visitas todos los días? Bueno, déjame contarte que funcionan con HTML, el lenguaje que da vida a internet. HTML significa HyperText Markup Language, que suena complicado, ¿verdad? Pero no te asustes, es más sencillo de lo que parece. Si estás dando tus primeros pasos en el mundo del diseño web estás en el lugar correcto. En este post, vamos a ver los códigos HTML básicos que puedes utilizar en tu día a día para crear o editar una página web.
Tabla de Contenidos:
- Qué es HTML y para qué sirve
- Las 10 etiquetas HTML básicas para principiantes
- Ejemplos de Uso de los Códigos HTML Básicos
- Ejemplo 2: Tabla de Productos
- Ejemplo 5: Navegación con la Etiqueta
- Ejemplo 7: Meta Descripción para SEO
- Cómo usar HTML para mejorar la experiencia del usuario
- Conclusión
- Preguntas frecuentes sobre los códigos HTML (FAQ)
Elige tu proyecto y te mostramos el hosting más adecuado para empezar.
¿Has creado una web con HTML, CSS o JavaScript? Aquí puedes subir sus archivos y publicarla en Internet de forma sencilla.
Ver hosting webQué es HTML y para qué sirve
HTML es un lenguaje de marcado, lo que significa que usa etiquetas para definir diferentes partes del contenido de una página. Con HTML podemos estructurar un sitio web en secciones, encabezados, párrafos, imágenes y enlaces. Cada uno de estos elementos permite que el navegador muestre la página correctamente y se usable por todos. En otras palabras, sin HTML, no existiría internet tal y como lo conocemos.
Para aprender HTML no necesitas conocimientos avanzados; solo un editor de texto y algo de práctica. Si no tienes uno, puedes explorar nuestra guía de editores HTML gratuitos para elegir el que más te convenga.
HTML es un lenguaje de marcado que utiliza etiquetas para organizar el contenido de una página. Este marcado permite identificar textos, imágenes y otros elementos para que el navegador pueda mostrarlos correctamente.
— MDN Web Docs de Mozilla
Estructura HTML Básica
Todo archivo HTML tiene una estructura básica, similar a la de una carta o documento, donde cada parte tiene un propósito claro. Veamos un ejemplo simple de la estructura principal de un documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página</title>
</head>
<body>
<h1>¡Bienvenido a mi página web!</h1>
<p>Este es un ejemplo de un párrafo en HTML.</p>
</body>
</html>En este ejemplo:
<!DOCTYPE html>indica al navegador que el documento es HTML5.<html>es la etiqueta que contiene todo el código HTML.<head>incluye metadatos y configuraciones, como el título (<title>) de la página.<body>contiene el contenido visible para los visitantes, como textos, imágenes y enlaces.
Todo archivo HTML sigue la misma estructura: una declaración, una raíz y dos bloques, uno invisible y otro visible.
Avisa al navegador de que el documento es HTML5.
Contiene todo el código de la página.
Metadatos y configuración, no visibles.
Incluye <title>, <meta> y enlaces a estilos.
Contenido visible: textos, imágenes y enlaces.
Aquí van <h1>, <p>, <img> y <a>.
Las 10 etiquetas HTML básicas para principiantes
Estas son las etiquetas más comunes en HTML que puedes comenzar a usar de inmediato y que debes conocer.
1. Encabezados (<h1> a <h6>)
Los encabezados organizan el contenido en secciones. En HTML hay seis niveles de encabezados (<h1> a <h6>), siendo <h1> el más importante.
<h1>Encabezado Principal</h1>
<h2>Subencabezado</h2>2. Párrafos (<p>)
Se utiliza para crear bloques de texto. Es ideal para formatear el contenido textual en secciones de lectura.
<p>Este es un párrafo en HTML.</p>3. Enlaces (<a>)
Permiten enlazar otras páginas o documentos. Aquí un ejemplo:
<a href="https://www.loading.es/hosting/index.html">Servicios de Hosting</a>4. Imágenes (<img>)
Las imágenes añaden atractivo visual. Para incluirlas, usa <img> con el atributo src que indica el archivo de la imagen.
<img src="imagen.jpg" alt="Descripción de la imagen">5. Listas (<ul>, <ol>, <li>)
Las listas permiten organizar la información de manera clara. Pueden ser ordenadas (<ol>) o desordenadas (<ul>).
<ul>
<li>Elemento de lista 1</li>
<li>Elemento de lista 2</li>
</ul>6. Divisiones (<div>)
<div> se usa para agrupar contenido y es clave para crear secciones en el diseño de la página.
<div>
<h2>Sección de contenido</h2>
<p>Contenido de la sección.</p>
</div>7. Meta (<meta>)
Esta etiqueta proporciona información sobre la página a los motores de búsqueda y navegadores. Es clave para optimizar el SEO de tu sitio.
<meta charset="UTF-8">
<meta name="description" content="Descripción de la página">8. Span (<span>)
<span> es útil para aplicar estilos a pequeñas partes de texto dentro de otras etiquetas, sin que interrumpa el flujo del contenido.
<p>Este es un <span style="color:red;">texto resaltado</span> en HTML.</p>9. Input (<input>)
<input> es una etiqueta versátil para crear campos de entrada en formularios, como casillas de texto o botones.
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<input type="submit" value="Enviar">
</form>10. Nav (<nav>)
<nav> agrupa enlaces de navegación, ideal para crear menús o barras de navegación.<nav>
<a href=»#inicio»>Inicio</a> |
<a href=»#servicios»>Servicios</a> |
<a href=»#contacto»>Contacto</a>
</nav>
Encabezado principal Subencabezado
Ejemplos de Uso de los Códigos HTML Básicos
Para poner en práctica los códigos HTML básicos, aquí tienes varios ejemplos detallados con explicaciones para cada elemento. Estos ejemplos son útiles para aprender a estructurar formularios, tablas, enlaces, y mucho más en tu sitio web.
Ejemplo 1: Formulario de Contacto Completo
Este formulario simple permite al usuario enviar su nombre y correo electrónico.
<form action="/enviar">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<br>
<label for="correo">Correo:</label>
<input type="email" id="correo" name="correo">
<br>
<input type="submit" value="Enviar">
</form><form action="/enviar">: Define un formulario y especifica la URL donde se enviarán los datos al hacer clic en «Enviar».<label for="nombre">: Crea una etiqueta para el campo de entrada «nombre», mejorando la accesibilidad.<input type="text" id="nombre" name="nombre">: Crea un campo de texto donde el usuario puede escribir su nombre.<input type="email" id="correo" name="correo">: Añade un campo donde el usuario puede ingresar su correo electrónico; se valida automáticamente para formatos de email.<input type="submit" value="Enviar">: Crea el botón para enviar los datos del formulario.
Ejemplo 2: Tabla de Productos
Esta tabla muestra una lista de productos con sus respectivos precios.
<table>
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
<tr>
<td>Producto 1</td>
<td>€10</td>
</tr>
<tr>
<td>Producto 2</td>
<td>€15</td>
</tr>
</table><table>: Inicia la tabla.<tr>: Define una fila de la tabla.<th>: Indica el encabezado de una columna; en este caso, «Producto» y «Precio».<td>: Define una celda de datos en cada fila, donde se muestra el nombre del producto y su precio.
| Producto | Precio |
|---|---|
| Producto 1 | €10 |
| Producto 2 | €15 |
Ejemplo 3: Enlace con Descripción y Estilos
Este ejemplo muestra cómo crear un enlace con un título descriptivo y agregar estilo básico.
<a href="https://www.loading.es" title="Ir a Loading" style="color:blue; text-decoration:none;">Visita Loading</a><a href="https://www.loading.es">: Crea un enlace hacia el sitio especificado.title="Ir a Loading": Al pasar el ratón sobre el enlace, muestra un mensaje emergente con esta descripción.style="color:blue; text-decoration:none;": Aplica un estilo al enlace, cambiando el color del texto y eliminando el subrayado.
Ejemplo 4: Lista Ordenada y Desordenada
Estas listas organizan la información en formato de lista numerada (ordenada) y de lista de puntos (desordenada).
<ol>
<li>Paso 1: Abrir el editor</li>
<li>Paso 2: Escribir código HTML</li>
<li>Paso 3: Guardar el archivo</li>
</ol>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul><ol>y<ul>: Inician listas ordenadas y desordenadas, respectivamente.<li>: Cada ítem de la lista; en la ordenada se muestra con números y en la desordenada con puntos.
Ejemplo 5: Navegación con la Etiqueta <nav>
Este ejemplo muestra un menú de navegación que agrupa varios enlaces internos.
<nav>
<a href="#inicio">Inicio</a> |
<a href="#servicios">Servicios</a> |
<a href="#contacto">Contacto</a>
</nav><nav>: Define una sección de navegación que puede contener enlaces internos o externos.<a href="#inicio">: Cada enlace dentro del<nav>lleva al usuario a una sección específica dentro de la página (anclajes internos).
Ejemplo 6: Uso de <span> para Resaltar Texto
Este ejemplo muestra cómo resaltar una parte específica de texto dentro de un párrafo usando <span>.
<p>Este es un ejemplo de <span style="color: red;">texto destacado</span> en HTML.</p><p>: Inicia un párrafo.<span style="color: red;">: Utiliza<span>para aplicar un estilo al texto «texto destacado», cambiando su color a rojo.
Ejemplo 7: Meta Descripción para SEO
Este fragmento de código muestra cómo agregar una descripción para los motores de búsqueda.
<head>
<meta name="description" content="Esta es una página de ejemplo para aprender HTML básico.">
</head><meta name="description">: Proporciona una descripción breve de la página, ayudando a los motores de búsqueda a comprender el contenido y mejorar su SEO.
Formulario de contacto
<form action="/enviar"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre"> <label for="correo">Correo:</label> <input type="email" id="correo" name="correo"> <input type="submit" value="Enviar"> </form>
Tabla de productos
<table> <tr> <th>Producto</th> <th>Precio</th> </tr> <tr> <td>Producto 1</td> <td>€10</td> </tr> <tr> <td>Producto 2</td> <td>€15</td> </tr> </table>
Enlace con descripción y estilos
<a href="https://www.loading.es" title="Ir a Loading" style="color:blue; text-decoration:none;">Visita Loading</a>
Lista ordenada y desordenada
<ol> <li>Paso 1: Abrir el editor</li> <li>Paso 2: Escribir código HTML</li> <li>Paso 3: Guardar el archivo</li> </ol> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>
Navegación con la etiqueta nav
<nav> <a href="#inicio">Inicio</a> | <a href="#servicios">Servicios</a> | <a href="#contacto">Contacto</a> </nav>
Span para resaltar texto
<p>Este es un ejemplo de <span style="color: red;">texto destacado</span> en HTML.</p>
Meta descripción para SEO
<head> <meta name="description" content="Esta es una página de ejemplo para aprender HTML básico."> </head>
Cómo usar HTML para mejorar la experiencia del usuario
La simplicidad de HTML permite que los usuarios naveguen e interactúen con tu sitio web de manera intuitiva. Incorporar códigos HTML básicos bien estructurados facilita la carga de la página y mejora la accesibilidad.
También es importante recordar que, para optimizar tu sitio, es necesario que esté alojado en un hosting web que te ofrezca todo lo que necesitas para que tu proyecto web funcione correctamente.
En Loading te ofrecemos un servicio de alojamiento web con un soporte 24/7, con SSL gratis, y copias de seguridad incluidas y siempre al mejor precio posible.
Consejos para empezar a crear tu propio código HTML
-
Practica a diario
La mejor forma de aprender HTML es escribir etiquetas y ver el resultado en el navegador.
-
Elige un buen editor
Visual Studio Code o Notepad++ te ayudan a escribir y organizar el código más rápido.
-
Sigue tutoriales y guías
Apóyate en recursos como la guía para principiantes de HTML para resolver dudas concretas.
-
Comprueba el diseño en móvil y escritorio
Adapta el contenido para que se vea bien en cualquier pantalla, no solo en tu ordenador.
-
Optimiza el SEO desde el inicio
Etiquetas como title, meta y los encabezados ayudan a los buscadores a entender tu web.
Conclusión
Conocer los códigos HTML básicos es muy útil, aunque no te vayas a dedicar expresamente al desarrollo web. Si vas a crear sitios con algún CMS o simplemente vas a realizar envíos de email marketing, es muy probable que tengas que lidiar con código HTML en algún momento.
Así que conocer las etiquetas HTML básicas te ayudará muchísimo en muchas ocasiones y si lo que quieres es crear una página web ya es algo obligado para tener una buena base.
Preguntas frecuentes sobre los códigos HTML (FAQ)
¿Qué es HTML y para qué sirve?
HTML es el lenguaje de marcado que estructura el contenido de una web: textos, imágenes, enlaces y secciones. Sin él, los navegadores no podrían mostrar las páginas tal y como las conocemos.
¿Necesito instalar algo para escribir HTML?
No. Solo necesitas un editor de texto y un navegador. Cualquier editor sirve para empezar, aunque herramientas como Visual Studio Code lo hacen más cómodo.
¿Con HTML basta para crear una web completa?
HTML estructura el contenido. Para el diseño visual necesitas CSS y para la interactividad, JavaScript. Los tres trabajan juntos, pero HTML es siempre la base.
¿Cuál es la etiqueta más importante de una página?
El <title> y la meta descripción son clave para el SEO, y el <h1> define el tema principal. Debes usar un solo <h1> por página.
¿Dónde publico mi web hecha con HTML?
En un hosting web. Subes tus archivos HTML, CSS e imágenes al servidor y tu página queda visible en Internet con tu dominio.
¿Las etiquetas HTML distinguen mayúsculas de minúsculas?
No, pero la buena práctica es escribirlas siempre en minúsculas. Es más limpio, más legible y evita errores al combinar HTML con otros lenguajes.