htmlphp logo

De vanligaste HTML-elementen

Vilka är de vanligaste HTML-elementen, de som oftast används och troligen står för merparten av koden i de flesta webbplatser?

Här kommer min egen lista på de vanligaste elementen. Lär dig att hantera dessa och du kommer att kunna bygga de flesta webbplatser. I vilket fall som så får man en bra grund att stå på, en start på vägen till HTML-expertis.

Saknar du ett element som borde vara med? Hittar du felaktigheter? Maila mig.

Del I: Sidans grundstruktur

Del II: Presentation av sidans innehåll

Del III: Bra-att-ha element

Del I: Sidans grundstruktur

Följande element bygger upp själva grundstrukturen av en html-sida. Det är element för head, body, style, script och själva html-elementet.

Syntax för HTML-element

Ett HTML-element omsluts med < och > såsom i <body>. Varje element stödjer ett antal attribut som kan defineras i elementet, tex <body id="me" class="mystyle">, där id och class är två av flera attribut som kan användas i ett body-element.

En del element avslutas med en sluttag, </body>, medans vissa element inte kräver sluttag, tex <hr> eller <br>. Dessa element kan dock stängas på följande sätt: <hr/> eller <br/> vilket är ett krav när man följer XHTML (ej nödvändigt i HTML).

Använd verktyget cheatsheet för att slå upp vilka attribut som kan användas inom <body>, följande länk visar dig till cheatsheet:

Kommentarer i HTML-koden skrivs på följande sätt.

Kod: En HTML-kommentar.

<!-- Here is the comment -->

Använd kommentarer för att strukturera och dokumentera din kod.

<!DOCTYPE>

Är sidan i HTML eller någon variant av XHTML? Detta anges med DOCTYPE överst i sidan. Detta hjälper webbläsaren att välja hur den skall parsa och hantera webbsidans kod.

I XHTML stänger man taggar, det behövs inte i HTML. Det är den stora skillnaden när man skriver HTML-elementen. Rekommendationen är att du stänger elementen, då är du förberedd för båda varianterna.

Kod: Exempel på DOCTYPE-deklaration för HTML5.

<!DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8">

Kod: Exempel på DOCTYPE-deklaration för XHTML 1.0 strict.

<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1;" />

<html>

Elementet <html> är root-elementet till en HTML-sida. Det rekommenderas att använda språkattributet för att visa vilket språk sidan är skriven i.

Kod: Exempel på html-element med språkattributet definerat till svenska.

<html lang="sv">

Kod: Exempel på en minimal HTML-sida som validerar enligt W3C´s validator.

<!DOCTYPE html> <html lang="sv"> <meta charset="utf-8"> <title>mini</title>

Testa att mata in koden ovan i HTML-validatorn för att kolla att den verkligen validerar.

<body>

Body-elementet innehåller själva sidans innehåll, resultatet, det som visas i webbläsaren.

Kod: Exempel på en sida med en kommentar och en paragraf.

<body> <!-- Here comes the body of the page --> <p>Hello World!</p> </body>

<style>

En sidas style kan anges på flera sätt, i kombination med HTML-elementet (inline style), globalt för en sida inom ett style-element i head-sektionen eller länkad till en extern stylesheet i en separat fil. Det rekommenderas att huvudsakligen använda externa stylesheets.

Kod: Exempel på style tillsammans med ett HTML-element.

<p style="font-size: smaller; font-style: italic;">Jag är en utmärkt HTML-kodare</p>

Kod: Exempel på style specificerat inom head-elementet.

<head> <style> p { font-size: smaller; font-style: italic; } </style> </head>

Kod: Exempel på länkning till en separat stylesheet.

<head> <link rel="stylesheet" href="style/stylesheet.css" title="Mos standard grey"> </head>

<script>

Inom script-elementet finns vanligen JavaScript-kod. Detta är kod som exekveras i webbläsaren på klientsidan. Med JavaScript går det (bl. a.) att skapa en mer dynamisk webbsida och en angenämare upplevelse för användaren.

Script-taggar kan förekomma både i head- och i body-elementet.

Kod: Exempel på ett enkelt JavaScript.

