Elementen en technieken voor HTML -lay-out

Websites tonen content vaak in meerdere kolommen (zoals een tijdschrift of een krant).

HTML-lay-outelementen

HTML heeft verschillende semantische elementen die de verschillende delen van een webpagina definiëren:

<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

<header> - Definieert een koptekst voor een document of een sectie <nav> - Definieert een set navigatielinks <section> - Definieert een sectie in een document <article>- Definieert een onafhankelijke, op zichzelf staande inhoud <aside>- Definieert inhoud naast de inhoud (zoals een zijbalk) <footer>- Definieert een voettekst voor een document of een sectie <details>- Definieert aanvullende details die de gebruiker op aanvraag kan openen en sluiten <summary>- Definieert een kop voor het <details>element U kunt meer lezen over semantische elementen in ons hoofdstuk HTML-semantiek .

HTML-lay-outtechnieken

Er zijn vier verschillende technieken om lay-outs met meerdere kolommen te maken. Elke techniek heeft zijn voor- en nadelen:

• CSS-framework
• CSS float-eigenschap
• CSS-flexbox
• CSS-raster

CSS-frameworks

Als u snel uw lay-out wilt maken, kunt u een CSS-framework gebruiken, zoals W3.CSS of Bootstrap .

CSS zwevende lay-out

Het is gebruikelijk om volledige weblay-outs te maken met behulp van de CSS- floateigenschap. Float is gemakkelijk te leren - u hoeft alleen maar te onthouden hoe de floaten cleareigenschappen werken. Nadelen: Zwevende elementen zijn gebonden aan de documentstroom, wat de flexibiliteit kan schaden. Lees meer over float in ons CSS Float en Clear hoofdstuk.

CSS Flexbox-indeling

Het gebruik van flexbox zorgt ervoor dat elementen zich voorspelbaar gedragen wanneer de paginalay-out rekening moet houden met verschillende schermformaten en verschillende weergaveapparaten.

Lees meer over flexbox in ons CSS Flexbox- hoofdstuk.

CSS-rasterindeling

De CSS-rasterlay-outmodule biedt een op rasters gebaseerd lay-outsysteem, met rijen en kolommen, waardoor het gemakkelijker wordt om webpagina's te ontwerpen zonder gebruik te maken van floats en positionering.

Lees meer over CSS-rasters in ons hoofdstuk CSS-rasterintroductie .