Understand how HTML is written — opening and closing tags, void elements, attributes, HTML entities, comments, and how the browser handles whitespace.
Why: the closing tag tells the browser where the element's content ends. When to omit it: void elements like <br>, <hr>, <img>, and <input> have no content to wrap, so they take no closing tag.
<!-- Paired tags wrap content -->
<p>This is a paragraph.</p>
<h1>This is a heading.</h1>
<!-- No closing tag -->
<br />
<hr />
<img src="/photo.svg" alt="A photo" />
<input type="text" />Where: always written inside the opening tag, never the closing tag.
<!-- key="value" pairs inside the opening tag -->
<a href="https://example.com" target="_blank" rel="noopener">
Visit Example
</a>
<input type="email" placeholder="you@example.com" required />
<img src="/photo.svg" alt="A fluffy cat" width="300" height="200" />Why: characters like < and > are HTML syntax — typing them raw makes the browser read them as tags. When: use entities whenever you need to display a reserved character as literal text, not markup.
<!-- Escape reserved characters -->
<p>5 < 10 and 10 > 5</p>
<p>AT&T</p>
<p>belinkee ©</p>
<!-- Entities symbol -->
<!-- < → < -->
<!-- > → > -->
<!-- & → & -->
<!-- → non-breaking space -->
<!-- © → © -->Why: they let you annotate or temporarily disable markup without affecting the page. When to be careful: comments are visible in View Source — never put passwords, tokens, or internal notes you would not want users to read.
<!-- Single-line comment -->
<!--
Multi-line comment.
Visible in View Source, invisible in the rendered page.
-->
<p>This renders.</p>
<!-- <p>This does not render.</p> -->Why: HTML was designed for documents where extra whitespace is meaningless, so the browser collapses it. When you need it preserved: use to force a non-collapsing space, or wrap content in <pre> when every space and newline must stay exactly as written — like code samples.
<!-- Multiple spaces collapse to one -->
<p>Hello World</p>
<p>Hello
World</p>
<!-- forces a non-collapsing space -->
<p>Hello World</p>
<!-- <pre> preserves whitespace exactly -->
<pre>
function greet(name) {
return "Hello, " + name;
}
</pre>