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

[Coen Zulu]

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?

[Funce]

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>

 

[dsonesuk]

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/

[Coen Zulu]

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.