Etiquetes i Atributs HTML5

Etiquetes de text

<!-- Capçaleres (h1 = la més important, h6 = la menys) -->
<h1>Títol principal</h1>
<h2>Secció</h2>
<h3>Subsecció</h3>

<!-- Paràgrafs i salts -->
<p>Un paràgraf de text normal.</p>
<br>  <!-- Salt de línia -->
<hr>  <!-- Línia horitzontal -->

<!-- Èmfasi -->
<strong>Text important (negreta semàntica)</strong>
<em>Text emfatitzat (cursiva semàntica)</em>
<b>Negreta visual (sense significat semàntic)</b>
<i>Cursiva visual</i>
<u>Text subratllat</u>
<s>Text tatxat</s>
<mark>Text ressaltat</mark>
<small>Text petit</small>
<sub>Subíndex: H<sub>2</sub>O</sub>
<sup>Superíndex: E=mc<sup>2</sup></sup>

<!-- Codi -->
<code>codi_en_linia()</code>
<pre><code>
bloc de
codi preformatat
</code></pre>

<!-- Cites -->
<blockquote cite="https://exemple.com">
    <p>Una cita llarga d'algú famós.</p>
</blockquote>
<q>Una cita curta en línia.</q>

<!-- Abreviatures -->
<abbr title="HyperText Markup Language">HTML</abbr>

Llistes

<!-- Llista no ordenada -->
<ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
</ul>

<!-- Llista ordenada -->
<ol>
    <li>Primer</li>
    <li>Segon</li>
    <li>Tercer</li>
</ol>

<!-- Llista ordenada amb atributs -->
<ol type="A" start="3">
    <li>Element C</li>
    <li>Element D</li>
</ol>

<!-- Llista de definicions -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

<!-- Llistes niades -->
<ul>
    <li>Fruites
        <ul>
            <li>Poma</li>
            <li>Pera</li>
        </ul>
    </li>
    <li>Verdures</li>
</ul>

Taules

<table>
    <caption>Taula d'alumnes</caption>
    <thead>
        <tr>
            <th scope="col">Nom</th>
            <th scope="col">Nota</th>
            <th scope="col">Aprovada</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Joan García</td>
            <td>7.5</td>
            <td>Sí</td>
        </tr>
        <tr>
            <td>Maria López</td>
            <td>9.0</td>
            <td>Sí</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Mitjana</td>
            <td>8.25</td>
        </tr>
    </tfoot>
</table>

Taules accessibles

Usa sempre <thead>, <tbody> i <tfoot>. Afegeix scope="col" o scope="row" als <th> per a millor accessibilitat.

Taules per a maquetació

NO uses <table> per a maquetació visual. Les taules son per a dades tabulars. Per a maquetació usa CSS Flexbox o Grid.

Enllaços

<!-- Enllaç bàsic -->
<a href="https://www.sapalomera.cat">Institut Sa Palomera</a>

<!-- Obertura en nova pestanya -->
<a href="https://exemple.com" target="_blank" rel="noopener noreferrer">
    Obre en nova pestanya
</a>

<!-- Àncora dins de la mateixa pàgina -->
<a href="#seccio-contacte">Ves al contacte</a>
<section id="seccio-contacte">...</section>

<!-- Enllaç a correu electrònic -->
<a href="mailto:info@sapalomera.cat">Contacte per correu</a>

<!-- Enllaç a telèfon -->
<a href="tel:+34972345678">972 34 56 78</a>

<!-- Descàrrega de fitxer -->
<a href="document.pdf" download="nom-del-fitxer.pdf">Descarrega PDF</a>

Imatges

<!-- Imatge bàsica -->
<img src="logo.png" alt="Logo de l'institut" width="200" height="100">

<!-- Imatge responsive -->
<img src="foto.jpg" 
     alt="Descripció de la foto"
     loading="lazy">

<!-- Figura amb peu de foto -->
<figure>
    <img src="diagrama.png" alt="Diagrama de xarxa">
    <figcaption>Figura 1: Diagrama de la xarxa de l'institut</figcaption>
</figure>

<!-- srcset per a imatges responsive -->
<img src="imatge-800.jpg"
     srcset="imatge-400.jpg 400w,
             imatge-800.jpg 800w,
             imatge-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 900px) 800px,
            1200px"
     alt="Imatge responsive">

L'atribut alt

L'atribut alt és obligatori per a accessibilitat. Ha de descriure el contingut de la imatge per a usuaris de lectors de pantalla o quan la imatge no es pot carregar. Per a imatges decoratives, usa alt="".

Multimèdia

<!-- Vídeo -->
<video controls width="640" height="360" poster="miniatura.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <p>El teu navegador no suporta vídeo HTML5.</p>
</video>

<!-- Àudio -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    <p>El teu navegador no suporta àudio HTML5.</p>
</audio>

<!-- Canvas (per a dibuix amb JavaScript) -->
<canvas id="el-meu-canvas" width="400" height="300">
    El teu navegador no suporta canvas.
</canvas>

Formularis

<form action="/enviar" method="post" novalidate>
    <!-- Camps de text -->
    <label for="nom">Nom:</label>
    <input type="text" id="nom" name="nom" placeholder="El teu nom" required>

    <!-- Email -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <!-- Contrasenya -->
    <label for="pwd">Contrasenya:</label>
    <input type="password" id="pwd" name="pwd" minlength="8">

    <!-- Número -->
    <label for="edat">Edat:</label>
    <input type="number" id="edat" name="edat" min="0" max="120">

    <!-- Data -->
    <label for="data">Data de naixement:</label>
    <input type="date" id="data" name="data">

    <!-- Rang (slider) -->
    <label for="nota">Nota (0-10):</label>
    <input type="range" id="nota" name="nota" min="0" max="10" step="0.5">

    <!-- Llista desplegable -->
    <label for="cicle">Cicle:</label>
    <select id="cicle" name="cicle">
        <option value="">Selecciona un cicle</option>
        <optgroup label="Informàtica">
            <option value="asix">ASIX</option>
            <option value="dam">DAM</option>
        </optgroup>
    </select>

    <!-- Àrea de text -->
    <label for="comentari">Comentari:</label>
    <textarea id="comentari" name="comentari" rows="4" cols="50"></textarea>

    <!-- Caselles de verificació -->
    <fieldset>
        <legend>Habilitats:</legend>
        <label><input type="checkbox" name="habilitat" value="html"> HTML</label>
        <label><input type="checkbox" name="habilitat" value="css"> CSS</label>
        <label><input type="checkbox" name="habilitat" value="js"> JavaScript</label>
    </fieldset>

    <!-- Botons de ràdio -->
    <fieldset>
        <legend>Nivell:</legend>
        <label><input type="radio" name="nivell" value="basic"> Bàsic</label>
        <label><input type="radio" name="nivell" value="mig"> Mig</label>
        <label><input type="radio" name="nivell" value="avanzat"> Avançat</label>
    </fieldset>

    <!-- Pujada de fitxers -->
    <label for="fitxer">Puja el teu CV:</label>
    <input type="file" id="fitxer" name="fitxer" accept=".pdf,.doc">

    <!-- Botons -->
    <button type="submit">Enviar</button>
    <button type="reset">Esborrar</button>
    <button type="button" onclick="alert('Hola!')">Botó custom</button>
</form>

Miniactivitat AC03734

Crea un formulari d'inscripció a un curs amb: nom, cognoms, email, cicle (select), mòduls que vols cursar (checkboxes), nivell d'experiència (radio), data d'inici preferida, comentaris i botó d'enviament. Valida els camps obligatoris amb HTML5 (atributs required, type, min, max).