4 – HTML-mall, meta & indentering

I vår grundläggande HTML-mall hoppade vi över vissa saker. T.ex. har vi fram till nu inget sätt att styra vad som står i webbläsarens titel-rad. Titel-raden är även det som syns när vi gör ett bokmärke. Vi har inte heller berättat för webbläsaren vilket språk eller hur dokumentet är skapat.

Allt detta är meta-data eller extra-data. Det är inte livsviktigt men ökar läsbarhet och även chanserna för sökmotorerna att hitta dina sidor.

04 - HTML-dokumentet, indentering & 05 - Felsökning.png
Ett HTML-dokument kan delas upp i <head> (metadata) och <body> (det webbläsaren visar, din hemsida)

Ett HTML-dokument består av två huvud-delar. I mallen såg ni både taggen <body> och <head>. Allt som skrivs mellan  <body> och  </body> är det som syns på skärmen medans det som skrivs mellan   <head>  och </head> är metadata. Det syns oftast inte direkt utan är mer tänkt som en hjälp för webbläsaren att visa dokumentet på rätt sätt. Eller för sökmotorn att tolka dokumentet rätt. Det är även i  <head> som du länkar in din CSS-fil.

Uppdaterad HTML-mall

Från nu har vi en mall som är relativt komplett. Det är inte så mycket nytt utan bara mer av samma som kommer läggas till. Titta på mallen så går vi igenom den steg för steg.

<!doctype html>
<html lang="sv">
  <head>
    <meta charset="utf-8">
    <title>HTML-mall no. 2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="En HTML-mall">
    <meta name="keywords" content="HTML, CSS, mall, webbdesign">
    <meta name="author" content="Ola Lindberg">

    <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>All text och bilder på hemsidan skrivs här</p>
</body>
</html>

På första raden står det <!doctype html>. Ett HTML-dokument ska alltid börja med denna raden. Den berättar för webbläsaren att det som kommer längre ner i filen är HTML. I tidigare versioner av HTML var man tvungen att skriva fler detaljer för vilken version av HTML man hade skrivit sitt dokument för. Nu har många av de sakerna som man tidigare var tvingad att göra men som ingen egentligen gjorde städats bort.

På raden under står det <html lang="sv">. Här berättar vi för webbläsaren att själva HTML:en börjar. Vi specificerar även att innehållet kommer vara på svenska. Den viktigaste anledningen för att skriva vilket språk sidan är på för att synskadade ska kunna få den uppläst på rätt sätt. Men även funktioner som automatiska översättningar eller funktioner som kan slå upp ord på hemsidor bygger på att man vet vilket språk man ska utgå ifrån. Det är så enkelt att lägga till så bara gör det :)

I takt med att webben och Internet har mognat har många krångelsaker försvunnit. Nästa rad är resterna från en som inte försvunnit: <meta charset="utf-8">. Det finns många olika sätt att spara filer på en dator och UTF-8 är numera standard. Ibland kan ni hamna på hemsidor där t.ex. ÅÄÖ skrivs ut som frågetecken eller bara konstiga tecken. I de fallen har man nästan alltid lyckats spara dokumentet i ett format och sedan angivit fel format i HTML-dokumentet. Använder ni Brackets och anger UTF-8 i dokumentet kommer det oftast fungera automagiskt.

Längst upp i webbläsarfönstret finns en rad där det står vilken hemsida man surfar på. Det styrs med elementet <title>. Här är inget konstigt utan ni lägger in en textrad med hemsidans namn. Man brukar oftast även skriva vilken undersida man är på. Om du surfar på en dagstidnings hemsida brukar titeln vara i formatet Artikelnamn | Företagsnamn. Surfar du på företags hemsida om du surfar på kontaktsidan är då titeln oftast Kontakta oss! | Konsultbolaget.

Nästföljande tre rader innehåller tre olika <meta>-element. Alla tre är metadata främst för sökmotorer. Jag tycker sökmotorerna är duktiga på att hitta rätt material ändå så jag slarvar med dem ibland. Om ni lägger till dem är det viktigt att beskrivningarna uppdateras när texten på hemsidan ändras.

Raden efter har ni sett tidigare. Det är raden som läser in er CSS-fil. Den berättar för webbläsaren var CSS-filen finns och att det är en CSS-fil.

Sista elementet är vår <body>. I princip allt material som skrivs här innanför syns på skärmen.

Glöm inte avsluta dina element!

Indentering

I takt med att en HTML-fil växer behöver man ett sätt att strukturera upp det. Jämför med en artikel i en tidning som har rubriker eller en bok som har kapitel och stycken. För sökmotorer och webbläsare spelar strukturen ingen roll alls. Det är bara för att du ska hitta lättare i dina dokument.

I alla programmerings-språk använder man sig av en teknik som kallas indentering. Det betyder att man gör indrag framför ord så att man bygger upp en struktur. Oftast görs indragen åt höger med tab-knappen men det är inte helt ovanligt att du ser dokument med flera space-tecken för indragen också.

Trädstruktur

I HTML blir strukturen som ett träd. Varje gång man skriver något längre ner i strukturen eller inne i ett element gör man ett längre indrag åt höger. Varje gång man kommer till ett avslutande HTML-element tar man bort ett indrag. Det fiffiga är att du hela tiden ser att du har avslutat rätt antal element och i rätt ordning.

Väldigt många programmerings-språk sorterar sig i träd.

Indentering av CSS

I CSS finns inte alls samma träd. Varje CSS-selector är oberoende av de andra. CSS-filer blir därför oftast svårare att läsa i takt med att de växer. Det finns också olika sätt att indentera CSS. Jag bruka sätta första måsvingen direkt efter selectorn, sedan gör jag ett indrag på varje deklaration och ett radbryt efter varje deklaration. Och så avslutar jag med den andra måsvingen en rad under.

body {
  background-color: red;
  color: blue;
}

Det finns ingen anledning att vara extremt strikt med din CSS-indentering. bara den hjälper dig att hitta rätt. Ibland, framförallt på kortare block, skriver jag allt på en rad.

body { color: blue; }

Det går lika bra men så fort det blir flera rader i varje selector blir det svårt att hitta rätt.

I mina CSS-filer brukar jag skriva en kommentar för att beskriva vilken del av hemsidan raderna ändrar. På så sätt byggs CSSen upp i block. Se följande exempel.

/* Generelt. Typsnitt. Färger. Länkar */
body {}
a {}
a:visited{}

/* Sidhuvud */
#header {}
#logo {}

/* Meny */
nav {}

/* Innehåll */
#content {}
#blog {}

/* Sidfot */
sidebar {}

/* Mobilversioner */

Det är omöjligt att vara väldigt strikt med sorteringen. Var pragmatisk!

Från och med nu är det dags att vara noga med dina dokument! De lönar sig snabbare än du tror!

Övningar #3

  • Uppdatera alla dina HTML-dokument så de innehåller de nya element du lärt dig.
  • Gå igenom både CSS och HTML-dokument och uppdatera indenteringen.
  • Testa några CSS-selectors på de olika sätten.

Frågor

  • Vad är det för skillnad på <head> och<body> elementen?
  • Vad används elementet <title> till?
  • Varför indenterar man ett dokument? För vem?

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *