Home
Education
D/L Mode
HTML CSS JavaScript Python SQL Node.js PHP Java C++

Welcome to HTML

Start your journey in web development

Lessons

Start learning step by step

Question & Answer

Check your understanding

Interview Asked Questions

Prepare for real interviews

Quiz

Test your skills

💻 HTML Lesson 1: Introduction to HTML

HTML is the backbone of web pages. Let's write your first page!

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>
✔

💻 HTML Lesson 2: HTML Tags

HTML tags define elements like headings, paragraphs, and links.

<h1>Heading 1</h1>
<p>This is a paragraph.</p>
<a href="https://example.com">Link</a>
✔

💻 HTML Lesson 3: Lists

HTML has ordered and unordered lists for grouping items.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>
✔

💻 HTML Lesson 4: Forms

Forms collect user input using text fields, buttons, checkboxes, etc.

<form>
  <input type="text" placeholder="Name">
  <input type="submit" value="Submit">
</form>
✔

💻 HTML Lesson 5: Tables

Tables display structured data in rows and columns.

<table border="1">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>John</td><td>25</td></tr>
</table>
✔

💻 HTML Lesson 6: Images

Images make your webpage visually appealing using the <img> tag.

<img src="image.jpg" alt="My Image">
<img src="logo.png" width="100" height="100">
✔

💻 HTML Lesson 7: Audio & Video

HTML5 allows embedding audio and video directly into pages.

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
✔

💻 HTML Lesson 8: Links & Navigation

Create navigation with hyperlinks and anchor tags.

<a href="https://example.com">Go to Example</a>
<nav>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
</nav>
✔

💻 HTML Lesson 9: Div & Span

Use <div> for blocks and <span> for inline grouping.

<div class="container">
  <h2>Title</h2>
  <p>Paragraph text here.</p>
</div>

<span class="highlight">Important</span>
✔

💻 HTML Lesson 10: Semantic HTML

Semantic tags improve readability and SEO, like <header>, <footer>, <article>.

<header>
  <h1>Website Title</h1>
</header>

<article>
  <h2>Article Heading</h2>
  <p>Content here.</p>
</article>

<footer>
  <p>© 2026</p>
</footer>
✔

💻 HTML Lesson 11: Headings

HTML has 6 heading levels: <h1> to <h6>. Use them for structure and SEO.

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Sub-sub Heading</h3>
✔

💻 HTML Lesson 12: Paragraphs & Text Formatting

Use paragraphs and tags like <strong>, <em>, <mark> for text emphasis.

<p>This is a paragraph.</p>
<strong>Bold text</strong>
<em>Italic text</em>
<mark>Highlighted text</mark>
✔

💻 HTML Lesson 13: Block & Inline Elements

Block elements take full width (<div>, <p>), inline elements only take required width (<span>, <a>).

<div>Block element</div>
<span>Inline element</span>
<a href="#">Link</a>
✔

💻 HTML Lesson 14: Comments

Comments help you explain code and are ignored by browsers.

<!-- This is a comment -->

<!-- 
  Multi-line comment
  describing the following section
-->
✔

💻 HTML Lesson 15: Entities & Special Characters

Use HTML entities to display reserved characters like <, >, &.

<p>5 < 10 && 10 > 5</p>
<p>Copyright &reg; 2026</p>
✔

💻 HTML Lesson 16: Links & Navigation

Links allow navigation between pages or websites using <a> tags.

<a href="https://example.com">Visit Example</a>
<a href="#section2">Go to Section 2</a>
<a href="page2.html" target="_blank">Open in New Tab</a>
✔

💻 HTML Lesson 17: Images

Images are displayed using <img> with src and alt attributes.

<img src="image.jpg" alt="Description" width="300">
<img src="logo.png" alt="Logo" height="100">
✔

💻 HTML Lesson 18: Audio & Video

Add media with <audio> and <video> tags.

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
</audio>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
✔

💻 HTML Lesson 19: Semantic Elements

Semantic tags describe the meaning of content for accessibility and SEO.

<header>Header Section</header>
<nav>Navigation</nav>
<main>Main Content</main>
<article>Blog Post</article>
<footer>Footer Section</footer>
✔

💻 HTML Lesson 20: Iframes

Iframes embed another page or content within your webpage.

<iframe src="https://example.com" width="600" height="400"></iframe>
<iframe src="video.html" frameborder="0"></iframe>
✔

💻 HTML Lesson 21: Meta Tags & SEO Basics

Meta tags provide information about your page to browsers and search engines.

<meta charset="UTF-8">
<meta name="description" content="Learn HTML quickly">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
✔

💻 HTML Lesson 22: Headings & Paragraphs

Use headings (<h1> to <h6>) and paragraphs (<p>) for structured text.

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>This is a paragraph with text.</p>
<p>Another paragraph.</p>
✔

