HTML Boilerplate Structure
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
</body>
</html>
✅ Important HTML Tags to Practice
1. Headings
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
👉 Used for titles and subtitles. Levels go from <h1> (most important) to <h6>.
2. Paragraph
<p>This is a paragraph of text.</p>
3. Line Break & Horizontal Line
<p>This is the first line.<br>This is the second line.</p>
<hr>
<br> = line break
<hr> = horizontal rule (line divider)
4. Text Formatting
<b>Bold</b>
<i>Italic</i>
<u>Underline</u>
<small>Small text</small>
<mark>Highlighted</mark>
<sup>2</sup>
<sub>2</sub>
5. Lists
• Unordered List:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
• Ordered List:
<ol>
<li>First</li>
<li>Second</li>
</ol>
6. Links
<a href="https://www.example.com" target="_blank">Visit Example</a>
7. Images
<img src="image.jpg" alt="Description" width="300">
8. Tables
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
9. Forms
<form action="submit.html" method="post">
Name: <input type="text" name="name"><br>
Email: <input type="email" name="email"><br>
<input type="submit" value="Submit">
</form>
10. Comments
<!-- This is a comment -->
11. Div and Span
<div>This is a block-level container</div>
<span>This is inline text</span>
12. Semantic Tags (HTML5 Layout Tags)
These tags improve accessibility and SEO.
<header>This is the page header</header>
<nav>This is the navigation menu</nav>
<main>This is the main content area</main>
<article>This is an article section</article>
<aside>This is a sidebar</aside>
<footer>This is the page footer</footer>
13. Input Types
Practice various input fields in forms:
<form>
Text: <input type="text"><br>
Password: <input type="password"><br>
Email: <input type="email"><br>
Number: <input type="number"><br>
Date: <input type="date"><br>
Checkbox: <input type="checkbox"> I agree<br>
Radio: <input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female<br>
File: <input type="file"><br>
Color: <input type="color"><br>
Range: <input type="range"><br>
Submit: <input type="submit" value="Submit">
</form>
14. Textarea
<textarea rows="4" cols="50">Write your comments here...</textarea>
15. Select Dropdown
<select>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
16. Audio and Video
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
17. Progress Bar
<progress value="70" max="100"></progress>
18. Meter (for measurement like score, level)
<meter value="6" min="0" max="10">6 out of 10</meter>
19. Details and Summary (Collapsible Content)
<details>
<summary>Click to see more</summary>
<p>This is hidden content until clicked.</p>
</details>
20. Code and Preformatted Text
<code>print("Hello, world!")</code>
<pre>
for i in range(5):
print(i)
</pre>
21. Blockquote and Cite
<blockquote cite="https://www.example.com">
"This is a famous quote from a source."
</blockquote>
<cite>– Author Name</cite>
Practice Activity Idea
Create a "Profile Page" with:
<header> and <footer>
A <form> to collect user info
An <article> section for a user bio
An embedded <audio> or <video>
Use of <progress> or <meter>
Use of <details> to show/hide extra info
Semantic Tags (HTML5 Layout Tags)
These tags improve accessibility and SEO.
<header>This is the page header</header>
<nav>This is the navigation menu</nav>
<main>This is the main content area</main>
<article>This is an article section</article>
<aside>This is a sidebar</aside>
<footer>This is the page footer</footer>
13. Input Types
Practice various input fields in forms:
<form>
Text: <input type="text"><br>
Password: <input type="password"><br>
Email: <input type="email"><br>
Number: <input type="number"><br>
Date: <input type="date"><br>
Checkbox: <input type="checkbox"> I agree<br>
Radio: <input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female<br>
File: <input type="file"><br>
Color: <input type="color"><br>
Range: <input type="range"><br>
Submit: <input type="submit" value="Submit">
</form>
14. Textarea
<textarea rows="4" cols="50">Write your comments here...</textarea>
15. Select Dropdown
<select>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
16. Audio and Video
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
17. Progress Bar
<progress value="70" max="100"></progress>
18. Meter (for measurement like score, level)
<meter value="6" min="0" max="10">6 out of 10</meter>
19. Details and Summary (Collapsible Content)
<details>
<summary>Click to see more</summary>
<p>This is hidden content until clicked.</p>
</details>
20. Code and Preformatted Text
<code>print("Hello, world!")</code>
<pre>
for i in range(5):
print(i)
</pre>
21. Blockquote and Cite
<blockquote cite="https://www.example.com">
"This is a famous quote from a source."
</blockquote>
<cite>– Author Name</cite>
Practice Activity Idea
Create a "Profile Page" with:
<header> and <footer>
A <form> to collect user info
An <article> section for a user bio
An embedded <audio> or <video>
Use of <progress> or <meter>
Use of <details> to show/hide extra info
✅ Basic HTML Interview Questions
1. What is HTML?
Ans: HTML (HyperText Markup Language) is the standard language used to create web pages. It
defines the structure of a webpage using tags.
2. What are tags and elements in HTML?
Ans:
Tag: A keyword wrapped in angle brackets, e.g., <p>.
Element: A tag along with its content, e.g., <p>Hello</p>.
3. What is the difference between <div> and <span>?
Ans:
<div> is a block-level element (takes full width).
<span> is an inline element (takes only as much width as needed).
4. What are semantic HTML tags?
Ans: Tags that describe the meaning of the content, such as:
<header>, <nav>, <article>, <section>, <footer>
5. What is the use of the alt attribute in <img>?
Ans: It provides alternative text for the image if it fails to load and improves accessibility.
6. What is the difference between id and class attributes?
Ans:
id is unique for one element only.
class can be reused on multiple elements.
7. How is a hyperlink created in HTML?
Ans:
<a href="https://example.com">Click Here</a>
8. What is the difference between <ol>, <ul>, and <dl>?
Ans:
<ol>: Ordered list (numbered)
<ul>: Unordered list (bulleted)
<dl>: Definition list
9. What does the <meta> tag do?
Ans: It provides metadata like character set, author, description, or viewport settings.
Example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10. What is the purpose of the <!DOCTYPE html> declaration?
Ans: It tells the browser to use HTML5 standards for rendering the page.
💡 Intermediate HTML Questions
11. What are self-closing tags? Give examples.
Ans: Tags that do not need a closing tag.
Examples: <br>, <hr>, <img>, <input>, <meta>
12. What is the use of the target="_blank" attribute in a link?
Ans: It opens the linked document in a new tab.
13. How do you embed a video or audio in HTML?
Ans:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
14. What is the difference between HTML and XHTML?
Ans:
HTML is less strict.
XHTML is stricter, requires well-formed code (like all tags must be closed).
15. What is the role of <script> and <style> tags?
Ans:
<script> is used to include JavaScript.
<style> is used to define CSS styles.
16. What are data attributes in HTML?
Ans:
Custom attributes used to store extra information:
<div data-id="123" data-role="admin"></div>
17. Can you nest one form inside another in HTML?
Ans: No, HTML does not allow nested <form> tags.
18. What is the difference between name and id in form elements?
Ans:
name is used when submitting the form data.
id is used for JavaScript/CSS identification.
19. What is the <noscript> tag used for?
Ans: To define alternate content for users who have disabled JavaScript in their browser.
20. What are void elements?
Ans: Elements that cannot have content or closing tags.
Examples: <img>, <br>, <input>, <hr>, <meta>
