HTML Short Notes
Section 1: Basic Summary
Introduction:
HTML (HyperText Markup Language) is the standard language used to create and design web
pages. It describes the structure of web pages using tags. Basic Structure of an HTML
Document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Content goes here...
</body>
</html>
Common Tags:
<h1> to <h6> — Headings
<p> — Paragraph
<br> — Line Break
<hr> — Horizontal Line
<b> — Bold
<i> — Italic
<u> — Underline
<center> — Center Align
<pre> — Preformatted Text
Attributes:
Provide additional information about elements.
Example: <img src="[Link]" alt="Image">
Section 2: Detailed Notes with Examples
1. HTML Elements:
An element consists of a start tag, content, and an end tag.
Example: <p>This is a paragraph.</p>
2. Headings:
<h1> to <h6> define headings, <h1> being the largest.
3. Paragraphs & Line Breaks:
<p> defines paragraphs, and <br> inserts a line break.
4. Formatting Tags:
<b>, <i>, <u>, <small>, <mark>, <del>, <sup>, <sub>
5. Lists:
- Ordered List: <ol><li>Item</li></ol>
- Unordered List: <ul><li>Item</li></ul>
- Definition List: <dl><dt>Term</dt><dd>Definition</dd></dl>
6. Links:
<a href="[Link] Here</a>
7. Images:
<img src="[Link]" alt="Picture" width="200" height="100">
8. Tables:
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>John</td><td>25</td></tr>
</table>
9. Forms:
<form>
Name: <input type="text" name="name">
<input type="submit" value="Submit">
</form>
10. Frames & Iframes:
<iframe src="[Link] width="300" height="200"></iframe>
11. Multimedia:
<audio controls><source src="song.mp3" type="audio/mpeg"></audio>
<video controls><source src="video.mp4" type="video/mp4"></video>
12. Semantic Elements:
<header>, <footer>, <article>, <section>, <aside>, <nav>
13. Forms Input Types:
text, password, radio, checkbox, submit, reset, button, color, date, email, file, range, etc.
14. HTML5 New Features:
- Semantic tags: <header>, <footer>, <nav>, <article>
- Multimedia: <audio>, <video>
- Local Storage: [Link]()
- Canvas for graphics
Section 3: Exam/Interview Focused Notes
Quick Facts:
- HTML stands for HyperText Markup Language.
- The latest version is HTML5.
- HTML is not case-sensitive.
- Every HTML document must start with <!DOCTYPE html>.
- Comments are written as <!-- comment -->.
Common Tags and Their Use:
- <title> — Sets the title of the web page.
- <meta> — Provides metadata (like charset, description).
- <div> — Defines a division or container.
- <span> — Inline container.
- <a> — Defines hyperlinks.
- <img> — Inserts an image.
- <table> — Creates tables.
- <form> — Used to collect user input.
Common Interview Questions:
1. What is HTML?
→ HTML is a markup language used to create web pages.
2. Difference between HTML and XHTML?
→ XHTML is stricter and XML-based.
3. What is the purpose of <meta> tag?
→ To define metadata about the HTML document.
4. Difference between block and inline elements?
→ Block elements start on a new line; inline elements do not.
5. What are semantic tags?
→ Tags that describe meaning, like <header>, <article>.
6. How to insert a comment in HTML?
→ <!-- comment -->
7. What is the difference between id and class?
→ id is unique; class can be used for multiple elements.
8. What is DOCTYPE in HTML?
→ It tells the browser the version of HTML used.
9. What is the difference between <div> and <span>?
→ <div> is block-level; <span> is inline.
10. Can we use multiple <h1> tags in one page?
→ Yes, but it’s better to use it for main headings only.
