Bootstrap Studio

Your First HTML: Divs and Attributes

Lesson 1 of 13

Welcome to web development! Let's start with the most common HTML element: the <div>. Think of it as a simple container or a 'box' for your content.

Every <div> has an opening tag <div> and a closing tag </div>. You can also put divs inside other divs, which is called nesting. To style them or select them with code, we give them attributes like a class or an id.

Code Editor

<style>
  #outer-box {
    border: 2px dashed blue;
    padding: 10px;
  }
  .inner-box {
    border: 1px solid green;
    padding: 10px;
    margin-top: 5px;
    background-color: #e8f5e9;
  }
</style>

<!-- This is the outer container with a unique ID -->
<div id="outer-box">
  I am the outer box.

  <!-- These are inner boxes sharing the same class -->
  <div class="inner-box">
    I am an inner box.
  </div>
  <div class="inner-box">
    I am another inner box.
  </div>
</div>