Crear un documento HTML5 desde cero es la tarea esencial que explico cuando comienzo a dictar una capacitación de este tema. Lo mejor es que este proceso es independiente de la plataforma o del editor que utilicemos. En este artículo, te mostraré cómo crear un documento HTML5 básico utilizando cualquier editor de texto, ya sea Dreamweaver 6, Brackets, o Visual Studio Code.
Paso 1: Abrir el editor de código
Antes de empezar, abre tu editor de código preferido. Todos los editores que mencionamos — Dreamweaver, Brackets o Visual Studio Code — son compatibles con HTML5, pero también podrías utilizar cualquier otro editor que soporte archivos de texto, como Notepad++ o Sublime Text.
En mi carrera como desarrollador he usado todos los mencionados programas como editores de código. Actualmente estoy trabajando con Visual Studio Code.
A continuación describo las variantes de como comenzar un archivo HTML con cada uno de ellos:
- Dreamweaver 6: Si estás usando Dreamweaver, selecciona la opción «Archivo nuevo», elige «HTML» como tipo de archivo y asegúrate de que esté configurado para HTML5.
- Brackets: Abre un nuevo archivo y guarda el archivo con la extensión .html.
- Visual Studio Code: Crea un archivo nuevo y guárdalo como index.html o cualquier nombre que desees con la extensión .html.
Paso 2: Crear el esqueleto básico de un documento HTML5
Cada página web necesita una estructura básica para ser válida y funcionar correctamente en los navegadores. Vamos a comenzar con el código básico para un archivo HTML5. Aquí está el esqueleto mínimo que necesitas:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>El título del Mundo</title>
</head>
<body>
<h1>¡Hola, Mundo!</h1>
<p>Este es mi primer documento HTML5 creado desde cero.</p>
</body>
</html>Explicación del código
1. <!DOCTYPE html>
Esta es la declaración del tipo de documento. Le dice al navegador que el documento está escrito en HTML5. Es obligatorio y siempre debe estar en la primera línea de tu archivo HTML.
2. <html lang="es">
Esta etiqueta abre el elemento principal de la página, donde todo el contenido HTML estará contenido. El atributo lang="es" indica que el idioma principal del documento es español, lo que puede ayudar a los motores de búsqueda y a los lectores de pantalla.
3. <head>
Dentro del elemento <head>, colocamos metadatos sobre la página, como el título y la codificación de caracteres. Estos no se muestran directamente en la página, pero son esenciales para la funcionalidad y la accesibilidad.
4. <meta charset="UTF-8">
Esta etiqueta especifica la codificación de caracteres utilizada en el documento, y UTF-8 es la codificación más común y recomendada para los documentos HTML. Permite que los caracteres especiales (como las tildes o los símbolos) se representen correctamente.
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
Esta etiqueta es especialmente importante para el diseño web responsive. Le indica al navegador cómo escalar el contenido para adaptarse al ancho del dispositivo. Con width=device-width, el ancho de la página coincidirá con el ancho de la pantalla del dispositivo. initial-scale=1.0 asegura que la página no esté ampliada por defecto.
6. <title>Mi primer documento HTML5</title>
El título de la página, que aparecerá en la pestaña del navegador. Este título es importante para SEO y accesibilidad.
7. <body>
El contenido visible de tu página web irá dentro del elemento <body>. Es donde colocarás textos, imágenes, botones, formularios y cualquier otro elemento HTML que los usuarios puedan ver e interactuar.
8. <h1>¡Hola, mundo!</h1>
El encabezado principal (h1) es ideal para títulos y es esencial para la jerarquía de contenido. En este ejemplo, estamos usando un clásico «¡Hola, mundo!» para demostrar cómo funciona.
9. <p>Este es mi primer documento HTML5 creado desde cero.</p>
Un párrafo de texto (<p>) es donde puedes escribir contenido estándar. Este es uno de los elementos más utilizados en el cuerpo de cualquier página web.
Estructura general
La estructura de un documento HTML5 siempre seguirá un patrón similar al siguiente:
- DOCTYPE: Para especificar el estándar HTML5.
- HTML: El contenedor principal del documento.
- HEAD: Información y metadatos.
- BODY: Contenido visible en la página.
Paso 3: Guardar y visualizar el documento
Una vez que hayas escrito tu código HTML básico, guarda el archivo con la extensión .html. Por ejemplo, guárdalo como index.html.
Para visualizar el archivo, abre el archivo HTML en cualquier navegador (Chrome, Firefox, Safari, etc.) y deberías ver tu página con el título en la pestaña y el texto «¡Hola, mundo!» en el cuerpo de la página.
Conclusión
Crear un documento HTML5 desde cero es el primer paso en cualquier proyecto web. Al comprender la estructura básica de HTML5 y cómo funciona cada parte, podrás construir desde simples páginas web hasta sitios más complejos. Lo mejor de HTML5 es su simplicidad y compatibilidad con todos los navegadores modernos, lo que lo convierte en la opción estándar para el desarrollo web.
Ya sea que estés utilizando Dreamweaver 6, Brackets, o Visual Studio Code, puedes seguir estos mismos pasos para crear tu propio documento HTML5 y empezar a desarrollar sitios web de manera efectiva.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Tengo una animación Flash que importé a HTML5 con CreateJs, como puedo insertarla en dremweaver….gracias.
Básicamente lo que genera ese tipo de procedimiento es código HTML, CSS y JavaScript + Imágenes si es necesario. Eso puede ser incorporado en Dreamweaver.
Deberías editar el archivo HTML de lo que se ha exportado desde Flash con Dreamweaver y luego integrarlo con tu código.
Saludos
Hola…yo he maquetado en Sublime Text.Voy a empezar a maquetar en Dreamweaver…queria saber si hay algun tipo de comandos(porque estoy en cero en dreamweaver) para poder crear mas rapido las etiquetas(en sublime text ,con tab se creaba automaticamente las etiquetas)
Gracias
Para comenzar desde Cero con Dreamweaver te recomiendo que leas la muy buena Guía que ofrece Adobe: http://helpx.adobe.com/dreamweaver/topics.html
Hola Damián,
Estoy comenzando a aprender HTML5, yo el HTML normal lo manejo perfectamente con Dreamweaver, pero quiero ir a esta nueva forma…
¿donde puedo conseguir un tutorial que me explique de cero?
Incluso si conoces de plantillas con código para ejemplos…
Gracias!!
Hola Marisela, HTML5 es muy amplio y depende de lo que quieras hacer sobre el tema. Si manejas bien el idioma inglés, HTML5 Doctor puede ser un buen lugar para comenzar a ver algunas formas (http://html5doctor.com/).
Saludos
Damián
hola buenas tardes a todos soy alumno del tecnologico de tapachula realizaremos un proyecto profesional, necesito si alguien me puede ofrecer informacion, articulos sobre las utilizaciones de html5 y css3
Te recomendamos que sigas las noticias del sitio y además las que publicamos en: https://www.facebook.com/css3yhtml5
Saludos
hola a todos tendo conocimientos en html, php, y css desarrollos las web en php pero me estoy interesando en html5 y css3 quisiera saber si alguien me puede decir si puedo implementar para html5 base de datos como se realiza en php con dreamweaver? bueno gracias a todos
La parte de PHP la puedes manejar como siempre en HTML5. No es necesario que cambies la tecnologías que vienes usando del lado servidor.
Salduos
Desde el Dreamweaver CS8 no puedo aplicar el html5
Desde la vista de código puedes usar HTML5, aunque seguramente no te marcará la semántica.
Es recomendable que cuentes con Dreamweaver CSS 5.5 o superior.
Salduos
buenos dias queria saber si Dreamweaver me genera codigo php, html5 y javascript para conectalo a una base de mysql
Es posible generar ese código mediante Dreamweaver si manejas PHP.
Hola,
Quisiera saber si hay alguna manera de pasar de HTML4 a 5? sin modificar lo ya construído. GRacias
Es un poco amplia la pregunta. Pero si es un código ya armado, tendrías que hacer las modificaciones a mano.
Hola, llevo tiempo sin programar en Dream y ahora que abrí mis viejos archivos nos los corre en Windows 10, es por la compatibilidad del HTML supongo…pero ahora que he intentado crear paginas web nuevas no me corren, hay algun cambio significativo que debería tomar en cuenta para que me funcionen los codigos?
En el modo edición de código deberías poder habrirlos.
Puedes probar también con otro editor para verificar si puedes ver el código puro. Por ejemplo Brackets (http://brackets.io/)