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 = less-than) för <-tecknet och > (gt = greater-than) för >-tecknet
I denna uppgift får ingen styling användas, endast ren HTML-kod!
Beskriv och visa ett exempel på följande taggar: (sid 43-56).
Notera också att vissa taggar saknar sluttaggar. Vilka och varför?
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 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 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>
.
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).
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.