Curso de HTML5 desde cero: Domina las bases del desarrollo web
by Juan Carlos García
7-Febr-2025
(1)
HTML5 para principiantes
Aprenderás a usar etiquetas semánticas, crear formularios interactivos, insertar multimedia y mucho más.
Al finalizar, serás capaz de maquetar y publicar tu propia página web.
¡No importa si no tienes experiencia previa, este curso está diseñado para que cualquier persona pueda empezar desde cero y convertirse en un experto en HTML5!
Post relacionados
Página web con Bootstrap
Página web con Bootstrap: ¿Cómo hacer y maquetar una página web con Bootstrap gratis?
(3)
¿Te gustaría aprender a crear páginas web desde cero? ¡Este curso de HTML5 es perfecto para ti! HTML5 es el lenguaje fundamental para construir la estructura de cualquier sitio web, y en este curso te guiaremos paso a paso desde los conceptos más básicos hasta técnicas avanzadas.
Tabla de contenido
- 1 ¿Qué es HTML5?
- 2 Etiquetas Básicas de HTML5
- 3 ¿Qué son las Etiquetas de HTML5?
- 4 Etiquetas Básicas de HTML5
- 5 1. Etiquetas de Texto en HTML5
- 6 2. Etiquetas de Enlaces e Imágenes en HTML5
- 7 3. Etiquetas de Listas en HTML5
- 8 4. Etiquetas Semánticas en HTML5
- 9 5. Etiquetas de Formularios
- 10 6. Etiquetas Multimedia
- 11 Mejores prácticas para usar las etiquetas de HTML5
¿Qué es HTML5?
HTML5 es el lenguaje estándar para crear páginas web. Es la quinta versión de HTML (HyperText Markup Language) y ha revolucionado la forma en que construimos sitios web.
Importancia de HTML5
Es el estándar actual para el desarrollo web, compatible con dispositivos móviles y esencial para los buscadores de internet y la accesibilidad.
Historia de HTML5
HTML5 se lanzó en 2014 como una evolución de HTML 4.01 y XHTML, introdujo nuevas etiquetas, mejoras en la semántica y soporte nativo para multimedia, algunos eventos importantes en la historia de HTML5 son los siguientes:
- En 991 Tim Berners-Lee, un científico británico, creó la primera versión de HTML (HyperText Markup Language) como parte de un proyecto para compartir documentos en el CERN (Organización Europea para la Investigación Nuclear).
- HTML 1.0 era muy básico, con solo 18 etiquetas, y se enfocaba en la estructura de texto y enlaces.
- HTML 2.0 (1995) fue la primera versión estandarizada por el IETF (Internet Engineering Task Force) e introdujo elementos como formularios y tablas.
- HTML 3.2 (1997) desarrollado por el W3C (World Wide Web Consortium), añadió soporte para tablas complejas, applets de Java y texto flotante alrededor de imágenes.
- HTML 4.01 (1999) fue una versión importante que introdujo mejoras en la accesibilidad, soporte para hojas de estilo (CSS) y scripting (JavaScript), también separó la estructura del contenido de su presentación.
- XHTML (2000) es una reformulación de HTML 4.01 basada en XML, donde, XHTML era más estricto en su sintaxis (por ejemplo, todas las etiquetas debían cerrarse) y se enfocaba en la interoperabilidad entre navegadores.
- En el 2008 el W3C publicó el primer borrador oficial de HTML5.
- Y en el 2014 HTML5 fue declarado un estándar oficial por el W3C, este fue un hito importante, ya que, consolidó HTML5 como el lenguaje principal para el desarrollo web.
Herramientas necesarias para iniciar en HTML5
Antes de empezar, necesitarás algunas herramientas básicas:
Editores de texto
- Visual Studio Code: Uno de los editores más populares, con soporte para extensiones y resaltado de sintaxis.
- Sublime Text: Ligero y rápido, ideal para principiantes.
Navegadores web
Google Chrome o Mozilla Firefox ambos tienen herramientas de desarrollo integradas que te serán muy útiles.
Estructura básica de un documento HTML5
Un archivo HTML es un documento de texto con extensión .html que contiene etiquetas que definen la estructura y el contenido de la página, además, todo documento HTML5 sigue una estructura básica, por ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página HTML5 - EWebik</title>
</head>
<body>
<h1>¡Hola, seguidores de EWebik!</h1>
<p>Esta es mi primera página web con HTML5.</p>
</body>Explicación del código:
- <!DOCTYPE html>: Indica que el documento es HTML5.
- <html lang="es">: Define el idioma principal del contenido (español).
- <meta charset="UTF-8">: Especifica la codificación de caracteres.
- <head>: Contiene metadatos como el título y la descripción.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Hace que la página sea responsive.
- <title>: Define el título de la página, que aparece en la pestaña del navegador.
- <h1> y <p>: Etiquetas para encabezados y párrafos, respectivamente.
Con esta introducción a HTML5, has dado el primer paso para convertirte en un desarrollador web. Ahora conoces las herramientas necesarias, la estructura básica de un documento HTML5 y cómo crear tu primera página web. ¡En el próximo módulo profundizaremos en las etiquetas y elementos más utilizados en HTML5!
¿Listo para seguir aprendiendo? ¡No te pierdas la siguiente clase fundamentos de HTML5!
Gracias por tu calificación
(1)
Etiquetas Básicas de HTML5
A continuación aprenderás las etiquetas básicas que conforman HTML5 y como puedes utilizarlas en tus proyectos, además, aprenderás algunas recomendaciones para optimizar tu pagina web en los buscadores de internet.
¿Qué son las Etiquetas de HTML5?
Las etiquetas de HTML5 son elementos que definen la estructura y el contenido de una página web. Cada etiqueta tiene una función específica, como definir encabezados, párrafos, enlaces, imágenes, listas y más.
HTML5 introduce nuevas etiquetas semánticas que mejoran la organización del contenido y su significado para los motores de búsqueda.
Etiquetas Básicas de HTML5
A continuación, te presento las etiquetas más importantes de HTML5, agrupadas por categorías, recuerda que cada etiqueta por lo regular tiene una etiqueta de apertura y cierre, por ejemplo:
1. Etiquetas de Texto en HTML5
Estas etiquetas se utilizan para estructurar y formatear el texto en una página web.
Encabezados H1 a H2
- <h1> a <h6>: A través de estas etiquetas puedes definir los encabezados en tu página web, donde, <h1> es el más importante y <h6> el menos importan.
<h1>Título Principal</h1>
<h2>Subtítulo</h2>Párrafos P
- <p>: Define un párrafo.
<p>Este es un párrafo de ejemplo.</p>Resaltar texto en negritas STRONG
- <strong>: Texto en negrita, permite resaltar un texto (semánticamente importante).
<p>Este es un texto <strong>importante</strong>.</p>Texto en cursivas EM
- <em>: Texto en cursiva (énfasis), permite dar formato a tu texto y dar énfasis a cierto texto que desees resaltar.
<p>Este es un texto con <em>énfasis</em>.</p>Saltos de líneas BR
- <br>: Salto de línea para separar párrafos y dar un mejor formato al texto, por lo regular no se requiere una etiqueta de cierre, podemos realizar el cierre en una sola etiqueta.
<p>Parrafo 1</p>
<br/>
<p>Párrafo 2</p>Líneas horizontales HR
- <hr>: Línea horizontal (separador temático), permite crear una separación en nuestro contenido de texto para una mejor presentación.
<p>Parrafo 1</p>
<hr/>
<p>Párrafo 2</p>Gracias por tu calificación
(1)
2. Etiquetas de Enlaces e Imágenes en HTML5
Permiten agregar hipervínculos y contenido multimedia, con ello se logra crear una navegación entre las diferentes páginas de tu sitio web y permiten que tu contenido sea mas llamativo al agregar imágenes.
Enlaces A
- <a>: Crea un enlace para la navegación entre las diferentes páginas que conforman tu sitio web o incluso a otros sitios web externos, los enlaces permiten distribuir la autoridad de tu sitio web para mejorar el posicionamiento de las diferentes páginas, sin embargo, también, puedes limitar esta distribución agregando “nofollow” en el atributo rel, por ejemplo:
<!- Enlace que transmite autoridad, ya que, es follow ->
<a href="https://ejemplo.com">ewebik.com/pagina1</a>
<!- Enlace que NO transmite autoridad, ya que, es nofollow ->
<a href="https://ejemplo.com" rel="nofollow">sitioexterno.com/pagina2</a>- href: url de la página
- rel: indica si el enlace es follow o nofollow, si es follow, por lo común se omite este atributo.
Imágenes IMG
- <img>: Inserta una imagen en tu página, es importante que siempre agregues una descripción de la imagen en el atributo alt, ya que, este texto se mostrará en dado caso que tu imagen no cargue, es un parámetro importante para las funciones de accesibilidad del navegador y mejora el posicionamiento de tu página, ya que, permite a los buscadores comprender mejor el contenido respecto a tus imágenes.
<img src="imagen.jpg" alt="Descripción de la imagen">- src: Ruta de la imagen.
- alt: Texto alternativo (importante para accesibilidad y SEO).
3. Etiquetas de Listas en HTML5
Se utilizan para crear listas ordenadas y no ordenadas dentro de tu página web.
Listas no ordenadas o viñetas UL
- <ul>: Lista no ordenada (con viñetas).
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>Lista ordenada con números OL
- <ol>: Lista ordenada (con números).
<ol>
<li>Primer paso</li>
<li>Segundo paso</li>
</ol>- <li>: Define un elemento de la lista, no importa si es una lista ordenada o no ordenada, puedes definir un elemento de la lista a través de esta etiqueta.
Gracias por tu calificación
(1)
4. Etiquetas Semánticas en HTML5
Estas etiquetas mejoran la estructura y el significado del contenido, permitiendo crear una estructura que permite a los buscadores comprender de una mejor manera el contenido de tu página web.
Contenido o sección principal de la página MAIN
- <main>: Contenido principal de la página, dentro de las etiquetas main, debes colocar el contenido más relevante de tu página.
<main>
<p>Contenido principal aquí.</p>
</main>Secciones SECTION
- <section>: Define una sección temática, dentro de un main, puede definir diferentes secciones según tu contenido, cada sección debe tener una semántica coherente y diferente a las demas secciones.
<main>
<section>
<h2>Acerca de Nosotros</h2>
<p>Información sobre la empresa.</p>
</section>
<section>
<h2>Contacto</h2>
<p>EWebik estará feliz de recibir tu mensaje.</p>
</section>
</main>Sección de blog ARTICLE
- <article>: Contenido independiente (como una entrada de blog), mediante esta etiqueta indicas que el contenido hace referencia a un post de un blog, lo que indica, que es un texto informativo.
<article>
<h2>Título del Artículo</h2>
<p>Contenido del artículo.</p>
</article>
- Puedes agrega encabezados dentro de un “article”, pero recuerda de mantener un solo H1 por página.
Sección de encabezados HEADER
- <header>: Encabezado de la página o sección, permite establecer un titulo por página o sección, recuerda que es recomendable utilizar solo un H1 por página, aunque dentro de cada header puedes definir los demás H2 a H6, según los necesites.
- En mi experiencia los buscadores reconocen los H1 a H6 sin la necesidad de utilizar header, lo dejo a tu criterio.
<section>
<header>
<h1>Bienvenido a Mi Sitio EWebik</h1>
</header>
<header>
<h1>Bienvenido a Mi Sitio</h1>
</header>
</section>
<section>
<header>
<h2>Subtitulo de Mi Sitio EWebik</h2>
</header>
</section>Pie de página FOOTER
- <footer>: Pie de página, es una sección donde puedes definir información extra en tu página, por lo regular es una sección que va hasta el final o parte baja de tu página web y sirve para agregar un navegación entre diferentes páginas o el reconocimiento de marca y derechos de autor y copyright.
<footer>
<p>© 2023 Mi Sitio Web</p>
</footer>Gracias por tu calificación
(1)
5. Etiquetas de Formularios
Permiten crear formularios interactivos, mediante los cuales puedes crear secciones dentro de tu página para recabar información de los usuarios, por ejemplo, un boletín, un formulario de contacto, etc.
Formulario FORM
- <form>: Contenedor de un formulario, indica que su contenido serán entradas de texto y checkbox y todo lo referente a un formulario, puedes establecer el método de envió de la información a través del atributo method, ya sea, POST, GET, PUT o DELETE.
- En al atributo action estableces la URL o ENDPOINT a donde enviarás la información del formulario según el método de envío.
<form action="/endpoint" method="post">
<!- Cotenido del formulario ->
</form>Entrada de texto o cajas de texto INPUT
- <input>: Campo de entrada, podemos definir una caja de texto indicando el tipo en el atributo type, email, search, tel, url, number, range, datetime-local, month, time, week, myDate y color.
<form action="/endpoint" method="post">
<input type="email" id="email" name="email"/>
<br/>
<input type="search" id="search" name="search" />
<br/>
<input type="tel" id="tel" name="tel" />
<br/>
<input type="url" id="url" name="url" />
<br/>
<input type="number" name="age" id="age" min="1" max="10" step="2" />
<br/>
<input type="range" name="price" id="price" min="10" max="100" step="10" value="30" />
<output class="price-output" for="price"></output>
<br/>
<input type="datetime-local" name="datetime" id="datetime" />
<br/>
<input type="month" name="month" id="month" />
<br/>
<input type="time" name="time" id="time" />
<br/>
<input type="week" name="week" id="week" />
<br/>
<input type="date" name="myDate" min="2025-02-01" max="2025-03-01" step="7" id="myDate" />
<br/>
<input type="color" name="color" id="color" />
</form>Gracias por tu calificación
(1)
Entrada de texto multilínea TEXTAREA
- <textarea>: Área de texto multilínea, suele utilizarse en formularios donde se requiere introducir varias líneas de texto, por ejemplo, en la sección de contacto para permitir a los usuarios dejar un mensaje largo o alguna duda, etc.
<textarea rows="4" cols="50">Escribe aquí tu mensaje...</textarea>Botones BUTTON
- <button>: Botón, permite lanzar un evento dentro del formulario, por ejemplo, enviar los datos al servidor, para ello, se tiene un atributo type que define el tipo de botón: button, submit, reset; por ejemplo, para enviar los datos a un formulario sería “submit”
<button type="submit">Enviar</button>6. Etiquetas Multimedia
HTML5 permite integrar audio y video de manera nativa, esto es muy bueno, ya que, tenemos la posibilidad de agregar nuestros videos o audios sin la necesidad de utilizar una biblioteca o framework diferente a HTML5.
Archivos de audio AUDIO
- <audio>: Podemos insertar en la página web nuestro archivo de audio, además, podemos agregar un mensaje de error en dado caso que la versión del navegador no soporte HTML5.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta audio.
</audio>Archivo de video VIDEO
- <video>: Podemos insertar un archivo de vídeo en nuestra página web.
<video controls width="600">
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta video.
</video>Mejores prácticas para usar las etiquetas de HTML5
Ahora que ya conoces las etiquetas básicas de HTML5, toma en cuenta los siguientes puntos que te ayudarán a utilizar correctamente las etiquetas y sus atributos:
- Usa etiquetas semánticas: Mejora la accesibilidad y el posicionamiento en buscadores.
- Optimiza para móviles: Usa la etiqueta <meta name="viewport">.
- Valida tu código: Utiliza herramientas como el Validador de HTML del W3C (https://validator.w3.org/).
- Prioriza la accesibilidad: Usa atributos como alt en imágenes y aria-* para mejorar la experiencia de usuarios con discapacidades.
- Mantén tu código limpio: Usa sangrías y comentarios para mejorar la legibilidad en tu ambiente de desarrollo, en producción, puedes comprimir tu código y eliminar los comentarios, saltos de línea etc, para que pese menos y la página cargue más rápido.
Gracias por tu calificación
(1)
🧐 Autoevaluación: Curso de HTML5
¿Qué significa HTML?
¿Cuál de las siguientes etiquetas es obligatoria en un documento HTML5?
¿Qué atributo se utiliza en la etiqueta <meta> para hacer que una página sea responsive?
Juan Carlos García
Desarrollador de software / SEO
Durante años he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera página de Google, y hoy quiero compartir contigo lo que se en tecnologías como: Node JS, PHP, C# y Bases de datos.
Si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.