{"id":19035197,"url":"https://github.com/zahidrahimoon/50-html-interview-qna","last_synced_at":"2026-02-28T06:51:55.499Z","repository":{"id":235408398,"uuid":"790556241","full_name":"zahidrahimoon/50-Html-Interview-QnA","owner":"zahidrahimoon","description":"50 Html Interview Question And Answers","archived":false,"fork":false,"pushed_at":"2025-01-23T15:13:19.000Z","size":415,"stargazers_count":8,"open_issues_count":0,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-21T21:35:03.066Z","etag":null,"topics":["development","front-end-development","html","html5","interview","web"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zahidrahimoon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-23T05:13:24.000Z","updated_at":"2025-01-23T15:13:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"feb4d79c-0f22-4c0e-aa0d-7d1b8b0a3385","html_url":"https://github.com/zahidrahimoon/50-Html-Interview-QnA","commit_stats":null,"previous_names":["zahidrahimoon/html-50"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zahidrahimoon/50-Html-Interview-QnA","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zahidrahimoon%2F50-Html-Interview-QnA","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zahidrahimoon%2F50-Html-Interview-QnA/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zahidrahimoon%2F50-Html-Interview-QnA/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zahidrahimoon%2F50-Html-Interview-QnA/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zahidrahimoon","download_url":"https://codeload.github.com/zahidrahimoon/50-Html-Interview-QnA/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zahidrahimoon%2F50-Html-Interview-QnA/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29926925,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T19:37:42.220Z","status":"online","status_checked_at":"2026-02-28T02:00:07.010Z","response_time":90,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["development","front-end-development","html","html5","interview","web"],"created_at":"2024-11-08T21:49:32.834Z","updated_at":"2026-02-28T06:51:55.467Z","avatar_url":"https://github.com/zahidrahimoon.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# 50 HTML Interview Questions and Answers \u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg\" alt=\"HTML Logo\" width=\"50\"/\u003e\n\nWelcome to the HTML interview preparation guide! This document contains a list of 50 questions and answers to help you prepare for HTML-related interviews. Each question is followed by a detailed answer to help you understand the concepts better.\n\n:bulb: **Tip:** Use this guide to review important HTML concepts and improve your interview performance.\n\n:question: **How to Use This Guide:**\n- Read each question carefully.\n- Try to answer the question on your own.\n- Compare your answer with the provided solution.\n- Use the explanation to deepen your understanding.\n\n\n### Best For Beginners\n🔍 Comprehensive: Covers 50 questions related to HTML, providing in-depth explanations and examples.\n\n💼 Practical: Includes industry-level content, ensuring relevance and applicability in real-world scenarios.\n\n🎓 Educational: Offers a valuable resource for learning and preparing for HTML-related interviews.\n\n🚀 Example-driven: Provides detailed examples to illustrate concepts, aiding in better understanding.\n\n📝 Detailed: Offers thorough answers to each question, covering various aspects of HTML.\n\n###  Let's Start\n\n1. **What is HTML?**\n    - HTML stands for Hyper Text Markup Language.Html is the standard `markup language` used to create web pages.\n\n2. **What is meant by Markup Language**\n   - Markup language means a language which defines the `structure of a document using elemnts` like heading,paragraphs,links,lists and more.\n\n3. **What is HTML5?**\n   - HTML5 is the latest version of the Hypertext Markup Language used for structuring and presenting content on the World Wide Web.\n\n4. **What are the new features in HTML5 compared to HTML4?**\n   - Some of the new features in HTML5 include new semantic elements, native support for video and audio, new form input types, local storage, canvas for drawing, and improved accessibility.\n\n5. **Give five Advantages of html 5?**\n   \n   - **Rich Media Support**:\n     HTML5 provides native support for audio and video playback without the need for plugins like Flash. This allows developers to create multimedia-rich websites more easily. For example, you can embed a video in HTML5 using the `\u003cvideo\u003e` element:\n\n\n   ```html\n   \u003cvideo src=\"video.mp4\" controls\u003e\u003c/video\u003e\n   ```\n\n\n    -  **Improved Semantics**:\n      HTML5 introduces new semantic elements like `\u003cheader\u003e`, `\u003cfooter\u003e`, `\u003cnav\u003e`, `\u003carticle\u003e`, `\u003csection\u003e`, and `\u003caside\u003e`, which provide clearer and more meaningful structure to web pages. For example, you can use the `\u003cheader\u003e` and `\u003cfooter\u003e` elements to define the header and footer sections of a webpage:\n\n\n   ```html\n   \u003cheader\u003e\n       \u003ch1\u003eMy Website\u003c/h1\u003e\n   \u003c/header\u003e\n   \u003cfooter\u003e\n       \u003cp\u003e\u0026copy; 2024 My Website. All rights reserved.\u003c/p\u003e\n   \u003c/footer\u003e\n   ```\n\n\n    - **Offline Application Cache**:\n      HTML5 introduces the ability to store web application resources locally, allowing users to use the application even when they are offline. This is achieved using the Application Cache (AppCache) API. For example, you can define a cache manifest file to specify which resources should be cached:\n\n   ```html\n   \u003chtml manifest=\"example.appcache\"\u003e\n   ```\n\n\n   - **Improved Forms**:\n      HTML5 introduces new form input types like `email`, `url`, `tel`, `number`, and `date`, as well as new attributes like `required` and `placeholder`, which enhance the user experience and make form validation easier. For example, you can use the `email` input type to create an email input field:\n\n\n   ```html\n   \u003cinput type=\"email\" name=\"email\" required\u003e\n   ```\n   \n\n   - **Canvas and SVG Support**:\n     HTML5 introduces the `\u003ccanvas\u003e` element for drawing graphics and animations dynamically using JavaScript, and the `\u003csvg\u003e` element for creating scalable vector graphics directly in HTML. For example, you can use the `\u003ccanvas\u003e` element to draw a simple rectangle:\n\n\n   ```html\n   \u003ccanvas id=\"myCanvas\" width=\"200\" height=\"100\"\u003e\u003c/canvas\u003e\n   \u003cscript\u003e\n       var canvas = document.getElementById('myCanvas');\n       var ctx = canvas.getContext('2d');\n       ctx.fillRect(10, 10, 150, 80);\n   \u003c/script\u003e\n   ```\n   \n\n6. **What is the purpose of the `\u003c!DOCTYPE html\u003e` declaration in HTML5?**\n   - It specifies to the web browser that the document is an HTML5 document, ensuring that the browser renders the document correctly.\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eExample Page\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch1\u003eHello, World!\u003c/h1\u003e\n    \u003cp\u003eThis is an example page.\u003c/p\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n7. **What is the difference between `HTML` and `XHTML`**\n\na. ***Syntax Rules***:\n   - **HTML**: HTML has more lenient syntax rules, allowing for elements to be unclosed (`\u003cbr\u003e`, `\u003cimg\u003e`) or have optional closing tags (`\u003c/p\u003e` is optional in HTML).\n   - **XHTML**: XHTML follows stricter syntax rules derived from XML, requiring all elements to be properly closed and nested. All tags must be lowercase, and attribute values must be enclosed in quotes.\n\n   **Example**:\n   ```html\n   \u003c!-- HTML --\u003e\n   \u003cimg src=\"image.jpg\"\u003e\n\n   \u003c!-- XHTML --\u003e\n   \u003cimg src=\"image.jpg\" /\u003e\n   ```\n\nb. ***Attribute Minimization***:\n   - **HTML**: In HTML, some attributes can be minimized, meaning they don't require a value (e.g., `checked`, `disabled`).\n   - **XHTML**: All attributes must have a value in XHTML. Attributes like `checked` and `disabled` must be written as `checked=\"checked\"` and `disabled=\"disabled\"`.\n\n   **Example**:\n   ```html\n   \u003c!-- HTML --\u003e\n   \u003cinput type=\"checkbox\" checked\u003e\n   \u003cbutton disabled\u003eClick me\u003c/button\u003e\n\n   \u003c!-- XHTML --\u003e\n   \u003cinput type=\"checkbox\" checked=\"checked\" /\u003e\n   \u003cbutton disabled=\"disabled\"\u003eClick me\u003c/button\u003e\n   ```\n\nc. ***Document Structure***:\n   - **HTML**: In HTML, the document structure is more forgiving, allowing elements like `\u003chtml\u003e`, `\u003chead\u003e`, and `\u003cbody\u003e` to be omitted in some cases.\n   - **XHTML**: XHTML requires a well-defined document structure with the `\u003chtml\u003e`, `\u003chead\u003e`, and `\u003cbody\u003e` elements always present and properly nested.\n\n   **Example**:\n   ```html\n   \u003c!-- HTML --\u003e\n   \u003ch1\u003eHello, World!\u003c/h1\u003e\n\n   \u003c!-- XHTML --\u003e\n   \u003c!DOCTYPE html\u003e\n   \u003chtml xmlns=\"http://www.w3.org/1999/xhtml\"\u003e\n   \u003chead\u003e\n       \u003ctitle\u003eExample\u003c/title\u003e\n   \u003c/head\u003e\n   \u003cbody\u003e\n       \u003ch1\u003eHello, World!\u003c/h1\u003e\n   \u003c/body\u003e\n   \u003c/html\u003e\n   ```\n\n8. **Difference between `head` and `body` in html**\n   - The `\u003chead\u003e` and `\u003cbody\u003e` elements are two fundamental parts of an HTML document that serve different purposes:\n\n ***`\u003chead\u003e` Element***:\n   - The `\u003chead\u003e` element contains meta-information about the document, such as the title of the document, links to stylesheets, scripts, and other metadata that is not directly displayed on the page.\n   - Content inside the `\u003chead\u003e` element is not visible to the user but is used by browsers and search engines to understand and render the document correctly.\n\n   **Example**:\n   ```html\n   \u003c!DOCTYPE html\u003e\n   \u003chtml\u003e\n   \u003chead\u003e\n       \u003ctitle\u003ePage Title\u003c/title\u003e\n       \u003cmeta charset=\"UTF-8\"\u003e\n       \u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\n   \u003c/head\u003e\n   \u003cbody\u003e\n       \u003c!-- Content goes here --\u003e\n   \u003c/body\u003e\n   \u003c/html\u003e\n   ```\n\n ***`\u003cbody\u003e` Element***:\n   - The `\u003cbody\u003e` element contains the content of the document that is displayed to the user, such as text, images, links, and other elements that make up the visible part of the webpage.\n   - All visible content, including headings, paragraphs, images, lists, tables, forms, etc., should be placed inside the `\u003cbody\u003e` element.\n\n   **Example**:\n   ```html\n   \u003c!DOCTYPE html\u003e\n   \u003chtml\u003e\n   \u003chead\u003e\n       \u003ctitle\u003ePage Title\u003c/title\u003e\n   \u003c/head\u003e\n   \u003cbody\u003e\n       \u003ch1\u003eWelcome to My Website\u003c/h1\u003e\n       \u003cp\u003eThis is a paragraph of text.\u003c/p\u003e\n       \u003cimg src=\"image.jpg\" alt=\"Image\"\u003e\n       \u003ca href=\"https://example.com\"\u003eLink to Example\u003c/a\u003e\n   \u003c/body\u003e\n   \u003c/html\u003e\n   ```\n9. **What are semantic elements in HTML5?**\n   - Semantic elements are tags that provide meaning to the content they enclose, making it easier for search engines and developers to understand the structure of a web page.\nSemantic elements in HTML5 are tags that provide meaning to the content they enclose, making it easier for both developers and browsers to understand the structure of a web page. These elements describe the purpose of the content rather than its appearance. Some common semantic elements in HTML5 include:\n\n ***`\u003cheader\u003e`***: Defines a header section for the document or a section of the document.\n   ```html\n   \u003cheader\u003e\n       \u003ch1\u003eWebsite Title\u003c/h1\u003e\n   \u003c/header\u003e\n   ```\n\n ***`\u003cnav\u003e`***: Defines a set of navigation links.\n   ```html\n   \u003cnav\u003e\n       \u003cul\u003e\n           \u003cli\u003e\u003ca href=\"#\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n           \u003cli\u003e\u003ca href=\"#\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n           \u003cli\u003e\u003ca href=\"#\"\u003eServices\u003c/a\u003e\u003c/li\u003e\n           \u003cli\u003e\u003ca href=\"#\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n       \u003c/ul\u003e\n   \u003c/nav\u003e\n   ```\n\n ***`\u003cmain\u003e`***: Defines the main content of the document.\n   ```html\n   \u003cmain\u003e\n       \u003carticle\u003e\n           \u003ch2\u003eArticle Title\u003c/h2\u003e\n           \u003cp\u003eArticle content goes here...\u003c/p\u003e\n       \u003c/article\u003e\n   \u003c/main\u003e\n   ```\n\n ***`\u003csection\u003e`***: Defines a section in a document, such as chapters, headers, footers, or any other sections of the document.\n   ```html\n   \u003csection\u003e\n       \u003ch2\u003eSection Title\u003c/h2\u003e\n       \u003cp\u003eSection content goes here...\u003c/p\u003e\n   \u003c/section\u003e\n   ```\n\n ***`\u003carticle\u003e`***: Defines an independent piece of content that could stand alone, such as a blog post or a news article.\n   ```html\n   \u003carticle\u003e\n       \u003ch2\u003eArticle Title\u003c/h2\u003e\n       \u003cp\u003eArticle content goes here...\u003c/p\u003e\n   \u003c/article\u003e\n   ```\n\n ***`\u003caside\u003e`***: Defines content aside from the content it is placed in (like a sidebar).\n   ```html\n   \u003caside\u003e\n       \u003ch3\u003eRelated Links\u003c/h3\u003e\n       \u003cul\u003e\n           \u003cli\u003e\u003ca href=\"#\"\u003eLink 1\u003c/a\u003e\u003c/li\u003e\n           \u003cli\u003e\u003ca href=\"#\"\u003eLink 2\u003c/a\u003e\u003c/li\u003e\n           \u003cli\u003e\u003ca href=\"#\"\u003eLink 3\u003c/a\u003e\u003c/li\u003e\n       \u003c/ul\u003e\n   \u003c/aside\u003e\n   ```\n\n ***`\u003cfooter\u003e`***: Defines a footer for the document or a section of the document.\n   ```html\n   \u003cfooter\u003e\n       \u003cp\u003e\u0026copy; 2024 My Website. All rights reserved.\u003c/p\u003e\n   \u003c/footer\u003e\n   ```\n10. **Difference between `Elements` and `Tags` in HTML5?**\n   - HTML Elements vs. Tags\n\n***HTML Elements:***  \nHTML elements are the basic building blocks of a web page. They consist of an opening tag, content, and a closing tag. Elements define the structure and content of the document.\n\n***HTML Tags:***  \nHTML tags mark the beginning and end of an element. They are used to define the structure of the document and are enclosed in angle brackets (`\u003c\u003e`).\n\n**Example:**  \n```html\n\u003c!-- Element: \u003cp\u003e defines a paragraph --\u003e\n\u003cp\u003eInterview Question\u003c/p\u003e\n```\n11. **What are the roles and uses of the `\u003cdiv\u003e` element in HTML?**\n - Roles and Uses of the `\u003cdiv\u003e` Element in HTML\n\n**Role:**  \nThe `\u003cdiv\u003e` element, short for \"division,\" is a generic container used to group together and section off content on a web page. It does not have any inherent meaning or styling, making it highly versatile for structuring and styling content.\n\n**Uses:**\n1. **Structuring Content:** `\u003cdiv\u003e` is commonly used to group related content together, such as a set of paragraphs, images, or form elements.\n\n2. **Styling with CSS:** `\u003cdiv\u003e` is often used as a target for styling with CSS. Developers can apply classes or IDs to `\u003cdiv\u003e` elements to apply specific styles or layout properties.\n\n3. **Scripting and Interaction:** `\u003cdiv\u003e` can be used as a container for interactive elements, such as buttons or dropdown menus, that are manipulated with JavaScript.\n\n**Example:**\n```html\n\u003cdiv id=\"header\"\u003e\n    \u003ch1\u003eWelcome to My Website\u003c/h1\u003e\n    \u003cp\u003eThis is a paragraph in the header section.\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"main-content\"\u003e\n    \u003ch2\u003eMain Content Section\u003c/h2\u003e\n    \u003cp\u003eThis is the main content of the page.\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"footer\"\u003e\n    \u003cp\u003e\u0026copy; 2024 My Website. All rights reserved.\u003c/p\u003e\n\u003c/div\u003e\n```\n12. **What is difference between `\u003cdiv\u003e` and `\u003cspan\u003e` element?**\n - Difference Between `\u003cdiv\u003e` and `\u003cspan\u003e` Elements\n\nBoth `\u003cdiv\u003e` and `\u003cspan\u003e` are generic container elements in HTML used for grouping and styling content, but they have distinct differences in their behavior and typical use cases:\n\n1. **Usage:**\n   - `\u003cdiv\u003e`: Used for block-level grouping of elements. It typically represents a larger section of content, like a section, article, or a container for styling purposes.\n   - `\u003cspan\u003e`: Used for inline grouping of elements. It is typically used to apply styles to a specific portion of text or inline elements.\n\n2. **Display Type:**\n   - `\u003cdiv\u003e`: By default, `\u003cdiv\u003e` elements are block-level elements, meaning they start on a new line and stretch to fill the width of their parent container.\n   - `\u003cspan\u003e`: `\u003cspan\u003e` elements are inline elements, meaning they do not start on a new line and only take up as much width as necessary.\n\n3. **Default Styling:**\n   - `\u003cdiv\u003e`: Does not have any default styling, so developers need to apply CSS to define its appearance.\n   - `\u003cspan\u003e`: Also does not have any default styling, requiring CSS for visual styling.\n\n4. **Semantic Meaning:**\n   - `\u003cdiv\u003e`: Used when there is no other more specific semantic element available to represent the content.\n   - `\u003cspan\u003e`: Similar to `\u003cdiv\u003e`, but typically used for smaller, inline content that needs to be styled or manipulated separately.\n\n**Example:**\n```html\n\u003cdiv style=\"background-color: lightblue; padding: 10px;\"\u003e\n    This is a \u003cspan style=\"color: red;\"\u003ehighlighted\u003c/span\u003e text inside a div.\n\u003c/div\u003e\n```\n13. **What is the role of Heading tags in the Html and how it impact SEO?**\n    \n***Role of Heading Tags in HTML***\n\nHeading tags (`\u003ch1\u003e` to `\u003ch6\u003e`) are used to define headings and subheadings within a webpage. They play a crucial role in structuring content and providing hierarchy to the text, which is important for both users and search engines. Here's how heading tags impact a webpage:\n\n- **Semantic Structure:** Heading tags define the structure of a webpage, indicating the main topics and subtopics. This helps users understand the content organization and improves readability.\n\n- **SEO (Search Engine Optimization):** Search engines use heading tags to understand the context and relevance of the content on a webpage. Proper use of headings can positively impact SEO by improving the page's visibility in search engine results pages (SERPs).\n\n- **Accessibility:** Screen readers and other assistive technologies use heading tags to navigate and understand the content. Using headings correctly improves accessibility for users with disabilities.\n\n- **Styling:** By default, browsers render headings with larger and bolder text, which helps to visually distinguish headings from the rest of the content. However, the appearance can be customized using CSS.\n\n  ***Impact on SEO***\n\nProper use of heading tags can positively impact SEO in several ways:\n\n- **Keyword Optimization:** Heading tags provide an opportunity to include relevant keywords, which can improve the page's relevance for those keywords in search results.\n\n- **Content Organization:** Search engines use heading tags to understand the structure and topics covered in the content. Clear and hierarchical headings can help search engines index the content more effectively.\n\n- **User Experience:** Well-structured headings improve the user experience by making the content easier to scan and understand. This can lead to higher user engagement and lower bounce rates, which are positive signals for SEO.\n\n- **Featured Snippets:** Heading tags are often used by search engines to generate featured snippets, which can increase the visibility of a webpage in search results.\n\n14. **what is difference between `\u003csection\u003e` and `\u003carticle\u003e` element?**\n-  The `\u003csection\u003e` element is used to group related content together, while the `\u003carticle\u003e` element is used to define a self-contained piece of content that can be independently distributed or reused\n\n```html\n\u003csection\u003e\n    \u003ch2\u003eSection Title\u003c/h2\u003e\n    \u003cp\u003eThis is a section of content.\u003c/p\u003e\n    \u003carticle\u003e\n        \u003ch3\u003eArticle Title\u003c/h3\u003e\n        \u003cp\u003eThis is a self-contained article within the section.\u003c/p\u003e\n    \u003c/article\u003e\n\u003c/section\u003e\n```\n15.**What are Empty elements ?**\n  - Empty elements, also known as void or self-closing elements, are elements in HTML that do not have any content between an opening and closing tag. They are self-contained and usually represent a single piece of content or functionality. \n\nExample: \n\n```html\n\u003cimg src=\"image.jpg\" alt=\"An image\"\u003e\n\u003cbr\u003e\n\u003cinput type=\"text\" placeholder=\"Enter your name\"\u003e\n```\n16.**What are the Block Level and Inline Elements?**\n - `Block-level` elements are those that typically start on a new line and take up the full width available, while `inline elements` are those that do not start on a new line and only take up as much width as necessary.\n\n ***Display:*** Block-level elements have a display property of \"block\", while inline elements have a display property of \"inline\".\n   \n   Example of a block-level element:\n   ```html\n   \u003cdiv\u003eThis is a block-level element\u003c/div\u003e\n   ```\n\n   Example of an inline element:\n   ```html\n   \u003cspan\u003eThis is an inline element\u003c/span\u003e\n   ```\n\n ***Width:*** Block-level elements take up the full width available, while inline elements only take up as much width as necessary.\n\n   Example of a block-level element:\n   ```html\n   \u003cdiv style=\"width: 100px; background-color: lightblue;\"\u003eBlock-level element\u003c/div\u003e\n   ```\n\n   Example of an inline element:\n   ```html\n   \u003cspan style=\"background-color: lightblue;\"\u003eInline element\u003c/span\u003e\n   ```\n\n ***Line Break:*** Block-level elements start on a new line, creating a line break before and after the element, while inline elements do not create a line break.\n\n   Example of a block-level element:\n   ```html\n   \u003cdiv\u003eThis is a block-level element\u003c/div\u003e\n   ```\n\n   Example of an inline element:\n   ```html\n   \u003cspan\u003eThis is an inline element\u003c/span\u003e\n   ```\n17. **What are the 5 types of links in Html ?**\n    - Here are five types of links in HTML:\n\n ***Anchor Link (`\u003ca\u003e`):*** Used to create hyperlinks to other web pages, files, email addresses, or locations within the same page.\n   ```html\n   \u003ca href=\"https://www.example.com\"\u003eVisit Example\u003c/a\u003e\n   ```\n\n ***Image Link (`\u003ca\u003e` with `\u003cimg\u003e`):*** Used to create clickable images that link to other web pages or resources.\n   ```html\n   \u003ca href=\"https://www.example.com\"\u003e\u003cimg src=\"image.jpg\" alt=\"Image Link\"\u003e\u003c/a\u003e\n   ```\n\n ***External Link (`\u003clink\u003e`):*** Used to link external resources such as stylesheets or favicons to an HTML document.\n   ```html\n   \u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\n   ```\n\n ***Bookmark Link (`\u003ca\u003e` with `#`):*** Used to create internal links to specific sections or bookmarks within the same page.\n   ```html\n   \u003ca href=\"#section2\"\u003eJump to Section 2\u003c/a\u003e\n   ```\n ***Area Link (`\u003cmap\u003e` with `\u003carea\u003e`):** Used to create clickable areas within an image map that link to different destinations.\n   ```html\n   \u003cmap name=\"map1\"\u003e\n       \u003carea shape=\"rect\" coords=\"0,0,50,50\" href=\"https://www.example.com\"\u003e\n   \u003c/map\u003e\n   \u003cimg src=\"image.jpg\" usemap=\"#map1\"\u003e\n   ```\n\n18. **What is difference between Absolute and Relative urls in Html?**\n - Absolute URLs specify the complete web address, including the protocol (e.g., http:// or https://), domain (e.g., www.example.com), and path (e.g., /path/to/page). \n\n ```html \n \u003ca href=\"https://www.example.com/page\"\u003eLink\u003c/a\u003e`\n```\n\n - Relative URLs specify the path to a resource relative to the current page's URL. \n\n ```html \n \u003ca href=\"page\"\u003eLink\u003c/a\u003e`\n```\n\n19 . **What is Fragment Identifier in a url ?**\n\n- A fragment identifier in a URL is a string of characters that identifies a specific part of a resource, such as a section within an HTML document.\n\n```html \nIn the URL `https://www.example.com/page#section\n```\nthe fragment identifier `#section` refers to a specific section within the `page` resource.\n\n20. **How do you create a hyperlink in HTML5?**\n   - You can create a hyperlink using the `\u003ca\u003e` tag and specifying the URL in the `href` attribute. For example, `\u003ca href=\"https://example.com\"\u003eVisit Example\u003c/a\u003e`.\n\n21. **What is the `\u003ccanvas\u003e` element in HTML5 used for?**\n   - The `\u003ccanvas\u003e` element is used for drawing graphics, animations, or other visual images on the fly using JavaScript.\n\n22. **What is the difference between the `\u003ccanvas\u003e` and `\u003csvg\u003e` elements in HTML5?**\n   - `\u003ccanvas\u003e` is used for drawing raster graphics using JavaScript, while `\u003csvg\u003e` is used for creating vector graphics that can be scaled without losing quality.\n\n23. **How do you embed a video in HTML5?**\n   - You can embed a video using the `\u003cvideo\u003e` element and specifying the video file URL in the `src` attribute. For example, `\u003cvideo src=\"video.mp4\" controls\u003e\u003c/video\u003e`.\n\n24. **What is the purpose of the `controls` attribute in the `\u003cvideo\u003e` element?**\n   - The `controls` attribute adds playback controls (play, pause, volume, etc.) to the video player, allowing users to interact with the video.\n\n25. **How do you create a form in HTML5?**\n    - You can create a form using the `\u003cform\u003e` element and adding input fields, buttons, and other form elements inside the form tag.\n\n26. **What are the new input types in HTML5?**\n    - HTML5 introduced new input types such as `email`, `url`, `tel`, `date`, `time`, `number`, `color`, etc., which provide better user experience and validation.\n\n27. **How do you create a placeholder text in an input field in HTML5?**\n    - You can create a placeholder text using the `placeholder` attribute in an input field. For example, `\u003cinput type=\"text\" placeholder=\"Enter your name\"\u003e`.\n\n28. **What is the purpose of the `required` attribute in HTML5 form elements?**\n    - The `required` attribute specifies that an input field must be filled out before submitting the form, helping to ensure that the user provides necessary information.\n\n29. **How do you create a dropdown list in HTML5?**\n    - You can create a dropdown list using the `\u003cselect\u003e` element and adding `\u003coption\u003e` elements inside it. For example,\n      ```html\n      \u003cselect\u003e\n        \u003coption value=\"1\"\u003eOption 1\u003c/option\u003e\n        \u003coption value=\"2\"\u003eOption 2\u003c/option\u003e\n      \u003c/select\u003e\n      ```\n\n30. **What is the purpose of the `autofocus` attribute in HTML5 form elements?**\n    - The `autofocus` attribute specifies that an input field should automatically get focus when the page loads, allowing the user to start typing without clicking.\n\n31. **What is the purpose of the `autocomplete` attribute in HTML5 form elements?**\n    - The `autocomplete` attribute specifies whether a form field should have autocomplete enabled or disabled, helping users fill out forms more quickly.\n\n32. **How do you create a radio button in HTML5?**\n    - You can create a radio button using the `\u003cinput\u003e` element with `type=\"radio\"` and specifying the `name` attribute to group related radio buttons. For example,\n      ```html\n      \u003cinput type=\"radio\" name=\"gender\" value=\"male\"\u003e Male\n      \u003cinput type=\"radio\" name=\"gender\" value=\"female\"\u003e Female\n      ```\n\n33. **What is the purpose of the `\u003carticle\u003e` element in HTML5?**\n    - The `\u003carticle\u003e` element is used to define a self-contained piece of content that can be independently distributed or reused, such as a blog post or news article.\n\n34. **How do you create a table in HTML5?**\n    - You can create a table using the `\u003ctable\u003e` element and adding `\u003ctr\u003e` for rows, `\u003ctd\u003e` for data cells, and `\u003cth\u003e` for header cells. For example,\n      ```html\n      \u003ctable\u003e\n        \u003ctr\u003e\n          \u003cth\u003eName\u003c/th\u003e\n          \u003cth\u003eAge\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eJohn\u003c/td\u003e\n          \u003ctd\u003e30\u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/table\u003e\n      ```\n\n35. **What is the purpose of the `localStorage` object in HTML5?**\n    - The `localStorage` object is used to store key-value pairs locally in the user's browser, allowing data to persist even after the browser is closed.\n\n36 **What is the colspan attribute in HTML ?**\n\n   - The `colspan` attribute in HTML is used in table cells to specify the number of columns a cell should span.\n\nExample:\n\n```html\n\u003ctable border=\"1\"\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eCell 1\u003c/td\u003e\n    \u003ctd\u003eCell 2\u003c/td\u003e\n    \u003ctd colspan=\"2\"\u003eCell 3 (spanning 2 columns)\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n```\n\nIn this example, the third cell spans two columns due to the `colspan=\"2\"` attribute, making it wider than the other cells in the same row.\n\n37. **How do you create a new section in HTML5?**\n    - You can create a new section using the `\u003csection\u003e` element, which is used to group related content together. For example,\n      ```html\n      \u003csection\u003e\n        \u003ch2\u003eSection Title\u003c/h2\u003e\n        \u003cp\u003eSection content goes here...\u003c/p\u003e\n      \u003c/section\u003e\n      ```\n\n38. **What is the purpose of the `download` attribute in HTML5?**\n    - The `download` attribute is used in `\u003ca\u003e` and `\u003carea\u003e` elements to specify that the target will be downloaded when a user clicks on the link.\n\n39. **What is the purpose of the `async` attribute in the `\u003cscript\u003e` tag in HTML5?**\n    - The `async` attribute is used to indicate that the script should be executed asynchronously, allowing the rest of the page to load without waiting for the script to finish.\n\n40. **How do you create a tooltip in HTML5?**\n    - You can create a tooltip using the `title` attribute in HTML elements. For example, `\u003cspan title=\"Tooltip text\"\u003eHover over me\u003c/span\u003e`.\n\n41. **What is the purpose of the `\u003cdetails\u003e` and `\u003csummary\u003e` elements in HTML5?**\n    - The `\u003cdetails\u003e` element is used to create a disclosure widget that can be toggled open and closed, and the `\u003csummary\u003e` element provides a summary or label for the details. \n      ```html\n      \u003cdetails\u003e\n        \u003csummary\u003eClick me\u003c/summary\u003e\n        \u003cp\u003eHidden details\u003c/p\u003e\n      \u003c/details\u003e\n      ```\n\n42. **How do you create a progress bar in HTML5?**\n    - You can create a progress bar using the `\u003cprogress\u003e` element and specifying the `value` and `max` attributes. For example, `\u003cprogress value=\"50\" max=\"100\"\u003e\u003c/progress\u003e`.\n\n43. **What is the purpose of the `\u003ctime\u003e` element in HTML5?**\n    - The `\u003ctime\u003e` element is used to represent a specific time or date, and it can help search engines and browsers understand the date and time content of a web page.\n\n44. **How do you create a section of text that is not displayed by the browser in HTML5?**\n    - You can create a section of text that is not displayed using the `\u003c!-- --\u003e` comment syntax. For example, `\u003c!-- This is a comment --\u003e`.\n\n45. **What is the purpose of the `sandbox` attribute in the `\u003ciframe\u003e` element in HTML5?**\n    - The `sandbox` attribute is used to restrict what can be done with the content inside the `\u003ciframe\u003e`, such as preventing it from executing JavaScript or submitting forms.\n\n46. **What is the purpose of the `defer` attribute in the `\u003cscript\u003e` tag in HTML5?**\n    - The `defer` attribute is used to indicate that the script should be executed after the document has been parsed, ensuring that it does not block the rendering of the page.\n\n47. **How do you create a line break in HTML5?**\n    - You can create a line break using the `\u003cbr\u003e` element. For example, `\u003cp\u003eLine 1\u003cbr\u003eLine 2\u003c/p\u003e`.\n\n48. **What is the purpose of the `hidden` attribute in HTML5?**\n    - The `hidden` attribute is used to hide an element from being displayed on the page, similar to setting `display: none` in CSS.\n    \n49. **What is the purpose of the `min` and `max` attributes in HTML5 form elements?**\n    - The `min` and `max` attributes are used to set the minimum and maximum values for input fields such as `number` and `date`.\n\n50. **What is the purpose of the `required` attribute in HTML5 form elements?**\n    - The `required` attribute is used to specify that an input field must be filled out before submitting the form, helping to ensure that the user provides necessary information.\n\n\n\u003cimg src=\"https://images.unsplash.com/photo-1499744937866-d7e566a20a61?w=500\u0026auto=format\u0026fit=crop\u0026q=60\u0026ixlib=rb-4.0.3\u0026ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTR8fHxlbnwwfHx8fHw%3D\" style=\"width: 100%; height: 400px;\"/\u003e\n\n## Thanks\n`Thank you` for using this HTML interview preparation guide! We hope it has helped you in your interview preparation. If you have any questions or feedback, feel free to reach out.\n\n# Connect with Us \n- [GitHub](https://github.com/zahidrahimoon)\n- [LinkedIn](https://www.linkedin.com/in/zahidrahimoon/)\n- [Email](zahidrahimoon22@gmail.com)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzahidrahimoon%2F50-html-interview-qna","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzahidrahimoon%2F50-html-interview-qna","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzahidrahimoon%2F50-html-interview-qna/lists"}