Master HTML Syntax and Structure

Before building pages, you need to understand the rules of HTML syntax. Getting this right ensures your pages work correctly across all browsers.

Opening and Closing Tags

<p>This is a paragraph.</p>
<h2>This is a heading.</h2>
<strong>This is bold text.</strong>

Self-Closing Tags

Some elements don't have content, so they close themselves:

<br>       <!-- Line break -->
<hr>       <!-- Horizontal rule -->
<img src="photo.jpg" alt="A photo">
<input type="text">

Attributes

Attributes provide extra information and go inside the opening tag:

<a href="https://google.com" target="_blank">Visit Google</a>
<img src="logo.png" alt="Company logo" width="200">

Nesting Rules

Elements can be placed inside other elements, but they must be properly nested:

<!-- ✅ CORRECT -->
<p><strong>Bold text</strong></p>

<!-- ❌ WRONG -->
<p><strong>Bold text</p></strong>

Indentation

Use consistent indentation (2 or 4 spaces) to make your code readable. Nested elements should be indented one level deeper than their parent.

Comments

<!-- This is a comment. Browsers ignore it. -->

Use comments to leave notes in your code for yourself or teammates.