Innehåll

  1. Introduktion
  2. Historik
  3. Webbstandarder
  4. Struktur och presentation
  5. (X)HTML
  6. CSS
  7. Tillgänglighet
  8. URL:er
  9. Referenser
  10. Ordlista

4. Struktur och presentation

Något som ofta nämns när man diskuterar webbstandarder är hur viktigt det är att separera innehåll och struktur från presentation. Det kan vara svårt att förstå skillnaden, särskilt om man är van att inte tänka på ett dokuments logiska struktur, men det är viktigt att göra det eftersom det underlättar enormt om struktur och presentation är separerade när man ska styra presentationen av ett dokument med CSS.

Struktur är de delar av ett dokument som är obligatoriska och den logiska uppmärkningen av dokumentets innehåll.

Presentation är den stil som man ger innehållet. Oftast menar man utseende, eller form, men det kan också handla om hur ett dokument låter – alla använder inte grafiska webbläsare.

Separera struktur från presentation så långt det är möjligt. Det innebär att strukturen finns i ett HTML-dokument och utseendet kontrolleras med hjälp av CSS.

Separation av struktur från presentation är ovanligt att se. På de flesta webbplatser saknar HTML-koden både struktur och logik.

Tabeller för layout

För att separera struktur från presentation behöver man använda CSS i stället för tabeller för att styra ett dokuments presentation. För den som är van att använda tabeller för layout kan det kännas ovant och främmande, men det är inte så svårt som det kan verka först. Det finns gott om hjälp att få på webben, och fördelarna är så många att det absolut är värt den tid det tar att lära sig det lite annorlunda tankesätt som krävs.

Läs mer:

Logisk HTML

En annan viktig del i att separera struktur från presentation är att använda logisk uppmärkning för att strukturera innehållet på ett bra sätt. I de fall där det finns ett XHTML-element som har en strukturell betydelse som passar för den del av innehållet som ska märkas upp finns det ingen anledning att använda något annat. Använd alltså inte CSS för att få HTML-element att se ut som andra HTML-element, till exempel genom att använda ett <span>-element i stället för ett <h1>-element för att skapa en rubrik.

Genom att skriva logisk HTML ger man dokumentets olika delar betydelse för alla typer av webbläsare, oavsett om det är den allra nyaste grafiska webbläsaren på en modern PC, en gammal webbläsare som inte hanterar CSS, eller en textbaserad webbläsare i en Unixterminal.

Rubriker

Man märker upp rubriker med <h1>, <h2>, <h3>, <h4>, <h5> eller <h6> beroende på nivå, där <h1> anger den översta nivån.

Exempel:
<h1>Dokumentrubrik</h1>
<h2>Underrubrik</h2>

Stycken

Stycken ska märkas upp med <p>-elementet. Använd inte <br />-elementet för att skapa luft mellan stycken. Marginaler mellan stycken hanteras med hjälp av CSS, och förutsätter att stycken märks upp på rätt sätt.

Exempel:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec risus. Ed rhoncus sodales metus. Donec adipiscing
mollis neque. Aliquam in nulla.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec risus. Sed rhoncus sodales metus. Donec adipiscing mollis neque. Aliquam in nulla.

Listor

När man har en lista av saker ska den märkas upp som en lista. Det finns tre olika sorters listor i XHTML: onumrerade listor, numrerade listor och definitionslistor.

En onumrerad lista, eller punktlista, påbörjas med <ul> och avslutas med </ul>. Varje punkt i listan ligger i ett <li>-element.

En numrerad lista påbörjas med <ol> och avslutas med </ol>.

Definitionslistor fungerar lite annorlunda, och används till exempel för att märka upp en lista av olika begrepp med tillhörande förklaringar. Definitionslistor påbörjas med <dl> och avslutas med </dl>. Varje begrepp som beskrivs märks upp med ett <dt>-element, och förklaringen ligger i ett eller flera <dd>-element.

Exempel:
<ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
</ul>
<ol>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
</ol>
  1. Punkt 1
  2. Punkt 2
  3. Punkt 3
<dl>
    <dt>webbplats</dt>
    <dd>webbsida eller grupp sammanlänkade webbsidor som
    innehåller information om en verksamhet eller ett ämne och
    som har samma utgivare</dd>
    <dt>webbsida</dt>
    <dd>mängd information som man når via webben utan att
    behöva gå vidare via en länk; motsvarar ofta så mycket man
    kan se på skärmen samtidigt eller genom att rulla bilden</dd>
</dl>
webbplats
webbsida eller grupp sammanlänkade webbsidor som innehåller information om en verksamhet eller ett ämne och som har samma utgivare
webbsida
mängd information som man når via webben utan att behöva gå vidare via en länk; motsvarar ofta så mycket man kan se på skärmen samtidigt eller genom att rulla bilden

CSS gör det möjligt att använda listor även där man inte vill att innehållet ska presenteras som en traditionell lista. Ett bra exempel är menyer, som ju faktiskt är listor med länkar. Fördelen med att använda listor i det fallet är att menyn blir lättare att använda för den som till exempel använder en webbläsare som saknar stöd för CSS.