<script type="text/javascript"> alert("Jag är en utmärkt HTML-kodare"); </script>

Testa ett JavaScript: Jag är en utmärkt HTML-kodare

Del II: Presentation av sidans innehåll

Inom ramen för body-elementet måste det finnas en tänkt struktur av hur sidan skall presenteras. Skall det vara 1-, 2- eller 3-kolumner? Skall det finnas logo, titel, menyer, relaterade länkar, footer? Denna del handlar om att skapa en struktur för att presentera sidans innehåll.

<div id=above> eller <header id=above>

Ovanför den traditionella header-delen, den delen som normalt innehåller logotyp och navigering, förekommer ibland en separat del med navigeringslänkar och länkar till webbplatsens login. Denna del omsluts av en div- eller header-konstruktion och den brukar ofta sträcka sig över hela webbläsarens bredd.

[Bild] Relaterade länkar och login

Bild: Den allra översta delen av sidan med relaterade länkar och ibland med möjlighet att logga in.

Kod: Här är ett exempel på hur denna del kan defineras i HTML.

<!-- Above header --> <header id="above"> <!-- Relateted links --> <nav class="related"> <a href="/htmlphp/kmom01/me/me.php">kmom01</a> </nav> </header>

Se guiden css20 för stylning av denna del.

<div id=top> eller <header id=top>

En sida har ofta en header-sektion med en logo och olika navigeringsval, tex en navigeringsmeny med länkar inom webbplatsen.

Samma header-sektion återkommer vanligen på alla sidor som finns inom webbplatsen. Det är alltså en del av webbplatsens centrala layout och återfinns endast en gång på varje sida.

[Bild] Header med logo och navigering

Bild: Sidans header med logo och webbplatsens titel.

Vanligen används en div med ett id, tex #top, för att identifiera den sektion som innehåller sidans header. Med HTML5 går denna div att ersätta med header-elementet. Även om man använder header-elementet så kan man rimligen fortsätta använda ett id=top. Det är bra med tanke på stylesheet-aspekter.

I exemplet nedan används header-elementet, den ger lite mer semantisk mening till sektionen än vad div-elementet skulle göra.

Kod: Exempel på hur sidans header kan specificeras.

<!-- Header with logo and main navigation --> <header id="top"> <a href="me.php"><img src="img/logo.png" alt="htmlphp logo" width=300 height=70></a> <!-- Main navigation menu --> <nav class="navmenu"> <a id="me-" href="me.php">Me</a> <a id="report-" href="report.php">Redovisning</a> <a id="guide-" href="guide.php">Guider</a> <a id="source-" href="viewsource.php">Källkod</a> </nav> </header>

Se guiden css20 för stylning av denna del.

<div id=content>, en wrapper

Sidans huvudsakliga budskap, själva dokumentet, kan omringas (wrap) av ett div-element med id satt till #content, #main, #wrap eller liknande. Ofta har detta strukturell påverkan och underlättar hantering i stylesheet.

Men en wrapper går det enkelt att styra sidans bredd. Kanske behövs en höger- eller vänster-kolumn med länkar? Kanske vill man placera annat relaterat material i en egen kolumn, ett så kallat aside-element. En wrapper hjälper till i dessa situationer.

[Bild] En wrapper

Bild: En wrapper kring sidans huvudsakliga innehåll, själva dokumentet eller artikeln.

Det är inte nödvändigt att wrappa sidans innehåll. Är det en liten sida så kanske det inte behövs. Då kan man ta bort det. Bort med överflödiga element.

Kod: Exempel på hur en wrapper (id=content) kan specificeras.

<?php include("incl/header.php"); ?> <!-- Sidans/Dokumentets huvudsakliga innehåll --> <div id="content"> <!-- En artikel, menyer, helt enkelt sidans huvudsakliga innehåll --> </div> <?php include("incl/footer.php"); ?>

Se guiden css20 för stylning av denna del.

<article>

En sida kan bestå av en eller flera artiklar (article). I en blogg är varje inlägg en artikel. I denna text du nu läser så har jag valt att lägga hela dokumentet som en artikel. Elementet <article> är HTML5 och ger semantisk vägledning. Elementet kan innehålla en egen header och footer.

