Wat is een: DIV-element?.

Een DIV (division) is een HTML-element dat je kunt gebruiken om delen van een pagina in te sluiten zoals titel, menu, paragraaf of een zij-item. Via DIV-s kun je onderdelen positioneren in de pagina.

Voorbeeld van een pagina-onderdeel dat is aangeven via een DIV-element:

Hoe dat eruit ziet in de broncode:

<div class=”media”>
            <a class=”media-left”
href=”https://www.maxlead.com/over-maxlead/maxlead-team/peter-van-marwijk/”>

               <img class=”media-object” src=”https://www.maxlead.com/wp-content/uploads/2016/11/peter-van-marwijk_260x340_acf_cropped-3.jpg” alt=”Peter van Marwijk” width=”140″ />
            </a>
           <div class=”media-body”>
           <h2 class=”media-heading”>Meer informatie nodig?<br />Vraag het <span>Peter van Marwijk</span>.</h2>
           <ul>
                                   <li><span class=”fa fa-phone”></span>+31 (0)71 542 53 06</li>
                                   <li><a href=”/contact/formulier/#Peter van Marwijk”><span class=”fa fa-envelope-o”></span>Stuur een mail</a></li>
           </ul>
          </div>
          </div>
Je ziet hierboven dat je een DIV-element in een andere DIV-element kunt plaatsen. Belangrijk dat je ze beide afsluit met </div>.

Attributen voor DIV-element

Het DIV-element heeft attributen die iets kunnen aangeven zoals uitlijning, kleur, grootte. Meest voorkomende attributen zijn ‘style’, ‘id’ en ‘class’ om de stijl aan te geven. Dit zie je al terugkomen in het voorbeeld hierboven. Het voordeel vanuit SEO-optiek van ‘id’ en ‘class’ ten opzichte van het ‘style’-attribuut is dat die eerste 2 minder code met zich meebrengen als de opmaak is bepaald via een CSS-bestand. Voorkom dus zoveel mogelijk het ‘style’-attribuut binnen het DIV-element.

Voorbeeld van een DIV met class.

Allereerst bepaal je de weergave en sla je op in het CSS-bestand:

.main content {
  border: 1px dashed #FF0000;
  color: #000000;
  text-align: center;
  width: 100px;
  margin: 0px;
  padding: 4px;
  }
Vervolgens geef je de waarde aan via de ‘class’ in de DIV:
<div class=”main content”>Doordat ik in het CSS-bestand heb aangegeven hoe de ‘main content’ eruit moet komen te zien, kan ik met een kort stukje code dit aangeven via de ‘class’-attribuut</div>.

Let op dat je het DIV-element altijd afsluit met </div> anders heb je grote kans op vreemde opmaak van je pagina.

Voordeel gebruik van DIV in HTML-documenten

  • Minder HTML-code, daardoor overzichtelijker, compacter en kan de laadtijd van een pagina versnellen (rankingfactor vanuit SEO-optiek).
  • De opmaak van pagina’s gaat tegenwoordig veelal via CSS (zelfs media onderdelen), en met div’s kun je goede CSS sites creëren.
  • Door gebruik van het DIV-element en de bijbehorende attributen kun je heel precies secties (divisions) op je pagina positioneren.

Wil je meer weten over DIV-s of technische SEO?

Ben je geïnteresseerd in techniek voor SEO en wil je meer weten? Raadpleeg dan een van onze technische SEO-consultants. Ze helpen je graag op weg.