Este documento tiene como objetivo guiarte a través del proceso de creación de una página HTML básica utilizando buenas prácticas. HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web y es fundamental para cualquier desarrollador web.
No se requieren conocimientos previos para seguir esta guía. Sin embargo, un editor de texto (como Visual Studio Code, Sublime Text o Atom) y un navegador web (como Google Chrome, Firefox o Safari) serán necesarios.
Cada documento HTML debe seguir una estructura básica. Aquí tienes un ejemplo de la estructura mínima de una página HTML:
<!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 HTML</title>
</head>
<body>
<header>
<h1>Bienvenido a Mi Página</h1>
</header>
<main>
<p>Este es un párrafo de ejemplo.</p>
</main>
<footer>
<p>© 2024 Mi Nombre</p>
</footer>
</body>
</html>
<!DOCTYPE html>
: Declara el tipo de documento como HTML5.<html lang="es">
: La etiqueta<html>
envuelve todo el contenido de la página. El atributolang="es"
define el idioma de la página como español.<head>
: Contiene metadatos sobre el documento, como el juego de caracteres (charset
) y el título (title
) que se muestra en la pestaña del navegador.<meta charset="UTF-8">
: Define la codificación de caracteres como UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">
: Hace que el diseño sea adaptable a diferentes tamaños de pantalla.<title>
: Define el título de la página.<body>
: Contiene el contenido visible de la página.
Utiliza etiquetas HTML semánticas como <header>
, <main>
, <footer>
, <article>
, y <section>
. Estas etiquetas ayudan a mejorar la accesibilidad y el SEO de tu página.
Mantén tu código limpio y organizado. Utiliza la indentación y espacios en blanco para mejorar la legibilidad. Aquí tienes un ejemplo de una buena práctica:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Buenas Prácticas</title>
</head>
<body>
<header>
<h1>Encabezado Principal</h1>
</header>
<main>
<section>
<h2>Sección 1</h2>
<p>Contenido de la primera sección.</p>
</section>
<section>
<h2>Sección 2</h2>
<p>Contenido de la segunda sección.</p>
</section>
</main>
<footer>
<p>© 2024 Mi Nombre</p>
</footer>
</body>
</html>
Utiliza comentarios para explicar secciones de tu código. Esto es útil para ti y para otros desarrolladores que puedan trabajar en tu código en el futuro.
<!-- Esto es un comentario -->
Asegúrate de que tu página sea accesible para todos los usuarios, incluyendo aquellos con discapacidades. Utiliza atributos como alt
en las imágenes y aria
en elementos interactivos.
<img src="imagen.jpg" alt="Descripción de la imagen">
Incluye metaetiquetas relevantes y usa etiquetas de encabezado (<h1>
, <h2>
, etc.) de manera apropiada para mejorar el SEO de tu página.
<meta name="description" content="Descripción de mi página web">
Siguiendo esta guía, deberías ser capaz de crear una página HTML básica que siga buenas prácticas. Continúa explorando y aprendiendo más sobre HTML y otras tecnologías web para mejorar tus habilidades como desarrollador.
Autor: Alejandro Daniel Di Stefano