Citat

För korta citat inom ett stycke ska <q>-elementet användas. Det är meningen att webbläsaren automatiskt ska skriva ut rätt citationstecken runt ett sådant citat. Tyvärr saknar Internet Explorer stöd för detta, och i vissa fall kan <q>-elementet till och med ställa till med tillgänglighetsproblem. Därför rekommendar en del att man tills vidare undviker att använda <q>, och i stället lägger in citationstecknen manuellt. Genom att lägga citat i ett <span>-element med en lämplig klass kan man styra hur de presenteras, men det semantiska värdet går förlorat. Läs Mark Pilgrims The Q tag för en detaljerad beskrivning av problemen med <q>-elementet.

Längre citat som bildar ett eller flera stycken läggs i ett <blockquote>-element. CSS används för att ge citatet indragen marginal och annan stil. Observera att text inte får ligga direkt i ett <blockquote>-element – den måste ligga i ett annat element, vanligen ett <p>-element. Man kan använda attributet cite för att ange en URL till den källa man citerar.

cite-attributet kan användas med både <q>- och <blockquote>-elementen för att ange en URL till citatets källa. Observera att om man använder <span> i stället för <q> för citat inom ett stycke kan cite-attributet inte användas.

Exempel:
<p>W3C säger att <q cite="http://www.w3.org/TR/REC-html40/
struct/text.html#h-9.2.1">The presentation of phrase elements
depends on the user agent.</q>.</p>

W3C säger att The presentation of phrase elements depends on the user agent..

<p>W3C säger att <span class="quote">&rdquo;The presentation of
phrase elements depends on the user agent.&rdquo;</span>.</p>

W3C säger att ”The presentation of phrase elements depends on the user agent.”.

<blockquote cite="http://www.w3.org/TR/1999/REC-html401-19991224/
struct/text.html">
    <p>&rdquo;The following sections discuss issues surrounding
    the structuring of text. Elements that present text (alignment
    elements, font elements, style sheets, etc.) are discussed
    elsewhere in the specification. For information about characters,
    please consult the section on the document character set.&rdquo;</p>
</blockquote>

”The following sections discuss issues surrounding the structuring of text. Elements that present text (alignment elements, font elements, style sheets, etc.) are discussed elsewhere in the specification. For information about characters, please consult the section on the document character set.”

Betoning

För betoning används <em>, och för stark betoning används <strong>. De flesta webbläsare visar betonad text i kursiv stil, och starkt betonad text i fet stil. Dock finns inga krav på detta, så om man vill vara säker på hur betonad text visas bör man specificera utseendet i tillhörande CSS.

Exempel:
<p>En <em>betonad</em> text visas vanligen i kursiv stil,
medan en <strong>starkt</strong> betonad text oftast visas
i fet stil.</p>

En betonad text visas vanligen i kursiv stil, medan en starkt betonad text oftast visas i fet stil.

Tabeller

XHTML-tabeller bör inte användas för layout. Däremot ska data som redovisas i tabellform märkas upp med hjälp av <table> och tillhörande element och attribut. För att göra tabeller så tillgängliga som möjligt är det viktigt att känna till och använda de olika delarna som kan ingå i en tabell. Som exempel kan nämnas tabellrubriker (<th>), sammanfattningar (summary-attributet) och bildtexter (<caption>-elementet).

Exempel:
<table class="example" summary="Denna tabell visar den årliga
folkökningen i Sverige under åren 1999 till 2003.">
    <caption>Årlig folkökning i Sverige, 1999–2003</caption>
    <thead>
        <tr>
            <td>&#160;</td>
            <th scope="col">1999</th>
            <th scope="col">2000</th>
            <th scope="col">2001</th>
            <th scope="col">2002</th>
            <th scope="col">2003</th>
        </tr>
    </thead>
    <tbody>
        <tr>

            <th scope="row">Folkmängd</th>
            <td>8 861 426</td>
            <td>8 882 792</td>
            <td>8 909 128</td>
            <td>8 940 788</td>
            <td>8 975 670</td>
        </tr>
        <tr>
            <th scope="row">Folkökning</th>
            <td>7 104</td>
            <td>21 366</td>
            <td>26 368</td>
            <td>31 884</td>
            <td>34 882</td>
        </tr>
    </tbody>
</table>
Årlig folkökning i Sverige, 1999–2003
  1999 2000 2001 2002 2003
Folkmängd 8 861 426 8 882 792 8 909 128 8 940 788 8 975 670
Folkökning 7 104 21 366 26 368 31 884 34 882

För en mer ingående beskrivning av tabeller och deras användning, se Tables in HTML documents och HTML Techniques for Web Content Accessibility Guidelines 1.0.

Läs mer:

Kommentarer, frågor eller förslag? Kontakta mig.

© Copyright 2004-2008 Roger Johansson