HTML-dokumenter består af elementer markeret med såkaldte tags. Tags genkendes ved spidse parenteser. De fleste HTML-elementer er markeret med en start- og sluttag. Det, der befinder sig imellem, kaldes gyldighedsområde.
Et eksempel:
<h1>PSD-Tutorials.de – dit grafik-, web- & læringsportal</h1>
Ved denne syntaks skrives en overskrift af første rang ind i dokumentet. Starttaget <h1> fortæller browsere, at det er en sådan overskrift. Sluttetiketten </h1> afslutter overskriften. I kan genkende sluttags ved en åbnende spids parentes, efterfulgt af en skråstreg </.
Et spørgsmål opstår med hensyn til skrivemåden af elementnavne: Hvordan forholder det sig egentlig med store og små bogstaver? Som allerede beskrevet, er fokus i denne serie på HTML5. Her kan I faktisk vælge mellem store og små bogstaver. Personligt foretrækker jeg dog konsekvent små bogstaver og vil fortsætte med at håndtere det på den måde i denne serie. Principielt ville følgende være korrekt efter HTML5:
<h1>PSD-Tutorials.de – dit grafik-, web- & læringsportal</h1> <H1>PSD-Tutorials.de – dit grafik-, web- & læringsportal</H1> <h1>PSD-Tutorials.de – dit grafik-, web- & læringsportal</H1>
Elementer, som bliver åbnet, skal også lukkes igen. Så hvis I sætter en <h1>, skal I lukke den efter slutningen af overskriftsdefinitionen med </h1>. Selvom der i HTML5 også er undtagelser som f.eks. listeelementer og afsnit, vil der komme mere om det senere.
I HTML findes også såkaldte selvstændige tags. Disse består kun af en tag, ikke af en start- og sluttag. Et typisk eksempel er <br />.
Dette er en linje.<br /> Dette er en anden linje.
Dette <br /> definerer et linjeskift.
Sådanne tomme tags lukker man normalt med en skråstreg, selvom det ikke er påkrævet i HTML5. Her ville følgende også være tilladt:
<br>
I kommer til at lære flere af disse selvstændige tags senere i denne serie.
Elementer indlejres
HTML-elementer kan også indlejres. Forestil jer, at I vil formatere et afsnit kursiv inden for en overskrift. For at gøre teksten kursiv bruges i-elementet.
<h1>PSD-Tutorials.de – <i>dit grafik-, web- & læringsportal</i></h1>
Vær opmærksom på den korrekte rækkefølge ved indlejring. Elementet, der åbnes først, lukkes sidst. I dette tilfælde er det altså h1-elementet, der lukkes sidst.
Brug af attributter
Inde i åbnings- eller selvstændige tags kan man definere såkaldte attributter. Disse attributter kan give elementer yderligere egenskaber. I tidligere HTML-tider blev der tildelt relativt mange attributter til elementerne. Det skyldtes simpelthen den blanding mellem struktur og design. Således blev fx farvedefinitioner direkte overført til HTML-elementet via en passende attribut. I dag er – naturligvis også takket være CSS – en streng adskillelse mellem design og struktur mulig, som også bør overholdes. Derfor er der kun relativt få attributter, der bruges.
Et vigtigt attribut er id. Via denne attribut kan man tildele et HTML-element et entydigt navn, som det derefter f.eks. kan tilgås via CSS eller JavaScript.
<h1 id="head">PSD-Tutorials.de – dit grafik-, web- & læringsportal</h1>
For at tildele en attribut tilføjes der et mellemrum efter h1. Derefter følger attributnavnet, som normalt skrives med småt. Efter attributnavnet følger lighedstegnet. Attributværdien følger indsat i anførselstegn.
Man kan også tildele et element flere attributter. Så det er f.eks. ganske almindeligt at definere en klasse og en ID for et element. Et eksempel herpå: Via id identificeres overskriften entydigt. Klassen er derimod til for at placere overskriften i en bestemt kategori. Således kan man bestemme, at alle elementer, som tildeles klassen blue, vises i blå farve. (Der vil selvfølgelig være mere om dette emne om CSS og farver senere).
<h1 id="head" class="blue">PSD-Tutorials.de – dit grafik-, web- & læringsportal</h1>
Attributterne er i dette tilfælde adskilt af et mellemrum.
Validér koden
Nogle grundlæggende syntaksregler har I allerede lært nu. Især i begyndelsen, når man lærer HTML, er det vigtigt at holde sig til disse regler. Hvad man en gang har lært forkert, er svært at glemme. I bør derfor altid kontrollere eller validere jeres HTML-kode for korrekthed. Dette behøver I selvfølgelig ikke gøre selv. Der findes passende onlineværktøjer til dette formål. En såkaldt validator kan f.eks. findes på http://validator.w3.org/.
Det bedste er at skifte direkte til fanen Validate by direct Input. Her kan man indsætte den HTML-kode, man vil kontrollere, direkte ved at kopiere og indsætte. Vær opmærksom på at inkludere hele filens kode, inklusive DOCTYPE-angivelsen.
Indsæt følgende i tekstfeltet for at teste validator, og klik derefter på knappen Validate.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – dit grafik-, web- & læringsportal</h1> </body> </html>
Resultatet bør se således ud:
Her er alt som det skal være. (I dette tilfælde kan I ignorere de to advarsler). Hvis meddelelsen This document was successfully checked as HTML5!, vises, er alt i orden. Hvordan ser det imidlertid ud i tilfælde af fejl? I kan f.eks. bevidst indføre en fejl i syntaksen.
<h1 id=head">PSD-Tutorials.de – dit grafik-, web- & læringsportal</h1>
Her blev det indledende anførselstegn ved head glemt. Hvis man nu lader syntaksen validere igen, vil fejlen blive opdaget.
Validator giver derefter en passende meddelelse. Hvad der præcist er gået galt, kan læses i det nederste vinduesområde.
Her forklares det også meget godt, hvad fejlen er.
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å I kan se direkte, i hvilken linje der blev lavet en fejlagtig indtastning, og I kan rette den. Dermed hjælper validator jer med at skabe ren HTML-kode. I bør altid lade jeres kode validere. For browsere viser ofte HTML-koden korrekt, selvom syntaksen er fejlagtig. I andre browsere, hvor I ikke tester jeres sider, kan det derimod se helt anderledes ud.
