Ejemplo básico de una página en HTML5

Dale amor a este post!!!

HTML5 trae consigo varias funciones nuevas que mejoran la experiencia de desarrollo de páginas web.

En este ejemplo básico, el archivo HTML contiene una estructura básica con una sección de encabezado (header), una sección principal (main) con tres secciones (section), y una sección de pie de página (footer). Además, se ha enlazado un archivo CSS externo (estilos.css) para aplicar estilos a la página.

<!DOCTYPE html>
<html>
<head>
	<title>Mi página web</title>
	<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
	<header>
		<h1>Mi página web</h1>
		<nav>
			<ul>
				<li><a href="#">Inicio</a></li>
				<li><a href="#">Sobre mí</a></li>
				<li><a href="#">Contacto</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<section>
			<h2>Bienvenido a mi página</h2>
			<p>En esta página encontrarás información sobre mí y mis proyectos.</p>
		</section>
		<section>
			<h2>Sobre mí</h2>
			<p>Mi nombre es Juan y soy un desarrollador web apasionado por la tecnología.</p>
		</section>
		<section>
			<h2>Contacto</h2>
			<p>Puedes contactarme a través de mi correo electrónico: juan@example.com</p>
		</section>
	</main>
	<footer>
		<p>Derechos reservados &copy; 2023</p>
	</footer>
</body>
</html>

En el archivo CSS, se han definido algunas reglas para dar formato a la página, como la fuente y el color de fondo del encabezado y pie de página, la alineación del texto en el pie de página, el estilo de la lista de navegación y la separación entre las secciones.

body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
}

header {
	background-color: #333;
	color: #fff;
	padding: 20px;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}

nav li {
	margin-right: 20px;
}

nav li:last-child {
	margin-right: 0;
}

nav a {
	color: #fff;
	text-decoration: none;
}

main {
	padding: 20px;
}

section {
	margin-bottom: 30px;
}

h2 {
	font-size: 24px;
	margin-bottom: 10px;
}

footer {
	background-color: #333;
	color: #fff;
	text-align: center;
	padding: 10px;
}

Dale amor a este post!!!