<<Taggar och Text>>

    Gör en egen hemsida där du visar och beskriver vad var och en av följande taggar gör. Förklara när man bör använda dem och hur de skiljer sig mot andra liknande taggar, t.ex. <b> och <strong>

    Beskriv för varje tagg om den är en block-tagg (dvs om den gör radbrytningar och mellanrum ovanför och efter innehållet i taggen) eller en inline-tagg (om texten/innehållet bara fortsätter utan radbrytningar) (se sid 185-186).

    När du, i HTML, vill skriva ett <-tecken eller ett >-tecken så måste du använda dig av en escape character. Dessa skrivs i HTML som &lt; (lt = less-than) för <-tecknet och &gt; (gt = greater-than) för >-tecknet

    I denna uppgift får ingen styling användas, endast ren HTML-kod!

    Beskriv utan att göra ett exempel vad följande taggar används till:
  1. Bastaggar
    • <!DOCTYPE html> (Se sid 179-181)
    • <html>
    • <head>
    • <title>
    • <body>

    Beskriv och visa ett exempel på följande taggar: (sid 43-56).

    Notera också att vissa taggar saknar sluttaggar. Vilka och varför?

  2. Förklara taggarna med exempel
    • <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
    • <p>
    • <b>
    • <i>
    • <sup>
    • <sub>
    • <br>
    • <hr>
    • <strong>
    • <em>
    • <blockquote>
    • <q>
    • <abbr>
    • <cite>
    • <dfn>
    • <ins>
    • <del>
    • <s>
    • <pre> - denna kan vara användbar om man ska visa kodexempel.

    Skillnaden mellan strukturell märkning (structural markup) och semantisk märkning (semantic markup) i HTML handlar om hur taggar används för att organisera och beteckna innehållet på en webbsida.

    Strukturell märkning (Structural Markup):

    Strukturell märkning fokuserar på att definiera layout och hierarki av innehållet på en webbsida. Det handlar om att använda taggar för att skapa olika delar av webbsidan, såsom rubriker, stycken, listor, avsnitt osv., utan att nödvändigtvis ge dem en specifik betydelse.

    Exempel på strukturell märkning inkluderar taggar som <div>, <span>, <p>, <ul>, <ol>, <li>, <header>, <footer>, <section>, och <article>.

    Semantisk märkning (Semantic Markup):

    Semantisk märkning handlar om att använda taggar för att beteckna innebörden och syftet med det innehåll som de omger.

    Det ger en mer meningsfull struktur till webbsidan, vilket gör den lättare att förstå för både människor och sökmotorer.

    Exempel på semantisk märkning inkluderar taggar som <header>, <footer>, <nav>, <article>, <section>, <aside>, <main>, <figure>, <figcaption>, <details>, och <summary>.

    Användandet bestämmer funktionen

    Vissa taggar kan användas både som strukturell och semantisk märkning, beroende på hur de implementeras och vilken innebörd som tilldelas dem i HTML-koden.

    Till exempel, om du använder <header> och <footer> utan någon specifik semantik, anger du bara att dessa delar utgör början och slutet av sidan, utan att ge någon ytterligare betydelse eller information.

    När dessa taggar används för semantisk märkning, ger de ytterligare betydelse och innebörd till det innehåll som de omger.

    Till exempel, <header> kan användas för att markera sidans huvudrubrik eller navigationsfältet. <footer> kan användas för att markera information såsom upphovsrätt, länkar till andra sidor eller kontaktinformation. <section> kan användas för att dela upp sidan i logiska delar, som var och en kan ha sin egen rubrik och innehåll.

    Genom att tilldela dessa taggar specifik innebörd hjälper semantisk märkning till att förbättra tillgänglighet, sökbarhet och förståelse för webbsidan, både för människor och maskiner (t.ex. sökmotorer).

  3. Typ av markup.
    • Boken (kapitel 2) gör en skillnad i structural markup och semantic markup. Skapa ett exempel på en avsnitt (article) som kan finnas på en hemsida. Använd strukturell märkning för att definiera layouten (<div>, <h1>, <p>, <ul>, etc.), medan semantisk märkning tillhandahåller ytterligare betydelse (med <article>, <header>, <footer>, <time>, etc.).
    Resultatet ska se ut ungefär så här.
    Det är koden som är det viktiga.

    När vi arbetar med HTML (och senare CSS) så är det viktigt att vi förstår terminologin så att vi kan beskriva vilken del av koden som vi menar när vi ska beskriva något.

  4. Terminologi
    • Med hjälp av sidorna 20-26 i boken, och eventuellt andra internetkällor, beskriv följande: tagg (tag), innehåll (content), attribut (attribute), attributnamn (attribute name), attributvärde (attribute value) och HTML element (HTML element).
Tillbaka till startsidan.
© Andreas Bergsten
Malgomajskolan 2023-24