Ich möchte die ordnungsgemäße Verwendung von Abschnitt Tag in html5

Question

Wenn ich Element überprüfen und Cursor auf einem bestimmten Abschnitt Tag bewegt. das Abschnitts-Tag, das nur den oberen Teil des Haupt-Elternteils markiert, nur mit Höhe 0. Nicht zeigen, dass tatsächliche Abschnitt Tag, wo es ist wie Display Inline-Block. Ich will nur wissen, warum es so ist. Was ist der richtige Weg, um Abschnitt Tag zu verwenden.

<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> 

Sie auch diese es einfach

Answer 2

Das HTML-Element stellt einen generischen Bereich ein Dokument verwenden können, dh eine thematische Gruppierung von Inhalten, in der Regel mit einer Überschrift . Jeder sollte identifiziert werden, typischerweise indem eine Überschrift (- Element) als Kind des Elements eingefügt wird. Hier

ist ein Beispiel:

Vor

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

Nach

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