Any Advice about Managing Closing Tags

1

While my styling and coding decisions are open to criticism and subject to improvement, for the moment as I’m learning and gaining skills, I tend to create a page with a <div></div> pair separated by lines of other code. Sometimes there are many lines of code spanning more that the VS Code window will contain. I sometimes mis-place the closing tag, </div> and have to spend time getting the closing tag matched with the opening tag while maintaining the layout I want. I try to place the closing tag on a line by itself and align the indentation with that used for the opening tag. I then use the vertical line clues to scan for tag pairs, but my eyes sometimes fail me. I sometimes miss the closing tag supplied by VS Code, too, and fail to get it on a line by itself.

I was wondering if there are any tips or tricks that I don’t know about in VS Code, or in coding technique generally, that will make this easier to manage and save time.

2

Hi @ahraitch

Here is a post from a couple of weeks ago about matching tag pairs and code validation.

Happy coding

1 Like
3

Learning and using Emmet (built-in to the editor) is one way of writing large amounts of HTML, not only faster, but more likely to be opened/closed correctly.

Emmet example:

main>section>h2+p+div>img^hr+.grid>.grid-item*4

Produces:

<main>
  <section>
    <h2></h2>
    <p></p>
    <div><img src="" alt=""></div>
    <hr>
    <div class="grid">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </div>
  </section>
</main>

Using the Prettier code formatter can also help catch errors. It will fail to format the HTML, and the error log will point to line numbers that need attention. It is like validating the HTML using a code formatter.

Some people use code comments that denote the starting and closing locations. Not everywhere for all the elements, but mainly for the outer blocks the page consistent of. Just to keep track of things, and it can also let you search-jump to locations, sort of like bookmarks.

1 Like
4

I have several tips (specific to VSCode, but similar IDEs will probably be similar).

1 Like
5

Thanks for the suggestions.

I’ll look into Emmet later. I’m not fluent enough with commands yet to make good use of it, but it sure looks appealing.

I do use code comments to mark start and end locations. I find it helpful. I wish there were a way to choose a different color for those comments so they would stand out a little more.

6

You could use multi-line comments like this:

HTML

<!--

This section is about a certain topic
  Second cousins

-->

CSS

/*
    Styling for siblings

*/

Happy coding

1 Like
7

I do use comments in that very style. I learned about commenting and best practices for inserting them into code in the '70s when they had to be inserted using punched cards because there weren’t any terminal interfaces.

Ouch! That’s been a loooonnnngggg time ago.

1 Like