HTML Answers
0:000:00
HTML Answers
Basic HTML Answers
| # | Question | Answer | Examples |
|---|---|---|---|
| 1 | What is HTML? | HyperText Markup Language | The standard markup language for creating web pages |
| 2 | What is the purpose of HTML? | Defines the structure and content of web pages | Creating headings, paragraphs, images, links, forms |
| 3 | What is an HTML tag? | A markup keyword defining elements (e.g., <p>) | <h1>, <p>, <a>, <img> |
| 4 | What is an HTML element? | An opening tag, content, and closing tag (e.g., <p>Hello</p>) | <p>This is a paragraph.</p>, <h1>Main Heading</h1> |
| 5 | What is an HTML attribute? | Provides extra information about an element (e.g., <img src="image.jpg">) | <a href="page.html">Link</a>, <img src="pic.jpg" alt="Description"> |
| 6 | What is the <p> tag? | Defines a paragraph | <p>Some text goes here.</p> |
| 7 | What is the <a> tag? | Defines a hyperlink (anchor tag) | <a href="https://www.google.com">Visit Google</a> |
| 8 | What is the <img> tag? | Embeds an image | <img src="cat.jpg" alt="A fluffy cat"> |
| 9 | What is the <div> tag? | A generic block-level container | <div><h1>Section Title</h1><p>Content</p></div> |
| 10 | What is the <span> tag? | A generic inline container | <p>This is some <span>important text</span>.</p> |
| 11 | What is the <DOCTYPE html> declaration? | Specifies the document type and HTML version | <!DOCTYPE html> |
| 12 | What is the <head> section? | Contains meta-information about the HTML document | <head><title>My Page</title></head> |
| 13 | What is the <body> section? | Contains the visible page content | <body><h1>Welcome</h1><p>Content</p></body> |
| 14 | What is the <title> tag? | Sets the title that appears in the browser tab | <title>Website Title</title> |
| 15 | What is the <ul> tag? | Defines an unordered list | <ul><li>Item 1</li><li>Item 2</li></ul> |
| 16 | What is the <ol> tag? | Defines an ordered list | <ol><li>First</li><li>Second</li></ol> |
| 17 | What is the <li> tag? | Defines a list item | <li>List Item</li> |
| 18 | What is the <form> tag? | Defines a form for user input | <form><input type="text"></form> |
| 19 | What is the <input> tag? | Defines an input field (e.g., text, password, checkbox) | <input type="text" name="username"> |
| 20 | What is the <button> tag? | Defines a button | <button type="submit">Submit</button> |
| 21 | What is the id attribute? | Specifies a unique identifier for an element | <div id="main-content">...</div> |
| 22 | What is the class attribute? | Specifies one or more class names for an element | <p class="highlight">Important text</p> |
| 23 | What is the difference between <div> and <span>? | <div> is block-level, <span> is inline | <div> starts a new line, <span> doesn't |
Intermediate HTML Answers
| # | Question | Answer | Examples |
|---|---|---|---|
| 1 | What does semantic HTML mean? | Using tags based on their meaning (e.g., <header>, <nav>, <article>) | <header>, <nav>, <main>, <article>, <aside>, <footer> |
| 2 | Why is semantic HTML important? | Improves accessibility, SEO, and maintainability | Screen readers understand structure better; search engines index content more effectively |
| 3 | Explain the difference between HTML and CSS. | HTML = Structure/Content, CSS = Presentation/Styling | HTML defines elements; CSS defines how they look |
| 4 | Explain the difference between HTML and JavaScript. | HTML = Structure, JavaScript = Behavior/Logic | HTML provides content; JavaScript adds interactivity |
| 5 | What is the <meta> tag and why is it important? | Provides metadata about the document (e.g., character set, viewport) | <meta charset="UTF-8"> |
| 6 | What is the purpose of the viewport meta tag? | Controls the page's width and scaling on mobile devices | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 7 | What is the alt attribute for the <img> tag? | Provides alternative text for images (accessibility, SEO) | <img src="product.jpg" alt="Red T-shirt"> |
| 8 | Explain the concept of HTML target attribute for the <a> tag. | Specifies where to open the linked document (e.g., _blank, _self) | <a href="page.html" target="_blank">Open in new tab</a> |
| 9 | What are some common types of <input type> attribute values? | text, password, email, number, checkbox, radio, submit, button, file | <input type="email">, <input type="radio" name="gender" value="male"> |
| 10 | What is the purpose of the <label> tag in forms? | Labels an input element, improving accessibility | <label for="name">Name:</label><input type="text" id="name"> |
| 11 | How does the for attribute used with the <label> tag work? | Links the label to an input using its id | <label for="email">...</label><input type="email" id="email"> |
| 12 | What are HTML entities and why are they used? | Represent special characters in HTML (e.g., < for <, > for >) | © for ©, for unbreakable space |
| 13 | Describe the HTML5 semantic elements. | <header>, <nav>, <main>, <article>, <aside>, <footer>, <section> | <header><h1>Site Title</h1></header>, <nav><ul><li>Home</li></ul></nav> |
| 14 | Explain the difference between block-level and inline HTML elements. Give examples. | Block: Starts on a new line, takes full width (<div>, <p>, <h1>); Inline: Doesn't start on a new line, takes only necessary width (<span>, <a>, <img>) | <p> is block, <a> is inline |
| 15 | What is the purpose of the <iframe> tag? | Embeds another HTML document within the current one | <iframe src="video.html"></iframe> |
| 16 | What are ARIA attributes and why are they used? | Accessible Rich Internet Applications; provide extra information for assistive technologies | <button aria-label="Close">X</button> |
| 17 | What is the purpose of the <canvas> tag? | Defines an area where JavaScript can be used to draw graphics content | <canvas id="myCanvas" width="200" height="100"></canvas> |
| 18 | What is the <table> tag? | Defines tabular data | <table><tr><th>Header</th></tr><tr><td>Data</td></tr></table> |
| 19 | What is the <tr> tag? | Defines a table row | <tr><td>Row Data</td></tr> |
| 20 | What is the <th> tag? | Defines a table header cell | <th>Name</th> |
| 21 | What is the <td> tag? | Defines a table data cell | <td>John Doe</td> |
Advanced HTML Answers
| # | Question | Answer | Examples |
|---|---|---|---|
| 1 | Explain the concept of HTML accessibility (a11y). | Making web content usable by people with disabilities | Using semantic HTML, ARIA attributes, alt text, keyboard navigation |
| 2 | What are HTML Web Components and why are they useful? | A set of APIs for creating custom, reusable HTML elements | Custom Elements, Shadow DOM, HTML Templates |
| 3 | Explain the concept of Shadow DOM in Web Components. | Encapsulates the structure and styles of a component, preventing conflicts | A custom element's internal structure is hidden and isolated from the main page CSS |
| 4 | What is the purpose of the <template> tag? | Holds a markup fragment that is not rendered initially | <template id="my-template">Hello <p>World</p></template> |
| 5 | What is the purpose of the <source> tag? | It's used inside elements like <video>, <audio>, or <picture> to specify multiple versions of a media file in different formats. The browser chooses the first one it supports. | <video><source src="movie.mp4" type="video/mp4"><source src="movie.webm" type="video/webm"></video> |
| 6 | What is the purpose of the <video> tag? | Embeds video content directly into the HTML document. | <video src="movie.mp4" controls></video> |
| 7 | What is the purpose of the <audio> tag? | Embeds audio content directly into the HTML document. | <audio src="song.mp3" controls></audio> |
| 8 | What is the purpose of the <picture> tag? | Specifies multiple image sources for different screen sizes, resolutions, or formats, allowing the browser to choose the best one. | <picture><source media="(min-width: 768px)" srcset="large.jpg"><img src="small.jpg" alt="Responsive Image"></picture> |
| 9 | Explain the concept of HTML forms validation. | Using HTML attributes and JavaScript to check if user input is valid before the form is submitted to the server. | required, pattern, type="email", type="number" |
| 10 | What is the purpose of the required attribute on an input? | Specifies that an input field must have a value before submitting the form. | <input type="text" required> |
| 11 | What is the purpose of the pattern attribute on an input? | Specifies a regular expression pattern that an input value must match to be considered valid. | <input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> |
| 12 | What is the purpose of the autocomplete attribute? | Specifies whether the browser should provide autocomplete suggestions for an input field based on previous entries. | <input type="text" autocomplete="on"> |
| 13 | What is the purpose of the data-* attributes? | Stores custom data private to the application, often used by JavaScript or CSS. | <p data-user-id="123">User Information</p> |
| 14 | What is the purpose of the <script> tag? | Includes JavaScript code or links to external JavaScript files. | <script src="script.js"></script>, <script>alert('Hello');</script> |
| 15 | What is the purpose of the async attribute on <script>? | Downloads the script asynchronously and executes it as soon as it's ready, without blocking HTML parsing. | <script src="script.js" async></script> |
| 16 | What is the purpose of the defer attribute on <script>? | Downloads the script asynchronously but executes it only after the HTML document has been fully parsed. | <script src="script.js" defer></script> |
| 17 | What is the purpose of the <link> tag? | Links the HTML document to external resources, such as stylesheets, favicons, etc. | <link rel="stylesheet" href="styles.css"> |
| 18 | What is the purpose of the <base> tag? | Specifies a base URL for all relative URLs within the document. | <base href="https://www.example.com/"> |
| 19 | What is the purpose of the <noscript> tag? | Defines content to be displayed if JavaScript is disabled in the user's browser. | <noscript><p>Please enable JavaScript.</p></noscript> |
| 20 | What is the purpose of the <dialog> tag? | Represents a dialog box, popup, or modal window. | <dialog id="myDialog"><p>Hello!</p><button>Close</button></dialog> |