Skip to main content

Elements buits i imatges

Aquest capítol tracta sobre els elements buits en HTML (com <img>, <br>, <hr>, <input>) que no tenen tancament explícit i són fonamentals per mostrar contingut visual i estructurar pàgines.

Què són els elements buits?​

Els void elements són aquells que no poden tenir contingut intern ni etiqueta de tancament. Exemples:

  • <img>
  • <br>
  • <hr>
  • <input>
  • <link>
  • <meta>
<img src="imatge.jpg" alt="Descripció" />

L'etiqueta <img>​

S'utilitza per mostrar imatges dins d'una pàgina web.

<img src="imatge.jpg" alt="Descripció" />

Atributs comuns​

  • src: ubicació de la imatge (relativa o absoluta)
  • alt: text alternatiu per a accessibilitat i SEO
  • title: apareix en passar el cursor per sobre
  • width / height: dimensions en píxels o percentatge
  • loading: estratègia de càrrega (lazy o eager)
<img
  src="./img/poema.jpg"
  alt="Poema de Benedetti"
  title="Mario Benedetti"
  loading="lazy"
  width="300"
/>

Salt de línia – <br>​

Crea un salt de línia dins d’un paràgraf o qualsevol text.

<p>Això és una línia<br />Això és una altra línia</p>

Línia horitzontal – <hr>​

S'utilitza per separar visualment seccions.

<hr />

Atribut size​

Defineix el gruix de la línia (en píxels):

<hr size="6" />

Camp de formulari – <input>​

L’element <input> és essencial per construir formularis i recollir informació de l’usuari.

<input type="text" placeholder="Escriu el teu nom" />

Més tipus es veuran al capítol dedicat a formularis

Aquest capítol reforça la comprensió de com utilitzar elements visuals i funcionals essencials per a la interacció amb l’usuari i l’estructura visual de la teva web.