Maquetación Web con Etiquetas HTML
HTML (HyperText Markup Language) es la base de toda página web. Es un lenguaje de marcado que define la estructura y el contenido de tu sitio. Aprender a usar las etiquetas HTML correctamente es crucial para crear páginas web bien organizadas y visualmente atractivas.
Estructura Básica de una Página HTML
<!DOCTYPE html>: Declara el tipo de documento como HTML5.
<html lang="en">: Indica el idioma principal del contenido de la página (en este caso, inglés).
<html>: Elemento raíz que contiene toda la página.
<head>: Contiene metadatos sobre la página (título, enlaces a CSS, etc.).
<meta charset="UTF-8"> : Especifica la codificación de caracteres UTF-8, que es la más utilizada y soporta una amplia gama de caracteres (incluyendo emojis y caracteres especiales).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Esta etiqueta es crucial para el diseño web responsive.
width=device-width ajusta el ancho del contenido al ancho de la pantalla del dispositivo.
initial-scale=1.0 establece el nivel de zoom inicial al 100%.Estas configuraciones garantizan que la página se vea correctamente en diferentes dispositivos, desde teléfonos móviles hasta pantallas de escritorio
<title>: Define el título que se muestra en la pestaña del navegador.
<body>: Contiene el contenido visible de la página.
Etiquetas Semánticas para la Estructura
<header>: Define el encabezado de la página (logo, navegación, etc.).
<nav>: Contiene los enlaces de navegación.
<main>:Envuelve el contenido principal de la página.
<article>:Representa un contenido independiente (artículo de blog, publicación, etc.).
<section>:Agrupa contenido relacionado dentro de <main>.
<aside>:Contiene contenido relacionado tangencialmente (barra lateral, anuncios, etc.).
<footer>:Define el pie de página (información de contacto, copyright, etc.).
Etiquetas para Contenido
<h1> a <h6>: Encabezados de diferentes niveles.
<p>: Párrafo de texto.
<ul> y <ol>:Listas desordenadas (viñetas) y ordenadas (números).
<li>: Elemento de lista.
<img>:Inserta una imagen.
<a>: Crea un enlace.
<table>: Crea una tabla.
<div>: Contenedor genérico para agrupar elementos.
<span>: Contenedor en línea para aplicar estilos a porciones de texto
Curso de Frontend Developer
