01 · Etiquetas html

¿Qué es una etiqueta?

La mayoría de los elementos de HTML tienen una etiqueta de apertura encerrada entre símbolos < > y otra etiqueta de cierre que es igual que la de apertura pero con una barra «/» antes del nombre de la etiqueta, teniendo el contenido encerrado entre ambas etiquetas.

Código

<etiqueta>  contenido
</etiqueta>

Hay que tener en cuenta que la etiqueta que cierra es la misma que la abre. Vamos a ver unos ejemplos:

Incorrecto

<section>
    <h1>
        Título nuevo proyecto
        <span>
        Septiembre 2024
        </h1>
    </span>
</section>

Correcto

<section>
    <h1>
        Título nuevo proyecto
        <span>
            Septiembre 2024
        </span>
    </h1>
</section>

02 · Estructura html

Estructura HTML

Todo documento HTML se organiza en tres etiquetas principales:

Html: apertura y cierre de la página.
Head: metadatos y título.
Body: cuerpo de la página, solo lo que está dentro de esta etiqueta se representará visualmente.

Código

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Título de la página</title>
  </head>
  <body>
    <header>
      <img src="logo.png" alt="Logo de la empresa" />
    </header>
    <section>
      <h1>Hola mundo</h1>
      <p>Esta es mi primera web</p>
    </section>
  </body>
</html>

Así se anidan esas etiquetas, unas dentro de otras, en el mismo código de arriba:

html

head

<title> Título de la página

body

header

<img> logo de la empresa

section

h1

Hola mundo

p

Esta es mi primera web

03 · Texto

<h1> ··· <h6>

Etiqueta usada para escribir encabezados. Son etiquetas HTML muy importantes, ya que son usadas para jerarquizar el contenido de la web. Las etiquetas se usan para explicar brevemente el contenido que irá a continuación.

Código

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Título de la página</title>
  </head>
  <body>
    <header>
      <img src="logo.png" alt="Logo de la empresa" />
    </header>
    <div>
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
    </div>
  </body>
</html>

Resultado

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

03 · Texto

<p>

Etiqueta usada para escribir párrafos de texto.

Código

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Título de la página</title>
  </head>
  <body>
    <header>
      <img src="logo.png" alt="Logo de la empresa" />
    </header>
    <div>
      <p>Soy un párrafo</p>
    </div>
  </body>
</html>

Resultado

Soy un párrafo

03 · Texto

<span>

Etiqueta HTML sin ningún significado específico. Se usa conjuntamente con los atributos «class» o «id» para atribuirle ciertas características.

Código

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Mi primera web</title>
  </head>
  <body>
    <p>El párrafo puedo poner un <span>span</span>, ¿ves?</p>
  </body>
</html>

Resultado

El párrafo puedo poner un span, ¿ves?

03 · Texto

<strong> / <b>

El elemento strong es el apropiado para marcar con negrita un texto.

Código

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Mi primera web</title>
  </head>
  <body>
    <p>El párrafo hay una <strong>negrita</strong>.</p>
  </body>
</html>

Resultado

El párrafo hay una negrita.

03 · Texto

<em> / <i>

Texto en cursiva.

Código

<section>
    <h1>
        Título nuevo proyecto
    <p>
        Hola, sou un texto en <em>cursiva</em> dentro e un parrafo
    </p>>
</section>

Este fragmento reproduce tal cual la diapositiva de clase, incluida alguna errata de escritura («sou», «dentro e un parrafo» y el </h1> sin cerrar). Al copiarlo, revisa siempre que cada etiqueta que abres se cierre correctamente.

03 · Texto

<small> / <big>

Hace el tamaño del texto una talla más pequeña que el tamaño mínimo de fuente del navegador / hace el texto más grande.

Código

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Mi primera web</title>
  </head>
  <body>
    <p>Texto normal, <small>pequeño</small>
      y <big>Grande</big>
    </p>
  </body>
</html>

Resultado

Texto normal, pequeño y Grande

03 · Texto

<sub> / <sup>

Subíndice (por ejemplo H₂O) y superíndice (por ejemplo una marca registrada ®).

Código

<section>
    <h1>
        Título nuevo proyecto
    <p>
        soy agua: H<sub>2</sub>O, y yo soy una marca refgistrada<sup>®</sup>
    </p>>
</section>

«refgistrada» es otra errata tal cual aparece en la diapositiva original (sería «registrada»); se ha dejado igual para no cambiar el código mostrado en clase.

03 · Texto

<blockquote> / <q>

Sangría todo el bloque de texto de ambas partes y añade saltos de línea superior e inferior. Se utiliza para citas largas / cita en línea.

