¿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.
Qué 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.
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.
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>
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.
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.
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 regularmente: La mejor forma de aprender HTML es experimentando con diferentes etiquetas y estructuras.
- Usa un editor adecuado: Herramientas como Visual Studio Code o Notepad++ pueden ayudarte a escribir y organizar tu código de forma más eficiente.
- Consulta tutoriales y guías: Existen numerosos tutoriales y recursos en línea, como nuestra guía para principiantes de HTML.
- Comprueba el diseño en diferentes dispositivos:
Usa etiquetas HTML para adaptar el contenido y hacerlo visible correctamente en ordenadores y móviles. - Optimiza el SEO:
Etiquetas como<title>,<meta>, y<header>ayudan a los motores de búsqueda a entender el contenido de tu sitio y mejorar tu posicionamiento.
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.