Jump to content
Coen Zulu

How to manage <open> & </closing> tags

Recommended Posts

Plz can anybody offer some advice with the following?

I'm teaching myself a bit of HTML and CSS -- But the trouble is, keeping track of <tag> partners is proving to be a huge pain.

For example - A relatively small HTML file, with few <div> and </div> tags, is quite easy to figure out.
However, once the file starts growing, and you sit with loads of nested <open> and <close> tags, it's not always easy to figure out which </div> should partner up with which <div>.
And needless to say - if you then move or delete an incorrect </div>, things can quickly start falling apart.

At the moment I find myself continuously trying to figure out which <tag> is causing the unexpected page layout.
And to make things worst, if you're using something with an auto-correct function, whereby the missing <tag> is auto-generated, then things get even worst :-(

Any ideas how one can keep track of the different <tag> pairs?

Share this post


Link to post
Share on other sites

Personally, I keep track of my opening and closing tags through indentation.

The easiest way to show the use of it is to use table tags.

<table> 
    <tr> 
        <td> 
            Lorem ipsum dolor sit amet 
        </td> 
        <td> 
            Consectetur adipisicing 
        </td> 
    </tr> 
    <tr> 
        <td> 
            Lorem ipsum dolor sit amet 
        </td> 
        <td> 
            Consectetur adipisicing 
        </td> 
    </tr> 
</table>

Or if the content is short enough:

<table> 
    <tr> 
        <td>Lorem ipsum dolor sit amet</td> 
        <td>Consectetur adipisicing</td> 
    </tr> 
    <tr> 
        <td>Lorem ipsum dolor sit amet</td> 
        <td>Consectetur adipisicing</td> 
    </tr> 
</table>

 

Share this post


Link to post
Share on other sites

Some editors would highlight incorrect mismatch of close/opening tags, and with some you can fold container elements to show if any misplaced close/opening tags exit.

The same can be done when viewing page source through browser, usually mismatched tags are highlighted in red.

Or validate at https://validator.w3.org/

Share this post


Link to post
Share on other sites

Thanks to Funce / dsonesuk -- I'll give the indentation another try .... but an editor which highlights the pairing <tags> seems ideal.

Thanks for the help. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...