HTML syntax comes down to a small set of consistent rules: elements are made of tags, tags can carry attributes, and elements nest inside each other in a strict, closable order.
Anatomy of an Element
<a href="https://codingnowai.in" target="_blank">Visit CodingNow</a>| Part | Example |
|---|---|
| Opening tag | <a href="..." target="_blank"> |
| Attributes | href="...", target="_blank" |
| Content | Visit CodingNow |
| Closing tag | </a> |
Nesting Must Be Properly Closed
<!-- Correct: tags close in reverse order of opening -->
<p>This is <strong>important <em>text</em></strong>.</p>
<!-- Incorrect: overlapping tags -->
<p>This is <strong>important <em>text</strong></em>.</p>The second example is invalid — <em> opened after <strong>, so it must close before <strong> closes. Browsers will often try to recover from this, but the result can be unpredictable.
Void (Self-Closing) Elements
Some elements never have content or a closing tag — <img>, <br>, <hr>, <input>, <meta>, <link>:
<img src="photo.jpg" alt="A student coding">
<br>
<hr>Case Sensitivity
Tag and attribute names are case-insensitive in HTML5 (<DIV> and <div> both work), but lowercase is the universal convention and what every style guide expects.
Common Mistakes
- Overlapping tags instead of properly nested ones (see example above)
- Forgetting to close a tag that requires closing (like
<div>or<p>), which can silently break the layout of everything after it - Writing a closing slash on void elements out of habit (
<img ... />) — harmless in HTML5, but unnecessary
Interview Relevance
Spotting invalid/overlapping markup in a code review question is a common practical test — practice reading nested tags and identifying exactly where they should close.
Practice Question
Find and fix the error: <p>Click <a href="#">here</p></a>
