En aquest tema, aprendrem com utilitzar diverses etiquetes HTML per donar format al text dins d'una pàgina web. Aquestes etiquetes ens permeten destacar, emfatitzar i organitzar el text de manera que sigui més llegible i visualment atractiu.
Conceptes clau
- Etiquetes de formatació bàsica:
<b>,<i>,<u>,<strong>,<em>,<mark>,<small>,<del>,<ins>,<sub>,<sup> - Diferències entre etiquetes semàntiques i no semàntiques
- Ús correcte de les etiquetes per a l'accessibilitat i SEO
Etiquetes de formatació bàsica
Etiqueta <b> i <strong>
<b>: Utilitzada per fer el text en negreta. No té cap significat semàntic especial.<strong>: Utilitzada per indicar que el text és important. Té un significat semàntic que pot ser interpretat per lectors de pantalla i motors de cerca.
Exemple:
Etiqueta <i> i <em>
<i>: Utilitzada per fer el text en cursiva. No té cap significat semàntic especial.<em>: Utilitzada per emfatitzar el text. Té un significat semàntic que pot ser interpretat per lectors de pantalla i motors de cerca.
Exemple:
Etiqueta <u> i <mark>
<u>: Utilitzada per subratllar el text. No té cap significat semàntic especial.<mark>: Utilitzada per ressaltar el text com si estigués marcat amb un marcador.
Exemple:
Etiqueta <small>, <del>, <ins>, <sub>, <sup>
<small>: Utilitzada per fer el text més petit.<del>: Utilitzada per indicar text eliminat.<ins>: Utilitzada per indicar text afegit.<sub>: Utilitzada per text en subíndex.<sup>: Utilitzada per text en superíndex.
Exemple:
<p>Aquest és un text <small>més petit</small>.</p> <p>Aquest és un text <del>eliminat</del> i aquest és un text <ins>afegit</ins>.</p> <p>Aquest és un text amb subíndex H<sub>2</sub>O i aquest és un text amb superíndex E=mc<sup>2</sup>.</p>
Diferències entre etiquetes semàntiques i no semàntiques
Les etiquetes semàntiques com <strong> i <em> tenen significat per als motors de cerca i els lectors de pantalla, mentre que les etiquetes no semàntiques com <b> i <i> només afecten l'estil visual del text.
Ús correcte de les etiquetes per a l'accessibilitat i SEO
- Utilitza etiquetes semàntiques per millorar l'accessibilitat i el SEO.
- Evita utilitzar etiquetes no semàntiques quan una etiqueta semàntica pugui fer la mateixa funció.
Exercicis pràctics
Exercici 1
Crea un paràgraf que contingui text en negreta, cursiva, subratllat i ressaltat.
Solució:
<p>Aquest és un text <b>en negreta</b>, <i>en cursiva</i>, <u>subratllat</u> i <mark>ressaltat</mark>.</p>
Exercici 2
Crea un paràgraf que contingui text important, emfatitzat, més petit, eliminat, afegit, amb subíndex i superíndex.
Solució:
<p>Aquest és un text <strong>important</strong>, <em>emfatitzat</em>, <small>més petit</small>, <del>eliminat</del>, <ins>afegit</ins>, amb subíndex H<sub>2</sub>O i amb superíndex E=mc<sup>2</sup>.</p>
Resum
En aquesta secció, hem après a utilitzar diverses etiquetes HTML per donar format al text. Hem vist la diferència entre etiquetes semàntiques i no semàntiques i com utilitzar-les correctament per millorar l'accessibilitat i el SEO. A continuació, passarem a aprendre sobre les llistes ordenades i desordenades en HTML.
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