HTML Basics – Beginner's Guide
1. What is HTML?
• HTML stands for HyperText Markup Language.
• It is the standard language used to structure web pages.
• Think of it like the skeleton of a website.
2. Basic Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
• <!DOCTYPE html> → tells the browser this is HTML5.
• <html> → root element.
• <head> → info about the page (title, metadata).
• <body> → content that appears on the page.
3. Common HTML Tags
Headings
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
Paragraph
<p>This is a paragraph of text.</p>
1
Links
<a href="https://google.com">Go to Google</a>
Images
<img src="cat.jpg" alt="Cute Cat">
Lists
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
Tables
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Ana</td>
<td>21</td>
</tr>
</table>
Forms
<form>
<input type="text" placeholder="Your name">
<button>Submit</button>
</form>
4. Semantic HTML
• Helps structure your page in a meaningful way.
• Common semantic tags:
• <header> → top of the page or section.
2
• <footer> → bottom of the page.
• <section> → groups related content.
• <article> → standalone piece of content.
Example:
<header>
<h1>My Website</h1>
</header>
<section>
<article>
<h2>Blog Post</h2>
<p>This is a blog post content.</p>
</article>
</section>
<footer>
<p>© 2025 My Website</p>
</footer>
5. Practice Activity
Build a simple profile page: - A heading with your name. - A paragraph with a short intro. - An image of
yourself or avatar. - A list of hobbies. - A link to your favorite site. - A simple form for "Contact Me".
6. Key Takeaways
• HTML = Structure (not style).
• Learn the most common tags first.
• Always use semantic tags for better structure.
• Combine with CSS later to make it look good!
