HTML Notes for Students
A beginner-friendly guide to HTML with examples and explanations.
1. Introduction to HTML
HTML stands for HyperText Markup Language. It is the standard language for creating web pages and
describes the structure of a web page using elements (tags).
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page.</p>
</body>
</html>
2. HTML Elements & Tags
Elements are the building blocks of HTML. They have an opening tag, content, and a closing tag.
<p>This is a paragraph.</p>
Self-closing example:
<img src="[Link]" alt="Description">
<br>
3. Headings
Headings are used for titles or subtitles. <h1> is the most important and <h6> is the least important.
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
4. Paragraphs and Text Formatting
HTML offers various formatting tags to style text.
<p>This is a paragraph.</p>
<b>Bold Text</b>
<strong>Strong Importance</strong>
<i>Italic Text</i>
<em>Emphasized Text</em>
<u>Underlined</u>
<mark>Highlighted</mark>
5. Links
Links connect one page to another.
<a href="[Link] Example</a>
<a href="[Link] target="_blank">Open in new tab</a>
6. Images
Images can be displayed using the <img> tag. Always include alt text.
<img src="[Link]" alt="Beautiful View" width="300">
7. Lists
HTML supports ordered and unordered lists.
Unordered:
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
Ordered:
<ol>
<li>Step One</li>
<li>Step Two</li>
</ol>
8. Tables
Tables are used to display data in rows and columns.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>20</td>
</tr>
</table>
9. Forms
Forms collect user input.
<form action="/submit" method="post">
<label>Name:</label>
<input type="text" name="username">
<input type="submit" value="Send">
</form>
10. Comments
Comments are ignored by browsers and help in documentation.
<!-- This is a comment -->
11. HTML5 Semantic Tags
Semantic tags give meaning to the content: , , , , , .
<header>Header Content</header>
<nav>Menu Links</nav>
<main>Main Content</main>
<footer>Footer Content</footer>
12. Best Practices
Tips for writing clean HTML: - Always close tags properly. - Use semantic tags for better SEO. - Keep code
clean and indented. - Always use alt text for images.