1
What is the purpose of the `<!DOCTYPE html>` declaration?Ans.The `<!DOCTYPE html>` declaration defines the document type and version of HTML. It helps the browser to render the web page correctly according to HTML5 standards.
2
Explain the difference between `id` and `class` attributes in HTML.Ans.The `id` attribute is used to uniquely identify a single element, while the `class` attribute is used to define a group of elements that can be styled similarly. An `id` must be unique within a document, whereas multiple elements can share the same `class`.
3
How do you embed a video in an HTML document?Ans.You can embed a video in an HTML document using the `<video>` tag. For example: `<video width='320' height='240' controls> <source src='movie.mp4' type='video/mp4'> Your browser does not support the video tag. </video>`.
4
What is the purpose of the `alt` attribute in the `<img>` tag?Ans.The `alt` attribute in the `<img>` tag provides alternative text for an image if the image cannot be displayed. It improves accessibility and helps search engines understand the content of the image.
5
Describe the function of the `<meta>` tag in HTML.Ans.The `<meta>` tag provides metadata about the HTML document, such as the character set, description, keywords, author, and viewport settings. This information is used by browsers and search engines.
6
What is the difference between `<div>` and `<span>` tags?Ans.The `<div>` tag is a block-level element used to group other block-level elements, while the `<span>` tag is an inline element used to group inline elements. `<div>` typically controls larger sections of content, whereas `<span>` is used for smaller portions.
7
Explain the use of the `data-*` attributes in HTML.Ans.The `data-*` attributes are used to store custom data private to the page or application. They are useful for passing information to JavaScript and can be accessed using the `dataset` property.
8
How can you create a hyperlink that opens in a new tab?Ans.To create a hyperlink that opens in a new tab, use the `target='_blank'` attribute in the `<a>` tag. For example: `<a href='https://www.example.com' target='_blank'>Example</a>`.
9
What is semantic HTML, and why is it important?Ans.Semantic HTML uses HTML5 elements that clearly describe their meaning in a human- and machine-readable way. Examples include `<article>`, `<section>`, and `<nav>`. It improves accessibility, SEO, and maintainability of web pages.
10
How do you include a CSS file in an HTML document?Ans.You can include a CSS file in an HTML document using the `<link>` tag within the `<head>` section. For example: `<link rel='stylesheet' href='styles.css'>`.
11
What is the purpose of the `<script>` tag in HTML?Ans.The `<script>` tag is used to embed or reference JavaScript code within an HTML document. It can be placed in the `<head>` or `<body>` section, but best practices recommend placing it before the closing `</body>` tag to ensure the page loads faster.
12
Explain the role of the `<form>` tag in HTML.Ans.The `<form>` tag is used to create an HTML form for user input. It contains form elements like `<input>`, `<textarea>`, `<button>`, and others. Forms are used to collect user data and send it to a server for processing.
13
What are HTML entities, and why are they used?Ans.HTML entities are used to represent reserved characters or characters that cannot be easily typed. For example, `<` represents `<`, and `&` represents `&`. They ensure that the characters are displayed correctly in the browser.
14
How do you create a list in HTML?Ans.You can create an unordered list using the `<ul>` tag and list items with `<li>`, or an ordered list using the `<ol>` tag and list items with `<li>`. Example: `<ul><li>Item 1</li><li>Item 2</li></ul>` for an unordered list.
15
What is the purpose of the `<title>` tag in HTML?Ans.The `<title>` tag defines the title of the HTML document, which is displayed in the browser's title bar or tab. It is also used by search engines to understand the content of the page.
16
What is the `<canvas>` element used for in HTML?Ans.The `<canvas>` element is used to draw graphics on a web page via scripting (usually JavaScript). It can be used for rendering graphs, game graphics, or other visual images dynamically.
17
How can you make a responsive image in HTML?Ans.To make a responsive image, you can use the `srcset` attribute in the `<img>` tag or CSS media queries. The `srcset` attribute provides different image sources for different device widths.
18
What is the difference between the `<b>` and `<strong>` tags?Ans.The `<b>` tag makes text bold without implying any extra importance, whereas the `<strong>` tag indicates that the text is of strong importance, which browsers typically render as bold.
19
Explain the difference between the `<i>` and `<em>` tags.Ans.The `<i>` tag is used for text that is stylistically different from normal text, such as a technical term or a phrase in another language. The `<em>` tag emphasizes text with stress, usually rendered in italics.
20
How do you create a table in HTML?Ans.You create a table using the `<table>` tag, along with `<tr>` for table rows, `<th>` for table headers, and `<td>` for table data cells. Example: `<table><tr><th>Header</th></tr><tr><td>Data</td></tr></table>`.
21
What is the purpose of the `placeholder` attribute in the `<input>` tag?Ans.The `placeholder` attribute provides a short hint that describes the expected value of the input field. It is displayed inside the input field before the user enters a value.
22
Describe the `<fieldset>` and `<legend>` tags and their usage.Ans.The `<fieldset>` tag is used to group related elements in a form, and the `<legend>` tag defines a caption for the `<fieldset>`. This helps to improve the organization and accessibility of the form.
23
What is the purpose of the `required` attribute in form elements?Ans.The `required` attribute specifies that an input field must be filled out before submitting the form. It helps ensure that users do not leave the field blank.
24
How do you create a dropdown list in HTML?Ans.You can create a dropdown list using the `<select>` tag along with `<option>` tags. Example: `<select><option value='1'>Option 1</option><option value='2'>Option 2</option></select>`.
25
What is an HTML `<iframe>` and how is it used?Ans.An `<iframe>` (inline frame) is used to embed another HTML document within the current document. It is often used to embed content from another source, such as a video or a map.
26
Explain the use of the `download` attribute in the `<a>` tag.Ans.The `download` attribute in the `<a>` tag is used to specify that the target will be downloaded when the hyperlink is clicked. The attribute can also provide a suggested filename for the downloaded file.
27
How do you define a section of navigation links in HTML?Ans.You can define a section of navigation links using the `<nav>` tag. This semantic element indicates that the enclosed links are for navigation purposes.
28
What is the purpose of the `<progress>` tag in HTML?Ans.The `<progress>` tag represents the completion progress of a task, such as a download or a file upload. It displays a progress bar that shows how much of the task has been completed.
29
How can you include audio in an HTML document?Ans.You can include audio using the `<audio>` tag. Example: `<audio controls> <source src='audiofile.mp3' type='audio/mpeg'> Your browser does not support the audio element. </audio>`.
30
Explain the purpose of the `srcdoc` attribute in an `<iframe>`.Ans.The `srcdoc` attribute in an `<iframe>` is used to specify the HTML content to display within the `<iframe>`, instead of loading an external document via the `src` attribute.
31
What is the purpose of the `<mark>` tag?Ans.The `<mark>` tag is used to highlight or mark text that is relevant or important. Browsers typically render the content inside `<mark>` with a yellow background.
32
How do you create an email link in HTML?Ans.You create an email link using the `<a>` tag with the `mailto:` protocol. Example: `<a href='mailto:example@example.com'>Send Email</a>`.
33
What are the global attributes in HTML?Ans.Global attributes are attributes that can be used on any HTML element. Examples include `class`, `id`, `style`, `title`, `data-*`, `hidden`, `tabindex`, and `aria-*`.
34
How can you specify that a link should open in a parent frame?Ans.You can specify that a link should open in a parent frame using the `target='_parent'` attribute in the `<a>` tag. This is useful for breaking out of iframes.
35
Explain the use of the `<details>` and `<summary>` tags.Ans.The `<details>` tag is used to create a collapsible content section that can be toggled open or closed. The `<summary>` tag provides a visible heading for the `<details>` content, which users can click to expand or collapse.
36
What is the purpose of the `lang` attribute in the `<html>` tag?Ans.The `lang` attribute in the `<html>` tag specifies the language of the document's content. It helps search engines and screen readers to understand and process the language correctly.
37
Explain the difference between the `<script>` tag's `defer` and `async` attributes.Ans.The `defer` attribute ensures that the script is executed after the document has been fully parsed. The `async` attribute allows the script to be executed as soon as it is available, without blocking document parsing.
38
What is the `<template>` tag used for?Ans.The `<template>` tag is used to hold client-side content that is not rendered when the page loads. It can be used for JavaScript to clone and insert into the DOM as needed.
39
How do you specify the character encoding for an HTML document?Ans.You specify the character encoding for an HTML document using the `<meta>` tag with the `charset` attribute. Example: `<meta charset='UTF-8'>`.
40
What is the `autofocus` attribute, and how is it used?Ans.The `autofocus` attribute is used on an `<input>` element to specify that the input field should automatically get focus when the page loads.
41
Explain the purpose of the `autocomplete` attribute in form elements.Ans.The `autocomplete` attribute specifies whether a form or an input field should have autocomplete enabled. It can take values such as 'on' or 'off'.
42
What is the difference between `<link>` and `<a>` tags?Ans.The `<link>` tag is used to link external resources like stylesheets, whereas the `<a>` tag is used to create hyperlinks that navigate to other pages or resources.
43
How do you include external JavaScript files in an HTML document?Ans.You include external JavaScript files using the `<script>` tag with the `src` attribute. Example: `<script src='script.js'></script>`.
44
What is the purpose of the `<noscript>` tag?Ans.The `<noscript>` tag provides alternate content for users whose browsers do not support JavaScript or have it disabled.
45
How can you create a checkbox in an HTML form?Ans.You create a checkbox using the `<input>` tag with `type='checkbox'`. Example: `<input type='checkbox' id='subscribe' name='subscribe' value='newsletter'>`.
46
What is the use of the `srcset` attribute in the `<img>` tag?Ans.The `srcset` attribute provides a list of possible image sources for the `<img>` tag, allowing the browser to choose the most appropriate image based on the device's screen size and resolution.
47
Explain the purpose of the `<picture>` element in HTML.Ans.The `<picture>` element allows you to define multiple `<source>` elements for an image, enabling different images to be displayed based on media queries, screen sizes, or device capabilities.
48
What is the `contenteditable` attribute, and how is it used?Ans.The `contenteditable` attribute specifies whether the content of an element is editable. Setting it to 'true' makes the element's content editable by the user.
49
How do you define a footer for a document or section in HTML?Ans.You define a footer using the `<footer>` tag. It typically contains metadata about the document or section, such as author information, links, or copyright data.
50
What is the `rel` attribute in the `<link>` tag used for?Ans.The `rel` attribute specifies the relationship between the current document and the linked resource. Common values include 'stylesheet' for CSS files and 'icon' for favicon links.
51
Explain the difference between `target='_self'` and `target='_blank'` in the `<a>` tag.Ans.The `target='_self'` attribute opens the linked document in the same tab or window, while `target='_blank'` opens the linked document in a new tab or window.
52
What is the purpose of the `spellcheck` attribute in HTML?Ans.The `spellcheck` attribute specifies whether the element's content should be checked for spelling errors. It can be set to 'true' or 'false'.
53
How do you create a radio button in an HTML form?Ans.You create a radio button using the `<input>` tag with `type='radio'`. Each radio button in a group must have the same `name` attribute to ensure only one can be selected. Example: `<input type='radio' name='gender' value='male'>`.
54
What is the purpose of the `<main>` element in HTML?Ans.The `<main>` element is used to specify the main content of a document. It should contain the content that is unique to the document and not include repeated content like headers, footers, or navigation links.
55
Explain the use of the `hidden` attribute in HTML.Ans.The `hidden` attribute is used to hide an element from view. The element will not be displayed on the page, but it remains in the DOM and can be shown using JavaScript or CSS.
56
What is the purpose of the `meta` tag with the `viewport` attribute?Ans.The `meta` tag with the `viewport` attribute is used to control the layout on mobile browsers. It allows you to set the width and scaling of the viewport, which helps make web pages responsive. Example: `<meta name='viewport' content='width=device-width, initial-scale=1.0'>`.
57
How do you make a text input field read-only in HTML?Ans.You make a text input field read-only by adding the `readonly` attribute to the `<input>` tag. This prevents the user from modifying the value of the input field but allows the field to be focused and its value to be copied.
58
What is the purpose of the `accesskey` attribute in HTML?Ans.The `accesskey` attribute specifies a shortcut key to activate or focus an element. This enhances the accessibility of the web page by allowing users to navigate through elements using the keyboard. Example: `<button accesskey='s'>Save</button>`.
59
Explain the purpose and usage of the `aria-label` attribute.Ans.The `aria-label` attribute is used to define a string that labels an element, which improves accessibility for screen reader users. It provides an invisible label that can be read by assistive technologies, enhancing the usability of interactive elements.
60
How can you create an ordered list with custom numbers in HTML?Ans.You can create an ordered list with custom numbers by using the `value` attribute in the `<li>` tags. This attribute allows you to set a specific number for each list item. Example: `<ol><li value='3'>Item 3</li><li value='5'>Item 5</li></ol>`.
61
What is the purpose of the `draggable` attribute in HTML?Ans.The `draggable` attribute specifies whether an element is draggable. When set to `true`, it allows the element to be dragged using the mouse. This attribute can be used to implement drag-and-drop interfaces in web applications.
62
How do you include a favicon in an HTML document?Ans.You include a favicon in an HTML document using the `<link>` tag with the `rel='icon'` attribute. This tag should be placed in the `<head>` section. Example: `<link rel='icon' href='favicon.ico' type='image/x-icon'>`.
63
Explain the purpose of the `pre` tag in HTML.Ans.The `<pre>` tag is used to define preformatted text. Text inside this tag is displayed in a fixed-width font and preserves both spaces and line breaks. It is useful for displaying code snippets or formatted text exactly as written.
64
What is the `sandbox` attribute in the `<iframe>` tag used for?Ans.The `sandbox` attribute is used to apply extra restrictions to the content in an `<iframe>`. It enhances security by controlling features like running scripts, submitting forms, and accessing the top-level browsing context. Example: `<iframe src='example.html' sandbox='allow-scripts'></iframe>`.
65
How do you create a tooltip in HTML?Ans.You create a tooltip by using the `title` attribute on an HTML element. When the user hovers over the element, the text specified in the `title` attribute is displayed as a tooltip. Example: `<button title='Save changes'>Save</button>`.
66
What is the `pattern` attribute in the `<input>` tag used for?Ans.The `pattern` attribute is used to specify a regular expression that the input field's value must match for form validation. It helps enforce specific formats for user input, such as phone numbers or email addresses.
67
Explain the difference between the `button`, `submit`, and `reset` values in the `type` attribute of the `<button>` tag.Ans.The `button` type creates a clickable button with no default behavior. The `submit` type submits the form data to the server, while the `reset` type resets all form fields to their default values. Each type serves a distinct purpose in form handling.
68
How can you specify a default value for an `<input>` field?Ans.You specify a default value for an `<input>` field using the `value` attribute. This value will be pre-filled in the input field when the page loads. Example: `<input type='text' value='Default Text'>`.
69
What is the `autoplay` attribute in the `<video>` tag, and how is it used?Ans.The `autoplay` attribute in the `<video>` tag specifies that the video should start playing automatically when the page loads. This attribute is useful for auto-playing videos, but it can also be disruptive if overused.
70
Explain the difference between `localStorage` and `sessionStorage` in HTML5.Ans.`localStorage` stores data with no expiration date, meaning it persists even after the browser is closed. `sessionStorage` stores data for the duration of the page session, which is cleared when the page or browser is closed. Both are used for client-side storage.
71
How do you create a multiline text input field in an HTML form?Ans.You create a multiline text input field using the `<textarea>` tag. This tag allows users to enter and edit multiple lines of text. Example: `<textarea rows='4' cols='50'>Default text</textarea>`.
72
What is the `inputmode` attribute in HTML, and how is it used?Ans.The `inputmode` attribute specifies what kind of input mode (keyboard type) should be used by a device when editing the element's value. It can enhance user experience by presenting a suitable keyboard layout for different types of input, such as numeric or email.
73
Explain the purpose of the `datalist` element in HTML.Ans.The `<datalist>` element provides a list of predefined options for an `<input>` element. It enhances user input by allowing users to select from a dropdown list of suggested values while still being able to enter other values.
74
What is the `formnovalidate` attribute, and when would you use it?Ans.The `formnovalidate` attribute is used on a `<button>` or `<input type='submit'>` to prevent form validation when submitting. It is useful when you want to allow form submission without validating the inputs, such as for cancel or skip actions.
75
How do you create an inline frame (iframe) that is responsive?Ans.To create a responsive inline frame, you can use CSS to set the `width` to 100% and use a height that adjusts based on the content or viewport. You can also use the `aspect-ratio` CSS property to maintain the frame's aspect ratio. Example: `<iframe src='example.html' style='width: 100%; height: 200px;'></iframe>`.
76
What is the purpose of the `<aside>` element in HTML?Ans.The `<aside>` element represents a section of a document with content tangentially related to the content around it. This could be sidebars, pull quotes, or advertisements. It improves semantic structure and accessibility.
77
How do you create a progress bar in HTML?Ans.You create a progress bar using the `<progress>` tag, which displays the progress of a task. You can specify the `value` and `max` attributes to represent the completion status. Example: `<progress value='70' max='100'></progress>`.
78
What is the `aria-describedby` attribute used for in HTML?Ans.The `aria-describedby` attribute identifies the element (or elements) that describe the object. This is useful for providing additional context to screen reader users, linking descriptions to the interactive elements they describe.
79
Explain the use of the `<figcaption>` tag in HTML.Ans.The `<figcaption>` tag is used to provide a caption for the `<figure>` element. It is typically used to add a description or explanation for the image, chart, or illustration contained within the `<figure>`.
80
How can you create an accessible form in HTML?Ans.To create an accessible form, use `<label>` elements to associate text labels with form controls. Use `aria` attributes to enhance accessibility, ensure proper tab order, and provide feedback for error messages. Also, consider using fieldsets and legends for grouped form elements.
81
What is the purpose of the `<time>` element in HTML?Ans.The `<time>` element is used to represent a specific period in time, such as a date, time, or duration. It can include the `datetime` attribute to specify a machine-readable value. This element helps search engines and browsers understand and display time-related information.
82
How do you define a document's base URL in HTML?Ans.You define a document's base URL using the `<base>` tag inside the `<head>` section. The `href` attribute of the `<base>` tag specifies the base URL for all relative URLs in the document. Example: `<base href='https://www.example.com/'>`.
83
Explain the use of the `aria-live` attribute.Ans.The `aria-live` attribute indicates that an element will be updated and that those updates should be communicated to assistive technologies. It can have values like 'polite', 'assertive', or 'off', dictating how updates are announced to users.
84
What is the purpose of the `formaction` attribute in HTML?Ans.The `formaction` attribute specifies the URL to which the form data will be sent when the form is submitted. This attribute can be used on `<button>` or `<input type='submit'>` elements to override the form's `action` attribute.
85
How do you create a collapsible section in HTML?Ans.You create a collapsible section using the `<details>` and `<summary>` elements. The `<summary>` element provides a summary or label for the collapsible content, which is enclosed in the `<details>` element. Example: `<details><summary>More Info</summary><p>This is the collapsible content.</p></details>`.
86
What is the purpose of the `<bdi>` element in HTML?Ans.The `<bdi>` (Bi-Directional Isolation) element is used to isolate a span of text that might be formatted in a different direction than the surrounding text. It ensures that the text inside it does not interfere with the surrounding text direction.
87
Explain the use of the `list` attribute in the `<input>` tag.Ans.The `list` attribute in the `<input>` tag is used to bind the input field to a `<datalist>` element, which provides a list of predefined options for the user to select from. This enhances user experience by offering suggestions while typing.
88
How do you create a responsive table in HTML?Ans.To create a responsive table, you can use CSS to make the table scrollable horizontally on smaller screens. This can be done by wrapping the `<table>` in a `<div>` with `overflow-x: auto;` and setting the table to `width: 100%;`. Alternatively, using CSS frameworks like Bootstrap can help achieve responsive tables more easily.
89
What is the `contenteditable` attribute, and how is it used?Ans.The `contenteditable` attribute specifies whether the content of an element is editable by the user. When set to `true`, the user can modify the element's content directly in the browser. Example: `<div contenteditable='true'>This is editable text.</div>`.
90
Explain the purpose of the `<output>` element in HTML.Ans.The `<output>` element is used to represent the result of a calculation or user action. It is commonly used in conjunction with JavaScript to display dynamic results based on user inputs or other interactions within a form.
91
How do you create a hidden form field in HTML?Ans.You create a hidden form field using the `<input>` tag with `type='hidden'`. This field is not visible to the user but its value is submitted with the form. It is useful for storing data that should be sent to the server but not shown to the user.
92
What is the `spellcheck` attribute, and how is it used?Ans.The `spellcheck` attribute specifies whether the element's content should be checked for spelling errors. When set to `true`, the browser will highlight misspelled words and suggest corrections. This attribute can be used on text input fields and editable elements.
93
Explain the use of the `<s>` tag in HTML.Ans.The `<s>` (strikethrough) tag is used to indicate text that is no longer accurate or relevant, often displayed with a strikethrough effect. It is commonly used to show edits, deletions, or changes in content.
94
How do you create an accessible image link in HTML?Ans.To create an accessible image link, use an `<a>` tag with an `<img>` tag inside it and include appropriate `alt` text for the image. The `alt` text ensures that screen readers can describe the link's purpose. Example: `<a href='https://example.com'><img src='image.jpg' alt='Description of the link'></a>`.
95
What is the purpose of the `<small>` element in HTML?Ans.The `<small>` element is used to represent side comments, fine print, or less important text. It typically renders the text in a smaller font size, helping to differentiate it from the main content.
96
What is the purpose of the `lang` attribute in the `<html>` tag?Ans.The `lang` attribute in the `<html>` tag specifies the language of the document's content. This helps search engines and screen readers process the content correctly, improving accessibility and SEO. Example: `<html lang='en'>`.
97
How do you create a form that allows users to upload files?Ans.To create a form that allows file uploads, use the `<input>` tag with `type='file'`. Ensure the form's `enctype` attribute is set to `multipart/form-data` to handle file data correctly. Example: `<form enctype='multipart/form-data'><input type='file' name='fileUpload'></form>`.
98
What is the `novalidate` attribute in a form element?Ans.The `novalidate` attribute disables form validation when the form is submitted. It allows the form to be submitted even if there are invalid inputs. This can be useful for testing or specific use cases where validation is handled server-side.
99
Explain the use of the `<map>` and `<area>` elements in HTML.Ans.The `<map>` element defines an image map, which is an image with clickable areas. The `<area>` elements within the `<map>` specify the coordinates and shapes of these clickable areas. The `usemap` attribute on the `<img>` tag links to the map. Example: `<img src='image.jpg' usemap='#mapname'><map name='mapname'><area shape='rect' coords='34,44,270,350' href='link.html'></map>`.
100
How do you use the `autocomplete` attribute in form elements?Ans.The `autocomplete` attribute specifies whether a form or input field should have autocomplete enabled, allowing browsers to suggest previously entered values. It can be set to 'on' or 'off'. Example: `<input type='text' name='username' autocomplete='on'>`.
101
What is the `tabindex` attribute and how is it used?Ans.The `tabindex` attribute specifies the tab order of an element when the 'Tab' key is used for navigation. A positive value sets the element's position in the tab order, `0` includes the element in the natural tab order, and `-1` removes it from the tab order but makes it focusable via script. Example: `<input type='text' tabindex='1'>`.
102
Explain the use of the `<code>` and `<pre>` elements.Ans.The `<code>` element represents a fragment of computer code and is typically displayed in a monospace font. The `<pre>` element represents preformatted text, which preserves whitespace and line breaks, making it ideal for displaying code blocks. Example: `<pre><code>let x = 10;</code></pre>`.
103
What is the `srcset` attribute in the `<img>` tag, and how does it work?Ans.The `srcset` attribute allows you to define a list of different image sources and their corresponding sizes. The browser selects the most appropriate image based on the device's screen size and resolution. Example: `<img srcset='image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w' src='image-large.jpg' alt='Responsive image'>`.
104
How do you create a definition list in HTML?Ans.A definition list is created using the `<dl>` element, with `<dt>` for definition terms and `<dd>` for definition descriptions. It is used to present a list of terms and their corresponding definitions. Example: `<dl><dt>HTML</dt><dd>Hypertext Markup Language</dd></dl>`.
105
Explain the use of the `placeholder` attribute in input elements.Ans.The `placeholder` attribute provides a short hint that describes the expected value of an input field. The placeholder text is displayed inside the input field when it is empty, guiding users on what to enter. Example: `<input type='text' placeholder='Enter your name'>`.
106
What is the `srcdoc` attribute in the `<iframe>` tag?Ans.The `srcdoc` attribute specifies the HTML content to be displayed in the `<iframe>` directly within the element. It is an alternative to the `src` attribute and allows embedding HTML content without an external URL. Example: `<iframe srcdoc='<p>Embedded content</p>'></iframe>`.
107
How do you create a table with a caption in HTML?Ans.You create a table with a caption by using the `<caption>` element inside the `<table>` element. The `<caption>` element provides a title or description for the table, enhancing its accessibility. Example: `<table><caption>Monthly Sales Data</caption><tr><th>Month</th><th>Sales</th></tr><tr><td>January</td><td>$10,000</td></tr></table>`.
108
Explain the use of the `aria-hidden` attribute in HTML.Ans.The `aria-hidden` attribute indicates whether an element and its children are perceivable to assistive technologies. Setting it to 'true' hides the element from screen readers, which can be useful for content that is visually hidden but still present in the DOM.
109
What is the purpose of the `<mark>` element?Ans.The `<mark>` element is used to highlight text that is relevant or important in the context of the document. It typically displays text with a yellow background, making it stand out from the surrounding content. Example: `<p>This is a <mark>highlighted</mark> word.</p>`.
110
How do you create a navigation menu using HTML5 elements?Ans.You create a navigation menu using the `<nav>` element, which represents a section of navigation links. Inside the `<nav>`, you can use an unordered list (`<ul>`) with list items (`<li>`) containing anchor tags (`<a>`) for each menu item. Example: `<nav><ul><li><a href='#home'>Home</a></li><li><a href='#about'>About</a></li><li><a href='#contact'>Contact</a></li></ul></nav>`.
111
What is the `ping` attribute in an `<a>` tag?Ans.The `ping` attribute specifies a space-separated list of URLs to be notified if the user follows the hyperlink. This can be used for tracking purposes. When the link is clicked, the browser sends a POST request to the specified URLs. Example: `<a href='https://example.com' ping='https://tracker.com/log'>Link</a>`.
112
Explain the difference between the `<strong>` and `<b>` tags.Ans.The `<strong>` tag indicates that the enclosed text has strong importance or urgency, and is often displayed in bold. The `<b>` tag simply makes the text bold without implying any additional importance. Using `<strong>` is preferred for semantic HTML, while `<b>` is more for visual styling.
113
How do you use the `download` attribute in an `<a>` tag?Ans.The `download` attribute in an `<a>` tag prompts the browser to download the linked resource rather than navigating to it. You can optionally specify a filename for the downloaded file. Example: `<a href='file.pdf' download='custom_name.pdf'>Download PDF</a>`.
114
What is the purpose of the `<wbr>` element?Ans.The `<wbr>` (Word Break Opportunity) element represents a position within text where the browser can optionally break a line. It helps control word wrapping in long strings, improving the readability of text in narrow containers. Example: `super<wbr>califragilistic<wbr>expialidocious`.
115
Explain the use of the `<abbr>` element in HTML.Ans.The `<abbr>` element is used to represent an abbreviation or acronym, providing an optional `title` attribute to specify the full expansion. This helps users and assistive technologies understand the meaning of the abbreviation. Example: `<abbr title='Hypertext Markup Language'>HTML</abbr>`.