Closing </div> tags

HTML & CSS
1

What is a good way to determine where all the closing tags go to?

How do you know which goes to which?

A way to know which closing tag belongs to which opening tag.

Do these 2 closing </div> tags go anywhere, or do they stay where they are?

What’s the rule of thumb, if it doesn’t break the code, then leave them where they are?

<div class="container"></div> <!-- .container -->
 <div class="video video-frame"></div><!-- .video-frame -->

Can someone tell me if I made any mistakes.

code: https://jsfiddle.net/oph29brq/

<div class="outer">
  <div class="tcell">
    <div class="curtain-wrapper">
      <div class="curtain-ratio-keeper">
        <div class="curtain ">
          <div class="container"></div> <!-- .container -->
          <div class="video-wrapper">
            <div class="video-ratio-keeper">
              <div class="wrap">
                <div class="video video-frame"></div><!-- .video-frame -->
              </div><!-- .wrap -->
            </div> <!-- .video-wrapper -->
          </div><!-- .video-ratio-keeper -->
        
          <div class="panel-left"></div><!-- .panel-left -->
          <div class="panel-right"></div><!-- .panelright -->

          <div class="jacket" title="Play">
            <svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
              <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
                     M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
            </svg> </div><!-- .jacket -->
        </div> <!-- .curtain -->
      </div> <!-- .curtain-ratio-keeper -->
    </div> <!-- .curtain-wrapper -->
  </div><!-- .tcell -->
</div><!-- .outer -->
2

I prefer to be consistent and have closing tags on a new line even if they are empty.

Code editors usually allow grabbing text blocks and removing or adding indentation so that start and end blocks can be seen:

<!doctype html><html lang="en-gb">
<head>
<title> asf </title>
</head>
<body>
<div class="outer">
  <div class="tcell">
    <div class="curtain-wrapper">
      <div class="curtain-ratio-keeper">
        <div class="curtain ">
          
          <div class="container">
          </div> <!-- .container -->

          <div class="video-wrapper">
            <div class="video-ratio-keeper">
              <div class="wrap">
          
                <div class="video video-frame">
                </div><!-- .video-frame -->
          
              </div><!-- .wrap -->
            </div> <!-- .video-wrapper -->
          </div><!-- .video-ratio-keeper -->
        
          <div class="panel-left">
          </div><!-- .panel-left -->
          
          <div class="panel-right">
          </div><!-- .panelright -->

          <div class="jacket" title="Play" style="width:22%; height:auto;">
            <svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
              <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
                     M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
            </svg>
          </div><!-- .jacket -->

        </div> <!-- .curtain -->
      </div> <!-- .curtain-ratio-keeper -->
    </div> <!-- .curtain-wrapper -->
  </div><!-- .tcell -->
</div><!-- .outer -->
</body>
</html>

Also cutting and pasting the script into the Free Online Html Validation Tool (tab “Validate by Direct Input”) highlights any errors or warnings:

https://validator.w3.org/nu/#textarea

3 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.