Código

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Mi primera web</title>
  </head>
  <body>
    <p>
        En el párrafo de abajo hay un bloque de cita:
      <blockquote>
        Hola soy un bloque
      </blockquote>
    </p>
  </body>
</html>

Resultado

En el párrafo de abajo hay un bloque de cita:

Hola soy un bloque

03 · Texto

<a>

(anchor) Crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL.

Atributos (entre otros)

Href: url/dirección donde vamos al presionar — por ejemplo tel:+3400000000 o mailto:correo@correo.
Title: título del enlace.
Target: destino — _self carga en la misma página, _blank carga la página en una pestaña en blanco.

Código

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Mi primera web</title>
  </head>
  <body>
    <p>El párrafo hay un <a href="#">Enlace</a>. Vamos</p>
  </body>
</html>

Resultado

El párrafo hay un Enlace. Vamos

03 · Texto

Atributo="valor"

Los atributos van dentro de la etiqueta de apertura, con la forma atributo="valor", y pueden combinarse varios en la misma etiqueta.

Código

<a href="mi-web.html" target="_blank">link</a>

03 · Texto

<br> / <hr>

Br: forzar un salto de línea. Hr: línea horizontal o separador.

¡Solo tienen etiqueta de apertura!

Código

<section>
    <h1>
        Título nuevo proyecto
    <p>
        Soy un parrafo largo de texto...
        <br>
        despues de un salto de línea pasamos a otra sección mediante un separador
        <hr>
    </p>
</section>

03 · Texto

Resumen etiquetas texto

Etiqueta	Atributos	Descripción
`<h1> ··· <h6>`	-	Encabezado
`<p>`	-	Párrafo
`<span>`	-	Etiqueta universal
`<strong> <b>`	-	Negrita
`<em> <i>`	-	Cursiva
`<small> <big>`	-	Tamaño de texto
`<sub> <sup>`	-	Subíndice / Superíndice
`<blockquote> <q>`	-	Sangría / citas
`<a>`	Href, title, target	Enlace
`<br>`	-	Salto de línea — solo lleva etiqueta de apertura
`<hr>`	-	Separador línea horizontal — solo lleva etiqueta de apertura

03 · Texto

Ejercicio HTML

Creamos una web con:

Un título <h1>
Un párrafo principal con un blockquote
Un separador
Un segundo párrafo con un texto en negrita
Un tercer párrafo con un párrafo que ponga: «Edición web + nuestro nombre en cursiva + un enlace con el texto Barreira 2024 que nos lleve a la web de barreira».
Después de 2024 introducimos el símbolo ® (alt + 0174) con la etiqueta <sup>

Vista previa orientativa

Título nuevo proyecto

Aquí va la cita en bloque de tu párrafo principal.

Un segundo párrafo con una palabra en negrita.

Edición web · [tu nombre] · Barreira 2024^®

Los textos son solo orientativos: sustitúyelos por los tuyos siguiendo la lista de arriba.

04 · Listas

<ul> <li>

Etiquetas para crear una lista desordenada.

Código

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Título de la página</title>
  </head>
  <body>
    <header>
      <img src="logo.png" alt="Logo de la empresa" />
    </header>
    <div>
      <ul>
        <li>Peras</li>
        <li>Manzanas</li>
        <li>Naranjas</li>
      </ul>
    </div>
  </body>
</html>

Resultado

Peras
Manzanas
Naranjas

04 · Listas

<ol> <li>

Etiquetas para crear una lista ordenada.

Código

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Título de la página</title>
  </head>
  <body>
    <header>
      <img src="logo.png" alt="Logo de la empresa" />
    </header>
    <div>
      <ol>
        <li>Peras</li>
        <li>Manzanas</li>
        <li>Naranjas</li>
      </ol>
    </div>
  </body>
</html>

Resultado

Peras
Manzanas
Naranjas

05 · Imagen

<img>

Insertar una imagen.

Src: url donde se almacena la imagen.
Title: título de la imagen.
Alt: texto descriptivo.
width: ancho.
Height: alto.

¡Solo tiene etiqueta de apertura!

Código

<section>
    <img src="img/imagen01.jpg" title="imagen de prueba" width="250px">
</section>

Resultado

Imagen de prueba: lago junto a colinas verdes

05 · Imagen

<figure> / <figcaption>

La etiqueta figure agrupa contenido multimedia. La etiqueta figcaption añade una leyenda al contenido que hay dentro de figure.

Código

