Conceptes d'HTML

Entendre com funciona l'HTML amb JavaScript és fonamental quan es construeixen aplicacions web. En aquesta guia, cobrirem l'estructura d'HTML, una llista més profunda d'etiquetes, com es carrega l'HTML en un navegador, la importància de l'etiqueta <script>, els atributs i propietats, i més.

Estructura i càrrega

L'HTML (HyperText Markup Language) estructura el contingut d'una pàgina web. Els navegadors analitzen l'HTML per mostrar el contingut, des de text i imatges fins a formularis i botons. Aquí tens com funciona l'estructura bàsica d'HTML:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>La Meva Pàgina Web</title>
</head>
<body>
  <h1>Benvingut!</h1>
  <p>Això és un paràgraf de text.</p>
</body>
</html>
  • <!DOCTYPE html>: Indica al navegador que aquest document és HTML5.
  • <html>: L'element arrel de tota la pàgina web.
  • <head>: Conté metadades, inclòs el títol de la pàgina, el conjunt de caràcters, i recursos externs com fulls d'estil o scripts.
  • <body>: Conté el contingut real que veuen els usuaris, com ara text, imatges i botons.

Quan obres un document HTML, el navegador el processa seguint aquests passos:

  1. Analitzar l'HTML: El navegador llegeix l'HTML, començant des de dalt. Construeix un arbre DOM (Document Object Model), una representació estructurada del document.
  2. Carregar recursos externs: A mesura que llegeix l'HTML, el navegador pot trobar enllaços a altres recursos com fulls d'estil CSS o scripts JavaScript i comença a carregar-los en paral·lel.
  3. Renderitzar el contingut: Quan l'arbre DOM està completament construït i els recursos externs han estat carregats, el navegador mostra la pàgina web.

Etiqueta script

La posició de l'etiqueta <script> dins del fitxer HTML és important perquè influeix en la rapidesa amb què apareix el contingut i en com interactuen els scripts amb el DOM. Millors pràctiques:

  • Col·locar els scripts abans del tancament del cos: Molt sovint, és millor col·locar les etiquetes <script> just abans de l'etiqueta perquè el contingut HTML es carregui primer i, després, el JavaScript.
<body>
  <h1>La Meva Pàgina Web</h1>
  <script src="script.js"></script>
</body>

  • Utilitzar els atributs defer o async: Aquests atributs ajuden a millorar el rendiment de la càrrega.

    • defer: Garanteix que el script s'executa després que l'HTML estigui completament analitzat. És útil per a scripts que depenen que els elements del DOM estiguin preparats. No obliga situar el script després del body html, que fins i tot pot estar al head.
    <script src="script.js" defer></script>
    • async: Carrega el script de manera asíncrona i l'executa tan aviat com es descarrega, sense esperar que l'HTML acabi de carregar-se. Utilitza aquest atribut per a scripts que no depenen del DOM.
    <script src="script.js" async></script>

Elements HTML

Els elements HTML representen diferents tipus de contingut. Tenen una especificació HTML i una altra relacionada amb el DOM. Per exemple, l'especificació de l'etiqueta <input> està relacionada amb la de HTMLInputElement.

La majoria d'etiquetes permeten tenir contingut en el seu cos, i llavors tenen una etiqueta d'inici i una altra de final. Com per exemple, <div>content</div>. També tenim etiquetes de tipus void, que no permeten contingut intern. Per exemple, <img src="https://someurl">. Aquestes no tenen etiqueta de final, tot i que es tolera l'ús de l'etiqueta de self-closing: <img />. Altres etiquetes void: <br>, <hr>, <input>, <link>, <meta>.

Cada etiqueta té atributs i propietats específiques que modifiquen el comportament de l'element.

Els Atributs: formen part de l'etiquetatge HTML i defineixen valors o configuracions inicials quan es carrega la pàgina. Són estàtics i no canvien tret que es modifiquin explícitament a l'HTML o JavaScript.

Aquests són alguns atributs molt comuns:

  • id: assigna un identificador únic a un element. S'utilitza per a estils (CSS) i scripts (JavaScript) per a dirigir-se a elements específics.
  • class: assigna un o més noms de classe a un element. Les classes es poden compartir entre diversos elements per a l'estil de grup o la creació de seqüències de comandaments.
  • style: especifica estils CSS en línia per a un element. Tot i que normalment es recomana utilitzar fulls d'estil externs o interns, els estils en línia poden ser útils per a l'estil dinàmic.
  • data-*: s'utilitza per emmagatzemar atributs de dades personalitzats en un element. Això s'utilitza sovint juntament amb JavaScript per emmagatzemar o manipular dades al DOM.

Les Propietats: pertanyen al DOM (Document Object Model) i reflecteixen l'estat actual de l'element. Es poden actualitzar dinàmicament o accedir-hi mitjançant JavaScript.

Aquestes són algunes propietats molt comunes:

  • id: reflecteix l'atribut del mateix nom.
  • innerHTML: representa el contingut HTML dins d'un element. Podeu utilitzar aquesta propietat per obtenir o establir HTML dinàmicament dins d'un element. Aplicable a <p>, <div>, <span>, etc.
  • textContent: represents the text content inside an element, without any HTML tags. It's often used for retrieving or setting plain text. Aplicable a <p>, <div>, <span>, etc.
  • innerText: representa el contingut de text dins d'un element, de manera similar a textContent, però amb una diferència clau: innerText respecta l'estil CSS (com display: none), de manera que només retorna text visible. També permet establir text sense format dins d'un element. Aplicable a <p>, <div>, <span>, etc.
  • style: es pot accedir a aquesta propietat o modificar-la mitjançant JavaScript per canviar dinàmicament les propietats CSS de l'element.
  • classList: proporciona mètodes per afegir, eliminar o canviar classes en un element. És útil per manipular classes dinàmicament.
  • value: reflecteix el valor dels elements relacionats amb el formulari com <input>, <textarea>, <select> i <button>. Aquesta propietat s'utilitza per obtenir o establir el valor actual als camps d'entrada de l'usuari.
  • disabled: propietat booleana que serveix per desactivar la interacció dels elements relacionats amb el formulari.