HTML es la base de cualquier página web. Antes de añadir estilos con CSS, interactividad con JavaScript o lógica de servidor con PHP, necesitamos entender cómo se estructura una página web por dentro.
En este primer capítulo del curso vamos a trabajar con HTML creando una pantalla de login sencilla. Pero el objetivo principal no es únicamente hacer un formulario de acceso, sino entender las etiquetas HTML más importantes y para qué sirve cada una.
A lo largo del artículo veremos qué es HTML, cómo se organiza un documento HTML, qué diferencia hay entre elementos de bloque e inline, cómo crear listas, enlaces, imágenes, formularios, inputs y otros elementos fundamentales para empezar en el desarrollo web.
¿Qué es HTML?
HTML significa HyperText Markup Language, que en español podríamos traducir como lenguaje de marcado de hipertexto.
HTML no es un lenguaje de programación como JavaScript, PHP o Python. HTML es un lenguaje de marcado que sirve para decirle al navegador qué elementos forman parte de una página web.
Con HTML podemos indicar, por ejemplo:
- cuál es el título principal de una página;
- dónde empieza y termina el cuerpo del documento;
- qué partes son párrafos;
- qué elementos son enlaces;
- dónde hay imágenes;
- qué campos forman parte de un formulario;
- qué botón debe enviar los datos de un login.
Es decir, HTML se encarga de la estructura y el significado del contenido.
Estructura básica de un documento HTML
odo documento HTML tiene una estructura mínima. Esta estructura ayuda al navegador a interpretar correctamente la página.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi primera página HTML</title>
</head>
<body>
</body>
</html>Aunque al principio pueda parecer mucho código, cada etiqueta tiene una función concreta.
<!DOCTYPE html>
La línea:
<!DOCTYPE html>
indica al navegador que el documento está escrito en HTML5, que es la versión moderna de HTML.
No es una etiqueta como tal, pero es importante colocarla al principio del archivo para que el navegador sepa cómo debe interpretar la página.
Etiqueta <html>
La etiqueta <html> envuelve todo el contenido del documento.
<html></html>
Todo lo que forma parte de la página debe estar dentro de esta etiqueta. Dentro de <html> normalmente encontraremos dos partes principales:
<head></head><body></body>
El <head> contiene información interna de la página, mientras que el <body> contiene lo que verá el usuario.
Etiqueta <head>
La etiqueta <head> contiene información que no se muestra directamente en la página, pero que es importante para el navegador, los buscadores y el correcto funcionamiento del documento.
<head>
<meta charset="utf-8">
<title>Login en HTML</title>
</head>Dentro del <head> podemos encontrar etiquetas como <title> o <meta>.
Etiqueta <title>
La etiqueta <title> define el título de la página.
<title>Login en HTML</title>
Este título aparece en la pestaña del navegador y también puede influir en cómo se muestra la página en los resultados de Google.
Por eso, aunque el usuario no vea directamente esta etiqueta dentro del contenido de la página, sigue siendo muy importante para el SEO.
Un buen título debe ser claro y describir el contenido de la página.
Etiqueta <meta charset="utf-8">
La etiqueta:
<meta charset="utf-8">
sirve para indicar la codificación de caracteres del documento.
En la práctica, esto permite que se muestren correctamente caracteres como:
- acentos;
- la letra ñ;
- símbolos especiales;
- caracteres propios del español.
Por eso es recomendable incluirla siempre dentro del <head>.
Etiqueta <body>
La etiqueta <body> contiene todo el contenido visible de la página.
<body>
<h1>Iniciar sesión</h1>
<p>Introduce tus datos para acceder.</p>
</body>Dentro del <body> colocaremos títulos, párrafos, imágenes, enlaces, formularios, botones, listas y cualquier elemento que el usuario pueda ver o utilizar.
En nuestro caso, dentro del <body> construiremos la pantalla de login.
Comentarios en HTML
Los comentarios sirven para añadir notas dentro del código. El navegador no muestra los comentarios al usuario.
<!-- Esto es un comentario en HTML -->
Los comentarios pueden ser útiles para explicar partes del código o dejar anotaciones mientras estamos desarrollando.
Por ejemplo:
<!-- Formulario de inicio de sesión -->
<form>
...
</form>Aunque los comentarios son útiles, no conviene abusar de ellos. El código debe ser lo suficientemente claro como para entenderse por sí mismo siempre que sea posible.
Encabezados HTML: <h1>, <h2>, <h3>
Las etiquetas de encabezado sirven para organizar el contenido de una página.
<h1>Título principal</h1> <h2>Subtítulo importante</h2> <h3>Apartado dentro del subtítulo</h3>
El <h1> suele ser el título principal de la página. Normalmente debería haber un solo <h1> por página.
Los <h2>, <h3>, <h4> y siguientes sirven para crear una jerarquía de contenidos.
Ejemplo:
<h1>Curso HTML desde cero</h1> <h2>Qué es HTML</h2> <h2>Etiquetas básicas de HTML</h2> <h3>La etiqueta body</h3>
Esto no solo ayuda al usuario a leer mejor la página, también ayuda a Google a entender la estructura del contenido.
Etiqueta <p>: párrafos y elementos de bloque
La etiqueta <p> se utiliza para crear párrafos.
<p>Este es un párrafo en HTML.</p>
Un párrafo es un elemento de tipo block o bloque.
Esto significa que ocupa todo el ancho disponible y normalmente empieza en una línea nueva. Si ponemos varios párrafos seguidos, cada uno aparecerá debajo del anterior.
Ejemplo:
<p>Primer párrafo.</p><p>Segundo párrafo.</p>
El resultado será que cada párrafo aparece en una línea separada.
Los elementos de bloque son muy importantes porque nos ayudan a organizar la estructura visual del contenido.
Etiqueta <span>: elementos inline
La etiqueta <span> se utiliza para marcar una parte pequeña de un texto.
<p>Este texto tiene una <span>palabra destacada</span> dentro.</p>
A diferencia de <p>, la etiqueta <span> es un elemento inline.
Esto significa que no ocupa toda la línea ni fuerza un salto de línea. Se mantiene dentro del flujo normal del texto.
Por ejemplo:
<p>Hola, mi nombre es <span>Carlos</span> y estoy aprendiendo HTML.</p>
El <span> es útil cuando queremos aplicar estilos o identificar una parte concreta de un texto sin romper la línea.
Diferencia entre block e inline en HTML
Una de las ideas importantes al aprender HTML es entender la diferencia entre elementos de bloque y elementos inline.
Los elementos block ocupan todo el ancho disponible y empiezan en una línea nueva.
Ejemplos de elementos block:
<div> </div> <p></p> <h1></h1> <form></form> <hr>
Los elementos inline solo ocupan el espacio necesario y no rompen la línea.
Ejemplos de elementos inline:
<span></span> <a></a> <label></label>
Entender esta diferencia es importante porque más adelante, cuando trabajemos con CSS, podremos controlar mucho mejor el diseño de la página.
Salto de línea con <br>
La etiqueta <br> sirve para insertar un salto de línea.
Primera línea<br> Segunda línea
A diferencia de otras etiquetas, <br> no necesita etiqueta de cierre.
Aunque puede ser útil en algunos casos, no conviene usar <br> para separar grandes bloques de contenido. Para eso es mejor usar etiquetas como <p>, <div> o aplicar márgenes con CSS.
Listas numeradas y no numeradas
HTML permite crear listas de elementos. Hay dos tipos principales: listas numeradas y listas no numeradas.
Listas no numeradas con <ul>
Las listas no numeradas se crean con la etiqueta <ul>.
Cada elemento de la lista se escribe con <li>.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>El resultado será una lista con viñetas.
Este tipo de lista es útil cuando el orden de los elementos no es importante.
Listas numeradas con <ol>
Las listas numeradas se crean con la etiqueta <ol>.
<ol>
<li>Crear el archivo HTML</li>
<li>Añadir la estructura básica</li>
<li>Crear el formulario de login</li>
</ol>El resultado será una lista con números.
Este tipo de lista se usa cuando el orden sí importa, por ejemplo en instrucciones paso a paso.
Enlaces en HTML con <a href="">
Los enlaces se crean con la etiqueta <a>.
<a href="https://www.ejemplo.com">Visitar página</a>
El atributo href indica la dirección a la que llevará el enlace.
También podemos enlazar a otra página de nuestro propio sitio:
<a href="contacto.html">Ir a contacto</a>
Los enlaces son una de las partes más importantes de HTML, porque permiten navegar entre páginas y conectar diferentes contenidos.
En una pantalla de login podríamos tener enlaces como:
<a href="registro.html">Crear una cuenta</a> <a href="recuperar-password.html">¿Has olvidado tu contraseña?</a>
Imágenes en HTML y atributo alt
Las imágenes se insertan con la etiqueta <img>.
<img src="logo.png" alt="Logo de la página">
La etiqueta <img> utiliza varios atributos importantes:
src
Indica la ruta de la imagen.
alt
Indica un texto alternativo que describe la imagen.
El atributo alt es muy importante por tres motivos:
- ayuda a la accesibilidad;
- permite que los lectores de pantalla describan la imagen;
- ayuda a Google a entender el contenido visual.
Ejemplo:
<img src="login.png" alt="Pantalla de login creada con HTML">
No debemos dejar el atributo alt vacío si la imagen aporta información importante.
Formularios en HTML con <form>
Los formularios permiten que el usuario introduzca información y la envíe.
En una pantalla de login, el formulario es una parte fundamental.
<form action="login.php" method="post">
...
</form>La etiqueta <form> puede tener varios atributos, pero dos de los más importantes son action y method.
Atributo method: diferencia entre GET y POST
El atributo method indica cómo se enviarán los datos del formulario.
Los dos métodos más comunes son:
method="get"
y
method="post"
Método GET
Con GET, los datos se envían en la URL.
Ejemplo:
<form action="buscar.php" method="get">
<input type="text" name="busqueda">
<input type="submit" value="Buscar">
</form>Después de enviar el formulario, la URL podría quedar parecida a esto:
buscar.php?busqueda=html
GET puede ser útil para búsquedas o filtros, porque los datos quedan visibles en la dirección.
Método POST
Con POST, los datos se envían dentro de la petición, no directamente en la URL.
<form action="login.php" method="post">
<input type="email" name="email">
<input type="password" name="password">
<input type="submit" value="Entrar">
</form>Para un login, lo habitual es usar POST, porque no queremos que datos como el email o la contraseña aparezcan en la URL.
Inputs en HTML
La etiqueta <input> permite crear diferentes tipos de campos dentro de un formulario.
Dependiendo del valor del atributo type, el input tendrá un comportamiento diferente.
Input de tipo text
El input de tipo text sirve para introducir texto normal.
<input type="text" name="usuario">
Se puede usar para nombres, usuarios o cualquier dato de texto corto.
Input de tipo email
El input de tipo email se utiliza para direcciones de correo electrónico.
<input type="email" name="email">
Este tipo de campo ayuda al navegador a validar si el usuario ha escrito un email con formato correcto.
Input de tipo number
El input de tipo number permite introducir valores numéricos.
<input type="number" name="edad">
Puede ser útil para edades, cantidades, códigos numéricos o cualquier dato que deba ser un número.
Input de tipo password
El input de tipo password sirve para introducir contraseñas.
<input type="password" name="password">
El texto escrito se oculta en pantalla, normalmente con puntos o asteriscos.
Este tipo de input es imprescindible en un formulario de login.
Input de tipo submit
El input de tipo submit crea un botón para enviar el formulario.
<input type="submit" value="Entrar">
Cuando el usuario hace clic en este botón, el formulario se envía según el action y el method indicados.
También se puede usar la etiqueta <button> para enviar formularios, pero input type="submit" sigue siendo una opción válida.
Input de tipo reset
El input de tipo reset sirve para limpiar los campos del formulario y devolverlos a su valor inicial.
<input type="reset" value="Limpiar">
Puede ser útil en formularios largos, aunque en un login no siempre es necesario.
Checkbox en HTML
Los checkbox permiten marcar o desmarcar opciones.
En una pantalla de login, un checkbox típico sería:
<input type="checkbox" id="recordar" name="recordar"><label for="recordar">Recordar sesión</label>
Los checkbox son útiles cuando el usuario puede seleccionar una o varias opciones.
Etiqueta <label>
La etiqueta <label> se utiliza para asociar un texto a un campo del formulario.
<label for="email">Correo electrónico</label> <input type="email" id="email" name="email">
El atributo for del <label> debe coincidir con el id del input.
Esto tiene varias ventajas:
- mejora la accesibilidad;
- facilita el uso del formulario;
- permite seleccionar el campo haciendo clic sobre el texto;
- hace que el código sea más claro.
Ejemplo completo:
<label for="password">Contraseña</label> <input type="password" id="password" name="password">
Uso de required en los inputs
El atributo required indica que un campo es obligatorio.
<input type="email" name="email" required>
Si el usuario intenta enviar el formulario sin completar ese campo, el navegador mostrará un aviso.
En un formulario de login, lo normal es que tanto el email como la contraseña sean obligatorios:
<input type="email" name="email" required> <input type="password" name="password" required>
Es importante recordar que required ayuda en el navegador, pero no sustituye la validación del servidor. Cuando más adelante usemos PHP, también tendremos que validar los datos en el backend.
Etiqueta <div>
La etiqueta <div> es un contenedor genérico.
<div>
<h1>Iniciar sesión</h1>
<p>Introduce tus datos</p>
</div>Se utiliza para agrupar elementos y organizar la estructura de la página.
Por ejemplo, en una pantalla de login podemos tener un contenedor general:
<div class="login-container">
<div class="login-box">
...
</div>
</div>El <div> no tiene significado semántico por sí mismo, pero es muy útil para estructurar contenido y aplicar estilos con CSS.
Línea horizontal con <hr>
La etiqueta <hr> crea una línea horizontal.
<hr>
Se puede usar para separar visualmente secciones dentro de una página.
Por ejemplo:
<h2>Datos de acceso</h2>
<hr>
<form>
...
</form>Al igual que <br>, la etiqueta <hr> no necesita etiqueta de cierre.
Ejemplo completo de login en HTML
A continuación tienes un ejemplo sencillo que reúne muchas de las etiquetas vistas en este capítulo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login en HTML</title>
</head>
<body>
<!-- Contenedor principal del login -->
<div class="login-container">
<h1>Iniciar sesión</h1>
<p>Introduce tus datos para acceder a tu cuenta.</p>
<hr>
<form action="login.php" method="post">
<div>
<label for="email">Correo electrónico</label>
<br>
<input type="email" id="email" name="email" required>
</div>
<br>
<div>
<label for="password">Contraseña</label>
<br>
<input type="password" id="password" name="password" required>
</div>
<br>
<div>
<input type="checkbox" id="recordar" name="recordar">
<label for="recordar">Recordar sesión</label>
</div>
<br>
<input type="submit" value="Entrar">
<input type="reset" value="Limpiar">
</form>
<p>¿No tienes cuenta? <a href="registro.html">Regístrate aquí</a></p>
</div>
</body>
</html>Este login todavía no tiene estilos CSS ni conexión con PHP o MySQL. De momento, lo importante es entender la estructura HTML y el papel que cumple cada etiqueta.
HTML como base del curso de desarrollo web
Este primer contacto con HTML es fundamental para todo lo que vendrá después.
En este curso no vamos a aprender HTML, CSS, JavaScript, MySQL y PHP como temas separados sin conexión. La idea es aprenderlos construyendo una aplicación web real paso a paso.
HTML nos permitirá crear la estructura.
CSS nos permitirá mejorar el diseño visual.
JavaScript nos permitirá añadir interactividad y validaciones en el navegador.
PHP nos permitirá procesar los datos en el servidor.
MySQL nos permitirá guardar usuarios, proyectos, tareas y otra información de la aplicación.
Por eso es tan importante empezar entendiendo bien las etiquetas HTML básicas.
Errores comunes al empezar con HTML
Cuando empezamos a escribir HTML, es normal cometer algunos errores. Estos son algunos de los más habituales:
Usar títulos solo por tamaño
No debemos usar <h1>, <h2> o <h3> solo porque visualmente se vean más grandes o pequeños.
Los encabezados deben usarse para organizar la jerarquía del contenido. El diseño visual se debe controlar con CSS.
Olvidar el atributo alt en las imágenes
Siempre que una imagen aporte información, debe tener un texto alternativo.
<img src="imagen.jpg" alt="Descripción de la imagen">
Esto mejora la accesibilidad y también ayuda al SEO.
No usar label en los formularios
Un formulario sin labels es menos accesible y más difícil de usar.
Lo correcto es asociar cada campo con su etiqueta:
<label for="usuario">Usuario</label> <input type="text" id="usuario" name="usuario">
Usar GET para un login
En un formulario de login no deberíamos usar GET, porque los datos se mostrarían en la URL.
Para un login, es mejor usar:
<form method="post">
Usar demasiados <br>
La etiqueta <br> sirve para saltos de línea puntuales, pero no debe usarse como sistema principal para maquetar una página.
Para organizar el diseño, más adelante usaremos CSS.
Conclusión
HTML es el primer paso para aprender desarrollo web. No se encarga de programar la lógica de una aplicación ni de hacer que una página tenga un diseño bonito, pero sí define la estructura sobre la que construiremos todo lo demás.
En este primer vídeo hemos visto qué es HTML y algunas de sus etiquetas más importantes:
<!DOCTYPE html>
<html>
<head>
<title>
<meta>
<body>
<h1>
<p>
<span>
<br>
<ol>
<ul>
<a>
<img>
<form>
<input>
<label>
<div>
<hr>También hemos aprendido conceptos clave como la diferencia entre elementos block e inline, el uso de formularios, los métodos GET y POST, los tipos de input y la importancia del atributo required.
Con esta base ya podemos empezar a construir páginas más completas y preparar el terreno para añadir CSS, JavaScript, PHP y MySQL en los siguientes capítulos del curso.
HTML es un lenguaje de marcado que sirve para estructurar el contenido de una página web. Permite indicar títulos, párrafos, enlaces, imágenes, formularios y otros elementos que el navegador interpreta y muestra al usuario.
No. HTML no es un lenguaje de programación. Es un lenguaje de marcado. Sirve para estructurar contenido, pero no permite crear lógica, condiciones o cálculos como sí hacen JavaScript o PHP.
<!DOCTYPE html>?<!DOCTYPE html> indica al navegador que el documento utiliza HTML5. Se coloca al principio del archivo HTML para que el navegador interprete correctamente la página.
<head> y <body>?El <head> contiene información interna de la página, como el título o la codificación de caracteres. El <body> contiene el contenido visible que verá el usuario en el navegador.
Un elemento block ocupa todo el ancho disponible y empieza en una nueva línea. Un elemento inline solo ocupa el espacio necesario y se mantiene dentro de la misma línea de texto.
<form>?La etiqueta <form> sirve para crear formularios en HTML. Dentro de ella se colocan campos como inputs, labels, checkbox y botones para enviar datos.
GET envía los datos en la URL, mientras que POST los envía dentro de la petición. Para formularios de login se recomienda usar POST, porque evita que datos como la contraseña aparezcan en la dirección del navegador.
required en un input?El atributo required hace que un campo sea obligatorio. Si el usuario intenta enviar el formulario sin completar ese campo, el navegador mostrará un aviso.
alt en una imagen?El atributo alt describe el contenido de una imagen. Es importante para la accesibilidad, para lectores de pantalla y para ayudar a los buscadores a entender la imagen.
No. HTML permite crear la estructura visual del formulario, pero para que el login funcione de verdad necesitamos un lenguaje de servidor como PHP y una base de datos como MySQL.
