HTML Basics to Advanced Guide
1. HTML Basics
HTML stands for HyperText Markup Language. It is used to structure content on the web.
Basic HTML Document Structure:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>Hello World</h1>
<p>This is a simple paragraph.</p> </body> </html>
Common Questions
Q1. What is the purpose of the <!DOCTYPE html> declaration?
■ It tells the browser the version of HTML being used, ensuring proper rendering.
Q2. What are semantic HTML elements?
■ Tags like <header>, <footer>, <article>, <section>, <nav> that clearly describe their meaning to
both browsers and developers.
2. HTML Elements and Attributes
Common Elements:
- Headings: <h1> to <h6>
- Paragraph: <p>
- Links: <a href="url">Link</a>
- Images: <img src="path" alt="description">
- Lists: Ordered <ol><li>Item</li></ol>, Unordered <ul><li>Item</li></ul>
- Tables: <table><tr><td>Data</td></tr></table>
Common Questions
Q3. What is the difference between block-level and inline elements?
■ Block-level elements occupy full width and start on a new line. Inline elements occupy as much
width as necessary without starting a new line.
Q4. What are some common attributes in HTML?
■ id, class, style, src, href, alt
3. Forms and Input Elements
Example Form:
<form action="/submit" method="post"> <label for="name">Name:</label> <input type="text"
id="name" name="name"> <input type="submit" value="Submit"> </form>
Common Questions
Q5. What are different types of input fields?
■ text, password, email, number, date, checkbox, radio, file, submit, reset
Q6. What is the purpose of the action and method attributes in a form?
■ action specifies the URL where form data is sent; method specifies HTTP method (GET or
POST).
4. HTML5 New Features
New Semantic Elements: <article>, <section>, <nav>, <aside>, <main>
Multimedia Example:
<video controls> <source src="movie.mp4" type="video/mp4"> </video> <audio controls> <source
src="audio.mp3" type="audio/mpeg"> </audio>
Common Questions
Q7. What is the purpose of the <canvas> element?
■ To draw graphics using JavaScript.
Q8. How does the <meter> tag differ from <progress>?
■ <meter> shows a scalar value; <progress> shows task completion.
5. HTML Accessibility (ARIA)
Example: <button aria-label="Close">X</button>
Common Questions
Q9. What does ARIA stand for and why is it important?
■ Accessible Rich Internet Applications – helps assistive technologies.
Q10. Give examples of common ARIA roles.
■ role="button", role="navigation", role="main"
6. HTML Best Practices
Use semantic HTML over generic <div>/<span>.
Avoid inline styles; use CSS classes instead.
Common Questions
Q11. Why use semantic HTML?
■ Improves SEO, accessibility, and readability.
Q12. What is the difference between id and class?
■ id is unique per page; class can be reused.
7. Advanced HTML Concepts
Web Components: <template>, <slot>, custom elements.
Data Attributes Example: <div data-user-id="12345">User Info</div>
Common Questions
Q13. What are data attributes?
■ Custom attributes prefixed with data- to store private data.
Q14. What is the use of the <template> tag?
■ Holds HTML to be used later via JavaScript.
8. SEO Best Practices
Use <title>, <meta description>, semantic tags.
Proper heading hierarchy (<h1> → <h2> → <h3>).
Use alt attributes for images.
Common Questions
Q15. Why are alt attributes important?
■ Improve accessibility, SEO, and fallback display.
Summary Table of Key Tags
Tag | Purpose
<div> | Generic container
<span> | Inline container
<header> | Intro content
<footer> | Footer content
<article> | Self-contained content
<nav> | Navigation links
<section> | Group of related content
<form> | Input forms
<input> | Form input field
<button> | Clickable button
<video> | Video player
<audio> | Audio player
