HTML Behållare – Division (<div>), Sektion/avdelning (<section>), artikel (<article>), sidfot (<footer>), sidhuvud (<header>), sidospalt (<aside>), o/för-formaterat block (<pre>), navigationsdel (<nav>)

av ·0 kommentarer

I detta inlägg tänkte jag gå igenom Block-level element behållare som vi har till vårt förfogande i HTML(5). Vi ska gå igenom följande element, hur man kan använda dem, såväl som vilken funktion de är tänkta att fylla:

Element Beskrivning och funktion Länk
<div> Division element för icke-semantisk behållare, se MDN citat nedan:

The HTML <div> element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values. It should be used only when no other semantic element (such as <article> or <nav>) is appropriate(!).

 MDN Referenssida
<section> Sektions/avdelnings- element, semantisk behållare för att märka upp tematiska delar av en webbsida. Se MDN citat nedan:

The HTML Section Element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each <section> should be identified, typically by including a heading (<h1>–<h6> element) as a child of the <section> element.

 MDN Referenssida
<article> Artikel element, semantisk behållare för användning vid artikelliknande webbinnehåll, se nedan MDN citat:

The HTML Article Element (<article>) represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable, e.g., in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, or any other independent item of content. Each <article> should be identified, typically by including a heading (h1–h6 element) as a child of the <article> element.

 MDN Referenssida
<footer> Sidfots element, semantisk behållare tänkt att användas för att definiera en webbsidas sidfot! MDN Referenssida
<header> Sidhuvud element, semantisk behållare, motsvarighet till <footer> fast tänkt att användas för att definiera en webbsidas sidhuvud. MDN Referenssida
<aside> Sidospalts element, semantisk behållare tänkt att definiera sidospalter för webbsidor. MDN citat nedan:

The HTML <aside> element represents a section of the page with content connected tangentially to the rest, which could be considered separate from that content.

 MDN Referenssida
<pre> För/O-formaterat element, tänkt att användas när webbläsaren inte ska tolka texten i behållaren. Se MDN citat nedan:

The HTML Preformatted Text (<pre>) represents preformatted text. Text within this element is typically displayed in a non-proportional font exactly as it is laid out in the file. Whitespaces inside this element are displayed as typed.

 MDN Referenssida
<nav> Navigations element, tänkt att användas för navigations menyer och liknande för webbsidor. Se MDN beskrivning nedan:

The HTML Navigation Element (<nav>) represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

 MDN Referenssida

För att se bra praktiska exempel på när många av dessa elementen t ex. kan användas, så ta en titt på tidigare inlägg där vi gick igenom visualisation och realisation av layout för en webbsida.

Annars tycker jag inte där finns mycket mer att säga om dessa :)

När man använder <pre> elementet för ”preformatted” text

<pre> elementet är ett bra element som jag inte gick igenom i ovan länkade tidigare inlägg, som är väldigt användbart om man vill presentera kod på en webbsida i block-form.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *