html code, inline of block
In feite bestaat html code uit drie soorten, html code in ‘blocks’, html code ‘inline’ en html code die niet zichtbaar, ‘invisible’, is. We geven in dit artikel voorbeelden van inline code, van block code en van invisible code, maar dit kun je met behulp van CSS op een eenvoudige manier overrulen.
block
Het principe van blocks, tekstblokken, is dat de hele breedte wordt gebruikt voor het element, daarnaast wordt er voor en na het element met een nieuwe regel begonnen. In CSS gebruik je de code display: block.
Voorbeelden van elementen die ‘blocks’ zijn.
<div>
Een algemeen gedeelte
<h1> ... <h6>
Alle kopteksten
<p>
Paragraaf
<ul>, <ol>, <dl>
Lijsten (ongeordend, geordend en definities)
<li>, <dt>, <dd>
Lijst items, definitie lijst termen, and definitie lijst definities
<table>
Tabellen
<blockquote>
Een ingesprongen paragraaf, voor het quoten.
<pre>
Een blok met gepreformatteerde tekst (computercode)
<form>
Een formulier
inline
Inline code staat in de tekst en start niet met een nieuwe regel. Daarnaast is de tekst zo breed als de tekst zelf nodig heeft. In CSS gebruik je display: inline; om elementen ‘inline’ weer te geven.
Voorbeelden van inline elementen
<span>
Het ‘overal-te-gebruiken’ inline element
<a>
Anker, gebruikt om links van te maken, zowel naar andere pagina’s als binnen een pagina.
<strong>
Gebruikt om tekst vet weer te geven, komt in plaats van de <b> (bold) tag
<em>
Versterkt tekst, maar niet zo sterk als strong. Meestal schuin weergegeven, komt in plaats van de oude <i> (italic) tag.
<img>
Plaatje
<br>
Beetje vreemd, maar deze ‘nieuwe regel’ tag is een inline element dat een nieuwe regel forceert.
<input>
Formulier invulvelden en buttons.
<abbr>
Een abbr. (Ga op het woord staan met je muis om te zien hoe het werkt).
<acronym>
Werkt ongeveer hetzelfde als een abbr element, maar dan om een acroniem aan te duiden, bijvoorbeeld WWW. (Ga weer op het woord staan met je muis om te zien hoe het werkt).
Invisible
Er zijn nog een paar tags die niet zichtbaar zijn, dit zijn metatags, de link-tag en style tag. In CSS weergegeven met display: none;.
Veranderen van weergave
Zoals hierboven al aangegeven, kun je de weergave van een block veranderen naar inline en een inline element kun je als block weergeven door de juiste CSS code te gebruiken. Dit kan bijvoorbeeld handig zijn als je een lijst horizontaal wilt weergeven, zie ook het artikel waarin we een horizontaal menu maken.