💻 HTML Lesson 23: Div & Span

<div> is for block-level grouping; <span> is for inline text grouping.

<div class="container">
  <h2>Title</h2>
  <p>Paragraph inside div.</p>
</div>

<p>This is important text.</p>
✔

💻 HTML Lesson 24: Block & Inline Elements

Block elements take full width, inline elements only take needed width.

<div>I am a block element</div>
<p>Another block element</p>

<span>I am inline</span>
<a href="#">Link inline</a>
✔

💻 HTML Lesson 25: Comments

Comments are notes in code ignored by browsers.

<!-- This is a single line comment -->

<!--
  This is a
  multi-line comment
-->
✔

💻 HTML Lesson 26: Images & Attributes

Images are added with <img> and can have attributes like src, alt, width, height.

<img src="image.png" alt="My Image" width="200" height="150">
<img src="logo.png" alt="Logo" style="border-radius:8px">
✔

💻 HTML Lesson 27: Links & Navigation

Use <a> for links and navigation.

<a href="https://example.com">Visit Example</a>
<a href="#section2">Go to Section 2</a>
<a href="mailto:someone@example.com">Send Email</a>
✔

💻 HTML Lesson 28: Audio & Video

Embed media with <audio> and <video>.

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support video.
</video>
✔

💻 HTML Lesson 29: Iframes & Embeds

Use <iframe> to embed another page or content.

<iframe src="https://example.com" width="600" height="400"></iframe>

<embed src="file.pdf" width="500" height="400">
✔

💻 HTML Lesson 30: Semantic Elements

Semantic tags describe content meaning and improve accessibility & SEO.

<header>Website Header</header>
<nav>Navigation Links</nav>
<main>Main Content</main>
<section>Section Content</section>
<article>Blog Article</article>
<footer>Website Footer</footer>
🎉 Congratulations! You have completed all HTML lessons!
Keep practicing and building amazing web pages!

💡HTML Questions & Answers

