How can I easily align opening and closing tags?

Is there a fast way to make the closing tag flush with the opening tag?
Right now it looks like this:

<tr>
  </tr>

Then I backspace twice to align the tags.
Is there a way to use the Enter key to not auto add another indent?

Did you try entering it as a single line? In some editors, typing,

<tr></tr>

if entered that way will self adjust to,

<tr>

</tr>

If not, then welcome to Notepad for Windows. JK

I find it not difficult to believe that there is a limit on the intuitive nature of even the best editors, but the above is one possible way to be in step with the intuitiveness of one’s editor. Enter the element with OPENTAG and ENDTAG and let the editor sort it out.

Usually we just need to place the cursor at the end of the OPENTAG and hit Enter and the editor will supply the indent for the nested line. When we reach then end of our inputs we press Delete instead of Enter and place the cursor at the end of the ENDTAG and hit Enter to get the same indentation for the next line.

Whatever intuition is missing from an editor, I don’t mind manually setting my nesting indents, whether during composition or after. It will never have an effect on the rendering process and is just an aid to self-documentation, by way of relating structure and inheritence.


Another trick might be to include a starting nested element,

<tr><td></td></tr>

Enter that, then place the cursor just after the first opentag and hit Enter. Now place the cursor just before the last endtag and hit Enter. The editor should again sort it out that indentation is cancelled on the next line. Place the cursor after the last endtag and hit Enter and it should line up with that endtag.

<!--cursor-->
<tr>|<td></td></tr>    <!-- Enter -->

<tr>
  <td></td>|</tr>      <!-- Enter -->

<tr>
  <td></td>
</tr>|                 <!-- Enter -->

<tr>
  <td></td>
</tr>
|

<tr>
  <td></td>|      <!-- Enter -->
</tr>

<tr>
  <td></td>
  |
</tr>
22 Likes