7.1. What is HTML, and what does it stand for?
HTML (HyperText Markup Language) is the standard language used to create and structure content on the web. It acts as the foundation or skeleton of a webpage, defining how elements like text, images, links, and multimedia are organized and displayed in a browser.
- HyperText refers to the ability to link different web pages together using hyperlinks, enabling seamless navigation across the internet.
- Markup Language means HTML uses predefined tags to “mark up” content, instructing the browser on how to render each element (e.g., headings, paragraphs, images).
Key Points:
- HTML structures the content of a webpage.
- It uses tags like
<h1>,<p>,<a>,<img>to define elements. - It works alongside CSS (for styling) and JavaScript (for interactivity).
2. What are HTML tags ?
HTML tags are the basic building blocks of a webpage that tell the browser how to structure and display content. They act like instructions that define whether something should appear as a heading, paragraph, image, or link. Most HTML tags come in pairs, with an opening tag and a closing tag enclosing the content. This helps the browser understand where a particular piece of content starts and ends. Some tags do not require a closing tag and are used for inserting elements like line breaks or images. Tags can also include attributes, which provide additional information such as links or image sources. Overall, HTML tags are essential for organizing content and making webpages readable and visually structured.
ParaGraph
Heading tag:
Link Tag
3. What is the difference between HTML and HTML5 ?
The primary difference between HTML and HTML5 lies in their features, capabilities, and level of modernization.
HTML (HyperText Markup Language) is the standard language used to create web pages. Earlier versions of HTML (such as HTML4) had limited support for multimedia and interactive content. Developers often relied on external plugins like Flash to add video, audio, and animations.
HTML5, the latest version of HTML, was introduced to overcome these limitations and provide a more powerful and efficient way to build modern websites. It offers native support for multimedia, improved performance, and better compatibility across different devices and browsers.
Key Differences
| Feature | HTML | HTML5 |
|---|---|---|
| Multimedia Support | Requires external plugins (e.g., Flash) | Built-in support using <audio> and <video> |
| Graphics | Limited support | Supports <canvas> and SVG for graphics |
| Semantic Elements | Limited (mostly <div>) | New tags like <header>, <footer>, <article>, <section> |
| Storage | Uses cookies (limited) | Supports localStorage and sessionStorage |
| Performance | Slower and less efficient | Faster and optimized for modern web apps |
| Mobile Support | Not mobile-friendly by default | Designed for mobile-first and responsive design |
| APIs | Minimal support | Supports APIs like Geolocation, Drag & Drop, Web Workers |
4. What are Attributes in HTML ?
Attributes in HTML are special properties or additional information added to HTML elements to control their behavior, appearance, or functionality. They are always written inside the opening tag of an element and usually come in name–value pairs.
- Attributes are written as
They are placed inside the opening tag
<a> needs href, <img> needs src)KeyPoints
- Attributes provide extra information about elements
- Always written in the opening tag
- Usually come in name="value" format
- Multiple attributes can be added to a single element
- Values are written inside quotes (" ")
- Some attributes are global (used on any tag), while others are specific
Examples
5. What is the purpose of <!DOCTYPE> declaration ?
The <!DOCTYPE> declaration is used to inform the web browser about the version of HTML being used in the document. It ensures that the browser renders the webpage correctly according to HTML standards.BreakDown
<!DOCTYPE> declaration ?The
<!DOCTYPE> declaration is used to inform the web browser about the version of HTML being used in the document. It ensures that the browser renders the webpage correctly according to HTML standards.-
<!DOCTYPE>is not an HTML tag, it is a declaration - It must always be written at the very top of the HTML document
- For HTML5, the declaration is simple:
<!DOCTYPE html> - It triggers standards mode in browsers
KeyPoints - Ensures consistent rendering across different browsers
- Prevents browsers from switching to quirks mode (old, inconsistent rendering behavior)
- Required in every HTML document
- Does not have a closing tag
Example
6. What is the <head> tag used for?
The <head> tag is used to store metadata and important information about the webpage that is not directly displayed to users but is essential for the browser and search engines.
BreakDown
- Contains elements like:
-
<title> -
<meta> -
<link> -
<style> -
<script>
- It appears before the
<body> tag
-
<title> -
<meta> -
<link> -
<style> -
<script>
<body> tagKeyPoints - Does not display visible content
- Helps in SEO and browser behavior
- Stores page settings and configurations
Example
7. What is the <body> tag?
The <body> tag is used to define the main content of an HTML document. It contains all the elements that are visible to users when they open a webpage in a browser, such as text, images, links, videos, forms, and more
BreakDown
- The
<body> tag comes after the <head> tag - It acts as the display section of the webpage
- Everything inside
<body> is rendered (shown) on the screen
Structure
KeyPoints
7. What is the <body> tag?
The <body> tag is used to define the main content of an HTML document. It contains all the elements that are visible to users when they open a webpage in a browser, such as text, images, links, videos, forms, and more
BreakDown
- The
<body>tag comes after the<head>tag - It acts as the display section of the webpage
- Everything inside
<body>is rendered (shown) on the screen
Structure
KeyPoints
- Only one
<body> tag is allowed per HTML document - It contains all visible elements
- Supports both:
- Block elements →
<div>, <p>, <h1> - Inline elements →
<span>, <a>, <img>
- It is essential for displaying any webpage content
- Without
<body>, nothing meaningful appears on the page
<body> tag is allowed per HTML document - Block elements →
<div>,<p>,<h1> - Inline elements →
<span>,<a>,<img>
<body>, nothing meaningful appears on the pageExample
8.What does the <title> tag do?
The <title> tag defines the title of the webpage, which is displayed on the browser tab and used by search engines.
8.What does the
<title> tag do?The
<title> tag defines the title of the webpage, which is displayed on the browser tab and used by search engines.BreakDown
- Located inside the
<head> section - Contains plain text only
KeyPoints
BreakDown
- Located inside the
<head>section - Contains plain text only
KeyPoints
- Appears on browser tab
- Used in bookmarks and search results
- Important for SEO
Example
Example
9. What are heading in HTML ?
Headings in HTML are used to define titles and subtitles on a webpage. They help organize content into sections and create a clear hierarchy, making the page easier to read for users and understand for search engines
- HTML provides six levels of headings:
<h1> → Most important (main heading)<h2> → Subheading<h3> to <h6> → Less important levels
- Each level represents a hierarchical structure
<h1> should be used for the main title of the page - Headings help in SEO (Search Engine Optimization)
- They improve readability and structure
- Browsers automatically style headings (size decreases from
<h1> to <h6>)
Headings in HTML are used to define titles and subtitles on a webpage. They help organize content into sections and create a clear hierarchy, making the page easier to read for users and understand for search engines
- HTML provides six levels of headings:
<h1>→ Most important (main heading)<h2>→ Subheading<h3>to<h6>→ Less important levels
- Each level represents a hierarchical structure
<h1>should be used for the main title of the page- Headings help in SEO (Search Engine Optimization)
- They improve readability and structure
- Browsers automatically style headings (size decreases from
<h1>to<h6>)
10. What is a paragraph tag?
The <p> tag is used to define a paragraph of text in HTML. It groups sentences together into a readable block. Browsers automatically add spacing before and after paragraphs. It is a block-level element, meaning it starts on a new line. Paragraphs are used for writing content like articles or descriptions. They improve readability and organization of text.- Used for text content
- Block-level element
- Adds spacing automatically
- Improves readability
- Used in content writing
11. What is difference between <br> and <p> ?
Feature <br> Tag<p> TagPurpose Used to insert a simple line break within the same block of text. It is mainly for formatting content where only a small break is needed. Used to define a complete paragraph, grouping related sentences into a structured block of content. Type of Element Inline / void element that does not create a new block or section. Block-level element that creates a separate section in the layout. Content Structure Does not create any structure; it only breaks the line within existing content. Provides proper structure by separating content into meaningful paragraphs. Spacing Behavior Does not add extra spacing; only moves text to the next line. Adds default spacing (margin) before and after the paragraph automatically. Closing Tag Does not have a closing tag (<br> only). Requires both opening and closing tags (<p>...</p>). Usage Context Used in situations like addresses, poems, or line-based formatting where structure is not needed. Used in articles, blogs, and general content where proper readability and structure are important. Semantic Meaning Has no semantic meaning; it is purely presentational. Has semantic meaning; it represents a paragraph of text. Accessibility Not very helpful for screen readers because it does not define meaningful content sections. Improves accessibility as screen readers recognize paragraphs and structure content better. Best Practice Should not be overused for spacing or layout purposes. Recommended for organizing text content properly. Visual Output Text appears on the next line without extra space. Text appears as a separate block with spacing, making it easier to read.
12. What are HTML comments?U
HTML comments are notes added inside the code that are not displayed on the webpage. They are used to explain code, improve readability, and help developers understand the structure of the document. Comments are ignored by the browser and do not affect how the page looks or works. They are also useful for temporarily hiding code during testing or debugging. Even though they are not visible on the page, they can still be seen in the page source
The
<p> tag is used to define a paragraph of text in HTML. It groups sentences together into a readable block. Browsers automatically add spacing before and after paragraphs. It is a block-level element, meaning it starts on a new line. Paragraphs are used for writing content like articles or descriptions. They improve readability and organization of text.- Used for text content
- Block-level element
- Adds spacing automatically
- Improves readability
- Used in content writing
<br> and <p> ?| Feature | <br> Tag | <p> Tag |
|---|---|---|
| Purpose | Used to insert a simple line break within the same block of text. It is mainly for formatting content where only a small break is needed. | Used to define a complete paragraph, grouping related sentences into a structured block of content. |
| Type of Element | Inline / void element that does not create a new block or section. | Block-level element that creates a separate section in the layout. |
| Content Structure | Does not create any structure; it only breaks the line within existing content. | Provides proper structure by separating content into meaningful paragraphs. |
| Spacing Behavior | Does not add extra spacing; only moves text to the next line. | Adds default spacing (margin) before and after the paragraph automatically. |
| Closing Tag | Does not have a closing tag (<br> only). | Requires both opening and closing tags (<p>...</p>). |
| Usage Context | Used in situations like addresses, poems, or line-based formatting where structure is not needed. | Used in articles, blogs, and general content where proper readability and structure are important. |
| Semantic Meaning | Has no semantic meaning; it is purely presentational. | Has semantic meaning; it represents a paragraph of text. |
| Accessibility | Not very helpful for screen readers because it does not define meaningful content sections. | Improves accessibility as screen readers recognize paragraphs and structure content better. |
| Best Practice | Should not be overused for spacing or layout purposes. | Recommended for organizing text content properly. |
| Visual Output | Text appears on the next line without extra space. | Text appears as a separate block with spacing, making it easier to read. |
HTML comments are notes added inside the code that are not displayed on the webpage. They are used to explain code, improve readability, and help developers understand the structure of the document. Comments are ignored by the browser and do not affect how the page looks or works. They are also useful for temporarily hiding code during testing or debugging. Even though they are not visible on the page, they can still be seen in the page source
- Not visible in the browser
- Written using
<!-- --> - Used for explanation and documentation
- Helps in debugging and testing
- Improves code readability
- Can hide code temporarily
- Supports multi-line comments
- Visible in page source
- Should not contain sensitive data
13.What is the <a> tag?
The <a> (anchor) tag in HTML is used to create hyperlinks that allow users to navigate from one page to another or to different sections within the same page. It is one of the most important tags because it connects web pages together, forming the structure of the internet. The <a> tag uses the href attribute to specify the destination of the link. The clickable part inside the tag is called anchor text. It can also be used to link to files, email addresses, or phone numbers. Overall, it plays a key role in navigation and user interaction on websites.
- Used to create hyperlinks
- Uses the
href attribute - Connects web pages and resources
- Can link to external and internal pages
- Anchor text is the clickable part
- Can wrap text, images, or elements
- Supports attributes like
target, title - Essential for website navigation
Example
14. How do you create a hyperlink in HTML
A hyperlink in HTML is created using the <a> (anchor) tag along with the href attribute, which specifies the destination of the link. The text or content placed between the opening and closing <a> tags becomes clickable. When a user clicks this link, they are redirected to another webpage, file, or location. Hyperlinks are essential for navigation on websites and allow users to move between different pages easily. They can link to external websites, internal pages, email addresses, or even sections within the same page.- Use
<a> tag to create hyperlinks -
href attribute defines the destination - Text inside
<a> is clickable - Can link to external websites
- Can link to internal pages (same project)
- Can create email links using
mailto: - Can link to specific sections using
#id - Supports additional attributes like
target
15. What is the difference between absolute and relative URLsFeature Absolute URL Relative URL Definition A complete web address that includes the protocol (https), domain name, and full path to the resource. A URL that specifies the path to a resource relative to the current page’s location. Structure Contains full details: protocol + domain + path Contains only the path (no domain or protocol) Example Format https://www.example.com/images/photo.jpgimages/photo.jpg or ../photo.jpgUsage Used to link to external websites or resources Used to link within the same website/project Dependency Does not depend on current file location Depends on the current file’s directory Flexibility Fixed and always points to the same resource Changes based on folder structure Ease of Maintenance Harder to update if domain changes Easier to maintain within projects Performance Slightly slower due to full path resolution Faster within same website Portability Not portable across domains Easily portable within project Best Practice Use for external links Use for internal navigation
16.What is the <img> tag used for?
The <img> tag in HTML is used to display images on a webpage, making the content more visually appealing and easier to understand. It allows developers to add pictures, icons, and graphics to enhance user experience. The <img> tag is a void element, meaning it does not require a closing tag. It mainly uses the src attribute to specify the location of the image and the alt attribute to provide alternative text if the image cannot be displayed. Images play an important role in improving the design and communication of information on a webpage.
- Used to display images on a webpage
- Void (empty) element → no closing tag
- Uses
src attribute for image path - Uses
alt attribute for description - Improves visual appearance of page
- Supports formats like JPG, PNG, GIF
- Can load images from local or online sources
- Important for UI/UX design
17. What is the alt attribute?
The alt (alternative text) attribute in HTML is used to provide a description of an image inside the <img> tag. It is displayed when the image cannot be loaded due to an error or slow internet connection. The alt text also helps visually impaired users understand the image using screen readers. It plays an important role in accessibility and search engine optimization (SEO). Writing meaningful alt text improves user experience and ensures that the content is still understandable even without images.
- Not visible in the browser
- Written using
<!-- --> - Used for explanation and documentation
- Helps in debugging and testing
- Improves code readability
- Can hide code temporarily
- Supports multi-line comments
- Visible in page source
- Should not contain sensitive data
<a> tag?The
<a> (anchor) tag in HTML is used to create hyperlinks that allow users to navigate from one page to another or to different sections within the same page. It is one of the most important tags because it connects web pages together, forming the structure of the internet. The <a> tag uses the href attribute to specify the destination of the link. The clickable part inside the tag is called anchor text. It can also be used to link to files, email addresses, or phone numbers. Overall, it plays a key role in navigation and user interaction on websites.- Used to create hyperlinks
- Uses the
hrefattribute - Connects web pages and resources
- Can link to external and internal pages
- Anchor text is the clickable part
- Can wrap text, images, or elements
- Supports attributes like
target,title - Essential for website navigation
A hyperlink in HTML is created using the
<a> (anchor) tag along with the href attribute, which specifies the destination of the link. The text or content placed between the opening and closing <a> tags becomes clickable. When a user clicks this link, they are redirected to another webpage, file, or location. Hyperlinks are essential for navigation on websites and allow users to move between different pages easily. They can link to external websites, internal pages, email addresses, or even sections within the same page.- Use
<a>tag to create hyperlinks -
hrefattribute defines the destination - Text inside
<a>is clickable - Can link to external websites
- Can link to internal pages (same project)
- Can create email links using
mailto: - Can link to specific sections using
#id - Supports additional attributes like
target
| Feature | Absolute URL | Relative URL |
|---|---|---|
| Definition | A complete web address that includes the protocol (https), domain name, and full path to the resource. | A URL that specifies the path to a resource relative to the current page’s location. |
| Structure | Contains full details: protocol + domain + path | Contains only the path (no domain or protocol) |
| Example Format | https://www.example.com/images/photo.jpg | images/photo.jpg or ../photo.jpg |
| Usage | Used to link to external websites or resources | Used to link within the same website/project |
| Dependency | Does not depend on current file location | Depends on the current file’s directory |
| Flexibility | Fixed and always points to the same resource | Changes based on folder structure |
| Ease of Maintenance | Harder to update if domain changes | Easier to maintain within projects |
| Performance | Slightly slower due to full path resolution | Faster within same website |
| Portability | Not portable across domains | Easily portable within project |
| Best Practice | Use for external links | Use for internal navigation |
16.What is the
<img> tag used for?The
<img> tag in HTML is used to display images on a webpage, making the content more visually appealing and easier to understand. It allows developers to add pictures, icons, and graphics to enhance user experience. The <img> tag is a void element, meaning it does not require a closing tag. It mainly uses the src attribute to specify the location of the image and the alt attribute to provide alternative text if the image cannot be displayed. Images play an important role in improving the design and communication of information on a webpage.- Used to display images on a webpage
- Void (empty) element → no closing tag
- Uses
srcattribute for image path - Uses
altattribute for description - Improves visual appearance of page
- Supports formats like JPG, PNG, GIF
- Can load images from local or online sources
- Important for UI/UX design
alt attribute?The
alt (alternative text) attribute in HTML is used to provide a description of an image inside the <img> tag. It is displayed when the image cannot be loaded due to an error or slow internet connection. The alt text also helps visually impaired users understand the image using screen readers. It plays an important role in accessibility and search engine optimization (SEO). Writing meaningful alt text improves user experience and ensures that the content is still understandable even without images.- Provides alternative text for images
- Used inside the
<img> tag - Displays when image fails to load
- Helps visually impaired users (accessibility)
- Improves SEO
- Should be clear and descriptive
- Important for web standards
- Enhances user experience
18. What are block-level elements?
Block-level elements in HTML are elements that take up the full width available and always start on a new line. They create a “block” of content, meaning anything that comes after them appears on the next line. These elements are mainly used to structure and organize the layout of a webpage. They can contain other block-level elements as well as inline elements. Block-level elements are essential for building sections like headers, paragraphs, and containers. They help in creating a clear and readable page structure
- Provides alternative text for images
- Used inside the
<img>tag - Displays when image fails to load
- Helps visually impaired users (accessibility)
- Improves SEO
- Should be clear and descriptive
- Important for web standards
- Enhances user experience
18. What are block-level elements?
Block-level elements in HTML are elements that take up the full width available and always start on a new line. They create a “block” of content, meaning anything that comes after them appears on the next line. These elements are mainly used to structure and organize the layout of a webpage. They can contain other block-level elements as well as inline elements. Block-level elements are essential for building sections like headers, paragraphs, and containers. They help in creating a clear and readable page structure
- Always start on a new line
- Take full width of the container
- Used for structuring content
- Can contain block and inline elements
- Create visible sections on a page
- Important for layout design
- Common examples:
<div>, <p>, <h1>
19. What are inline elements?
Inline elements in HTML are elements that do not start on a new line and only take up as much width as necessary. They are used to style or format small parts of content within a line, such as a word or phrase. Unlike block-level elements, inline elements stay within the flow of text. They cannot contain block-level elements but can contain other inline elements. These elements are mainly used for styling, linking, or highlighting content. Inline elements help in making specific parts of text visually distinct without breaking the layout.
- Do not start on a new line
- Take only required width
- Stay within the same line
- Used for styling or formatting text
- Cannot contain block-level elements
- Can contain other inline elements
- Common examples:
<span>, <a>, <b>, <i>
- Always start on a new line
- Take full width of the container
- Used for structuring content
- Can contain block and inline elements
- Create visible sections on a page
- Important for layout design
- Common examples:
<div>,<p>,<h1>
19. What are inline elements?
Inline elements in HTML are elements that do not start on a new line and only take up as much width as necessary. They are used to style or format small parts of content within a line, such as a word or phrase. Unlike block-level elements, inline elements stay within the flow of text. They cannot contain block-level elements but can contain other inline elements. These elements are mainly used for styling, linking, or highlighting content. Inline elements help in making specific parts of text visually distinct without breaking the layout.
- Do not start on a new line
- Take only required width
- Stay within the same line
- Used for styling or formatting text
- Cannot contain block-level elements
- Can contain other inline elements
- Common examples:
<span>,<a>,<b>,<i>
20.What is the difference between block and inline elements?Feature Block-level Elements Inline Elements Definition Elements that take up the full width available and start on a new line. Elements that take only the necessary width and do not start on a new line. Layout Behavior Always begin on a new line and push other elements below them. Stay within the same line and flow with surrounding text. Width Occupy the entire width of the parent container by default. Occupy only as much width as their content requires. Structure Purpose Used to create the main structure and layout of a webpage. Used to style or format small parts of content within a line. Content Capability Can contain both block-level and inline elements. Can only contain other inline elements (generally). Spacing Adds space (margin) before and after the element automatically. Does not add extra spacing before or after. Common Usage Used for sections, paragraphs, headings, and containers. Used for links, styling text, highlighting content. Examples <div>, <p>, <h1>, <section><span>, <a>, <b>, <i>Visual Appearance Appears as a separate block on the page. Appears inline with other content. Control with CSS Can easily control width, height, margin, padding. Limited control over width/height unless styled.
21. What is the <div> tag?
The <div> tag in HTML is a block-level container used to group and organize other elements on a webpage. It does not have any specific meaning by itself, which is why it is called a non-semantic tag. Developers mainly use <div> to structure layouts and apply styles using CSS. It can contain both block-level and inline elements inside it. The <div> tag is widely used in web design for creating sections like headers, footers, and content areas. It helps in organizing code and making complex layouts easier to manage.
- Block-level element
- Used as a container for other elements
- Has no semantic meaning (generic tag)
- Takes full width of the page
- Used for layout and structure
- Works with CSS for styling and positioning
- Can contain both block and inline elements
| Feature | Block-level Elements | Inline Elements |
|---|---|---|
| Definition | Elements that take up the full width available and start on a new line. | Elements that take only the necessary width and do not start on a new line. |
| Layout Behavior | Always begin on a new line and push other elements below them. | Stay within the same line and flow with surrounding text. |
| Width | Occupy the entire width of the parent container by default. | Occupy only as much width as their content requires. |
| Structure Purpose | Used to create the main structure and layout of a webpage. | Used to style or format small parts of content within a line. |
| Content Capability | Can contain both block-level and inline elements. | Can only contain other inline elements (generally). |
| Spacing | Adds space (margin) before and after the element automatically. | Does not add extra spacing before or after. |
| Common Usage | Used for sections, paragraphs, headings, and containers. | Used for links, styling text, highlighting content. |
| Examples | <div>, <p>, <h1>, <section> | <span>, <a>, <b>, <i> |
| Visual Appearance | Appears as a separate block on the page. | Appears inline with other content. |
| Control with CSS | Can easily control width, height, margin, padding. | Limited control over width/height unless styled. |
<div> tag?The
<div> tag in HTML is a block-level container used to group and organize other elements on a webpage. It does not have any specific meaning by itself, which is why it is called a non-semantic tag. Developers mainly use <div> to structure layouts and apply styles using CSS. It can contain both block-level and inline elements inside it. The <div> tag is widely used in web design for creating sections like headers, footers, and content areas. It helps in organizing code and making complex layouts easier to manage.- Block-level element
- Used as a container for other elements
- Has no semantic meaning (generic tag)
- Takes full width of the page
- Used for layout and structure
- Works with CSS for styling and positioning
- Can contain both block and inline elements
22.What is the <span> tag?
The <span> tag in HTML is an inline container used to group small portions of text or elements within a line. It does not have any specific meaning by itself, so it is considered a non-semantic tag. It is mainly used to apply styles or manipulate specific parts of text using CSS or JavaScript. Unlike <div>, it does not start on a new line and only takes up as much space as needed. The <span> tag is commonly used for highlighting text, changing colors, or applying fonts to selected words. It helps in styling content without breaking the flow of the text.
<span> tag?The
<span> tag in HTML is an inline container used to group small portions of text or elements within a line. It does not have any specific meaning by itself, so it is considered a non-semantic tag. It is mainly used to apply styles or manipulate specific parts of text using CSS or JavaScript. Unlike <div>, it does not start on a new line and only takes up as much space as needed. The <span> tag is commonly used for highlighting text, changing colors, or applying fonts to selected words. It helps in styling content without breaking the flow of the text.- Inline element
- Does not start on a new line
- Takes only required width
- Used to style small parts of text
- Non-semantic (no specific meaning)
- Works with CSS and JavaScript
- Can contain other inline elements
- Commonly used for highlighting
23.What are lists in HTML?
Lists in HTML are used to display a group of related items in an organized and structured way. They help present information clearly, making it easier for users to read and understand. HTML provides different types of lists depending on how the information needs to be displayed. Lists are commonly used for menus, steps, features, or grouped data on webpages. Each list contains list items defined using the <li> tag. Using lists improves both readability and the overall structure of a webpage.
- Used to group related items
- Improves readability and organization
- Contains list items (
<li>) - Three main types of lists:
- Ordered list (
<ol>) - Unordered list (
<ul>) - Description list (
<dl>)
- Widely used in menus and navigation
- Helps structure content clearly
- Inline element
- Does not start on a new line
- Takes only required width
- Used to style small parts of text
- Non-semantic (no specific meaning)
- Works with CSS and JavaScript
- Can contain other inline elements
- Commonly used for highlighting
Lists in HTML are used to display a group of related items in an organized and structured way. They help present information clearly, making it easier for users to read and understand. HTML provides different types of lists depending on how the information needs to be displayed. Lists are commonly used for menus, steps, features, or grouped data on webpages. Each list contains list items defined using the
<li> tag. Using lists improves both readability and the overall structure of a webpage.- Used to group related items
- Improves readability and organization
- Contains list items (
<li>) - Three main types of lists:
- Ordered list (
<ol>) - Unordered list (
<ul>) - Description list (
<dl>)
- Ordered list (
- Widely used in menus and navigation
- Helps structure content clearly
24.What are ordered lists?
Ordered lists in HTML are used to display a list of items in a specific sequence or order. Each item in the list is automatically numbered by the browser, making it useful for steps, instructions, or rankings. Ordered lists are created using the <ol> tag, and each item inside the list is defined using the <li> tag. The numbering can be in different formats such as numbers, letters, or Roman numerals. These lists help present information in a clear, step-by-step manner. They improve readability and make it easy for users to follow a sequence.
- Used for ordered or sequential data
- Created using
<ol> tag - Contains list items
<li> - Automatically numbered
- Supports different numbering styles (1, A, a, I, i)
- Useful for instructions, steps, rankings
- Improves clarity and structure
Ordered lists in HTML are used to display a list of items in a specific sequence or order. Each item in the list is automatically numbered by the browser, making it useful for steps, instructions, or rankings. Ordered lists are created using the
<ol> tag, and each item inside the list is defined using the <li> tag. The numbering can be in different formats such as numbers, letters, or Roman numerals. These lists help present information in a clear, step-by-step manner. They improve readability and make it easy for users to follow a sequence.- Used for ordered or sequential data
- Created using
<ol>tag - Contains list items
<li> - Automatically numbered
- Supports different numbering styles (1, A, a, I, i)
- Useful for instructions, steps, rankings
- Improves clarity and structure
25.What are unordered lists?Unordered lists in HTML are used to display a group of items where the order does not matter. Instead of numbers, each item is marked with bullet points. These lists are commonly used for general items like features, options, or menu items. Unordered lists are created using the <ul> tag, and each item inside the list is defined using the <li> tag. The browser automatically displays bullets for each list item. They help present information in a simple and easy-to-read format.
- Used when order is not important
- Created using
<ul> tag - Contains list items
<li> - Displays bullet points
- Improves readability
- Commonly used in menus and lists
- Bullet styles can be changed using CSS
<ul> tag, and each item inside the list is defined using the <li> tag. The browser automatically displays bullets for each list item. They help present information in a simple and easy-to-read format.- Used when order is not important
- Created using
<ul>tag - Contains list items
<li> - Displays bullet points
- Improves readability
- Commonly used in menus and lists
- Bullet styles can be changed using CSS
26.What is a description list?
A description list in HTML is used to display a list of terms along with their corresponding descriptions. It is useful when you want to present definitions, explanations, or name–value pairs in a structured format. A description list is created using the <dl> tag, where each term is defined using <dt> and its description is written using <dd>. Unlike ordered and unordered lists, it does not use numbers or bullet points. This type of list makes information clearer and easier to understand, especially when explaining concepts.
- Used to show terms and their descriptions
- Created using
<dl> tag -
<dt> represents the term -
<dd> represents the description - Does not use bullets or numbering
- Useful for definitions and explanations
- Improves clarity and readability
27.What is the <table> tag?
The <table> tag in HTML is used to create tables for displaying data in a structured format of rows and columns. It helps organize information clearly so that users can easily read and compare data. A table is made up of rows (<tr>), columns, and cells (<td>), and can also include headers (<th>). The <table> tag acts as a container that holds all these elements together. Tables are commonly used for displaying data like schedules, marks, pricing, and reports. They improve clarity when presenting structured information
- Used to create tables
- Displays data in rows and columns
- Uses
<tr> for rows - Uses
<td> for data cells - Uses
<th> for header cells - Helps organize structured data
- Improves readability
- Can be styled using CSS
28.What are <tr>, <td>, and <th>
Feature <tr> (Table Row)<td> (Table Data)<th> (Table Header)Definition Defines a row in a table. It acts as a container for cells. Defines a normal data cell inside a row. Defines a header cell inside a row. Purpose Used to group cells horizontally in a table. Used to store actual data/content. Used to represent headings for columns or rows. Position Placed inside <table> and contains <td> or <th>. Placed inside <tr>. Placed inside <tr>. Content Type Does not hold direct data; holds cells. Holds text, images, or other HTML content. Holds heading text (labels). Default Styling No special styling. Normal text display. Bold text and centered by default. Importance Forms the structure of rows. Represents data values. Represents headings and improves readability. Usage Mandatory for creating rows in a table. Used for each data value. Used for table headings. Example Role Row container Data inside row Heading inside row
29.What is a form in HTML?
A form in HTML is used to collect input from users and send that data to a server for processing. It is commonly used for tasks like login, registration, search, feedback, and surveys. Forms allow users to enter information through input fields such as text boxes, checkboxes, radio buttons, and dropdowns. The data entered by the user is submitted using a submit button. Forms are created using the <form> tag, which acts as a container for all input elements. They play a key role in making websites interactive.
- Used to collect user input
- Created using
<form> tag - Contains input fields like
<input>, <textarea>, <select> - Used in login, signup, search forms
- Sends data to a server
- Can use GET or POST method
- Improves interactivity of websites
30.What is the action attribute in forms?
The action attribute in an HTML form is used to specify the URL or location where the form data should be sent after submission. When a user fills out a form and clicks the submit button, the browser sends the data to the address defined in the action attribute. This destination is usually a server-side script or a backend page that processes the data. If the action attribute is not specified, the form data is submitted to the same page by default. It plays an important role in connecting the frontend form with backend processing.
- Specifies where form data is sent
- Defined inside the
<form> tag - Contains a URL or file path
- Can point to a server script (like PHP, Node, etc.)
- If omitted, submits to the same page
- Works together with the
method attribute - Essential for form submission
31.What is the method attribute?
The method attribute in an HTML form is used to define how the form data is sent to the server when the form is submitted. It specifies the HTTP method used for data transmission, most commonly GET or POST. The choice of method affects how the data is sent, displayed, and processed. With GET, the data is appended to the URL, while with POST, the data is sent in the request body. If the method is not specified, the default value is GET. This attribute is important for controlling data handling, security, and performance.
- Defines how form data is sent
- Used inside the
<form> tag - Common values:
GET, POST - Default method is
GET GET sends data in URLPOST sends data in request body- Affects security and data visibility
- Works with the
action attribute
32.What is the difference between GET and POST?Feature GET Method POST Method Definition Sends form data as part of the URL in a query string. Sends form data inside the HTTP request body. Data Visibility Data is visible in the browser URL. Data is not visible in the URL. Security Less secure because data is exposed in URL. More secure than GET (but still not encrypted unless using HTTPS). Data Length Limited length (URL size limit). No significant size limit for data. Usage Used for retrieving data (search, filters). Used for sending sensitive or large data (login, forms). Caching Can be cached by browsers. Not cached by default. Bookmarking Can be bookmarked (URL contains data). Cannot be bookmarked. Speed Slightly faster for small requests. Slightly slower due to request body handling. Encoding Type Default encoding in URL format. Can use different encodings (e.g., form-data). Best Use Case When data is not sensitive and small. When data is sensitive or large.
33.What is an input field
An input field in HTML is used to collect data from the user within a form. It is created using the <input> tag and allows users to enter different types of information such as text, numbers, passwords, or selections. Input fields are essential for forms like login pages, registration forms, and search bars. The behavior of an input field is controlled using the type attribute. It is a void element, meaning it does not require a closing tag. Input fields make websites interactive by allowing users to provide data.
- Used to collect user input
- Created using
<input> tag - Controlled using
type attribute - Void element (no closing tag)
- Used in forms like login, signup
- Can accept different types of data
- Important for user interaction
26.What is a description list?
A description list in HTML is used to display a list of terms along with their corresponding descriptions. It is useful when you want to present definitions, explanations, or name–value pairs in a structured format. A description list is created using the <dl> tag, where each term is defined using <dt> and its description is written using <dd>. Unlike ordered and unordered lists, it does not use numbers or bullet points. This type of list makes information clearer and easier to understand, especially when explaining concepts.
- Used to show terms and their descriptions
- Created using
<dl>tag -
<dt>represents the term -
<dd>represents the description - Does not use bullets or numbering
- Useful for definitions and explanations
- Improves clarity and readability
27.What is the <table> tag?
The <table> tag in HTML is used to create tables for displaying data in a structured format of rows and columns. It helps organize information clearly so that users can easily read and compare data. A table is made up of rows (<tr>), columns, and cells (<td>), and can also include headers (<th>). The <table> tag acts as a container that holds all these elements together. Tables are commonly used for displaying data like schedules, marks, pricing, and reports. They improve clarity when presenting structured information
- Used to create tables
- Displays data in rows and columns
- Uses
<tr>for rows - Uses
<td>for data cells - Uses
<th>for header cells - Helps organize structured data
- Improves readability
- Can be styled using CSS
28.What are <tr>, <td>, and <th>
| Feature | <tr> (Table Row) | <td> (Table Data) | <th> (Table Header) |
|---|---|---|---|
| Definition | Defines a row in a table. It acts as a container for cells. | Defines a normal data cell inside a row. | Defines a header cell inside a row. |
| Purpose | Used to group cells horizontally in a table. | Used to store actual data/content. | Used to represent headings for columns or rows. |
| Position | Placed inside <table> and contains <td> or <th>. | Placed inside <tr>. | Placed inside <tr>. |
| Content Type | Does not hold direct data; holds cells. | Holds text, images, or other HTML content. | Holds heading text (labels). |
| Default Styling | No special styling. | Normal text display. | Bold text and centered by default. |
| Importance | Forms the structure of rows. | Represents data values. | Represents headings and improves readability. |
| Usage | Mandatory for creating rows in a table. | Used for each data value. | Used for table headings. |
| Example Role | Row container | Data inside row | Heading inside row |
29.What is a form in HTML?
A form in HTML is used to collect input from users and send that data to a server for processing. It is commonly used for tasks like login, registration, search, feedback, and surveys. Forms allow users to enter information through input fields such as text boxes, checkboxes, radio buttons, and dropdowns. The data entered by the user is submitted using a submit button. Forms are created using the <form> tag, which acts as a container for all input elements. They play a key role in making websites interactive.
- Used to collect user input
- Created using
<form>tag - Contains input fields like
<input>,<textarea>,<select> - Used in login, signup, search forms
- Sends data to a server
- Can use GET or POST method
- Improves interactivity of websites
30.What is the action attribute in forms?
The action attribute in an HTML form is used to specify the URL or location where the form data should be sent after submission. When a user fills out a form and clicks the submit button, the browser sends the data to the address defined in the action attribute. This destination is usually a server-side script or a backend page that processes the data. If the action attribute is not specified, the form data is submitted to the same page by default. It plays an important role in connecting the frontend form with backend processing.
- Specifies where form data is sent
- Defined inside the
<form>tag - Contains a URL or file path
- Can point to a server script (like PHP, Node, etc.)
- If omitted, submits to the same page
- Works together with the
methodattribute - Essential for form submission
31.What is the method attribute?
The method attribute in an HTML form is used to define how the form data is sent to the server when the form is submitted. It specifies the HTTP method used for data transmission, most commonly GET or POST. The choice of method affects how the data is sent, displayed, and processed. With GET, the data is appended to the URL, while with POST, the data is sent in the request body. If the method is not specified, the default value is GET. This attribute is important for controlling data handling, security, and performance.
- Defines how form data is sent
- Used inside the
<form>tag - Common values:
GET,POST - Default method is
GET GETsends data in URLPOSTsends data in request body- Affects security and data visibility
- Works with the
actionattribute
| Feature | GET Method | POST Method |
|---|---|---|
| Definition | Sends form data as part of the URL in a query string. | Sends form data inside the HTTP request body. |
| Data Visibility | Data is visible in the browser URL. | Data is not visible in the URL. |
| Security | Less secure because data is exposed in URL. | More secure than GET (but still not encrypted unless using HTTPS). |
| Data Length | Limited length (URL size limit). | No significant size limit for data. |
| Usage | Used for retrieving data (search, filters). | Used for sending sensitive or large data (login, forms). |
| Caching | Can be cached by browsers. | Not cached by default. |
| Bookmarking | Can be bookmarked (URL contains data). | Cannot be bookmarked. |
| Speed | Slightly faster for small requests. | Slightly slower due to request body handling. |
| Encoding Type | Default encoding in URL format. | Can use different encodings (e.g., form-data). |
| Best Use Case | When data is not sensitive and small. | When data is sensitive or large. |
An input field in HTML is used to collect data from the user within a form. It is created using the
<input> tag and allows users to enter different types of information such as text, numbers, passwords, or selections. Input fields are essential for forms like login pages, registration forms, and search bars. The behavior of an input field is controlled using the type attribute. It is a void element, meaning it does not require a closing tag. Input fields make websites interactive by allowing users to provide data.- Used to collect user input
- Created using
<input>tag - Controlled using
typeattribute - Void element (no closing tag)
- Used in forms like login, signup
- Can accept different types of data
- Important for user interaction
34. What are common input typeCommon input types in HTML define the kind of data a user can enter into an input field. They are specified using the type attribute inside the <input> tag. Different input types are used for different purposes such as text entry, passwords, emails, numbers, and selections. Using the correct input type improves user experience and helps in basic validation. It also allows browsers to provide appropriate keyboards on mobile devices. These input types are widely used in forms like login, registration, and surveys. Choosing the right input type ensures accurate and user-friendly data entry.text → for normal text inputpassword → hides entered charactersemail → accepts email formatnumber → accepts numeric values22.What is the <span> tag? checkbox → select multiple optionsradio → select one option from groupsubmit → submits the formreset → resets form fieldsdate → selects a date
35.What is a checkbox?
A checkbox in HTML is an input element that allows users to select one or more options from a list. It is created using the <input> tag with the type set to "checkbox". Checkboxes are commonly used in forms where multiple selections are allowed, such as choosing hobbies or agreeing to terms and conditions. Each checkbox works independently, meaning users can select or deselect any number of options. When selected, the checkbox sends its value to the server during form submission. It improves user interaction by providing simple selection controls.
36.What is a radio button?
A radio button in HTML is an input element that allows users to select only one option from a group of choices. It is created using the <input> tag with the type set to "radio". Radio buttons are typically used when only a single selection is allowed, such as choosing gender or selecting one answer in a quiz. All radio buttons in a group share the same name attribute, which ensures that selecting one option automatically deselects the others. This makes them different from checkboxes, where multiple selections are allowed. Radio buttons improve user experience by enforcing a single choice.
37.What is the <label> tag?The <label> tag in HTML is used to define a text label for an input element in a form. It helps users understand what information they need to enter in a particular input field. When a label is properly associated with an input, clicking on the label also focuses or selects the input field. This improves usability and accessibility, especially for screen readers. The <label> tag is commonly used with inputs like text fields, checkboxes, and radio buttons. It makes forms more user-friendly and organized.- Used to define a label for input fields
- Improves form usability
- Helps in accessibility (screen readers)
- Clicking label selects or focuses input
- Used with
for attribute or by wrapping input - Commonly used with text, checkbox, and radio inputs
- Makes forms clearer and easier to understand
38.What is the for attribute in label?
The for attribute in the <label> tag is used to associate the label with a specific input element. It connects the label to the input by matching the for value with the id of the input field. When a user clicks on the label text, the corresponding input field gets focused or selected automatically. This improves usability and makes forms easier to interact with. It is especially helpful for accessibility, as screen readers can correctly identify the relationship between labels and inputs. The for attribute is mainly used when the label and input are written separately.- Links label to an input element
- Value of
for must match input’s id - Clicking label focuses/selects input
- Improves user experience
- Enhances accessibility
- Used when label and input are separate
- Works with text, checkbox, radio inputs
39.How do you create a dropdown list?
A dropdown list in HTML is created using the <select> tag. It allows users to choose one option from a list of predefined choices. Each option inside the dropdown is defined using the <option> tag. Dropdown lists are commonly used in forms where space is limited and multiple choices need to be shown in a compact way. When a user clicks on the dropdown, the list expands and displays all available options. It helps improve form design by keeping it clean and organized- Created using
<select> tag - Options are added using
<option> tag - Allows selection from multiple choices
- Only one option is selected by default (unless multiple is used)
- Commonly used in forms like country selection
- Saves space in UI design
- Improves user experience
40.What is the <select> tag?
The <select> tag in HTML is used to create a dropdown list where users can choose one or more options from a predefined set of values. It acts as a container for multiple <option> tags, each representing a selectable item in the list. The <select> element is commonly used in forms to save space and organize choices neatly. By default, it allows only one selection, but it can be modified to allow multiple selections using the multiple attribute. It helps improve user experience by providing a clean and structured way to choose options- Used to create a dropdown list
- Contains multiple
<option> elements - Allows selection of predefined values
- Default is single selection
- Can allow multiple selections using
multiple - Commonly used in forms (country, gender, etc.)
- Improves UI and saves space
.41.What is the <option> tag?The <option> tag in HTML is used to define individual items inside a dropdown list created using the <select> tag. Each <option> represents a single selectable choice that the user can pick. When a form is submitted, the value of the selected <option> is sent to the server. The text between the opening and closing <option> tags is what the user sees, while the value attribute is what gets processed. The <option> tag is essential for building dropdown menus and helps in organizing multiple choices in a clean format.- Used inside
<select> tag - Defines each selectable item in dropdown
- Represents one choice in the list
- Displays visible text to user
- Uses
value attribute for data submission - Can have a default selection using
selected - Essential for dropdown menus
42.What is the <textarea> tag?
The <textarea> tag in HTML is used to create a multi-line input field where users can enter large amounts of text. It is commonly used in forms for comments, feedback, descriptions, or messages. Unlike the <input> tag, which is used for single-line input, <textarea> allows text to span multiple lines. It has both opening and closing tags, and the default size can be controlled using rows and cols attributes. Users can also resize it in most browsers unless restricted using CSS. It is an important form element for collecting detailed user input.
43.What is the <button> tag?
The <button> tag in HTML is used to create a clickable button on a webpage. It is commonly used in forms to submit data, reset fields, or trigger actions using JavaScript. Unlike the <input type="button">, the <button> tag allows you to include text, images, or even other HTML elements inside it. It provides more flexibility and is widely used in modern web design. The behavior of a button is controlled using the type attribute, such as submit, reset, or button. It helps make websites interactive and user-friendly.
44.What is the <meta> tag?
The <meta> tag in HTML is used to provide metadata (information about the webpage) that is not displayed directly on the page. It is placed inside the <head> section of an HTML document. Metadata helps browsers, search engines, and other web services understand important details about the webpage. The <meta> tag is commonly used for setting character encoding, page description, keywords, author name, and responsive design settings. It plays an important role in SEO (Search Engine Optimization) and proper rendering of web pages. Since it does not show visible content, it is only used for background information.
45.What is character encoding in HTML?
Character encoding in HTML is a system that tells the browser how to convert characters (letters, numbers, symbols) into readable text. It ensures that text like alphabets, special symbols, and characters from different languages are displayed correctly on a webpage. Without proper character encoding, text may appear as random symbols or broken characters. The most commonly used encoding in HTML is UTF-8, which supports almost all languages and special characters in the world. Character encoding is defined using the <meta> tag inside the <head> section. It is very important for correct display of content across different devices and browsers.
- Defines how characters are displayed in HTML
- Ensures text is shown correctly in browser
- Prevents broken or unreadable symbols
- Most common encoding: UTF-8
- Supports multiple languages and symbols
- Defined using
<meta charset="UTF-8"> - Placed inside
<head> section - Important for global web compatibility
46.What is lang attribute ?
The lang attribute in HTML is used to specify the language of the content in an HTML document or a specific element. It helps browsers, search engines, and screen readers understand what language the text is written in. This improves accessibility, translation, and proper pronunciation for users who rely on assistive technologies. The lang attribute is usually added to the <html> tag to define the primary language of the entire page. It can also be used on specific elements if only part of the content is in a different language. It plays an important role in making websites more accessible and globally friendly
- Defines language of webpage content
- Used in
<html> or specific elements - Helps browsers and search engines
- Improves accessibility (screen readers)
- Supports translation tools
- Helps correct pronunciation of text
- Uses language codes like
en, fr, hi - Important for global websites
47.What is whitespace in HTML?
Whitespace in HTML refers to spaces, tabs, and line breaks that are used in the code to make it more readable for developers. In normal HTML rendering, the browser ignores extra spaces and line breaks and displays only a single space between words. This means multiple spaces or new lines in the code will not appear as multiple spaces on the webpage. Whitespace is mainly used to organize code properly so it is easier to read, understand, and maintain. It does not affect the actual structure or output of the webpage. However, in certain tags like <pre>, whitespace is preserved exactly as written.
48.What are HTML entities?
HTML entities are special codes used to display reserved characters and symbols that cannot be written directly in HTML. They always start with & and end with ;.
Entity Symbol Meaning / Use <<Less than symbol (used in comparisons) >>Greater than symbol &&Ampersand symbol ""Double quotation mark ''Single quotation mark ©© Copyright symbol ®® Registered trademark symbol €€ Euro currency symbol ££ Pound currency symbol (space) Non-breaking space
49. How do you add symbols in HTML?S
Symbols in HTML can be added using HTML entities, which are special codes that represent characters like currency signs, mathematical symbols, and special punctuation marks. These entities start with an ampersand (&) and end with a semicolon (;). They are used because some symbols either cannot be typed directly or are reserved in HTML. By using entities, the browser correctly displays the symbol instead of treating it as code. Symbols can also sometimes be added using Unicode values. This makes HTML more flexible and globally compatible.
- Use HTML entities to add symbols
- Entities start with
& and end with ; - Used for currency, math, and special characters
- Prevents conflicts with HTML reserved symbols
- Ensures correct display in browsers
- Can also use Unicode values
- Works across all devices and browsers
50.What is the difference between <b> and <strong>?
Feature <b> Tag<strong> TagDefinition The <b> tag is used to make text bold visually without adding extra meaning. The <strong> tag is used to indicate that the text is important or has strong emphasis. Purpose Used only for styling (bold appearance). Used for semantic importance (meaning + bold style). Meaning Has no special meaning in HTML (non-semantic). Has semantic meaning (important content). Display Text appears bold in the browser. Text appears bold in the browser. SEO Impact No impact on search engines. Helps search engines understand important content. Accessibility Screen readers do not emphasize it. Screen readers may read it with emphasis. Usage Used for headings, labels, or visual styling. Used for warnings, important notes, or key points. Best Practice Avoid for important meaning; use only for styling. Preferred for meaningful importance.
51.What is the difference between <i> and <em>?
Feature <i> Tag<em> TagDefinition The <i> tag is used to display text in italics for visual styling. The <em> tag is used to emphasize text with meaning and importance. Purpose Used mainly for styling (italic appearance). Used for semantic emphasis (meaningful stress). Meaning No special meaning in HTML (non-semantic). Has semantic meaning (emphasized content). Display Text appears in italic style. Text appears in italic style. SEO Impact No effect on search engines. Helps search engines understand important content. Accessibility Screen readers do not emphasize it. Screen readers stress or emphasize the word. Usage Used for names, foreign words, or styling. Used for importance, stress, or emphasis in sentences. Best Practice Use for visual styling only. Preferred when meaning or emphasis is needed.
52.What is an email link in HTML?
An email link in HTML is used to open the user’s default email application with a pre-filled email address when clicked. It is created using the <a> tag with the mailto: keyword inside the href attribute. This allows users to directly send emails without manually typing the email address. Email links are commonly used on contact pages or websites where users need to quickly send messages. They improve user convenience and make communication easier. You can also include a subject or body in the email link.
53.How do you open a link in a new tab?
In HTML, a link can be opened in a new tab by using the target attribute inside the <a> (anchor) tag. The value _blank is used to tell the browser to open the linked page in a new tab or new window. This is commonly used when linking to external websites so that the user does not lose the current page. It improves user experience by allowing users to view multiple pages at the same time. The rel="noopener noreferrer" attribute is also often added for security and performance reasons.
- Use
target="_blank" in <a> tag - Opens link in a new tab or window
- Commonly used for external websites
- Keeps current page unchanged
- Improves user navigation experience
- Can be combined with
rel for safety
54.What is the target attribute?
The target attribute in HTML is used inside the <a> tag to define where the linked document should open. It controls how and where the new page is displayed when a user clicks a hyperlink. By using different values, you can decide whether the link opens in the same tab, a new tab, or a specific frame. It is mainly used to improve navigation and user experience on websites. The most commonly used value is _blank, which opens the link in a new tab. Other values help control link behavior within the same window or frames.
- Used inside
<a> tag - Defines where the link opens
- Controls navigation behavior
- Common values:
_blank, _self, _parent, _top _blank opens link in new tab_self opens link in same tab (default)- Improves user experience
- Helps manage page navigation
55.What is the <hr> tag?
The <hr> tag in HTML is used to create a horizontal line (horizontal rule) on a webpage. It represents a thematic break or separation between different sections of content. The <hr> tag is a void element, meaning it does not require a closing tag. It is commonly used to divide content, such as separating paragraphs, sections, or topics. It helps improve readability by visually organizing information on the page. Although it creates a line by default, it can also be styled using CSS.- Creates a horizontal line
- Used to separate content sections
- Represents a thematic break
- Void element (no closing tag)
- Improves readability and structure
- Commonly used between paragraphs or sections
- Can be styled using CSS
56.What is the <pre> tag?
The <pre> tag in HTML is used to display text exactly as it is written, preserving spaces, line breaks, and formatting.
57.What are void (empty) elements in HTML?
Void or empty elements in HTML are tags that do not have a closing tag and cannot contain any content inside them. They are used to perform specific functions like inserting images, line breaks, or inputs in a webpage. These elements are self-contained, meaning they work without needing an opening and closing pair. Since they do not wrap any content, they are written as a single tag. Void elements are important for adding structural or functional components to a webpage.
- Void elements = tags without closing tags that do not contain conten
- Used for adding functional elements like images, breaks, inputs
What is HTML and what does it stand for?
type attribute inside the <input> tag. Different input types are used for different purposes such as text entry, passwords, emails, numbers, and selections. Using the correct input type improves user experience and helps in basic validation. It also allows browsers to provide appropriate keyboards on mobile devices. These input types are widely used in forms like login, registration, and surveys. Choosing the right input type ensures accurate and user-friendly data entry.text→ for normal text inputpassword→ hides entered charactersemail→ accepts email formatnumber→ accepts numeric values22.What is the→ select multiple options<span>tag? checkboxradio→ select one option from groupsubmit→ submits the formreset→ resets form fieldsdate→ selects a date
35.What is a checkbox?
A checkbox in HTML is an input element that allows users to select one or more options from a list. It is created using the <input> tag with the type set to "checkbox". Checkboxes are commonly used in forms where multiple selections are allowed, such as choosing hobbies or agreeing to terms and conditions. Each checkbox works independently, meaning users can select or deselect any number of options. When selected, the checkbox sends its value to the server during form submission. It improves user interaction by providing simple selection controls.
36.What is a radio button?
A radio button in HTML is an input element that allows users to select only one option from a group of choices. It is created using the <input> tag with the type set to "radio". Radio buttons are typically used when only a single selection is allowed, such as choosing gender or selecting one answer in a quiz. All radio buttons in a group share the same name attribute, which ensures that selecting one option automatically deselects the others. This makes them different from checkboxes, where multiple selections are allowed. Radio buttons improve user experience by enforcing a single choice.
<label> tag?<label> tag in HTML is used to define a text label for an input element in a form. It helps users understand what information they need to enter in a particular input field. When a label is properly associated with an input, clicking on the label also focuses or selects the input field. This improves usability and accessibility, especially for screen readers. The <label> tag is commonly used with inputs like text fields, checkboxes, and radio buttons. It makes forms more user-friendly and organized.- Used to define a label for input fields
- Improves form usability
- Helps in accessibility (screen readers)
- Clicking label selects or focuses input
- Used with
forattribute or by wrapping input - Commonly used with text, checkbox, and radio inputs
- Makes forms clearer and easier to understand
for attribute in label?The
for attribute in the <label> tag is used to associate the label with a specific input element. It connects the label to the input by matching the for value with the id of the input field. When a user clicks on the label text, the corresponding input field gets focused or selected automatically. This improves usability and makes forms easier to interact with. It is especially helpful for accessibility, as screen readers can correctly identify the relationship between labels and inputs. The for attribute is mainly used when the label and input are written separately.- Links label to an input element
- Value of
formust match input’sid - Clicking label focuses/selects input
- Improves user experience
- Enhances accessibility
- Used when label and input are separate
- Works with text, checkbox, radio inputs
A dropdown list in HTML is created using the
<select> tag. It allows users to choose one option from a list of predefined choices. Each option inside the dropdown is defined using the <option> tag. Dropdown lists are commonly used in forms where space is limited and multiple choices need to be shown in a compact way. When a user clicks on the dropdown, the list expands and displays all available options. It helps improve form design by keeping it clean and organized- Created using
<select>tag - Options are added using
<option>tag - Allows selection from multiple choices
- Only one option is selected by default (unless multiple is used)
- Commonly used in forms like country selection
- Saves space in UI design
- Improves user experience
<select> tag?The
<select> tag in HTML is used to create a dropdown list where users can choose one or more options from a predefined set of values. It acts as a container for multiple <option> tags, each representing a selectable item in the list. The <select> element is commonly used in forms to save space and organize choices neatly. By default, it allows only one selection, but it can be modified to allow multiple selections using the multiple attribute. It helps improve user experience by providing a clean and structured way to choose options- Used to create a dropdown list
- Contains multiple
<option>elements - Allows selection of predefined values
- Default is single selection
- Can allow multiple selections using
multiple - Commonly used in forms (country, gender, etc.)
- Improves UI and saves space
<option> tag?<option> tag in HTML is used to define individual items inside a dropdown list created using the <select> tag. Each <option> represents a single selectable choice that the user can pick. When a form is submitted, the value of the selected <option> is sent to the server. The text between the opening and closing <option> tags is what the user sees, while the value attribute is what gets processed. The <option> tag is essential for building dropdown menus and helps in organizing multiple choices in a clean format.- Used inside
<select>tag - Defines each selectable item in dropdown
- Represents one choice in the list
- Displays visible text to user
- Uses
valueattribute for data submission - Can have a default selection using
selected - Essential for dropdown menus
<textarea> tag?The
<textarea> tag in HTML is used to create a multi-line input field where users can enter large amounts of text. It is commonly used in forms for comments, feedback, descriptions, or messages. Unlike the <input> tag, which is used for single-line input, <textarea> allows text to span multiple lines. It has both opening and closing tags, and the default size can be controlled using rows and cols attributes. Users can also resize it in most browsers unless restricted using CSS. It is an important form element for collecting detailed user input.43.What is the <button> tag?
The <button> tag in HTML is used to create a clickable button on a webpage. It is commonly used in forms to submit data, reset fields, or trigger actions using JavaScript. Unlike the <input type="button">, the <button> tag allows you to include text, images, or even other HTML elements inside it. It provides more flexibility and is widely used in modern web design. The behavior of a button is controlled using the type attribute, such as submit, reset, or button. It helps make websites interactive and user-friendly.
44.What is the <meta> tag?
The <meta> tag in HTML is used to provide metadata (information about the webpage) that is not displayed directly on the page. It is placed inside the <head> section of an HTML document. Metadata helps browsers, search engines, and other web services understand important details about the webpage. The <meta> tag is commonly used for setting character encoding, page description, keywords, author name, and responsive design settings. It plays an important role in SEO (Search Engine Optimization) and proper rendering of web pages. Since it does not show visible content, it is only used for background information.
45.What is character encoding in HTML?
Character encoding in HTML is a system that tells the browser how to convert characters (letters, numbers, symbols) into readable text. It ensures that text like alphabets, special symbols, and characters from different languages are displayed correctly on a webpage. Without proper character encoding, text may appear as random symbols or broken characters. The most commonly used encoding in HTML is UTF-8, which supports almost all languages and special characters in the world. Character encoding is defined using the <meta> tag inside the <head> section. It is very important for correct display of content across different devices and browsers.
- Defines how characters are displayed in HTML
- Ensures text is shown correctly in browser
- Prevents broken or unreadable symbols
- Most common encoding: UTF-8
- Supports multiple languages and symbols
- Defined using
<meta charset="UTF-8"> - Placed inside
<head>section - Important for global web compatibility
46.What is lang attribute ?
The lang attribute in HTML is used to specify the language of the content in an HTML document or a specific element. It helps browsers, search engines, and screen readers understand what language the text is written in. This improves accessibility, translation, and proper pronunciation for users who rely on assistive technologies. The lang attribute is usually added to the <html> tag to define the primary language of the entire page. It can also be used on specific elements if only part of the content is in a different language. It plays an important role in making websites more accessible and globally friendly
- Defines language of webpage content
- Used in
<html>or specific elements - Helps browsers and search engines
- Improves accessibility (screen readers)
- Supports translation tools
- Helps correct pronunciation of text
- Uses language codes like
en,fr,hi - Important for global websites
47.What is whitespace in HTML?
Whitespace in HTML refers to spaces, tabs, and line breaks that are used in the code to make it more readable for developers. In normal HTML rendering, the browser ignores extra spaces and line breaks and displays only a single space between words. This means multiple spaces or new lines in the code will not appear as multiple spaces on the webpage. Whitespace is mainly used to organize code properly so it is easier to read, understand, and maintain. It does not affect the actual structure or output of the webpage. However, in certain tags like <pre>, whitespace is preserved exactly as written.
48.What are HTML entities?
HTML entities are special codes used to display reserved characters and symbols that cannot be written directly in HTML. They always start with & and end with ;.
| Entity | Symbol | Meaning / Use |
|---|---|---|
< | < | Less than symbol (used in comparisons) |
> | > | Greater than symbol |
& | & | Ampersand symbol |
" | " | Double quotation mark |
' | ' | Single quotation mark |
© | © | Copyright symbol |
® | ® | Registered trademark symbol |
€ | € | Euro currency symbol |
£ | £ | Pound currency symbol |
| (space) | Non-breaking space |
49. How do you add symbols in HTML?S
Symbols in HTML can be added using HTML entities, which are special codes that represent characters like currency signs, mathematical symbols, and special punctuation marks. These entities start with an ampersand (&) and end with a semicolon (;). They are used because some symbols either cannot be typed directly or are reserved in HTML. By using entities, the browser correctly displays the symbol instead of treating it as code. Symbols can also sometimes be added using Unicode values. This makes HTML more flexible and globally compatible.
- Use HTML entities to add symbols
- Entities start with
&and end with; - Used for currency, math, and special characters
- Prevents conflicts with HTML reserved symbols
- Ensures correct display in browsers
- Can also use Unicode values
- Works across all devices and browsers
50.What is the difference between <b> and <strong>?
| Feature | <b> Tag | <strong> Tag |
|---|---|---|
| Definition | The <b> tag is used to make text bold visually without adding extra meaning. | The <strong> tag is used to indicate that the text is important or has strong emphasis. |
| Purpose | Used only for styling (bold appearance). | Used for semantic importance (meaning + bold style). |
| Meaning | Has no special meaning in HTML (non-semantic). | Has semantic meaning (important content). |
| Display | Text appears bold in the browser. | Text appears bold in the browser. |
| SEO Impact | No impact on search engines. | Helps search engines understand important content. |
| Accessibility | Screen readers do not emphasize it. | Screen readers may read it with emphasis. |
| Usage | Used for headings, labels, or visual styling. | Used for warnings, important notes, or key points. |
| Best Practice | Avoid for important meaning; use only for styling. | Preferred for meaningful importance. |
51.What is the difference between <i> and <em>?
| Feature | <i> Tag | <em> Tag |
|---|---|---|
| Definition | The <i> tag is used to display text in italics for visual styling. | The <em> tag is used to emphasize text with meaning and importance. |
| Purpose | Used mainly for styling (italic appearance). | Used for semantic emphasis (meaningful stress). |
| Meaning | No special meaning in HTML (non-semantic). | Has semantic meaning (emphasized content). |
| Display | Text appears in italic style. | Text appears in italic style. |
| SEO Impact | No effect on search engines. | Helps search engines understand important content. |
| Accessibility | Screen readers do not emphasize it. | Screen readers stress or emphasize the word. |
| Usage | Used for names, foreign words, or styling. | Used for importance, stress, or emphasis in sentences. |
| Best Practice | Use for visual styling only. | Preferred when meaning or emphasis is needed. |
52.What is an email link in HTML?
An email link in HTML is used to open the user’s default email application with a pre-filled email address when clicked. It is created using the <a> tag with the mailto: keyword inside the href attribute. This allows users to directly send emails without manually typing the email address. Email links are commonly used on contact pages or websites where users need to quickly send messages. They improve user convenience and make communication easier. You can also include a subject or body in the email link.
53.How do you open a link in a new tab?
In HTML, a link can be opened in a new tab by using the target attribute inside the <a> (anchor) tag. The value _blank is used to tell the browser to open the linked page in a new tab or new window. This is commonly used when linking to external websites so that the user does not lose the current page. It improves user experience by allowing users to view multiple pages at the same time. The rel="noopener noreferrer" attribute is also often added for security and performance reasons.
- Use
target="_blank"in<a>tag - Opens link in a new tab or window
- Commonly used for external websites
- Keeps current page unchanged
- Improves user navigation experience
- Can be combined with
relfor safety
54.What is the target attribute?
The target attribute in HTML is used inside the <a> tag to define where the linked document should open. It controls how and where the new page is displayed when a user clicks a hyperlink. By using different values, you can decide whether the link opens in the same tab, a new tab, or a specific frame. It is mainly used to improve navigation and user experience on websites. The most commonly used value is _blank, which opens the link in a new tab. Other values help control link behavior within the same window or frames.
- Used inside
<a>tag - Defines where the link opens
- Controls navigation behavior
- Common values:
_blank,_self,_parent,_top _blankopens link in new tab_selfopens link in same tab (default)- Improves user experience
- Helps manage page navigation
<hr> tag?The
<hr> tag in HTML is used to create a horizontal line (horizontal rule) on a webpage. It represents a thematic break or separation between different sections of content. The <hr> tag is a void element, meaning it does not require a closing tag. It is commonly used to divide content, such as separating paragraphs, sections, or topics. It helps improve readability by visually organizing information on the page. Although it creates a line by default, it can also be styled using CSS.- Creates a horizontal line
- Used to separate content sections
- Represents a thematic break
- Void element (no closing tag)
- Improves readability and structure
- Commonly used between paragraphs or sections
- Can be styled using CSS
56.What is the <pre> tag?
The <pre> tag in HTML is used to display text exactly as it is written, preserving spaces, line breaks, and formatting.
57.What are void (empty) elements in HTML?
Void or empty elements in HTML are tags that do not have a closing tag and cannot contain any content inside them. They are used to perform specific functions like inserting images, line breaks, or inputs in a webpage. These elements are self-contained, meaning they work without needing an opening and closing pair. Since they do not wrap any content, they are written as a single tag. Void elements are important for adding structural or functional components to a webpage.
- Void elements = tags without closing tags that do not contain conten
- Used for adding functional elements like images, breaks, inputs
What is HTML and what does it stand for?
- What are HTML tags?
- What is the difference between HTML and HTML5?
- What is the basic structure of an HTML document?
- What is the difference between a tag and an element?
- What are attributes in HTML?
- What is the purpose of the
<!DOCTYPE> declaration? - What is the
<head> tag used for? - What is the
<body> tag? - What does the
<title> tag do? - What are headings in HTML?
- What is a paragraph tag?
- What is the difference between
<br> and <p>? - What are HTML comments?
- What is the
<a> tag? - How do you create a hyperlink in HTML?
- What is the difference between absolute and relative URLs?
- What is the
<img> tag used for? - What is the
alt attribute? - What are block-level elements?
- What are inline elements?
- What is the difference between block and inline elements?
- What is the
<div> tag? - What is the
<span> tag? - What are lists in HTML?
- What are ordered lists?
- What are unordered lists?
- What is a description list?
- What is the
<table> tag? - What are
<tr>, <td>, and <th>? - What is a form in HTML?
- What is the
<form> tag? - What is the
action attribute in forms? - What is the
method attribute? - What is the difference between GET and POST?
- What is an input field?
- What are common input types?
- What is a checkbox?
- What is a radio button?
- What is the
<label> tag? - What is the
for attribute in label? - How do you create a dropdown list?
- What is the
<select> tag? - What is the
<option> tag? - What is the
<textarea> tag? - What is the
<button> tag? - What is the
<meta> tag? - What is character encoding in HTML?
- c
- What is whitespace in HTML?
- What are HTML entities?
- How do you add symbols in HTML?
- What is the difference between
<b> and <strong>? - What is the difference between
<i> and <em>? - What is an email link in HTML?
- How do you open a link in a new tab?
- What is the
target attribute? - What is the
<hr> tag? - What is the
<pre> tag? - What are void (empty) elements in HTML?
<!DOCTYPE> declaration? <head> tag used for? <body> tag? <title> tag do? <br> and <p>? <a> tag? <img> tag used for? alt attribute? <div> tag? <span> tag? <table> tag? <tr>, <td>, and <th>? <form> tag? action attribute in forms? method attribute? <label> tag? for attribute in label? <select> tag? <option> tag? <textarea> tag? <button> tag? <meta> tag? <b> and <strong>? <i> and <em>? target attribute? <hr> tag? <pre> tag?