Introducció
En aquest tema, explorarem dos dels elements semàntics més importants introduïts amb HTML5: <main> i <figure>. Aquests elements ajuden a estructurar el contingut de manera més clara i significativa, millorant tant l'accessibilitat com el SEO del teu lloc web.
Element <main>
Què és l'element <main>?
L'element <main> representa el contingut principal del document. Aquest contingut és únic per a la pàgina i no inclou elements repetitius com encapçalaments, peus de pàgina, navegació lateral, etc.
Ús correcte de <main>
- Contingut principal: Utilitza
<main>per embolcallar el contingut principal de la pàgina. - Únic per pàgina: Només ha d'haver-hi un element
<main>per pàgina. - No inclou elements repetitius: No ha d'incloure elements com
<header>,<footer>,<nav>, etc.
Exemple de codi
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de Main</title>
</head>
<body>
<header>
<h1>Benvingut al meu lloc web</h1>
</header>
<nav>
<ul>
<li><a href="#home">Inici</a></li>
<li><a href="#about">Sobre nosaltres</a></li>
<li><a href="#contact">Contacte</a></li>
</ul>
</nav>
<main>
<h2>Contingut Principal</h2>
<p>Aquest és el contingut principal de la pàgina.</p>
</main>
<footer>
<p>© 2023 El meu lloc web</p>
</footer>
</body>
</html>Element <figure>
Què és l'element <figure>?
L'element <figure> s'utilitza per encapsular contingut que il·lustra o complementa el contingut principal, com ara imatges, diagrames, codi, etc. Sovint s'utilitza juntament amb l'element <figcaption> per proporcionar una llegenda o descripció.
Ús correcte de <figure>
- Contingut independent: El contingut dins de
<figure>ha de ser independent del flux principal del document. - Llegenda opcional: Utilitza
<figcaption>per proporcionar una descripció o llegenda del contingut.
Exemple de codi
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de Figure</title>
</head>
<body>
<main>
<h2>Contingut Principal</h2>
<p>Aquest és el contingut principal de la pàgina.</p>
<figure>
<img src="imatge.jpg" alt="Descripció de la imatge">
<figcaption>Aquesta és una llegenda per a la imatge.</figcaption>
</figure>
</main>
</body>
</html>Exercicis Pràctics
Exercici 1: Afegir <main> a una pàgina existent
Instruccions:
- Crea una pàgina HTML bàsica amb un encapçalament, una navegació, un contingut principal i un peu de pàgina.
- Utilitza l'element
<main>per embolcallar el contingut principal.
Solució:
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercici Main</title>
</head>
<body>
<header>
<h1>Benvingut al meu lloc web</h1>
</header>
<nav>
<ul>
<li><a href="#home">Inici</a></li>
<li><a href="#about">Sobre nosaltres</a></li>
<li><a href="#contact">Contacte</a></li>
</ul>
</nav>
<main>
<h2>Contingut Principal</h2>
<p>Aquest és el contingut principal de la pàgina.</p>
</main>
<footer>
<p>© 2023 El meu lloc web</p>
</footer>
</body>
</html>Exercici 2: Utilitzar <figure> i <figcaption>
Instruccions:
- Crea una pàgina HTML amb un contingut principal.
- Afegeix una imatge dins d'un element
<figure>. - Proporciona una llegenda per a la imatge utilitzant
<figcaption>.
Solució:
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercici Figure</title>
</head>
<body>
<main>
<h2>Contingut Principal</h2>
<p>Aquest és el contingut principal de la pàgina.</p>
<figure>
<img src="imatge.jpg" alt="Descripció de la imatge">
<figcaption>Aquesta és una llegenda per a la imatge.</figcaption>
</figure>
</main>
</body>
</html>Conclusió
Els elements <main> i <figure> són eines poderoses per estructurar el contingut de manera semàntica i accessible. Utilitzar aquests elements correctament pot millorar significativament la usabilitat i l'accessibilitat del teu lloc web. En el proper tema, explorarem altres elements semàntics com <article>, <section>, i <aside>.
Curs d'HTML
Mòdul 1: Introducció a l'HTML
- Què és l'HTML?
- Configuració del teu entorn
- Estructura bàsica de l'HTML
- Etiquetes i elements HTML
- Creant la teva primera pàgina HTML
Mòdul 2: Formatació de text en HTML
- Encapçalaments i paràgrafs
- Etiquetes de formatació de text
- Llistes: Ordenades i desordenades
- Cites i text preformatat
Mòdul 3: Enllaços i mitjans en HTML
Mòdul 4: Taules en HTML
- Estructura bàsica de taules
- Encapçalaments i peus de taula
- Fusionant cel·les: Colspan i Rowspan
- Estilitzant taules
Mòdul 5: Formularis en HTML
- Creant un formulari bàsic
- Elements de formulari: Input, Textarea, i Select
- Atributs i validació de formularis
- Enviant formularis
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
- Enllaçant CSS a HTML
- CSS en línia, intern i extern
- Selectors bàsics de CSS
- Estilitzant elements HTML
Mòdul 9: Disseny web responsiu
- Introducció al disseny responsiu
- Etiqueta Meta del Viewport
- Media Queries
- Imatges i vídeos responsius
Mòdul 10: Millors pràctiques i accessibilitat
- Millors pràctiques d'HTML
- Conceptes bàsics d'accessibilitat web
- Utilitzant rols ARIA
- Proves d'accessibilitat