I want to know the proper use of section tag in html5

Question

When I inspect element and moved cursor on any particular section tag. the section tag highlighting only top of the main parent div only with height 0 . Not showing that actual section tag where it is like display inline-block . I just want to know why it's like this. what is proper way to use section tag.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <div class="col-md-12"> <section id="amenities-part"> <div class="col-md-6"> <h2>Amenities</h2> <span>Lift</span> <br><span>AC</span> </div> </section> <section id="services-part"> <div class="col-md-6"> <h2>Services</h2> <span>Cooking</span> <br><span>Cooking</span> </div> </section> <section id="safety-part"> <div class="col-md-6"> <h2>Safety</h2> <span>First Aid Kit</span> <br><span>Fire Extinguisher </span> </div> </section> <section id="local-service-part"> <div class="col-md-6"> <h2>Local Area Service</h2> <span>jfh</span> <br><span>jfh</span> </div> </section> <section id="handler-detail-part"> <div class="col-md-6"> <h2>Handler Detail</h2> <img class="img-responsive" alt="Handler-profile-picture" width="75px" src="https://www.primomedico.com/wp-content/uploads/2015/09/Prof-Dr-Schmidli-Juerg-Spezialist-Gefaesschirurgie-Bern-Portrait_klein.jpg"> <p>Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.</p> </div> </section> </div> 

Answer 1

 <div class="col-md-12">
    <section id="amenities-part" class="col-md-6">
        <div>
            <h2>Amenities</h2>
            <span>Lift</span> <br><span>AC</span>
        </div>
    </section>
    <section id="services-part" class="col-md-6">
        <div>
            <h2>Services</h2>
            <span>Cooking</span> <br><span>Cooking</span>
        </div>
    </section>
    <section id="safety-part" class="col-md-6">
        <div>
            <h2>Safety</h2>
            <span>First Aid Kit</span> <br><span>Fire Extinguisher </span>
        </div>
    </section>
    <section id="local-service-part" class="col-md-6">
        <div>
            <h2>Local Area Service</h2>
            <span>jfh</span> <br><span>jfh</span>
        </div>
    </section>
    <section id="handler-detail-part" class="col-md-6">
        <div>
            <h2>Handler Detail</h2>
            <img class="img-responsive" alt="Handler-profile-picture" width="75px" src="https://www.primomedico.com/wp-content/uploads/2015/09/Prof-Dr-Schmidli-Juerg-Spezialist-Gefaesschirurgie-Bern-Portrait_klein.jpg">
            <p>Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.</p>
        </div>
    </section>
</div>

you can also use this it simple

Answer 2

The HTML element represents a generic section of a document, ie, a thematic grouping of content, typically with a heading. Each should be identified, typically by including a heading (- element) as a child of the element.

Here is a example:

Before

<div>
  <h2>Heading</h2>
  <img src="bird.jpg" alt="bird">
</div>

After

<section>
  <h2>Heading</h2>
  <img src="bird.jpg" alt="bird">
</section>