aside och kompletterande innehåll
Använd aside för sidofält och innehåll med närliggande anknytning
aside och kompletterande innehåll är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
Elementet aside
Elementet <aside> märker upp innehåll som är löst relaterat till det omgivande innehållet:
- Det kan skiljas från huvudinnehållet utan att huvudinnehållets betydelse går förlorad
- Tänk på sidofält, inforutor, framlyfta citat och annonser
aside i en article
I en article markerar aside information som är relaterad men inte nödvändig för berättelsen:
<article>
<h2>How the Internet Works</h2>
<p>The Internet is a global network of computers...</p>
<aside>
<h3>Did You Know?</h3>
<p>The first email was sent in 1971 by Ray Tomlinson.</p>
</aside>
<p>Data travels in packets across routers...</p>
</article>aside på sidnivå
På sidnivå används aside för sidofält:
<div class="layout">
<main>
<article>...</article>
</main>
<aside>
<h2>Related Articles</h2>
<ul>...</ul>
<h2>Newsletter</h2>
<p>Subscribe for updates.</p>
</aside>
</div>ARIA-rollen för aside
Ett <aside> på sidnivå motsvarar role="complementary":
<aside aria-label="Related resources">
<h2>Related resources</h2>
...
</aside>
<!-- Multiple asides should be uniquely labeled
Screen reader users can jump directly to complementary regions -->Framlyfta citat med aside
Framlyfta citat (utdragna citat för visuell effekt) kan märkas upp som aside:
<aside class="pullquote">
<blockquote>
<p>HTML is the foundation of the web — learn it well.</p>
</blockquote>
</aside>Annonsering med aside
Annonsenheter i sidofält kan märkas upp som aside:
<aside aria-label="Advertisement">
<p class="sr-only">Advertisement</p>
<img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>aside kontra section
Den viktiga skillnaden:
<aside>— löst relaterat till huvudinnehållet; kompletterande<section>— tematiskt en del av huvudinnehållet
aside för ordlistetermer
Använd aside för att definiera termer som används i en article:
<article>
<p>The DOM (Document Object Model) is updated when...</p>
<aside id="dom-def">
<dl>
<dt>DOM</dt>
<dd>Document Object Model — the browser's tree representation of an HTML page.</dd>
</dl>
</aside>
</article>Flera section-element i sidofält
Ett sidofält med aside kan innehålla flera självständiga section-element:
<aside aria-label="Sidebar">
<section>
<h2>About the Author</h2>
<p>Jane Smith is a senior web developer...</p>
</section>
<section>
<h2>Popular Posts</h2>
<ul>...</ul>
</section>
</aside>aside behöver ingen rubrik
Till skillnad från section kräver aside inte strikt en rubrik:
<!-- Valid aside without heading: -->
<aside>
<img src="banner.jpg" alt="20% off this week only">
</aside>
<!-- But adding a heading (even visually hidden) improves accessibility -->
<aside>
<h2 class="sr-only">Promotions</h2>
<img src="banner.jpg" alt="20% off this week only">
</aside>aside är inte till för lös formatering
Aside är semantiskt — använd det inte enbart för visuell layout av ett sidofält:
<!-- BAD: aside used for layout only -->
<aside class="right-column"> <!-- no semantic relationship to main content -->
<div class="ad">...</div>
</aside>
<!-- GOOD: aside for related content -->
<main><!-- article content --></main>
<aside><!-- genuinely related supplementary info --></aside>Snabbtest
Vilken ARIA-landmärkesroll motsvarar ett aside på sidnivå?
Sammanfattning: aside
Det viktigaste om aside:
- Innehåll som är löst relaterat till det omgivande innehållet
- Sidofält på sidnivå → landmärket complementary
- I en article → kompletterande information (termbeskrivningar, inforutor)
- Ge flera aside-element etiketter med aria-label
- Inte för rena layoutbehållare — använd div till det
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”aside och kompletterande innehåll” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”aside och kompletterande innehåll”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”aside och kompletterande innehåll”?
Använd aside för sidofält och innehåll med närliggande anknytning Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”aside och kompletterande innehåll”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- aside och kompletterande innehåll
- figure och figcaption i repris
- details och summary – utfällbart gränssnitt
- Elementen progress och meter