Technology

Principales etiquetas HTML para empezar a trabajar en el diseño web

HTML, que significa Lenguaje de Marcado de Hipertexto (por sus siglas en inglés, HyperText Markup Language), es el lenguaje estándar utilizado para crear páginas web. Las páginas web están estructuradas usando una variedad de etiquetas HTML, cada una con un propósito específico. A continuación, se explican algunas de las etiquetas básicas de HTML:

1. **`<!DOCTYPE html>`**: Esta declaración define la versión de HTML que estás utilizando. ¡En los documentos HTML5, siempre se usa `<!DOCTYPE html>` para indicar que estás utilizando la versión más reciente del estándar HTML. Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tu Título Aquí</title>
</head>
<body>
    <!-- Contenido de la página va aquí -->
</body>
</html>

2. **`<html>`**: Esta etiqueta delimita el inicio y el fin del documento HTML. Todo el contenido de la página web se encuentra dentro de estas etiquetas.

3. **`<head>`**: Esta sección contiene información sobre el documento, como el título de la página, enlaces a archivos CSS, metadatos y scripts. El contenido dentro de `<head>` no se muestra directamente en la página web.

•4. **`<title>`**: Define el título de la página web, que aparece en la barra de título del navegador o en las pestañas del navegador cuando los usuarios visitan la página.

5. **`<body>`**: Esta etiqueta delimita el contenido visible de la página web. Todo lo que quieras que los usuarios vean en la página (texto, imágenes, enlaces, etc.) se coloca dentro de las etiquetas `<body>`.

6. **`<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`**: Estas etiquetas se utilizan para definir encabezados de diferentes niveles. `<h1>` es el encabezado más importante y `<h6>` es el menos importante. Los encabezados se utilizan para estructurar y organizar el contenido de la página.

<h1>Encabezado de Nivel 1</h1>
<h2>Encabezado de Nivel 2</h2>
<h3>Encabezado de Nivel 3</h3>
<!-- ... hasta h6 -->

7. **`<p>`**: Define un párrafo de texto. Todo el texto que está dentro de las etiquetas `<p>` se mostrará como un párrafo en la página web.

8. **`<a>`**: Crea un enlace a otra página web o a un recurso en línea. El atributo `href` dentro de la etiqueta `<a>` especifica la URL a la que debe llevar el enlace.

<a href="https://www.ejemplo.com">Enlace a Ejemplo.com</a>

9. **`<img>`**: Se utiliza para mostrar imágenes en la página web. El atributo `src` especifica la fuente (URL) de la imagen.

<img src="imagen.jpg" alt="Descripción de la imagen">

10. **`<ul>`**, `<ol>`, `<li>`: Se utilizan para crear listas. `<ul>` representa una lista desordenada (viñetas), `<ol>` representa una lista ordenada (números o letras) y `<li>` representa cada elemento de la lista.

<ol>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ol>

11. **`<div>`**: Es una etiqueta de división que se utiliza para organizar y estructurar el contenido de la página web en bloques. Los elementos dentro de las etiquetas `<div>` pueden ser estilizados o manipulados como un grupo mediante CSS o JavaScript.

<div>
    <!-- Contenido agrupado aquí -->
</div>

<section>
    <!-- Sección de la página aquí -->
</section>

12. **`<span>`**: Similar a `<div>`, pero en lugar de bloquear el contenido, `<span>` se utiliza para aplicar estilos o manipulaciones específicas a partes individuales del texto en línea.