El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Article, Section, i Aside

Següent ►
►

En aquest tema, explorarem tres de les etiquetes semàntiques més importants introduïdes amb HTML5: <article>, <section>, i <aside>. Aquestes etiquetes ajuden a estructurar el contingut de manera més clara i significativa, tant per als usuaris com per als motors de cerca.

  1. Etiqueta <article>

Què és l'etiqueta <article>?

L'etiqueta <article> s'utilitza per encapsular contingut que pot ser independent i reutilitzable. Això inclou articles de notícies, publicacions de blog, comentaris, etc.

Exemple:

<article>
  <h2>Títol de l'article</h2>
  <p>Aquest és el contingut principal de l'article. Pot incloure text, imatges, vídeos, etc.</p>
</article>

Explicació:

  • L'etiqueta <article> encapsula tot el contingut de l'article.
  • El títol de l'article es col·loca dins d'una etiqueta <h2>.
  • El paràgraf de text es col·loca dins d'una etiqueta <p>.

  1. Etiqueta <section>

Què és l'etiqueta <section>?

L'etiqueta <section> s'utilitza per agrupar contingut relacionat dins d'una pàgina. Cada secció ha de tenir un tema comú i sovint inclou un encapçalament.

Exemple:

<section>
  <h2>Secció de notícies</h2>
  <p>Aquesta secció conté les últimes notícies.</p>
</section>

Explicació:

  • L'etiqueta <section> encapsula una secció de contingut relacionat.
  • El títol de la secció es col·loca dins d'una etiqueta <h2>.
  • El paràgraf de text es col·loca dins d'una etiqueta <p>.

  1. Etiqueta <aside>

Què és l'etiqueta <aside>?

L'etiqueta <aside> s'utilitza per contenir contingut que està relacionat amb el contingut principal, però que no és essencial. Això inclou barres laterals, notes, enllaços relacionats, etc.

Exemple:

<aside>
  <h2>Barra lateral</h2>
  <p>Aquesta és una barra lateral amb informació addicional.</p>
</aside>

Explicació:

  • L'etiqueta <aside> encapsula contingut relacionat però no essencial.
  • El títol de la barra lateral es col·loca dins d'una etiqueta <h2>.
  • El paràgraf de text es col·loca dins d'una etiqueta <p>.

Comparació entre <article>, <section>, i <aside>

Etiqueta Ús principal Exemple d'ús
<article> Contingut independent i reutilitzable Articles de notícies, publicacions de blog
<section> Agrupar contingut relacionat dins d'una pàgina Seccions de notícies, capítols de llibres
<aside> Contingut relacionat però no essencial Barres laterals, notes, enllaços relacionats

Exercicis pràctics

Exercici 1:

Crea una pàgina HTML que contingui un article amb dues seccions i una barra lateral. Utilitza les etiquetes <article>, <section>, i <aside>.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici Article, Section, i Aside</title>
</head>
<body>
  <article>
    <h2>Títol de l'article</h2>
    <section>
      <h3>Secció 1</h3>
      <p>Aquesta és la primera secció de l'article.</p>
    </section>
    <section>
      <h3>Secció 2</h3>
      <p>Aquesta és la segona secció de l'article.</p>
    </section>
  </article>
  <aside>
    <h2>Barra lateral</h2>
    <p>Aquesta és una barra lateral amb informació addicional.</p>
  </aside>
</body>
</html>

Exercici 2:

Explica la diferència entre les etiquetes <article> i <section> amb els teus propis exemples.

Solució:

  • L'etiqueta <article> s'utilitza per encapsular contingut que pot ser independent i reutilitzable. Per exemple, un article de notícies: 
    <article>
  <h2>Notícia d'última hora</h2>
  <p>Aquesta és una notícia d'última hora.</p>
</article>
  • L'etiqueta <section> s'utilitza per agrupar contingut relacionat dins d'una pàgina. Per exemple, una secció de notícies: 
    <section>
  <h2>Secció de notícies</h2>
  <p>Aquesta secció conté diverses notícies.</p>
</section>

Conclusió

En aquest tema, hem après sobre les etiquetes semàntiques <article>, <section>, i <aside>. Hem vist com utilitzar-les per estructurar el contingut de manera més clara i significativa. A més, hem practicat amb exemples i exercicis per reforçar els conceptes apresos. En el següent tema, explorarem altres elements semàntics d'HTML5.

◄ Anterior
◄
Següent ►
►

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats