How to auto-close HTML tags on Mac

Writing HTML by hand means typing every tag twice. You open a <section>, write forty lines, then have to remember what you opened and in what order. An editor that finishes the pair for you removes a whole class of small mistakes — unclosed tags, tags closed in the wrong order, a stray </dvi> you only find when the layout collapses.

Note My does this as part of Smart Editing. This guide covers the behaviour itself, how to have it running in whatever file you are writing markup in, how void elements come out, and the switches that let you keep exactly the parts of Smart Editing you want.

What happens when you type the closing angle bracket

One keystroke does the work: >. Finish the opening tag and the matching closing tag appears straight after the caret, with the caret left between the two, ready for the content. You never break your typing rhythm.

The closing tag is ordinary text from the moment it appears. Select it, retype it, delete it — it behaves exactly like the characters you typed yourself, and nothing changes on its own later. It all happens on your Mac: nothing is uploaded, there is no account, and the file never leaves the machine.

Get it working

1. Check that Smart Editing is on

   The toolbar's Smart Edit button is the master switch. When it is on, the button is latched: a solid accent disc with a white glyph rather than a plain icon. When it is off, its tooltip says "Smart Editing: OFF — plain newlines and typing". Settings ▸ Editing spells the same switch out in words, so you can confirm the state there whenever you want a second look.

   It is on by default: all five Smart Editing switches — the master plus the ones for Return, brackets, quotes and tags — default to on. The same toggle is reachable from Edit ▸ Smart Editing and Settings ▸ Editing.

2. Make sure the file is set to HTML

   This is the one worth checking first. Tag completion belongs to HTML, so a document set to HTML is a document where opening tags close themselves as you type. Any document can be set to HTML, whatever its name — setting the language is one click, and it takes effect on the file in front of you immediately.

   Look at the status bar. The Identify pill opens the Language Inspector, a small card that states "Identified programming language: X" with an override pop-up and Confirm and Cancel buttons. If it does not say HTML, set it there and confirm. The choice sticks for that tab.

3. Type an opening tag and press >

   Type <article, add any attributes you want, then the closing angle bracket. </article> appears after the caret. Write the content, then step past the closing tag with the arrow keys or a click and carry on with the next line. The pair is complete from the moment it appears, so the last thing you type inside an element is its content rather than its closing tag.

   Nesting works the same way, one level at a time: open the outer element, press Return, then open the inner one. The document is never left with a half-written pair while you think about the next line.

Getting the language right

Note My sets the language for you through our advanced language identifier, so most files are ready to work in the moment they open: a page saved as .html arrives as HTML, colour appears, and tag completion is available without you touching a menu. It all happens on your Mac — nothing about the file is sent anywhere for it to be recognised.

You are never stuck with the result. The status-bar Identify pill is always there, and the language you pick in it wins. That matters for a loose fragment pasted into a fresh tab, and for a file whose name no longer matches what you are actually writing in it. Set either one to HTML and every HTML behaviour, tag completion included, is available immediately — no restart, no reopening the file.

Two habits save you the trip. Save the file with its extension the first time, and it opens as HTML on every visit afterwards. Or start from a template, so the language is settled before you type the first character.

Void elements come out correct

Void elements have no content and no closing tag in HTML, so the right result is the tag exactly as you typed it. These all come out that way:

br, img, input, hr, meta, link, area, base, col, embed, param, source, track, wbr.

Two other cases come out the same way. A closing tag — anything starting </ — stands exactly as typed, so finishing a block by hand never leaves you with a doubled </div>. A self-closing tag, with a trailing slash before the angle bracket, stands as typed too, so you can write <img src="…" /> in whichever style you prefer and the file keeps your house style.

Attributes, nesting and long pages

Most of the typing inside an element goes on attributes, and they are looked after on the way past. Quote pairing works inside the tag, so the value you open already has its closing quote waiting for you: type the name, the equals sign and one quote, fill the value in, then step over the closer and carry on to the next attribute. With the closing tag arriving on > as well, an element comes out finished in a single pass across the keyboard, and you move to the next line with nothing dangling behind you.

Nesting is the other thing that drifts as a page grows: a block moves, a wrapper goes in, and the depths stop matching the structure. Our indentation engine re-indents the whole page in one pass whenever you ask it to, so a section you moved sits at the depth its parent implies and the outline of the page reads correctly again at a glance.

Document size is not something to plan around either. Our large-file engine keeps a long single-file page as quick to type in as a short one: scrolling stays smooth, colour stays live, and closing tags arrive as promptly at the foot of the file as at the top. Splitting a page into fragments to keep the editor happy is not a compromise you have to make.

For moving around a page that has outgrown the window, our find and replace takes you straight to the element you want, and it will change every occurrence of a class or an element name across the file in one go. That is also the tidiest way to rework a block after the fact — find the opening tag, replace it, then do the same for the closing tag, and the page stays consistent from top to bottom.

Brackets and quotes inside a tag

Attribute values are covered by a separate Smart Editing switch, with its own list of pairs: (), [], {}, "", '' and backticks. Type the opening quote of an attribute value and the closing quote appears with the caret between them.

Three refinements make that pleasant rather than intrusive:

• Angle brackets stay literal. Typing < gives you exactly <. They turn up too often as comparison operators and in ordinary prose for pairing to be right, so the closing tag arrives when you finish the opening tag instead — at the end, which is where you want it.
• Type-over. When you reach a closing bracket or quote Note My added, typing it moves the caret past it instead of leaving you with two.
• Apostrophe protection. Type an apostrophe straight after a letter or a number and you get just the apostrophe, so don't stays one word instead of turning into don''t.

Choosing which behaviours you keep

The four behaviours are independently switchable in Settings ▸ Editing: auto-indent on Return, bracket pairing, quote pairing and tag completion. Turn off tags alone and the rest carries on.

The toolbar's Smart Edit button controls the master switch above all four, so one click takes you from every assist to plain typing and back again. With the master off, the four rows in Settings stay visible and greyed rather than vanishing, so you can always see which behaviours are waiting for you and switch straight back to them.

Troubleshooting

Three checks that get the closing tag appearing

Run them in order. Is the Smart Edit toggle latched? Does the status bar say HTML? Is the tags switch on in Settings ▸ Editing? The second is almost always the one — a scratch note typed straight into a new tab starts as Plain Text, and a click on the Identify pill turns it into a page.

Getting a scratch tab recognised as HTML

A fragment pasted into an untitled tab is the common case. Set the language yourself from the status-bar Identify pill, or save the file with an .html extension. Your choice holds for that tab, so you are asked once and left alone for the rest of the session.

Working in a PHP template that is mostly markup

A file that mixes PHP and markup opens as PHP, which is what you want when the code outweighs the tags — PHP colour, PHP suggestions, PHP indenting. When a template is mostly markup, set it to HTML from the Identify pill and you get tag completion across the whole file, with the switch back to PHP one click away whenever you want it.

I renamed an opening tag and want the closing one to match

Reach for our find and replace. Search for the opening tag and replace it, then repeat for the closing tag, and the file stays consistent — including every other place that element appears. It is quicker than hunting for the matching half by eye in a deeply nested page, and the same two passes rename a class everywhere you have used it.

I got a closing tag I did not want

Delete it like any other text; ⌘Z works too. And if you would simply rather type your own pairs, turn the tags switch off in Settings ▸ Editing and keep the rest of Smart Editing exactly as it is.

Markup I pasted in kept the tags it arrived with

That is paste working as it should: markup lands exactly as it was written, character for character, and closing tags come from typing > yourself. Paste is always plain text, which also means styled content copied out of a browser arrives as characters rather than formatting.

What else a page gets while you write it

Tag completion is one habit among several that make a page pleasant to build by hand:

• Re-indent the whole page. Our indentation engine tidies the nesting of an entire document in one go, so a section you pasted in at the wrong depth lines up with everything around it. Your comments come back exactly as you wrote them.
• Code suggestions on demand. ⌃Space summons the list wherever the caret is. In a page it offers file paths — useful the moment you start a src or an href — along with the names and words already in the document, so a class you invented once is a few keystrokes away for the rest of the file.
• Whole starting documents. Our template library hands you a complete index.html to begin from, and any page layout you save yourself joins the same list for next time.
• The data that travels with a page. The Edit menu will format, minify and validate JSON, and format and minify XML — handy for a structured-data block, a config file or a sitemap sitting alongside your markup.
• Compare two versions. Our comparison view puts a page side by side with another copy of it, so a rewrite you are unsure about is easy to read through before you keep it.
• Nothing changes until you ask. The editor never reformats your text on its own: every one of these runs when you invoke it, on the file you invoke it on, and the page on disk is the page you wrote.

All of it runs on your Mac. No account, no sign-in, no telemetry, and nothing about the page you are writing is uploaded anywhere.

Frequently asked questions

What is a very large HTML page like to work in?

Much like a short one. Closing tags arrive as promptly at the foot of a long page as at the top, and our large-file engine keeps everything around them steady — scrolling, colour and typing alike. For getting about a page that has outgrown the window, our find and replace takes you straight to the element you want, and renames a class or a tag everywhere it appears in a single pass.

Can I get it in an XML, JSX or template file?

Set that document to HTML from the status-bar Identify pill and tag completion is there straight away — worth doing whenever a file is mostly markup, whatever its extension. Left as they are, those languages keep their own colour and behaviour from our syntax engine, which is what you want when the markup is only part of the file.

Can I keep auto-indent but stop the tag closing?

Yes. Auto-indent on Return, bracket pairing, quote pairing and tag completion are four separate switches in Settings ▸ Editing, each independently on or off. The toolbar Smart Edit button is the master above them.

What happens when I type < on its own?

You get exactly <. Angle brackets turn up too often as comparison operators and in ordinary prose for pairing to be right, so they stay literal and your text is left as you typed it. The help arrives at the other end instead: finish the opening tag with > and the closing tag is written for you.

What do code suggestions offer inside a page?

File paths — useful the moment you open a src or an href — along with the names and words already in the document, so a class or an id you wrote once is a few keystrokes away everywhere else. Summon the list with ⌃Space.

Related Guides

Formatting & Indentation

How to fix mixed tabs and spaces on Mac

See exactly which lines mix tab and space characters in their indentation, get a list of every one of them, then re-indent the file to one consistent unit.

Formatting & Indentation

How to show indentation guides on Mac

Vertical markers down every level of nesting, in any of ten styles — where the toggle lives, which style to pick, and why your file stays exactly as you wrote it.

Formatting & Indentation

How to re-indent code on Mac

Put a whole source file back at the right depths in one pass — where the Indentation sheet lives, what Apply changes, and how to tune it for your language.