Saltar al contenido
Apuntes FS(+)

Clase 9 - HTML, DOM y Semántica

Anatomía de una página web

  • HTML
  • CSS
  • JavaScript

HTML: Hypertext Markup Language (Lenguaje de marcas de hipertexto)

  • Hypertext se refiere a la capacidad de un texto o contenido para contener enlaces o referencias a otros textos o contenidos relacionados.
  • Markup Language (lenguaje de marcado) se refiere al código que escribimos en orden para crear los “documentos”.
  • Los “ladrillos” que usamos para crear nuestras páginas son los elementos de HTML.
  • Permite incluir o referenciar cualquier tipo de información.

Elemento HTML

  • Unidad básica del contenido en una página web

Atributo en HTML

  • Son palabras reservadas que nos ayudan a describir cierto comportamiento o particularidades de los elementos.

  • Ejemplo:

<html>
  <head>
    <title>Hello!</title>
  </head>
  <body>
    <h1>Hello!</h1>
    <p>I am made from HTML elements.</p>
    <img src="box.png" title="blue box" alt="si no se muestra la imágen" />
  </body>
</html>
  • El atributo src permite saber dónde se encuentra la imagen que queremos mostrar en un elemento <img/>
  • Por su parte title nos brinda un poco de información si ponemos el cursor sobre la imagen.

Atributos: id y class

  • Id le da un identificador único a nuestro elemento.
  • Class nos sirve para identificar un elemento y aplicarle cierto “estilo”.
  • Documentación recomendada:
  • ¡A practicar ☝️🤓!

DOM (Document Object Model)

Document

  • Cada sitio web es una colección de páginas web.
  • Cada página web es un documento.
  • El “Documento” es un objeto que el navegador sabe interpretar.

Object

  • Mismo concepto que ya conocemos.
  • Pensemos en que sirven para aproximar a algo que queremos representar.

Model

  • Alude a que el DOM es una representación de nuestra estructura.

Semántica

  • Se refiere al uso de etiquetas que no solo muestran cosas en pantalla sino que también nos describen qué es ese contenido

Beneficios

  • Mejora la accesibilidad
  • SEO (Posicionamiento en buscadores)
  • Claridad y mantenibilidad
  • Buenas prácticas y estándares

Ejemplo semántico vs no semántico

%% NO SEMÁNTICO %%
<div id="header">
  <h1>Blog Personal</h1>
</div>


<div id="menu">
  <a href="#">Inicio</a>
  <a href="#">Blog</a>
</div>


<div id="content">
  <h2>Mi primer post</h2>
  <p>Bienvenido a mi blog...</p>
</div>


<div id="footer">
  <p>© 2025 - Todos los derechos reservados</p>
</div>


%% SEMÁNTICO %%
<header>
  <h1>Blog Personal</h1>
</header>


<nav>
  <a href="#">Inicio</a>
  <a href="#">Blog</a>
</nav>


<main>
  <article>
    <h2>Mi primer post</h2>
    <p>Bienvenido a mi blog...</p>
  </article>
</main>


<footer>
  <p>© 2025 - Todos los derechos reservados</p>
</footer>

Etiquetas

  • Básicas
<!DOCTYPE html>  <!-- Define el tipo de documento -->
<html>           <!-- Raíz del documento HTML -->
<head>           <!-- Contiene metadatos del documento -->
<title>          <!-- Título del documento -->
<body>           <!-- Contenido visible de la página -->
<p>              <!-- Párrafo -->
<a>              <!-- Enlace (hipervínculo) -->
<img>            <!-- Imagen -->
<ul>             <!-- Lista no ordenada -->
<ol>             <!-- Lista ordenada -->
<li>             <!-- Elemento de lista -->
<br>             <!-- Salto de línea -->
<hr>             <!-- Línea horizontal -->
<div>            <!-- Contenedor genérico -->
<span>           <!-- Contenedor en línea -->
<button>         <!-- Botón que puede enviar el formulario o ejecutar acciones -->
<input>          <!-- Campo de entrada. Sirve para textos, contraseñas, correos, casillas, botones, etc. -->
<form>           <!-- Define dónde empieza y termina el formulario y cómo se van a enviar los datos. -->
<textarea>       <!-- Campo de texto largo (multilínea) -->
<label>          <!-- Asocia un texto con un input para que sea más accesible y claro. -->
<select>         <!-- Crea un menú desplegable para que el usuario elija una opción de una lista -->
<option>         <!-- Representa cada opción individual dentro de un <select> -->
  • Semánticas
<header>         <!-- Encabezado principal de una sección o página -->
<nav>            <!-- Navegación -->
<main>           <!-- Contenido principal de la página -->
<section>        <!-- Sección temática del contenido -->
<article>        <!-- Contenido independiente (ej: un post) -->
<aside>          <!-- Contenido secundario o complementario -->
<footer>         <!-- Pie de página o sección -->
<figure>         <!-- Contenedor para ilustraciones -->
<figcaption>     <!-- Título o descripción de una figura -->
<h1> a <h6>      <!-- Encabezados (del más grande al más pequeño) -->
<mark>           <!-- Texto marcado o resaltado -->
<time>           <!-- Fecha u hora -->
<details>        <!-- Contenido desplegable -->
<summary>        <!-- Resumen de un elemento <details> -->
<search>         <!-- Agrupa contenido relacionado con búsquedas -->
<address>        <!-- Contiene información de contacto  -->
<code>           <!-- Muestra estilo de fragmento de código  -->

Ejercicios

Ejercicio 1:

Mediante el uso de HTML únicamente, replicar la siguiente página web: Ejercicio 1

Ejercicio 2:

Realizar una hoja de vida únicamente con HTML (utilizar HTML semántico para la estructura). Deberán poner una breve descripción de ustedes, conocimientos actuales en el área IT, manejo de idiomas, educación y experiencia laboral. Además debe tener un formulario de contacto con los campos: Nombre, Asunto y Mensaje.