HTML (HyperText Markup Language) is the foundation of every web page. It defines the structure and content of a website using HTML tags. Whether you’re starting web development or want to understand how websites are built, this tutorial will help you learn HTML basics with examples and explain all important HTML tags step by step.
🧱 1. What is HTML?
HTML (HyperText Markup Language) is a markup language used to create web pages. It uses tags enclosed in angle brackets < > to define elements like paragraphs, headings, links, and images.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first paragraph in HTML!</p>
</body>
</html>🏗️ 2. Basic Structure of an HTML Document
Every HTML page follows a simple structure consisting of the following tags:
| Tag | Description |
|---|---|
<!DOCTYPE html> | Declares the document type |
<html> | Wraps the entire HTML document |
<head> | Contains metadata, title, links, and styles |
<body> | Contains all visible content on the page |
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Learn basic HTML structure and tags">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basic Structure</title>
</head>
<body>
<h1>Hello HTML</h1>
<p>This is the structure of an HTML page.</p>
</body>
</html>🧩 3. HTML Headings (<h1> to <h6>)
Headings are used to define titles and subtitles on web pages. <h1> is the main heading, and <h6> is the smallest.
Example:
<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>Use headings with keywords for better SEO optimization, for example:
<h1>HTML Basic Tutorial for Beginners</h1>✍️ 4. Paragraphs and Text Formatting Tags
Paragraphs are defined using the <p> tag. HTML also includes several text formatting tags:
| Tag | Description |
|---|---|
<b> | Bold text |
<i> | Italic text |
<u> | Underlined text |
<strong> | Important text |
<em> | Emphasized text |
<br> | Line break |
<hr> | Horizontal line |
Example:
<p>This is a <b>bold</b> and <i>italic</i> text example.</p>
<p><strong>HTML formatting tags</strong> help style content semantically.</p>
<hr>🔗 5. Links in HTML (<a> Tag)
Links (or anchor tags) connect one page to another using the <a> tag.
Example:
<a href="https://www.webfulcreations.com" target="_blank">Visit Webful Creations</a>
Attributes:
href: The destination URLtarget="_blank": Opens the link in a new tabtitle: Adds tooltip text when hovered
SEO Tip: Use keyword-rich anchor text like:
<a href="https://www.webfulcreations.com/html-tutorial/">Learn HTML Tutorial</a>Read more about absolute links and relative links or if you want to know the difference between absolute and relative links.
🖼️ 6. Images in HTML (<img> Tag)
The <img> tag is used to display images. It’s a self-closing tag.
Example:
<img src="image.jpg" alt="HTML Basic Example" width="400" height="300">
Attributes:
src: Image file pathalt: Alternative text (for accessibility & SEO)width&height: Image dimensions
📋 7. Lists in HTML
HTML supports ordered and unordered lists.
Example:
<h3>Unordered List:</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>Ordered List:</h3>
<ol>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn JavaScript</li>
</ol>We have great details about HTML unordered lists, ordered lists, definition lists.
📦 8. Tables in HTML
Tables organize data in rows and columns using the following tags:
| Tag | Description |
|---|---|
<table> | Defines the table |
<tr> | Defines a table row |
<th> | Defines a table header cell |
<td> | Defines a data cell |
Example:
<table border="1">
<tr>
<th>Language</th>
<th>Usage</th>
</tr>
<tr>
<td>HTML</td>
<td>Structure</td>
</tr>
<tr>
<td>CSS</td>
<td>Styling</td>
</tr>
</table>🧾 9. Forms in HTML
Forms collect user input. They use the <form> tag along with <input>, <textarea>, <select>, and <button>.
Example:
<form action="submit.php" method="POST">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" placeholder="Enter your name"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message"></textarea><br><br>
<button type="submit">Submit</button>
</form>🧱 10. Div and Span Tags
These are container elements used for structuring and styling.
Example:
<div class="container">
<h2>HTML Div Example</h2>
<p>This is inside a div container.</p>
</div>
<p>This is a <span style="color:red;">highlighted</span> word.</p>
<div>: Block-level container<span>: Inline container
🧾 11. Comments in HTML
Comments are ignored by browsers and help developers explain code.
Example:
<!-- This is a comment -->
<p>This paragraph is visible.</p>
⚙️ 12. Semantic HTML Tags
Semantic tags describe content meaningfully, improving SEO and accessibility.
Common Semantic Tags:
<header>– Header section<nav>– Navigation links<article>– Independent content<section>– Grouped content<aside>– Sidebar content<footer>– Footer section
Example:
<header>
<h1>HTML Basic Tutorial</h1>
</header>
<nav>
<a href="#">Home</a> | <a href="#">About</a>
</nav>
<section>
<article>
<h2>Learning HTML</h2>
<p>HTML is the foundation of all websites.</p>
</article>
</section>
<footer>
<p>© 2025 Webful Creations</p>
</footer>
💡 Conclusion
This HTML Basic Tutorial covered all essential HTML tags you need to create a simple web page. With a clear understanding of elements like <head>, <body>, <p>, <a>, <img>, and semantic tags, you can now start building your own websites confidently.
Keep practicing and explore HTML forms, tables, and multimedia tags to enhance your skills.
Get website hosting for your HTML website.
❓ FAQs about HTML Basics
Q1. What is HTML used for?
HTML is used to structure and display content on web pages. It defines elements like text, images, and links.
Q2. Do I need coding experience to learn HTML?
No, HTML is beginner-friendly. You can start learning it even without prior programming knowledge.
Q3. What tools do I need to write HTML?
You only need a text editor (like VS Code or Notepad++) and a browser to view your HTML pages.
Q4. What is the difference between HTML and CSS?
HTML structures the content, while CSS styles it (colors, fonts, layout, etc.).