Kod: Exempel på användningen av elementet <article>.

<div id="content"> <article> <!-- Article header --> <!-- Content --> <!-- Article footer --> </article> </div>

<section>

Med detta element går det att dela in sidans huvudsakliga innehåll i fristående sektioner. Elementet kan till exempel att använda för att dela in en artikel i sektioner.

Kod: Exempel på hur sidans article-sektion kan byggas upp med section-element.

<article> <section id="part-1"> <!-- En fristående del av artikeln / dokumentet, med egen header. --> </section> <section id="part-2"> <!-- En annan fristående del av artikeln / dokumentet, med egen header. --> </section> </article>

<aside>

Elementet aside är för information som är relaterat till artikeln/dokumentet/sidan/webbplatsen men bör placeras lite vid sidan om. Elementet ersätter div som tidigare används för liknande syfte. Elementet kan också användas som en traditionell 2 kolumners layout. Som vanligt gäller att detta nya element ger bättre semantisk vägledning än vad det neutrala div-elementet gör.

Kod: Exempel på användning av aside-element.

<article> <aside> <!-- Relaterad information som kan placeras i anslutning till huvud-dokumentet --> </aside> <section id="part-1"> <!-- En fristående del av artikeln / dokumentet, med egen header --> </section> <section id="part-2"> <!-- En annan fristående del av artikeln / dokumentet, med egen header --> </section> </article>

<div>

Detta är ett av de vanligaste strukturella elementen. Flera HTML5-element är tänkta att ersätta användningev av div. Men, det kommer (troligen) fortsätta vara ett mycket användbart element.

Försök att inte överanvända elementet. Kan du slippa en div så är det bra. Försök att ersätta div-användning med ett HTML5-element, om det passar. Var dock inte rädd för att fortsätta använda div. Hittar du ingen bra matchning i HTML5 så är det klart bättre att använda div än att krysta till användningen av de nyare HTML5-elementen.

Exempel på användning av div-element för att uppnå flera kolumner. Formattering i stylesheet behövs för att det skall fungera som tänkt.

Kod: Ett försök till två kolumn-layout med div.

<div id="wrap"> <div id="col1"> <!-- Innehåll i kolumnen. --> </div> <div id="col2"> <!-- Innehåll i kolumnen. --> </div> </div>

Del III: Bra-att-ha element

Vilka är då vanliga elementen vi kan använda för att definera sidans innehåll, själva texten i dokumentet? Här följer ett par av dem.

<h1> - <h6> och <hgroup>

Använd rubriker för att strukturera innehållet i dokumentet. h1 bör endast användas en gång på sidan och den bör klart ange vad dokumentet handlar om. Ofta har h1 ett liknande innehåll som sidans titel. h1 och title är viktiga element, speciellt för sökmotorer, så använd dem väl och klokt.

Elementet hgroup grupperar rubriker i de fall flera rubriker anges direkt efter varandra. Detta är främst till för stylingskäl och användningen av hgroup rekommenderas. En hgroup kan bara innehålla rubriker.

Kod: Exempel på rubriker och användning av elementet hgroup.

<h1>Tydlig rubrik</h1> <p>Lite ingress-liknande information.</p> <hgroup> <h2>Rubrik nivå</h2> <h3>Följt av rubrik, nivå 3</h3> </hgroup> <p>Löpande text.</p>

<p>

Ange löpande text inom ett p-element, en paragraf av text. Detta är ett av de vanligaste elementen.

Det är inte nödvändigt att ha sluttaggen </p>, den kan utelämnas under vissa förutsättningar (läs specen). Rekommendationen är att alltid använda sluttaggen för att undvika valideringsproblem.

Kod: Exempel på p-elementet, med och utan sluttagg.

<p>Här är en paragraf utan sluttagg. <p>Den följs av denna paragraf med sluttagg.</p>

<a>

Kärnan i HTML är referenserna, länkarna (link or anchor), dessa anges med elementet <a>. Det går att länka inom ett dokument eller till ett annat dokument. När man länkar inom ett dokument så pekar man på ett element som har ett visst id och man lägger till en # framför id:et.

