<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Concise page description under 160 characters"> <meta name="author" content="Your Name"> <meta name="robots" content="index, follow"> <title>Page Title - Site Name</title></head>
4. Element Syntax and Nesting Rules
Rule
Description
Valid Example
Invalid Example
Opening/Closing Tags
Most elements require both tags
<p>Text</p>
<p>Text (missing closing)
Tag Names
Case-insensitive, lowercase preferred
<div>, <DIV>
Both valid, <div> recommended
Attribute Quotes
Optional but recommended
<div class="name">
<div class=name> (works but avoid)
Attribute Values
Can use single or double quotes
class="text", class='text'
Both valid, be consistent
Boolean Attributes
Presence = true, value optional
<input disabled>, <input disabled="disabled">
Both valid forms
Proper Nesting
Elements must close in reverse order
<div><p>Text</p></div>
<div><p>Text</div></p>
Block vs Inline Nesting
Container
Can Contain
Block Elements
Block + Inline elements
Inline Elements
Only inline elements + text
<p>
Inline only (no block elements)
<a>
HTML5: Can contain block elements
Special Nesting Rules
Element
Restriction
<ul>/<ol>
Direct children must be <li>
<dl>
Only <dt> and <dd> allowed
<table>
Specific structure required
<form>
Cannot nest forms
Example: Correct element nesting patterns
<!-- Valid nesting --><div class="container"> <p>Paragraph with <strong>bold</strong> and <em>italic</em> text.</p> <ul> <li>List item with <a href="#">link</a></li> </ul></div><!-- Invalid: Block element inside inline --><!-- WRONG: <span><div>Text</div></span> --><!-- Invalid: Improper closing order --><!-- WRONG: <div><p>Text</div></p> -->
5. Void Elements and Self-closing Tags
Element
HTML5 Syntax
XHTML Syntax
Purpose
<br>
<br>
<br />
Line break
<hr>
<hr>
<hr />
Thematic break / horizontal rule
<img>
<img src="url" alt="text">
<img src="url" alt="text" />
Embedded image
<input>
<input type="text">
<input type="text" />
Form input control
<link>
<link rel="stylesheet" href="url">
<link rel="stylesheet" href="url" />
External resource link
<meta>
<meta charset="UTF-8">
<meta charset="UTF-8" />
Metadata
<area>
<area shape="rect" coords="x,y">
<area shape="rect" coords="x,y" />
Image map area
<base>
<base href="url">
<base href="url" />
Base URL for relative links
<col>
<col span="2">
<col span="2" />
Table column definition
<embed>
<embed src="url">
<embed src="url" />
External content embed
<param>
<param name="x" value="y">
<param name="x" value="y" />
Object parameters
<source>
<source src="url" type="mime">
<source src="url" type="mime" />
Media source
<track>
<track src="url" kind="subtitles">
<track src="url" kind="subtitles" />
Media text tracks
<wbr>
<wbr>
<wbr />
Word break opportunity
Note: In HTML5, the trailing slash in void elements is optional.
Both <br> and <br /> are valid. Use consistent style throughout your
document.
Example: Void elements in practical use
<!-- Line breaks --><p>First line<br>Second line<br>Third line</p><!-- Horizontal rule --><section>Content</section><hr><section>More content</section><!-- Image with required alt attribute --><img src="photo.jpg" alt="Descriptive text" width="300" height="200"><!-- Form inputs --><form> <input type="text" placeholder="Name"> <input type="email" placeholder="Email"> <input type="submit" value="Send"></form><!-- Multiple media sources --><video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <track src="subtitles.vtt" kind="subtitles" srclang="en"></video>
6. HTML Comments and Conditional Comments
Type
Syntax
Use Case
Browser Support
Standard Comment
<!-- Comment text -->
General documentation and notes
All browsers
Multi-line Comment
<!-- Line 1 Line 2 -->
Longer explanations or disabled code blocks
All browsers
Conditional Comment (IE)
<!--[if IE]>...<![endif]-->
IE-specific code (legacy)
DEPRECATED IE only
Conditional IE Version
<!--[if lt IE 9]>...<![endif]-->
Target specific IE versions
DEPRECATED IE only
Downlevel-hidden
<!--[if !IE]><!-->...<!--<![endif]-->
Hide from IE, show to others
DEPRECATED
Note: Comment Best Practices
Use for documentation and code organization
Avoid sensitive information (visible in source)
Keep comments concise and relevant
Remove debug comments in production
Use for temporarily disabling code
Conditional Comment Operators
Operator
Meaning
lt
Less than
lte
Less than or equal
gt
Greater than
gte
Greater than or equal
!
Not
Example: Various comment types and uses
<!-- Single line comment for documentation --><!-- Multi-line comment for longer explanations or to temporarily disable code blocks during development and debugging--><!-- Section: Main Navigation --><nav>...</nav><!-- End Section: Main Navigation --><!-- TODO: Add responsive images here --><!-- Legacy IE conditional comments (no longer needed) --><!--[if lt IE 9]> <script src="html5shiv.js"></script> <script src="respond.js"></script><![endif]-->
Warning: HTML comments are visible in page source. Never include
passwords, API keys, or sensitive information. Comments increase file size and are downloaded by browsers.
Section 1 Key Takeaways
Always start with <!DOCTYPE html> for HTML5 documents
Include <meta charset="UTF-8"> as first element in <head>
Use viewport meta tag for responsive design: width=device-width, initial-scale=1.0
Follow proper nesting rules: close elements in reverse order of opening
Void elements don't require closing tags in HTML5
Comments are visible in source code - avoid sensitive information
Conditional comments are deprecated; use feature detection instead