<html>
  <head>
    <title>Figcaption</title>
  </head>
  <body>
    <figure>
      <img src="img/imagen.jpg" alt="Logotipo de HTML5">
      <figcaption>Logotipo oficial...</figcaption>
    </figure>
  </body>
</html>

Resultado

Logotipo oficial del lenguaje de marcas HTML5.

05 · Imagen

<a> + <img>

Insertar una imagen con enlace.

Código

<a href="mi-web.html" target="_blank">
    <img src="img/imagen.jpg" >
</a>

Resultado

06 · Contenedores

<div>

Etiqueta común utilizada para crear un contenedor genérico.

Código

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Título de la página</title>
  </head>
  <body>
    <header>
      <img src="logo.png" alt="Logo de la empresa" />
    </header>
    <div>
      <h1>Hola mundo</h1>
      <p>Esta es mi primera web</p>
    </div>
  </body>
</html>

<div>

Botón

El <div> no tiene ningún estilo visual propio: aquí se ha marcado con un borde punteado solo para que veas dónde empieza y dónde termina el contenedor que agrupa una imagen, dos líneas de texto y un botón.

06 · Contenedores

<nav>

HTML semántico: a partir de aquí, <nav>, <header>, <section>, <article> y <footer> ya no son contenedores genéricos como el <div> que acabas de ver: además de agrupar contenido, su propio nombre describe qué tipo de contenido llevan dentro. Eso ayuda al navegador, a los buscadores y a los lectores de pantalla a entender la estructura de la página.

Representa una sección de una página cuyo propósito es proporcionar enlaces de navegación, ya sea dentro del documento actual o a otros documentos. Ejemplos comunes de secciones de navegación son menús, tablas de contenido e índices.

Código

<nav class="menu">
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Sobre nosotros</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>
<article class="user_review">
  <h4>¡Amo a los dinos!</h4>
  <p>Pero hace tiempo que no veo uno.</p>
</article>

Resultado

06 · Contenedores

<header>

Puede contener algunos elementos de encabezado, así como también un logo, un formulario de búsqueda, un nombre de autor y otros componentes.

Código

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Título de la página</title>
  </head>
  <body>
    <header>
      <img src="logo.png" alt="Logo de la empresa" />
    </header>
    <section>
      <h1>Hola mundo</h1>
      <p>Esta es mi primera web</p>
    </section>
  </body>
</html>

06 · Contenedores

<section>

Sirve para determinar qué contenido corresponde a qué parte de un esquema. Piensa en el esquema como en el índice de contenido de un libro; un tema común y subsecciones relacionadas. Es, por lo tanto, una etiqueta semántica: su funcionalidad principal es estructurar semánticamente un documento a la hora de ser representado por parte de un agente usuario.

Código

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Título de la página</title>
  </head>
  <body>
    <header>
      <img src="logo.png" alt="Logo de la empresa" />
    </header>
    <section>
      <h1>Hola mundo</h1>
      <p>Esta es mi primera web</p>
    </section>
  </body>
</html>

06 · Contenedores

<article>

Es un contenedor de bloques de contenido que se consideran independientes del sitio web y pueden, por lo tanto, ser vistos, reutilizados y distribuidos por separado. Un article podría considerarse como cada uno de los elementos en que podemos dividir un section.

Código

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Título de la página</title>
  </head>
  <body>
    <header>
      <img src="logo.png" alt="Logo de la empresa" />
    </header>
    <article class="user_review">
      <h4>¡Amo a los dinos!</h4>
      <p>Pero hace tiempo que no veo uno.</p>
    </article>
  </body>
</html>

Resultado

¡Amo a los dinos!

Pero hace tiempo que no veo uno.

06 · Contenedores

<footer>

Usadas para definir el pie de página. Un pie de página típicamente contiene información acerca del autor de la sección, datos de derechos de autor o enlaces a documentos relacionados.

Código

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Título de la página</title>
  </head>
  <body>
    <header>
      <img src="logo.png" alt="Logo de la empresa" />
    </header>
    <article class="user_review">
      <h4>¡Amo a los dinos!</h4>
      <p>Pero hace tiempo que no veo uno.</p>
    </article>
    <footer>
      <p>Copyright © 2023</p>
    </footer>
  </body>
</html>

07 · Comentarios

Etiqueta para comentar nuestro código; suele colocarse antes de la declaración de un bloque de código para dejar anotaciones. Este código no es visible, hay que tener en cuenta que se cierre bien la etiqueta.

Código

<html>
    <head>
        <title>título página</title>
    </head>
    <body>
        <!-- Esto es un párrafo -->
        <div>
            <p>
                Lorem ipsum dolor sit amet, ....
            </p>
        </div>
    </body>
