HTML-dokument består av element som är markerade med så kallade taggar. Taggar känns igen på spetsiga parenteser. Nästan alla HTML-element är markerade med en öppnande och en stängande tagg. Det som finns däremellan kallas giltighetsområde.
Ett exempel:
<h1>PSD-Tutorials.de – din grafik-, webb- och läsportal</h1>
Genom denna syntax skrivs en rubrik av första ordningen in i dokumentet. Den öppnande <h1>-taggen meddelar webbläsaren att det rör sig om en sådan rubrik. Den avslutande </h1> avslutar rubriken. Ni känner igen avslutande taggar på en öppnande spetsig parentes följt av en snedstreck </.
En fråga uppstår angående stavningen av elementnamnen: Hur är det egentligen med versaler och gemener? Som redan nämnts, ligger fokus i denna serie på HTML5. Här kan ni faktiskt välja mellan versaler och gemener. Personligen föredrar jag dock konsekvent gemener och kommer att hantera det så i denna serie. Principiellt sett skulle följande saker dock vara korrekta enligt HTML5:
<h1>PSD-Tutorials.de – din grafik-, webb- och läsportal</h1> <H1>PSD-Tutorials.de – din grafik-, webb- och läsportal</H1> <h1>PSD-Tutorials.de – din grafik-, webb- och läsportal</H1>
Element som öppnas måste också stängas. Så om ni sätter en <h1>, måste ni också stänga den efter slutet av rubriksdefinitionen </h1>. Visserligen finns det i HTML5 undantag som till exempel listposter och stycken, mer om det senare.
I HTML finns också s.k. fristående taggar. Dessa består bara av en tagg, inte av en början och sluttagg. Ett typiskt exempel är <br />.
Detta är en rad.<br /> Detta är en annan rad.
Denna <br /> definierar en radbrytning.
Sådana tomma taggar stänger man vanligtvis med ett snedstreck, även om det inte är nödvändigt enligt HTML5. Här skulle även följande fungera:
<br>
Ni kommer att få lära er fler av dessa fristående taggar i den här serien.
Forma element
HTML-element kan faktiskt också vara inbäddade. Tänk er att ni vill göra en passage kursiv inuti en rubrik. För kursiv stil används elementet i.
<h1>PSD-Tutorials.de – <i>din grafik-, webb- och läsportal</i></h1>
Se till att i inbäddningen följa rätt ordningsföljd. Man stänger sist det element som öppnades först. I detta fall är det alltså h1-elementet.
Använda attribut
Inom öppnande taggar eller fristående taggar kan s.k. attribut definieras. Dessa attribut kan tilldela element ytterligare egenskaper. Under tidigare HTML-epoker tilldelade man element relativt många attribut. Det berodde helt enkelt på blandningen mellan struktur och design. Man överförde till exempel färgdefinitioner direkt till HTML-elementet genom ett lämpligt attribut. Numera är – naturligtvis även tack vare CSS – en strikt åtskillnad mellan design och struktur möjlig, som också bör följas. Därför finns det bara relativt få attribut som används.
Ett viktigt attribut är id. Genom detta attribut kan ett HTML-element tilldelas ett unikt namn, genom vilket det sedan kan adresseras t.ex. via CSS eller JavaScript.
<h1 id="head">PSD-Tutorials.de – din grafik-, webb- och läsportal</h1>
För att tilldela ett attribut lägger man till ett mellanslag efter h1. Sedan följer namnet på attributet, som vanligtvis skrivs med små bokstäver. Efter attributnamnet kommer likhetstecknet. Efter detta, inneslutet i citattecken, följer attributvärdet.
Man kan även tilldela ett element flera attribut. Så det är t.ex. fullt möjligt att definiera en s.k. klass och ett id för ett element. Ett exempel på detta också: Genom id identifieras rubriken entydigt. Klassen är däremot där för att kategorisera rubriken i en viss kategori. På detta sätt kan man bestämma att alla element som tilldelats klassen blue ska visas i blå färg. (Mer om denna CSS- och färgtematik kommer naturligtvis senare utförligt).
<h1 id="head" class="blue">PSD-Tutorials.de – din grafik-, webb- & inlärningsportal</h1>
Attributen är i detta fall separerade av ett mellanslag från varandra.
Validera koden
Ni har redan lärt er några grundläggande syntaxregler. Speciellt i början när man lär sig HTML är det viktigt att hålla sig till dessa regler. Det man har vant sig vid felaktigt är svårt att ändra på senare. Ni bör därför alltid kontrollera eller låta validera er HTML-kod för korrekthet. Det behöver ni inte göra själva. Det finns lämpliga onlineverktyg för detta ändamål. En så kallad validerare hittar ni till exempel på http://validator.w3.org/.
Det är bäst att gå direkt till fliken Validera genom direktinmatning. Här kan man klistra in HTML-koden som ska kontrolleras direkt genom att kopiera och klistra in. Se till att foga in hela filens kod, inklusive DOCTYPE-deklarationen.
För att testa valideraren, klistra in följande i textrutan och klicka sedan på knappen Validera.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – din grafik-, webb- & inlärningsportal</h1> </body> </html>
Resultatet ska se ut på följande sätt:
Allt är i sin ordning här. (Ni behöver inte bry er om de två varningarna i detta fall). Om ni då ser meddelandet This document was successfully checked as HTML5!, så är allt verkligen i sin ordning. Men hur ser det ut om det finns ett fel? För detta kan ni helt enkelt medvetet lägga till ett fel i syntaxen.
<h1 id=head">PSD-Tutorials.de – din grafik-, webb- & inlärningsportal</h1>
Här har det inledande citattecknet för head glömts bort. Om man nu låter validera syntaxen igen så upptäcks felet.
Valideraren ger sedan en lämplig kommentar. Man kan se i det undre fönsterområdet vad som har gått fel.
Här förklaras mycket tydligt vad felet egentligen är.
Line 8, Column 12: " in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.
<h1 id=head" >PSD-Tutorials.de</h1>
Så ni ser direkt i vilken rad ett felaktigt angivet värde har uppstått och kan korrigera detta. Därmed hjälper valideraren er att skapa ren HTML-kod. Ni bör alltid låta validera er kod. Webbplatser visas oftast korrekt i webbläsare trots fel i syntaxen. I andra webbläsare där ni inte testar era sidor kan det se väldigt annorlunda ut.