❓ What is HTML?
HTML (HyperText Markup Language) is the standard language used to create and structure web pages. It defines elements like headings, paragraphs, images, and links.
❓ What does HTML stand for?
HTML stands for HyperText Markup Language. It is used to structure content on the web.
❓ What is the purpose of the <head> tag?
The <head> tag contains meta information like title, links to CSS, and other settings that are not visible on the page.
❓ What is the difference between <div> and <span>?
<div> is a block level element (takes full width), while <span> is an inline element (only takes needed space).
❓ What is an HTML attribute?
An attribute provides extra information about an element. Example: <img src="image.jpg" alt="image">
❓ What is the use of the <a> tag?
The <a> tag is used to create hyperlinks that connect one page to another.
❓ What is the difference between HTML and HTML5?
HTML5 is the latest version of HTML. It introduced new features like semantic tags (<header>, <footer>), audio/video support, and better form controls compared to older HTML versions.
❓ What is semantic HTML?
Semantic HTML uses meaningful tags like <article>, <section>, and <nav> to describe the structure and purpose of content, improving readability and SEO.
❓ What is the purpose of the <meta> tag?
The <meta> tag provides metadata about the webpage such as description, keywords, author, and viewport settings for responsive design.
❓ What is the difference between id and class in HTML?
The id attribute is unique and used for one element, while class can be used for multiple elements to apply the same styling or behavior.
❓ What is the alt attribute in images?
The alt attribute provides alternative text for an image if it cannot be displayed. It is also important for accessibility and SEO.
❓ What is the difference between block and inline elements?
Block elements take full width and start on a new line (like <div>, <p>), while inline elements only take the space they need and stay in the same line (like <span>, <a>).
❓ What is the purpose of the <form> tag?
The <form> tag is used to collect user input such as text, passwords, emails, and submit it to a server.
❓ What are self closing tags in HTML?
Self-closing tags do not require a closing tag. Examples include <img>, <br>, and <input>.
❓ What is the difference between <strong> and <b>?
<strong> indicates important text (semantic meaning), while <b> only makes text bold without adding meaning.
❓ What is the difference between <em> and <i>?
<em> emphasizes text with meaning (semantic), while <i> only makes text italic without adding importance.
❓ What is the purpose of the <label> tag?
The <label> tag is used to define a label for form elements. It improves accessibility and allows users to click the label to focus the input field.
❓ What is the difference between <section> and <div>?
<section> is a semantic element used to define meaningful sections of a page, while <div> is a generic container with no specific meaning.
❓ What is the use of the <iframe> tag?
The <iframe> tag is used to embed another webpage or external content inside the current webpage.
❓ What is the difference between absolute and relative URLs?
An absolute URL contains the full web address (https://example.com/page), while a relative URL points to a file within the same website (page.html).
❓ Why is the <alt> attribute important for images?
The alt attribute helps screen readers describe images for visually impaired users and also improves SEO when images cannot load.
❓ What is the difference between GET and POST in forms?
GET sends data in the URL and is used for fetching data, while POST sends data in the request body and is more secure, used for submitting sensitive data.
❓ What is the purpose of the <title> tag?
The <title> tag defines the title of the webpage shown in the browser tab and is important for SEO.
❓ What is the difference between <link> and <script>?
The <link> tag is used to connect external resources like CSS files, while <script> is used to include JavaScript code.
❓ What is the purpose of the viewport meta tag?
It controls how a webpage is displayed on mobile devices, making the layout responsive and properly scaled.
❓ What are data-* attributes in HTML?
Data attributes (data-*) are used to store custom data in HTML elements, which can be accessed using JavaScript.
❓ What is the difference between <script> in head and body?
Scripts in the head load before the page content and may slow rendering, while scripts in the body (especially at the end) load after content, improving performance.
❓ What is the purpose of the <noscript> tag?
The <noscript> tag displays content when JavaScript is disabled in the browser.
❓ What is accessibility in HTML?
Accessibility means designing websites so all users, including people with disabilities, can use them. It involves proper tags, alt text, labels, and semantic HTML.
❓ Why is semantic HTML important?
Semantic HTML improves readability, SEO, and accessibility by clearly describing the meaning and structure of content.

🎯 HTML Interview Questions

❓ What is HTML?
HTML (HyperText Markup Language) is used to structure content on the web using elements like headings, paragraphs, and links.
❓ What is the difference between HTML and CSS?
HTML structures the content of a webpage, while CSS is used to style and design that content.
❓ What is semantic HTML?
Semantic HTML uses meaningful tags like <header>, <article>, and <footer> to describe content clearly.
❓ What is the purpose of the <meta> tag?
It provides metadata such as description, keywords, and viewport settings for responsive design.
❓ What is the difference between id and class?
id is unique for one element, while class can be used for multiple elements.
❓ What are self closing tags?
Self-closing tags do not need a closing tag. Examples include <img>, <br>, and <input>.
❓ What is the difference between block and inline elements?
Block elements take full width and start on a new line, while inline elements only take necessary space and stay in the same line.
❓ What is the <form> tag used for?
The <form> tag is used to collect user input and send it to a server.
❓ What is the difference between <strong> and <b>?
<strong> gives importance (semantic meaning), while <b> only makes text bold without meaning.
❓ What is the purpose of the <alt> attribute?
It provides alternative text for images and improves accessibility and SEO.
❓ What is semantic HTML and why is it important?
Semantic HTML uses meaningful tags (like <header>, <article>, <footer>) to describe content. It improves accessibility, SEO, and code readability.
❓ Difference between <id> and <class> attributes?
<id> is unique for one element, while <class> can be used for multiple elements.
❓ What is the <meta> tag used for?
The <meta> tag provides metadata like character set, viewport, and SEO descriptions.
❓ Difference between <section>, <div>, and <article>?
<div> is generic, <section> groups related content, <article> is for self contained content that could be reused.
❓ What are data- attributes in HTML?
Custom attributes starting with "data-" (e.g., data-user="123") used to store extra info that JS can access.
❓ What is the difference between <iframe> and <object>?
<iframe> embeds another HTML page; <object> can embed any media (HTML, PDF, video, etc.).
❓ What are the different HTML5 input types?
Examples: text, number, email, password, url, date, time, color, range, checkbox, radio, file, etc. These help with validation and user experience.
❓ Explain the difference between <b>, <strong>, <i>, <em>.
<b> and <i> are for visual styling (bold/italic). <strong> and <em> convey semantic importance (bold/italic with meaning).
❓ What are the main differences between HTML and XHTML?
XHTML is stricter: all tags must be closed, lowercase, properly nested, and valid XML syntax. HTML is more flexible and forgiving.
❓ How do you make HTML pages accessible?
Use semantic HTML, proper heading structure, alt text for images, labels for forms, ARIA attributes, and keyboard navigation support.

📝 HTML Quiz: Test Your Knowledge

1. What does HTML stand for?

2. Who is making the Web standards?

3. Choose the correct HTML element for the largest heading:

4. What is the correct HTML element for inserting a line break?

5. Which character is used to indicate an end tag?

6. How can you make a numbered list in HTML?

7. What is the correct HTML for adding a background color?

8. How do you create a hyperlink in HTML?

9. Which HTML element is used to define important text?

10. How can you open a link in a new tab/browser window?

11. Which HTML element defines the title of a document?

12. Which HTML element is used to define an unordered list?

13. Which input type is used to create a checkbox?

14. Which HTML attribute is used to define inline styles?

×