</html>

08 · Flujo HTML

Elementos en bloque

¿Qué es el flujo en HTML? El flujo (o flow) es el orden en el que el navegador va colocando los elementos en la pantalla, uno detrás de otro, siguiendo el mismo orden en que aparecen en el código. Dentro de ese flujo, cada etiqueta se comporta de una de estas dos formas: en bloque o en línea.

Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un «bloque». Más información en MDN

Código

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Título de la página</title>
  </head>
  <body>
    <p>Elemento en bloque</p>
    <p>Otro en bloque</p>
    <p>Este también es un elemento en bloque</p>
    <p>
      <a href="#">Este elemento</a> se acomoda en linea
      <span>y los span también</span>
    </p>
  </body>
</html>

Resultado

Elemento en bloque

Otro en bloque

Este también es un elemento en bloque

Este elemento se acomoda en linea y los span también

Demo original en clase: codepen.io/Jonathanfaus/pen/qBzzaBN

08 · Flujo HTML

Elementos en línea

Un elemento en línea ocupa sólo el espacio delimitado por las etiquetas que definen el elemento en línea. Más información en MDN

Elementos en línea vistos en esta clase

<h1>···<h6>, <p>, <span>, <strong> <b>, <em> <i>, <small> <big>, <sub> <sup>, <blockquote> <q>, <a>, <br>, <hr>.

En el ejemplo de «Elementos en bloque» puedes ver el enlace y el <span> acomodándose codo a codo, en línea, justo al lado de los párrafos en bloque.

09 · Resumen etiquetas

Resumen etiquetas

Un vistazo de conjunto a todas las etiquetas de esta clase, agrupadas por bloque. En gris, las que todavía no hemos visto (llegarán en próximas clases).

Estructura básica

<html>

<head>

<meta>

<title>

<body>

Texto

<p>

<span>

<a>

<br>

<q>

<hr>

Contenedores

<div>

Semánticos:

<nav>

<aside>

Imagen & multimedia

<img>

<audio>

<video>

Estructura info.

<table>…

<form>…

El bloque resaltado en rosa son las etiquetas de estilo de texto que vimos juntas en esta clase. En aside, table y form (y el resto de etiquetas multimedia) todavía no hemos entrado — quedan para más adelante.

10 · Enlaces útiles

Enlaces útiles

HTML

Lista completa etiquetas html: mclibre.org
Sintaxis html: developer.mozilla.org
Elementos en línea: developer.mozilla.org
Elementos en bloque: developer.mozilla.org

Recursos texto

Lorem Ipsum (generación texto): es.lipsum.com
Cupcake Ipsum: cupcakeipsum.com

Recursos imágenes

Banco imágenes gratuito: unsplash.com — freepik.es
Placeholder online: placehold.co
Imagen random: picsum.photos
Compresor imágenes online: tinypng.com
Iconos online: icons8.com

11 · Práctica en clase

Práctica en clase

Preparación

Crear una carpeta llamada mi_primera_pagina.
Dentro creamos otras dos carpetas: Img y Css.
Crear dentro de mi_primera_pagina un archivo llamado index.html.

Realizar una página con los siguientes elementos:

Header con un logotipo.
Section con un título principal y 3 articles:
- Article 1: párrafo de texto utilizando alguna etiqueta en línea strong.
- Article 2: párrafo de texto utilizando la etiqueta blockquote.
- Article 3: imagen con una leyenda.
Cada article irá separado por una etiqueta <hr>.
Footer con: año actual + nombre alumno en negrita + enlace a la página de barreira (elementos en línea).

Así se organiza la página

Header

Logotipo

Section

Título principal

Article 1 — párrafo con negrita

Article 2 — párrafo con blockquote

Article 3 — imagen con leyenda

Footer

Clase 01 · Etiquetas HTML

¿Qué es una etiqueta?

Estructura HTML

<h1> ··· <h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<p>

<span>

<strong> / <b>

<em> / <i>

<small> / <big>

<sub> / <sup>

<blockquote> / <q>

<a>

Atributos (entre otros)

Atributo="valor"

<br> / <hr>

Resumen etiquetas texto

Ejercicio HTML

Título nuevo proyecto

<ul> <li>

<ol> <li>

<img>

<figure> / <figcaption>

<a> + <img>

<div>

<nav>

<header>

<section>

<article>

¡Amo a los dinos!

<footer>

Elementos en bloque

Elementos en línea

Elementos en línea vistos en esta clase

Resumen etiquetas

Enlaces útiles

HTML

Recursos texto

Recursos imágenes

Práctica en clase

Preparación