Kod: Exempel på länk inom ett dokument.

<a href="#intern">Här är en intern länk.</a> <p id="intern">Hit hoppar webbläsaren</p>

Kod: Exempel på länk inom servern.

<a href="annan_sida.html">Här är en länk till en annan sida på samma server.</a>

Kod: Exempel på länk till annan server.

<a href="http://bth.se/">Här är en länk till en annan server.</a>

Se guiden css20 för stylning av länkar.

<ul> - <li>

Listor är ett vanligt och användbart element. Det finns både onumrerade listor (ul, unordered) och en numrerad varianten (ol, ordered). Listor består av li-element. Listor kan nästlas.

Listor kan stylas och används ibland för att styla menyer med länkar. Detta ger en bra organisation för länkarna och det är smidigt att styla dem. Just detta användningsområde kan komma att ersättas mer och mer av nav-elementet. Men för vanliga listor så är elementen oumbärliga.

Kod: Exempel på oordnad lista.

<ul> <li>listelement <li>listelement <li>listelement </ul>
  • listelement
  • listelement
  • listelement

Kod: Exempel på nästlad ordnad lista.

<ol> <li>listelement <li>listelement <ol> <li>listelement <li>listelement </ol> <li>listelement </ol>
  1. listelement
  2. listelement
    1. listelement
    2. listelement
  3. listelement

<blockquote>

Elementet blockquote är bra att använda för att visa källkod, exempelkod eller citat, dvs ett sammanhängande block av relaterad information. Genom att använda class-attributet går det att styla och ge olika utseende beroende på vilken typ av information som visas.

Kod: Exempel på blockquote.

<blockquote class="code"> <!-- Källkod --> </blockquote> <blockquote class="quote"> <!-- Citat --> </blockquote>

Se guiden css20 för stylning av denna del.

<figure>, <figcaption>, <img>

Foton, bilder och grafik vill man ofta visa tillsammans med en titel eller bildtext. Till detta syfte passar elementen figure och figcaption, när de omsluter ett img-element blir det lättare att koppla en bild och en bildtext. Figure och figcaption är nya konstruktioner i HTML5.

Ta för vana att ange alt-attributet i img-elementet, det underlättar för de som inte har grafiska webbläsare och i de fall som bilden inte kan laddas in i webbläsaren. Attributet krävs för att sidan skall validera.

Kod: Exempel på figure, figcaption och img.

<figure> <img src="img/mikael1.jpg" alt="Bild på Mikael vid datorn"> <figcaption> <p>Bild: Me vid datorn, se så glad jag är!</p> </figcaption> </figure>

Se guiden css20 för stylning av denna del.

<strong>, <em>, <code>

I löpande text vill man ibland förstärka ett stycke av texten, att göra den fetstil eller kursiv, eller kanske få den att tolkas som programmeringskod. Elementen <strong>, <em> och <code> hjälper till med detta. Det går även att använda <b> (bold/fetstil) och <i> (italic/kursiv).

Kod: Exempel på strong, em, b, i och code.

<strong>Detta är strong, fetstil</strong>, <b>liksom detta</b>, <i>kursiv stil fungerar med i</i><em> eller em</em>, <code>kod inom code visas så här</code>

Så här ser resultatet ut:

Detta är strong, fetstil, liksom detta, kursiv stil fungerar med i eller em, kod inom code visas så här

Fler vanliga element som borde nämnas

Det finns ett par element till som jag vill nämna eftersom de är vanliga (eller att jag själv använder dem). Tills vidare nämner jag dem bara i en lista. Bara så jag noterat dem och du ser att jag inte glömt dem. Min egen lilla kom-ihåg-lista.

  • <span>
  • <time>
Närbild Mikael

Mikael Roos undervisar i databaser och utveckling av webbapplikationer vid Blekinge Tekniska Högskola. Mikaels nyckelord äro, i nämnd ordning, SQL, PHP, HTML och CSS. MegaMic, som han även kallar sig, kör FreeBSD (Unix) på servrarna i garderoben och drömmer om sina (kommande) opensource-projekt.