Förståelse av parvisa och enkla taggar i HTML

HTML använder två typer av taggar: parvisa taggar och enkla (självstängande) taggar. Varje typ har en särskild roll vid strukturering av en webbsida.

Parvisa taggar

Parvisa taggar har en öppnings- och en stängningstagg. De omsluter innehåll, grupperar element och definierar betydelse eller struktur.

Syntax:

<tag_name>Some content</tag_name>

Här är ett verkligt exempel på användning av parvisa taggar:

I detta exempel:

• <section>...</section>: grupperar relaterat innehåll;
• <h1>...</h1>: lägger till en rubrik för sektionen;
• <p>...</p>: innehåller ett stycke som förklarar att de flesta HTML-taggar kommer i par.

Enkla taggar

Enkla taggar har ingen avslutande tagg. De används när inget innehåll behövs och all funktionalitet definieras genom attribut.

Syntax:

<tag_name />

Här är ett verkligt exempel på användning av enkla taggar:

Denna kod innehåller två element:

• <input />: skapar ett textinmatningsfält. placeholder=" name" visar en ledtråd i rutan;
• <img />: visar en bild på frukt.
  • alt="Fruits": text som visas om bilden inte kan laddas;
  • width och height: anger bildens dimensioner;
  • src: specificerar bildens URL.

Tagg-nästning

Taggar måste nästlas korrekt, likt ryska dockor, där varje avslutande tagg matchar sin öppningstagg i rätt ordning.

Här är ett exempel på nästlade taggar:

<tag1>
  <tag2>
    <tag4>...</tag4>
    <tag5>...</tag5>
  </tag2>
  <tag3>
    <tag6>...</tag6>
  </tag3>
</tag1>

Här är ett giltigt exempel:

Denna kod visar ett stycke med en länk och markerad text:

• <p>...</p>: omsluter hela stycket;
• <a href="https://privacy.com">...</a>: skapar en klickbar länk till Privacy Policy;
• <strong>...</strong>: gör ordet "website" fetstilt för att betona det.