HTML ESSENTIALS REFERENCE CODE
1. Structure of Simple HTML
SYNTAX (The Rules / Template):
<!DOCTYPE html>
<html>
<head>
<title> Page Title Name </title>
</head>
<body>
Everything users see goes here inside body
</body>
</html>
REAL EXAMPLE CODE:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
Hello World! This is my very first webpage.
</body>
</html>
2. Example of Body Tag
SYNTAX (The Rules / Template):
<body>
... Visible Page Content ...
</body>
REAL EXAMPLE CODE:
<!DOCTYPE html>
<html>
<head>
<title> Page Title Name </title>
</head>
<body>
This is body tag.
</body>
</html>
3. Body Attributes (bgcolor, background, text)
SYNTAX (The Rules / Template):
<body bgcolor="color_name" text="color_name" background="image_url.jpg">
REAL EXAMPLE CODE:
<!-- Using background colors and text colors -->
<body bgcolor="gray" text="white">
<h1>This looks like a dark-mode website!</h1>
</body>
<!-- Using background image -->
<body background="[Link]" text="yellow">
<p>This text is yellow on top of a starry background image.</p>
</body>
4. Font Style Tags (b, i, em, u, strong, small, del, q)
SYNTAX (The Rules / Template):
<b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text</u>
<em>Emphasized Text</em>
<strong>Strong Text</strong>
<small>Smaller Text</small>
<del>Crossed out text</del>
<q>Quoted Text</q>
REAL EXAMPLE CODE:
<p>Today is a <b>beautiful</b> day!</p>
<p>Please study <i>Chapter 5</i> closely.</p>
<p>Don't forget to <u>underline</u> headings in your notebooks.</p>
<p>This is <small>small text</small> and this text is
<del>wrong/deleted</del>.</p>
<p>My teacher said, <q>Practice makes perfect.</q></p>
5. Layout Controls: Line Break (br) and Horizontal Rule (hr)
SYNTAX (The Rules / Template):
<br> (No closing tag needed!)
<hr> (No closing tag needed!)
REAL EXAMPLE CODE:
<p>Line number one starts here.<br>
Line number two starts instantly below it.</p>
<hr>
<p>This text is separated from the top by a clean horizontal dividing
line.</p>
6. Paragraph Tag (p)
SYNTAX (The Rules / Template):
<p>Your block of paragraph text here...</p>
REAL EXAMPLE CODE:
<p>This is paragraph number one. The browser automatically creates a clean
blank space right below it.</p>
<p>This is paragraph number two. See how neat it spreads out?</p>
7. Center Alignment Tag (center)
SYNTAX (The Rules / Template):
<center>Everything inside here gets moved to the middle</center>
REAL EXAMPLE CODE:
<center>
<h1>WELCOME TO MY SITE</h1>
<p>This text is perfectly in the center of the web screen.</p>
</center>
8. Heading Tags (h1 to h6)
SYNTAX (The Rules / Template):
<h1>Biggest Heading</h1>
<h2>Second Biggest Heading</h2>
...
<h6>Smallest Heading</h6>
REAL EXAMPLE CODE:
<h1>Main Title (Heading 1)</h1>
<h2>Sub-Heading (Heading 2)</h2>
<h3>Topic Details (Heading 3)</h3>
<h4>Small Topic (Heading 4)</h4>
<h5>Tiny Note (Heading 5)</h5>
<h6>Microscopic Text (Heading 6)</h6>
★ Tip for Beginners: h1 is the king header! It is the largest. As the numbers go
up (h2, h3...), the text size goes down.
9. Hyperlinks (a) and Image Tags (img)
SYNTAX (The Rules / Template):
<a href="website_link">Click me</a>
<img src="picture_name.png" alt="text description" width="200"
height="100">
REAL EXAMPLE CODE:
<!-- Example of a link opening a website -->
Click here to go to <a href="[Link]
<!-- Example of embedding a picture diagram -->
<img src="student_photo.jpg" alt="A profile picture" width="150"
height="150">
10. Numbered Lists (ol) and Bullet Lists (ul)
SYNTAX (The Rules / Template):
<!-- Ordered/Numbered List -->
<ol type="1">
<li>First Item</li>
<li>Second Item</li>
</ol>
<!-- Unordered/Bullet List -->
<ul type="disc">
<li>Bullet Item 1</li>
<li>Bullet Item 2</li>
</ul>
REAL EXAMPLE CODE:
<h3>My Checklist:</h3>
<ol>
<li>Wake up early at 6 AM</li>
<li>Review HTML tags</li>
</ol>
<h3>My Favorite Fruits:</h3>
<ul>
<li>Mango</li>
<li>Apple</li>
</ul>
11. Moving Text: Marquee Tag
SYNTAX (The Rules / Template):
<marquee direction="left" scrollamount="5">Moving text goes here</marquee>
REAL EXAMPLE CODE:
<marquee direction="left" scrollamount="3">
🔥 Flash News: Computer Science Practical Exam next Thursday!
</marquee>
12. Simple Data Tables (table, tr, td, th)
SYNTAX (The Rules / Template):
<table border="1">
<tr>
<th>Header Text</th>
</tr>
<tr>
<td>Data goes here</td>
</tr>
</table>
REAL EXAMPLE CODE:
<table border="1">
<tr>
<th>Roll No</th>
<th>Student Name</th>
</tr>
<tr>
<td>101</td>
<td>Rajesh Kumar</td>
</tr>
<tr>
<td>102</td>
<td>Sita Sharma</td>
</tr>
</table>
13. Interactive Forms (form, input, textarea, select, div)
SYNTAX (The Rules / Template):
<form>
<div>
<input type="text|radio|checkbox">
</div>
<textarea></textarea>
<select><option>Drop Down</option></select>
</form>
REAL EXAMPLE CODE:
<form>
<div style="margin-bottom: 10px;">
<label>Your Username:</label>
<input type="text" placeholder="Enter name">
</div>
<div style="margin-bottom: 10px;">
<label>Select Gender:</label>
<input type="radio" name="gender" value="M"> Male
<input type="radio" name="gender" value="F"> Female
</div>
<div style="margin-bottom: 10px;">
<input type="checkbox" checked> I agree to terms.
</div>
<div style="margin-bottom: 10px;">
<label>Select Grade Class:</label>
<select>
<option>Class 9 - Section A</option>
<option>Class 9 - Section B</option>
</select>
</div>
<div>
<label>Type Feedback thoughts:</label><br>
<textarea rows="3" cols="20">Good site.</textarea>
</div>
</form>