11. Whitespace, Indentation and Readability
HTML usually collapses consecutive spaces and line breaks in ordinary rendered text into a single space. Indentation is primarily for developers reading the source.
<p>
Welcome
to
Codementrix.
</p>This will ordinarily render as “Welcome to Codementrix.” The line breaks in the source do not automatically create separate visible lines.
Use indentation to make nested structures easier to read:
<article>
<h2>HTML Basics</h2>
<p>Learn elements and attributes.</p>
<a href="/courses/html">Explore the course</a>
</article>Consistent indentation helps you spot missing closing tags and incorrect nesting. It does not change the element hierarchy by itself.
12. Attribute Names, Values and Duplicate Attributes
In HTML syntax, attribute names are ASCII case-insensitive, although lowercase names are the normal convention. For example, class and CLASS are interpreted as the same HTML attribute name.
Prefer lowercase:
<p class="notice">Please read this notice.</p>Attribute values may have different case rules depending on the attribute. For example, a custom class name is case-sensitive when matched by CSS class selectors. Do not assume all attribute values are case-insensitive.
Avoid Duplicate Attributes
Do not write the same attribute more than once on a single element.
Incorrect:
<div class="card" class="featured">Course details</div>Correct:
<div class="card featured">Course details</div>When you need multiple class names, separate them with whitespace in one class attribute.
Duplicate attributes make HTML non-conforming and can be handled differently by tools and parsers. Write each attribute only once.