🧑💻 HTML Tutorial for Beginners | Learn Basic Web Development
📌 Introduction: What is HTML?
HTML (Hyper Text Markup Language) is the standard language used to create and structure content on the web. It tells your browser how to display text, images, links, and other elements.
HTML is not a programming language — it’s a markup language, meaning it uses “tags” to mark up content for display.
🧱 1. Basic Structure of an HTML Document
Here is the basic boilerplate code for any HTML page:
html<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>
🧾 Explanation:
<!DOCTYPE html>: Declares the document type<html>: Root element<head>: Contains metadata (title, CSS, scripts)<body>: Content visible on the webpage
📝 2. Headings and Paragraphs
HTML uses heading tags from <h1> to <h6> and paragraphs with <p>.
html<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>This is a paragraph of text.</p>
Use <h1> only once per page for SEO best practices.
🔗 3. Creating Links and Buttons
🔸 Hyperlinks:
html<a href="https://www.example.com">Visit Example</a>
🔸 Button:
html<button>Click Me</button>
You can also use <a> as a button with styling.
🖼️ 4. Adding Images
html<img src="image.jpg" alt="Description of image" width="300" />
src: Path to the imagealt: Text shown if image fails to load (important for accessibility)width/height: Optional for resizing
📋 5. Lists in HTML
🔸 Ordered List:
html<ol>
<li>First</li>
<li>Second</li>
</ol>
🔸 Unordered List:
html<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
📦 6. Tables in HTML
html<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>22</td>
</tr>
</table>
<th>= table header<td>= table data<tr>= table row
🔳 7. Forms and Inputs
html<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="username" />
<input type="submit" value="Submit" />
</form>
You can create text fields, radio buttons, dropdowns, and more using HTML forms.
🎨 8. HTML with CSS Styling (Inline)
html<p style="color:blue; font-size:20px;">This is blue text.</p>
But for better practice, use internal or external CSS (not inline).
🧠 9. Semantic HTML Elements
Use semantic tags for better SEO and structure:
<header><nav><main><section><footer>
These help search engines understand your content better.
🧪 10. HTML Best Practices
- Use proper indentation
- Always close your tags
- Write descriptive
alttext for images - Keep your code readable and organized
- Use comments (
<!-- This is a comment -->) to explain sections
✅ Conclusion
Learning HTML is your first step into web development. Once you’re comfortable with HTML, you can move on to CSS and JavaScript to build complete, interactive websites.