HTML Teil 20 HTML Block
Container

Ein <div> </div> erstellt einen Block / Container. Jede Webseite wird ins solche Blöcke eingeteilt.

<div style="background-color:black; color:white; padding:20px;">
<h2>Überschrift</h2>
<p>Text Text.</p>
</div>

Üblicherweise werden die <div> Container im CSS oder <style> formatiert. So kann man den <div> Container eine eigene Klasse (class=““) zuweisen.

<style>
div.container01 {
    background-color: #F2F2F2;
    color: #2EFEC8;
    margin:5px;
    padding:5px;
} 
</style>

<div class=" container01">
<h2>Überschrift</h2>
<p>Text Text Text Text Text Text.</p>
</div>

HTML5 <div> Erweiterungen

Seit HTML5 gibt es, so wie die <div> Container noch weiter Container um das Layout zu vereinfachen.
Diese sind:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <footer>
  • <details>
  • <summary>

Die Funktion ist ident zum <div>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*