{"id":28399480,"url":"https://github.com/learning-zone/html-basics","last_synced_at":"2026-01-27T20:16:03.893Z","repository":{"id":40459220,"uuid":"174071784","full_name":"learning-zone/html-basics","owner":"learning-zone","description":"HTML Basics ( HTML-5 )","archived":false,"fork":false,"pushed_at":"2023-12-31T05:12:45.000Z","size":6191,"stargazers_count":570,"open_issues_count":0,"forks_count":236,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-06-01T15:49:57.164Z","etag":null,"topics":["canvas","doctype","geolocation","html","html5-interview-questions","localstorage","metatags","semantic-elements","sessionstorage","web-workers"],"latest_commit_sha":null,"homepage":"https://learning-zone.github.io/html-interview-questions/","language":"HTML","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/learning-zone.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}},"created_at":"2019-03-06T04:32:49.000Z","updated_at":"2025-05-13T19:32:48.000Z","dependencies_parsed_at":"2023-12-31T06:45:41.144Z","dependency_job_id":"cf159faf-2573-441e-8d3c-db5df1b8b3d0","html_url":"https://github.com/learning-zone/html-basics","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fhtml-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fhtml-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fhtml-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fhtml-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/learning-zone","download_url":"https://codeload.github.com/learning-zone/html-basics/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fhtml-basics/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":258683857,"owners_count":22740936,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["canvas","doctype","geolocation","html","html5-interview-questions","localstorage","metatags","semantic-elements","sessionstorage","web-workers"],"created_at":"2025-06-01T08:09:16.237Z","updated_at":"2026-01-27T20:16:03.884Z","avatar_url":"https://github.com/learning-zone.png","language":"HTML","readme":"\n# HTML Basics\n\n\u003e *Click \u0026#9733; if you like the project. Your contributions are heartily ♡ welcome.*\n\n\u003cbr/\u003e\n\n## Related Topics\n\n* *[HTML5 Events List](html5-events.md)*\n* *[HTML5 Tags](html5-tags.md)*\n* *[CSS Basics](https://github.com/learning-zone/css-basics)*\n* *[JavaScript Basics](https://github.com/learning-zone/javascript-basics)*\n\n\u003cbr/\u003e\n\n## Table of Contents\n\n* [Introduction](#-1-introduction)\n* [HTML Tags](#-2-html-tags)\n* [HTML Events](#-3-html-events)\n* [HTML Forms](#-4-html-forms)\n* [HTML Tables](#-5-html-tables)\n* [HTML Lists](#-6-html-lists)\n* [HTML Iframe](#-6-html-iframe)\n* [HTML URL](#-6-html-url)\n* [HTML SVG](#-7-html-svg)\n* [HTML Canvas](#-8-html-canvas)\n* [HTML Storage](#-9-html-storage)\n* [HTML APIs](#-10-html-apis)\n* [HTML Drag and Drop](#-11-html-drag-and-drop)\n* [HTML Web Worker](#-12-html-web-worker)\n* [HTML Accessibility](#-13-html-accessibility)\n* [Miscellaneous](#-14-miscellaneous)\n\n\u003cbr/\u003e\n\n## # 1. Introduction\n\n\u003cbr/\u003e\n\n## Q. What is the difference between HTML and XHTML?\n\nThe Extensible Hypertext Markup Language, or XHTML, has two important notes for front end developers.\n\n1) It needs to be well formed, meaning all elements need to be closed and nested correctly or you will return errors.\n2) Since it is more strict than HTML is requires less pre-processing by the browser, which may improve your sites performance.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are the building blocks of HTML5?\n\n* **Semantics**: allowing you to describe more precisely what your content is.\n* **Connectivity**: allowing you to communicate with the server in new and innovative ways.\n* **Offline and storage**: allowing webpages to store data on the client-side locally and operate offline more efficiently.\n* **Multimedia**: making video and audio first-class citizens in the Open Web.\n* **2D/3D graphics and effects**: allowing a much more diverse range of presentation options.\n* **Performance and integration**: providing greater speed optimization and better usage of computer hardware.\n* **Device access**: allowing for the usage of various input and output devices.\n* **Styling**: letting authors write more sophisticated themes.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are the semantic tags available in HTML5?\n\nHTML5 semantic tags define the function and the category of your text, simplifying the work for browsers and search engines, as well as developers.\n\nHTML5 offers new semantic elements to define different parts of a web page:\n\n* `\u003carticle\u003e`\n* `\u003caside\u003e`\n* `\u003cdetails\u003e`\n* `\u003cfigcaption\u003e`\n* `\u003cfigure\u003e`\n* `\u003cfooter\u003e`\n* `\u003cheader\u003e`\n* `\u003cmain\u003e`\n* `\u003cmark\u003e`\n* `\u003cnav\u003e`\n* `\u003csection\u003e`\n* `\u003csummary\u003e`\n* `\u003ctime\u003e`\n\n**Syntax:**\n\n```html\n\u003c!DOCTYPE html\u003e \n\n\u003chtml\u003e  \n   \u003chead\u003e \n      \u003cmeta charset = \"utf-8\"/\u003e \n      \u003ctitle\u003e...\u003c/title\u003e \n   \u003c/head\u003e \n  \n   \u003cbody\u003e \n      \u003cheader\u003e...\u003c/header\u003e \n      \u003cnav\u003e...\u003c/nav\u003e \n      \n      \u003carticle\u003e \n         \u003csection\u003e \n            ... \n         \u003c/section\u003e \n      \u003c/article\u003e \n      \u003caside\u003e...\u003c/aside\u003e \n      \n      \u003cfooter\u003e...\u003c/footer\u003e \n   \u003c/body\u003e \n\u003c/html\u003e \n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Why you would like to use semantic tag?\n\n* Search Engine Optimization, accessibility, repurposing, light code. \n* Many visually impaired person rely on browser speech and semantic tag helps to interpret page content clearly.\n* Search engine needs to understand page content to rank and semantic tag helps.\n* Semantic code aids accessibility. Specially, many people whose eyes are not good rely on speech browsers to read pages to them. These programs cannot interpret pages very well unless they are clearly explained.\n* Help Search engines to better understand pages. Search engine need to understand what your content is about when rank you properly on search engines. Semantic code tends to improve your placement on search engines, as it is easier for the \"search engine spiders\" to understand.\n* It\\'s easier to read and edit, which saves time and money during maintenance.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What does a `\u003cDOCTYPE html\u003e` do?\n\nA DOCTYPE is always associated to a `DTD` ( **Document Type Definition** ). A DTD defines how documents of a certain type should be structured (i.e. a `button` can contain a `span` but not a `div`), whereas a DOCTYPE declares what DTD a document supposedly respects (i.e. this document respects the HTML DTD). For webpages, the DOCTYPE declaration is required. It is used to tell user agents what version of the HTML specifications your document respects. \n\nOnce a user agent has recognized a correct DOCTYPE, it will trigger the `no-quirks mode` matching this DOCTYPE forreading the document. If a user agent doesn't recognize a correct DOCTYPE, it will trigger the `quirks mode`.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What happens when DOCTYPE is not given?\n\nThe web page is rendered in quirks mode. The web browsers engines use quirks mode to support older browsers which does not follow the **W3C specifications**. In quirks mode CSS class and id names are case insensitive. In standards mode they are case sensitive.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are the new form elements in HTML5?\n\nThere are five new form elements in the HTML5 forms specification: `\u003cdatalist\u003e`, `\u003coutput\u003e`, `\u003cprogress\u003e`, and `\u003cmeter\u003e`. \n\n**1. Datalist Tag**\n\nAllows to attach a list of suggestions to a text input element. As soon as the user begins to type in the text field, the list of suggestions appears and the user can choose from the suggestions with the mouse.\n\n```html\n\u003cp\u003eEnter your favorite browser name:\u003c/p\u003e\n\u003cinput type=\"text\" list=\"browsers\" name=\"favorite_browser\"\u003e\n\u003cdatalist id=\"browsers\"\u003e\n    \u003coption value=\"Firefox\"\u003e\n    \u003coption value=\"Chrome\"\u003e    \n    \u003coption value=\"Internet Explorer\"\u003e\n    \u003coption value=\"Opera\"\u003e\n    \u003coption value=\"Safari\"\u003e\n\u003c/datalist\u003e\n```\n\n**2. Meter Tag**\n\nIndicates a numeric value that falls within a range. The tag supports a number of attributes:\nvalue: If you don\\'t specify a value, the first numeric value inside the `\u003cmeter\u003e\u003c/meter\u003e` pair becomes the value.\n\n* **max**: The maximum possible value of the item.\n* **min**: The minimum possible value of the item.\n* **high**: If the value can be defined as a range, this is the high end of the range.\n* **low**: If the value can defined as a range, this is the low end of that range.\n* **optimum**: The optimal value of the element. \n\n```html\n\u003cp\u003eDisk Usage: \u003cmeter value=\"0.2\"\u003e20%\u003c/meter\u003e\u003c/p\u003e\n\n\u003cp\u003eTotal Score: \u003cmeter value=\"6\" min=\"0\" max=\"10\"\u003e6 out of 10\u003c/meter\u003e\u003c/p\u003e\n\n\u003cp\u003ePollution Level: \u003cmeter low=\"60\" high=\"80\" max=\"100\" value=\"85\"\u003eVery High\u003c/meter\u003e\u003c/p\u003e\n```\n\n**3. Output Tag**\n\nIt indicates a section of the page that can be modified by a script (usually JavaScript).\n\n```html\n\u003cform oninput=\"result.value=parseInt(a.value)+parseInt(b.value)\"\u003e\n  \u003cinput type=\"range\" id=\"a\" value=\"50\"\u003e +\n  \u003cinput type=\"number\" id=\"b\" value=\"100\"\u003e =\n  \u003coutput name=\"result\" for=\"a b\"\u003e\u003c/output\u003e\n\u003c/form\u003e\n```\n\n**4. Progress Tag**\n\nIndicates how much of a task has been completed (often marked as a percentage). It is expected to be modified through JavaScript code.\n\n```html\n \n\u003cp\u003eProgress: \u003cprogress id=\"bar\" value=\"0\" max=\"100\"\u003e\u003cspan\u003e0\u003c/span\u003e%\u003c/progress\u003e\u003c/p\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n    var i = 0;\n    var progressBar = document.getElementById(\"bar\");\n    \n    function countNumbers() {\n      if(i \u003c 100) {\n        i = i + 1;\n        progressBar.value = i;\n        // For browsers that don't support progress tag\n        progressBar.getElementsByTagName(\"span\")[0].textContent = i;\n      }\n\n      // Wait for sometime before running this script again\n      setTimeout(\"countNumbers()\", 100);\n    }\n    countNumbers();\n\u003c/script\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How many new form elements are introduced in html5?\n\n|Sl.No| Element     | Description   |\n|-----|-------------|---------------------------|\n| 01. |color        |Gives the end user a native color picker to choose a color.|\n| 02. |date         |Offers a datepicker.|\n| 03. |datetime     |An element to choose both date and time.|\n| 04. |datetime-local |An element to choose both date and time, with local settings support.|\n| 05. |email        |A field for entering e-mail address(es).|\n| 06. |month       |Choose a full month.|\n| 07. |number       |Picking a number.|\n| 08. |range        |Offers a slider to set to a certain value/position.|\n| 09. |search       |A field for search queries.|\n| 10. |tel          |Choosing a telephone number.|\n| 11. |time         |Input a certain time.|\n| 12. |url          |Entering a URL.|\n| 13. |week         |Picking a specific week.|\n\n\n**Example:**\n\n```html\n\u003cinput type=\"color\" value=\"#b97a57\"\u003e\n\n\u003cinput type=\"date\" value=\"2020-06-08\"\u003e\n\n\u003cinput type=\"datetime\" value=\"2020-06-09T20:35:34.32\"\u003e\n\n\u003cinput type=\"datetime-local\" value=\"2020-06-09T22:41\"\u003e\n\n\u003cinput type=\"email\" value=\"robert@robertnyman.com\"\u003e\n\n\u003cinput type=\"month\" value=\"2020-06\"\u003e\n\n\u003cinput type=\"number\" value=\"4\"\u003e\n\n\u003cinput type=\"range\" value=\"15\"\u003e\n\n\u003c!-- Note: If not set, default attribute values are min=\"0\", max=\"100\", step=\"1\". --\u003e\n\n\u003cinput type=\"search\" value=\"[Any search text]\"\u003e\n\n\u003cinput type=\"tel\" value=\"[Any numeric value]\"\u003e\n\n\u003c!-- Note: Most web browsers seem to let through any value at this time. --\u003e\n\n\u003cinput type=\"time\" value=\"22:38\"\u003e\n\n\u003cinput type=\"url\" value=\"https://www.google.com/\"\u003e\n\n\u003c!-- Note: requires a protocol like http://, ftp:// etc in the beginning. --\u003e\n\n\n\u003cinput type=\"week\" value=\"2020-W24\"\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Create a HTML form with below constraints?\n\n   * Accept User Name, Email, Country and Subject\n   * Validate the fields\n   * Store data into local Storage\n   * Fetch user data and display on right side of the page\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\u003cstyle\u003e\n  body {font-family: Arial, Helvetica, sans-serif;}\n  * {box-sizing: border-box;}\n  \n  input[type=text], input[type=email], select, textarea {\n    width: 100%;\n    padding: 12px;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    box-sizing: border-box;\n    margin-top: 6px;\n    margin-bottom: 16px;\n    resize: vertical;\n  }\n  \n  input[type=submit] {\n    background-color: #0e8af7;\n    color: white;\n    padding: 12px 20px;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n  }\n  \n  input[type=submit]:hover {\n    background-color: #1181e3;\n  }\n  \n  .container {\n    border-radius: 5px;\n    background-color: #f2f2f2;\n    padding: 20px;\n  }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003ch3\u003eContact Form\u003c/h3\u003e\n\n\u003cdiv class=\"container\"\u003e\n  \u003cform name=\"contactForm\" onsubmit=\"return validateForm()\" method=\"post\"\u003e\n    \u003clabel for=\"fname\"\u003eName\u003c/label\u003e\n    \u003cinput type=\"text\" id=\"user_name\" name=\"user_name\" placeholder=\"Your name..\" required\u003e\n\n    \u003clabel for=\"lname\"\u003eEmail ID\u003c/label\u003e\n    \u003cinput type=\"email\" id=\"email\" name=\"email\" placeholder=\"Your Email Address..\" required\u003e\n\n    \u003clabel for=\"country\"\u003eCountry\u003c/label\u003e\n    \u003cselect id=\"country\" name=\"country\" required\u003e\n      \u003coption value=\"\"\u003e--- SELECT ---\u003c/option\u003e\n      \u003coption value=\"australia\"\u003eAustralia\u003c/option\u003e\n      \u003coption value=\"canada\"\u003eCanada\u003c/option\u003e\n      \u003coption value=\"india\"\u003eIndia\u003c/option\u003e\n      \u003coption value=\"usa\"\u003eUSA\u003c/option\u003e\n    \u003c/select\u003e\n\n    \u003clabel for=\"subject\"\u003eSubject\u003c/label\u003e\n    \u003ctextarea id=\"subject\" name=\"subject\" placeholder=\"Write something..\" style=\"height:200px\"\u003e\u003c/textarea\u003e\n\n    \u003cinput type=\"submit\" value=\"Submit\"\u003e\n  \u003c/form\u003e\n\u003c/div\u003e\n\u003cscript\u003e\n    function validateForm() {\n      let name = document.forms[\"contactForm\"][\"user_name\"].value;\n      let email = document.forms[\"contactForm\"][\"email\"].value;\n      let country = document.forms[\"contactForm\"][\"country\"].value;\n      let subject = document.forms[\"contactForm\"][\"subject\"].value;\n\n      if (name === \"\" || email === \"\" || country === \"\") {\n        alert(\"All the fields are mandatory\");\n        return false;\n      } else { \n        // Create a JSON Object\n        const userData = {\n          name: name,\n          email: email,\n          country: country,\n          subject: subject\n        };\n\n        // Store the object into storage\n        localStorage.setItem(\"userData\", JSON.stringify(userData));\n\n        // Retrieve the object from the storage\n        const data = localStorage.getItem(\"userData\");\n        console.log(\"data: \", JSON.parse(data));\n        \n        return false;\n      }\n    }\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is difference between `span` tag and `div` tag?\n\nThe primary difference between div and span tag is their default behavior. By default, a `\u003cdiv\u003e` is a **block-level-element** and a `\u003cspan\u003e` is an **inline element**.\n\n* `\u003cdiv\u003e` is a block level element which means it will render it on it\\'s own line with a width of a 100% of the parent element.\n* `\u003cspan\u003e` is an inline element which means it will render on the same line as the previous element, if it is also an inline element, and it's width will be determined by it\\'s content.\n\n```html\n\u003cdiv\u003eDemo Text, with \u003cspan\u003esome other\u003c/span\u003e text.\u003c/div\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are optional closing tag?\n\n`\u003cp\u003e, \u003cli\u003e, \u003ctd\u003e, \u003ctr\u003e, \u003cth\u003e, \u003chtml\u003e, \u003cbody\u003e`, etc. don\\'t have to provide end tag. Whenever browser hits a new tag it automatically ends the previous tag. \n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is a self closing tag?\n\nIn HTML5 it is not strictly necessary to close certain HTML tags. The tags that aren\\'t required to have specific closing tags are called “self closing” tags.\n\nAn example of a self closing tag is something like a line break (`\u003cbr /\u003e`) or the meta tag (`\u003cmeta\u003e`). This means that the following are both acceptable:\n\n```html\n\u003cmeta charset=\"UTF-8\"\u003e\n...\n\u003cmeta charset=\"UTF-8\" /\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain the difference between block elements and inline elements?\n\n* block elements `\u003ch1\u003e, \u003cp\u003e, \u003cul\u003e, \u003col\u003e, \u003cli\u003e`,\n* inline elements `\u003cspan\u003e, \u003ca\u003e, \u003cstrong\u003e, \u003ci\u003e, \u003cimg\u003e`\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are semantic and non-semantic elements?\n\n* **Semantic elements**: clearly describes its meaning to both the browser and the developer.\nFor example: `\u003cform\u003e`, `\u003ctable\u003e`,  `\u003carticle\u003e`, `\u003caside\u003e`, `\u003cdetails\u003e`, `\u003cfigcaption\u003e`, `\u003cfigure\u003e`, `\u003cfooter\u003e`, `\u003cheader\u003e`, `\u003cmain\u003e`, `\u003cmark\u003e`, `\u003cnav\u003e`, `\u003csection\u003e`, `\u003csummary\u003e`, `\u003ctime\u003e` clearly defines its content.\n  \n* **Non-semantic elements**: `\u003cdiv\u003e` and `\u003cspan\u003e` tells nothing about its content.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the purpose of `main` element?\n\nThe HTML `\u003cmain\u003e` element represents the dominant content of the `\u003cbody\u003e` of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.\n\n```html\n\u003cmain role=\"main\"\u003e\n    \u003cp\u003eGeckos are a group of usually small, usually nocturnal lizards. \n       They are found on every continent except Australia.\u003c/p\u003e\n    \u003cp\u003eMany species of gecko have adhesive toe pads which enable them to climb walls and even windows.\u003c/p\u003e\n\u003c/main\u003e\n```\n\n*Note: A document mustn\\'t have more than one `\u003cmain\u003e` element that doesn't have the hidden attribute specified.*\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are the semantic meanings for `\u003csection\u003e, \u003carticle\u003e, \u003caside\u003e, \u003cnav\u003e, \u003cheader\u003e, \u003cfooter\u003e` and how should each be used in structuring html markup?\n\n* `\u003cheader\u003e` is used to contain introductory and navigational information about a section of the page. This can include the section heading, the author\\'s name, time and date of publication, table of contents, or other navigational information.\n\n* `\u003carticle\u003e` is meant to house a self-contained composition that can logically be independently recreated outside of the page without losing it\\'s meaining. Individual blog posts or news stories are good examples.\n\n* `\u003csection\u003e` is a flexible container for holding content that shares a common informational theme or purpose.\n\n* `\u003cfooter\u003e` is used to hold information that should appear at the end of a section of content and contain additional information about the section. Author\\'s name, copyright information, and related links are typical examples of such content.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. When should you use `section`, `div` or `article`?\n\n* `\u003csection\u003e`, group of content inside is related to a single theme, and should appear as an entry in an outline of the page. It\\'s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp\\'s tabbed interface. A section normally has a heading (title) and maybe a footer too.\n\n* `\u003carticle\u003e`, represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.\n\n* `\u003cdiv\u003e`, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Can a web page contain multiple `\u003cheader\u003e` elements? What about `\u003cfooter\u003e` elements?\n\nYes, header elements can be used multiple times in documents. A `\u003cheader\u003e` tag must be present for all articles, sections, and pages, although a `\u003cfooter\u003e` tag is not necessary.\n\n**From W3C standards**\n\n```html\nA header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup \nelement), but this is not required. The header element can also be used to wrap a section's table of \ncontents, a search form, or any relevant logos.\n```\n\n```html\nThe footer element represents a footer for its nearest ancestor sectioning content or sectioning root \nelement. A footer typically contains information about its section such as who wrote it, links to related \ndocuments, copyright data, and the like.\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are the physical tags and logical tags in HTML?\n\n**1. Physical Tags:**\n\nPhysical tags are used to indicate how a particular character is to be formatted. Any physical style tag may contain any item allowed in text, including conventional text, images, line breaks, etc.\n\n**Example:**\n\n|Tags      | Description                                                      |\n|----------|------------------------------------------------------------------|\n|`\u003csup\u003e`   |Superscript is usually used for showing elements above base-line |\n|`\u003csub\u003e`   |The subscript is used for alternate baseline.|\n|`\u003ci\u003e`     |An Italic tag is used to define a text with a special meaning. |\n|`\u003cbig\u003e`   |Big tag increase the font size by 1 (Note: You can not use the big tag in HTML 5)|\n|`\u003csmall\u003e` |A small tag defines the small text, and it is used while writing copyright.|\n|`\u003cb\u003e`     |Bold increases the importance of the text because bold tag covert the text into bold size.|\n|`\u003cu\u003e`     |It is used to underline the text.|\n|`\u003ctt\u003e`    |Teletype text gives the default font-family which is monospace.|\n|`\u003cstrike\u003e`|It is an editing markup that tells the reader to ignore the text passage.|\n\n**2. Logical Tags:**\n\nLogical tags are used to tell the browser what kind of text is written inside the tags. Logical tags are also known as Structural tags because they specify the structure of the document. Logical tags are used to indicate to the visually impaired person that there is something more important in the text or to emphasize the text ie, logical tags can be used for styling purposes as well as to give special importance to text content.\n\n**Example:**\n\n|Tags       | Description                     |\n|-----------|---------------------------------|\n|`\u003cabbr\u003e`   |Defines the abbreviation of text.|\n|`\u003cacronym\u003e`|Defines the acronym.|\n|`\u003caddress\u003e`|Contact information of a person or an organization.|\n|`\u003ccite\u003e`   |Defines citation. It displays the text in italic format.|\n|`\u003ccode\u003e`   |Defines the piece of computer code.|\n|`\u003cblockquote\u003e`|Defines a long quotation.|\n|`\u003cdel\u003e`    |Defines the deleted text and is used to mark a portion of text which has been deleted from the document.|\n|`\u003cdfn\u003e`    |Defines the definition element and is used to representing a defining instance in HTML.|\n|`\u003cins\u003e`    |Defines inserted text.|\n|`\u003ckbd\u003e`    |Defines keyboard input text.|\n|`\u003cpre\u003e`    |Defines the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers.|\n|`\u003cq\u003e`      |Defines the short quotation.|\n|`\u003csamp\u003e`   |Defines the sample output text from a computer program.|\n|`\u003cstrong\u003e` |Defines strong text i.e. show the importance of the text.|\n|`\u003cvar\u003e`    |Defines the variable in a mathematical equation or in the computer program.|\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is Character Encoding?\n\nCharacter encoding is a method of converting bytes into characters. To validate or display an HTML document properly, a program must choose a proper character encoding. This is specified in the tag:\n\n```html\n\u003cmeta charset=\"utf-8\"/\u003e\n```\n\n* **UTF-8**: A Unicode Translation Format that comes in 8-bit units that is, it comes in bytes. A character in UTF8 can be from 1 to 4 bytes long, making UTF8 variable width.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the purpose of meta tags?\n\nThe META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n        \u003c!--Recommended Meta Tags--\u003e\n        \u003cmeta charset=\"utf-8\"\u003e\n        \u003cmeta name=\"language\" content=\"english\"\u003e \n        \u003cmeta http-equiv=\"content-type\" content=\"text/html\"\u003e\n        \u003cmeta name=\"author\" content=\"Author Name\"\u003e\n        \u003cmeta name=\"designer\" content=\"Designer Name\"\u003e\n        \u003cmeta name=\"publisher\" content=\"Publisher Name\"\u003e\n        \u003cmeta name=\"no-email-collection\" content=\"name@email.com\"\u003e\n        \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"/\u003e\n\n        \u003c!--Search Engine Optimization Meta Tags--\u003e\n        \u003cmeta name=\"description\" content=\"Project Description\"\u003e\n        \u003cmeta name=\"keywords\" content=\"Software Engineer,Product Manager,Project Manager,Data Scientist\"\u003e\n        \u003cmeta name=\"robots\" content=\"index,follow\"\u003e\n        \u003cmeta name=\"revisit-after\" content=\"7 days\"\u003e\n        \u003cmeta name=\"distribution\" content=\"web\"\u003e\n        \u003cmeta name=\"robots\" content=\"noodp\"\u003e\n        \n        \u003c!--Optional Meta Tags--\u003e\n        \u003cmeta name=\"distribution\" content=\"web\"\u003e\n        \u003cmeta name=\"web_author\" content=\"\"\u003e\n        \u003cmeta name=\"rating\" content=\"\"\u003e\n        \u003cmeta name=\"subject\" content=\"Personal\"\u003e\n        \u003cmeta name=\"title\" content=\" - Official Website.\"\u003e\n        \u003cmeta name=\"copyright\" content=\"Copyright 2020\"\u003e\n        \u003cmeta name=\"reply-to\" content=\"\"\u003e\n        \u003cmeta name=\"abstract\" content=\"\"\u003e\n        \u003cmeta name=\"city\" content=\"Bangalore\"\u003e\n        \u003cmeta name=\"country\" content=\"INDIA\"\u003e\n        \u003cmeta name=\"distribution\" content=\"\"\u003e\n        \u003cmeta name=\"classification\" content=\"\"\u003e\n    \n        \u003c!--Meta Tags for HTML pages on Mobile--\u003e\n        \u003cmeta name=\"format-detection\" content=\"telephone=yes\"/\u003e\n        \u003cmeta name=\"HandheldFriendly\" content=\"true\"/\u003e \n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/\u003e \n        \u003cmeta name=\"apple-mobile-web-app-capable\" content=\"yes\" /\u003e\n        \n        \u003c!--http-equiv Tags--\u003e\n        \u003cmeta http-equiv=\"Content-Style-Type\" content=\"text/css\"\u003e\n        \u003cmeta http-equiv=\"Content-Script-Type\" content=\"text/javascript\"\u003e\n      \n    \u003ctitle\u003eHTML5 Meta Tags\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n       ...\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What does async and defer refer in script tag?\n\n**1. Async:**\n\nDownloads the script file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading.\n\n**Example:**\n\n```html\n\u003c!-- \n    With async (asynchronous), browser will continue to load the HTML \n    page and render it while the browser load and execute the script at the same time. \n--\u003e\n\u003c!-- Google Analytics is usually added like this --\u003e\n\u003cscript async src=\"https://google-analytics.com/analytics.js\"\u003e\u003c/script\u003e\n```\n\n**2. Defer:**\n\nDefer downloads the script file during HTML parsing and will only execute it after the HTML parser has completed. Not all browsers support this.\n\n**Example:**\n\n```html\n\u003c!-- \n    With defer, browser will run your script when the page finished parsing. \n    (not necessary finishing downloading all image files. This is good.) \n--\u003e\n\u003cscript defer src=\"myscript.js\"\u003e\u003c/script\u003e\n```\n\nThe async attribute is used to indicate to the browser that the script file can be executed asynchronously. The HTML parser does not need to pause at the point it reaches the script tag to fetch and execute, the execution can happen whenever the script becomes ready after being fetched in parallel with the document parsing.\n\nThe defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed.\n\n**Example:**\n\n```html\n\u003c!-- \n    Without async or defer, browser will run your script immediately, \n    before rendering the elements. \n--\u003e\n\u003cscript src=\"myscript.js\"\u003e\u003c/script\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is local storage in html5?\n\nThe **localStorage** read-only property of the window interface allows you to access a Storage object for the Document\\'s origin; the stored data is saved across browser sessions.\n\n**Example:**\n\n```js\n// Store\nlocalStorage.setItem(\"name\", \"Kanti Ahluwalia\");\n\n// Retrieve\nlocalStorage.getItem(\"name\"); // Kanti Ahluwalia\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is session storage in html5?\n\nThe **sessionStorage** object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.\n\n**Example:**\n\n```js\n// Save data to sessionStorage\nsessionStorage.setItem('key', 'value');\n\n// Get saved data from sessionStorage\nlet data = sessionStorage.getItem('key');\n\n// Remove saved data from sessionStorage\nsessionStorage.removeItem('key');\n\n// Remove all saved data from sessionStorage\nsessionStorage.clear();\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is cookies in html5?\n\nA cookie is an amount of information that persists between a server-side and a client-side. A web browser stores this information at the time of browsing.\n\nA cookie contains the information as a string generally in the form of a name-value pair separated by semi-colons. It maintains the state of a user and remembers the user\\'s information among all the web pages.\n\n**Example 01:** Create a Cookies\n\n```js\n// create a cookie\ndocument.cookie = \"username=Anjali Batta\";\n\n// cookie with expiry date\ndocument.cookie = \"username=Anjali Batta; expires=Thu, 18 Dec 2022 12:00:00 UTC\";\n```\n\n**Example 02:** Cookie with expiry date\n\n```js\n// cookie with expiry date\ndocument.cookie = \"username=Anjali Batta; expires=Thu, 18 Dec 2022 12:00:00 UTC\";\n```\n\n**Example 03:** Read Cookie\n\n```js\nlet myCookies = document.cookie;\n\nconsole.log(myCookies);\n```\n\n**Example 04:** Update Cookie\n\n```js\ndocument.cookie = \"username=John Smith; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/\";\n```\n\n**Example 05:** Delete Cookie\n\n```js\ndocument.cookie = \"username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;\";\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Describe the difference between a cookie, sessionStorage and localStorage?\n\n|      | `cookie`  | `localStorage` | `sessionStorage` |\n|------|-----------|----------------|------------------|\n| Initiator        | Client or server. Server can use `Set-Cookie` header     | Client         | Client           |\n| Expiry           | Manually set                                             | Forever        | On tab close     |\n| Persistent across browser sessions | Depends on whether expiration is set | Yes            | No   | | Sent to server with every HTTP request | Cookies are automatically being sent via `Cookie` header | No    | No               |\n| Capacity (per domain) | 4kb        | 5MB            | 5MB              |\n| Accessibility  | Any window        | Any window     | Same tab         |\n\n*Note: If the user decides to clear browsing data via whatever mechanism provided by the browser, this will clear out any `cookie`, `localStorage`, or `sessionStorage` stored. It\\'s important to keep this in mind when designing for local persistance, especially when comparing to alternatives such as server side storing in a database or similar (which of course will persist despite user actions).*\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Does localStorage throw error after reaches maximum limits?\n\nYes\n\n**Example:**\n\n```html\n\u003c!DOCTYPE HTML\u003e\n\u003chtml\u003e\n   \u003chead\u003e\n         \u003ctitle\u003eHTML5 localStorage\u003c/title\u003e\n   \u003c/head\u003e\n   \u003cbody\u003e\n      \u003cscript type=\"text/javascript\"\u003e\n        try{\n            if(window.localStorage){ // Check if the localStorage object exists\n            \n                var result = \"\";\n                var characters  = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n                var charactersLength = characters.length;\n                for(var i = 0; i \u003c 10000; i++){\n                    result += characters.charAt(Math.floor(Math.random() * charactersLength));\n                    localStorage.setItem(\"key\"+i, result);\n                }  \n            } else {\n                alert(\"Sorry, your browser do not support localStorage.\");\n            }\n        } catch(e) {\n            console.log('Exception: '+e);\n        }\n      \u003c/script\u003e\n   \u003c/body\u003e\n\u003c/html\u003e\n```\n\nOutput\n\n```js\nException: QuotaExceededError: Failed to execute 'setItem' on 'Storage': \n           Setting the value of 'key3230' exceeded the quota.\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Why to use IndexedDB instead of WebSQL in HTML5?\n\n**1. WebSQL**\n\nIt is an API that is only supported in Chrome and Safari (and Android and iOS by extension). It provides an asynchronous, transactional interface to SQLite. Since 2010, it has been deprecated in favor of IndexedDB.\n\n**Advantages**\n\n* Supported on major mobile browsers (Android Browser, Mobile Safari, Opera Mobile) as well as several desktop browsers (Chrome, Safari, Opera).\n* Good performance generally, being an asynchronous API. Database interaction won't lock up the user interface. (Synchronous API is also available for WebWorkers.)\n* Good search performance, since data can be indexed according to search keys.\n* Robust, since it supports a transactional database model.\n* Easier to maintain integrity of data, due to rigid data structure.\n\n**Disadvantages**\n\n* Deprecated. Will not be supported on IE or Firefox, and will probably be phased out from the other browsers at some stage.\n* Steep learning curve, requiring knowledge of relational databases and SQL.\n* Suffers from object-relational impedance mismatch.\n* Diminishes agility, as database schema must be defined upfront, with all records in a table matching the same structure.\n\n**2. IndexedDB**\n\nIt is the successor to both LocalStorage and WebSQL, designed to replace them as the “one true” browser database. It exposes an asynchronous API that supposedly avoids blocking the DOM, but as we\\'ll see below, it doesn\\'t necessarily live up to the hype. Browser support is extremely spotty, with only Chrome and Firefox having fully usable implementations.\n\n**Advantages**\n\n* Good performance generally, being an asynchronous API. Database interaction won't lock up the user interface. (Synchronous API is also available for WebWorkers.)\n* Good search performance, since data can be indexed according to search keys.\n* Supports versioning.\n* Robust, since it supports a transactional database model.\n* Fairly easy learning curve, due to a simple data model.\n* Decent browser support: Chrome, Firefox, mobile FF, IE10.\n\n**Disadvantages**\n\n* Very complex API resulting in large amounts of nested callbacks.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain Application Cache in HTML5. OR What is a manifest file in HTML?\n\nHTML5 provides an application caching mechanism that lets web-based applications run offline. Developers can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.\n\nUsing an application cache gives an application the following benefits:\n\n* **Offline browsing**: users can navigate a site even when they are offline.\n* **Speed**: cached resources are local, and therefore load faster.\n* **Reduced server load**: the browser only downloads resources that have changed from the server.\n\nSyntax:\n\n```html\n\u003chtml manifest=\"example.appcache\"\u003e\n  ...\n\u003c/html\u003e\n```\n\n*Note: Using the application caching feature described here is at this point highly discouraged; it\\'s in the process of being removed from the Web platform. Use **Service Workers** instead. In fact as of Firefox 44, when AppCache is used to provide offline support for a page a warning message is now displayed in the console advising developers to use Service workers instead (bug 1204581).*\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the purpose of cache busting and how can you achieve it?\n\nBrowsers have a cache to temporarily store files on websites so they don\\'t need to be re-downloaded again when switching between pages or reloading the same page. The server is set up to send headers that tell the browser to store the file for a given amount of time. This greatly increases website speed and preserves bandwidth.\n\nHowever, it can cause problems when the website has been changed by developers because the user's cache still references old files. This can either leave them with old functionality or break a website if the cached CSS and JavaScript files are referencing elements that no longer exist, have moved or have been renamed.\n\n**Cache busting** is the process of forcing the browser to download the new files. This is done by naming the file something different to the old file.\n\nA common technique to force the browser to re-download the file is to append a query string to the end of the file.\n\n```html\n\u003c!-- src=\"js/script.js\" =\u003e src=\"js/script.js?v=2\" --\u003e\n\u003cscript src=\"js/script.js?v=2\"\u003e\u003c/script\u003e\n```\n\nThe browser considers it a different file but prevents the need to change the file name.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What ARIA and screenreaders are, and how to make a website accessible?\n\nScreen readers are software programs that  provide assistive technologies that allow people with disabilities (such as no sight, sound or mouse-ing ability) to use web applications. You can make your sites more accessible by following ARIA standards such as semantic HTML, alt attributes and using [role=button] in the expected ways\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How to use data- attribute in html5?\n\nAny attribute on any element whose attribute name starts with **data-** is a data attribute. The data-* attributes gives us the ability to embed custom data attributes on all HTML elements. The stored (custom) data can then be used in the page\\'s JavaScript to create a more engaging user experience.\n\n**Example:**\n\n```html\n\u003carticle\n  id=\"electric-cars\"\n  data-columns=\"10\"\n  data-index-number=\"100\"\n  data-parent=\"cars\"\n\u003e\n  \u003ch1\u003eElectric Cars\u003c/h1\u003e\n\u003c/article\u003e\n```\n\n```js\n/**\n * Access data attribute\n */\nconst article = document.getElementById(\"electric-cars\");\n\narticle.dataset.columns; // \"10\"\narticle.dataset.indexNumber; // \"100\"\narticle.dataset.parent; // \"cars\"\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/html-data-attribute-llxlkn?file=/script.js)**\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the purpose of the `alt` attribute on images?\n\nThe `alt` attribute provides alternative information for an image if a user cannot view it. The `alt` attribute should be used to describe any images except those which only serve a decorative purposes, in which case it should be left empty.\n\n```html\n\u003cimg src=\"pancakes.png\" alt=\"Stack of blueberry pancakes with powdered sugar\"\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What does `enctype='multipart/form-data'` mean?\n\nThe enctype attribute specifies how the form-data should be encoded when submitting it to the server.\n\n**Example:** 01\n\n```html\n\u003cform action=\"fileupload.php\" method=\"post\" enctype=\"multipart/form-data\"\u003e \n    \u003cp\u003ePlease select the file you would like to upload.\u003c/p\u003e \n    \u003cinput type=\"file\" name=\"upload\"\u003e \n    \u003cbr\u003e \n    \u003cinput type=\"submit\" value=\"Upload File\"\u003e\n\u003c/form\u003e\n```\n\n**Example:** 02\n\n```html\n\u003cform action=\"/urlencoded?token=A87412B\" method=\"POST\" enctype=\"application/x-www-form-urlencoded\"\u003e\n    \u003cinput type=\"text\" name=\"username\" value=\"\"/\u003e\n    \u003cinput type=\"text\" name=\"password\" value=\"\"/\u003e\n    \u003cinput type=\"submit\" value=\"Submit\" /\u003e\n\u003c/form\u003e\n```\n\n**Example:** 03\n\n```html\n\u003cform action=\"action.do\" method=\"get\" enctype=\"text/plain\"\u003e\n    Name: \u003cinput type=\"text\" name=\"name\" /\u003e\n    Phone: \u003cinput type=\"number\" name=\"phone\" /\u003e\n    \u003cinput type=\"submit\" value=\"Submit\" /\u003e\n\u003c/form\u003e\n```\n\n|Sl.No|Value\t                |Description                        |\n|-----|-------------------------|-----------------------------------|\n| 01. |application/x-www-form-urlencoded  |\tDefault. All characters are encoded before sent (spaces are converted to \"+\" symbols, and special characters are converted to ASCII HEX values)|\n| 02. |multipart/form-data\t    |No characters are encoded. This value is required when you are using forms that have a file upload control |\n| 03.  |text/plain\t            |Spaces are converted to \"+\" symbols, but no special characters are encoded|\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is difference between Select and Datalist?\n\nFor the select element, the user is required to select one of the options you\\'ve given. For the datalist element, it is suggested that the user select one of the options you\\'ve given, but he can actually enter anything he wants in the input.\n\n**1. Select:**\n\n```html\n\u003cselect name=\"browser\"\u003e\n  \u003coption value=\"firefox\"\u003eFirefox\u003c/option\u003e\n  \u003coption value=\"ie\"\u003eIE\u003c/option\u003e\n  \u003coption value=\"chrome\"\u003eChrome\u003c/option\u003e\n  \u003coption value=\"opera\"\u003eOpera\u003c/option\u003e\n  \u003coption value=\"safari\"\u003eSafari\u003c/option\u003e\n\u003c/select\u003e\n```\n\n**2. Datalist:**\n\n```html\n\u003cinput type=\"text\" list=\"browsers\"\u003e\n\u003cdatalist id=\"browsers\"\u003e\n  \u003coption value=\"Firefox\"\u003e\n  \u003coption value=\"IE\"\u003e\n  \u003coption value=\"Chrome\"\u003e\n  \u003coption value=\"Opera\"\u003e\n  \u003coption value=\"Safari\"\u003e\n\u003c/datalist\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain some of the pros and cons for CSS animations versus JavaScript animations?\n\nRegarding optimization and responsiveness the debate bounces back and forth but, the concept is:\n\n* CSS animations allows the browser to choose where the animation processing is done, CPU or the GPU. (Central or Graphics Processing Unit)\n\n* That said, adding many layers to a document will eventually have a performance hit.\n\n* JS animation means more code for the user to download and for the developer to maintain.\n\n* Applying multiple animation types on an element is harder with CSS since all transforming power is in one property transform\n\n* CSS animations being declarative are not programmable therefore limited in capability.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What does CORS stand for and what issue does it address?\n\nCross-Origin Resource Sharing (CORS) is a W3C spec that allows cross-domain communication from the browser. By building on top of the XMLHttpRequest object, CORS allows developers to work with the same idioms as same-domain requests. CORS gives web servers cross-domain access controls, which enable secure cross-domain data transfers.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Can you describe the difference between progressive enhancement and graceful degradation?\n\n* Graceful degradation is when you initially serve the best possible user experience, with all modern functionality, but use feature detection to “gracefully degrade” parts of your application with a fallback or polyfill.\n\n* Progressive enhancement ensures a page works at the lowest expected abilities of browsers. So if you have a JavaScript web application that enhances a persons ability to send information to a database with features like ajax – at the very least you need to provide the ability for a person to send that same information without JavaScript enabled. In this case a simple form with full-page refresh will do what you need.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the DOM? How does the DOM work?\n\nThe DOM (Document Object Model) is a cross-platform API that treats HTML documents as a tree structure consisting of nodes. These nodes (such as elements and text nodes) are objects that can be programmatically manipulated and any visible changes made to them are reflected live in the document. In a browser, this API is available to JavaScript where DOM nodes can be manipulated to change their styles, contents, placement in the document, or interacted with through event listeners.\n\n* The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API.\n\n* document.getElementById() and document.querySelector() are common functions for selecting DOM nodes.\n\n* Setting the innerHTML property to a new value runs the string through the HTML parser, offering an easy way to append dynamic HTML content to a node.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How does the browser rendering engine work?\n\nIn order to render content the browser has to go through a series of steps:\n\n* Document Object Model(DOM)\n* CSS object model(CSSOM)\n* Render Tree\n* Layout\n* Paint\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"assets/images/layers.png\" alt=\"Browser Rendering Engine\" /\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the difference between standards mode and quirks mode?\n\nIn **Quirks mode**, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In **Standards mode**, the behavior is described by the HTML and CSS specifications. \n\nFor HTML documents, browsers use a `\u003c!DOCTYPE html\u003e` in the beginning of the document to decide whether to handle it in quirks mode or standards mode. \n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=UTF-8\u003e\n    \u003ctitle\u003eHello World!\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is Critical Rendering Path?\n\n* Constructing the DOM Tree\n* Constructing the CSSOM Tree\n* Running JavaScript - parser blocking resource\n* Creating the Render Tree\n* Generating the Layout\n* Painting\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are the Benefits of Server Side Rendering (SSR) Over Client Side Rendering (CSR)?\n\n* We are using server side rendering for two reasons:\n    * performance benefit for our customers\n    * Consistent SEO performance\n\n* The main difference is that for SSR your server\\'s response to the browser is the HTML of your page that is ready to be rendered, while for CSR the browser gets a pretty empty document with links to your javascript. That means for SSR your browser will start rendering the HTML from your server without having to wait for all the JavaScript to be downloaded and executed.\n    \n* for SSR, the user can start viewing the page while all of that is happening. For the CSR world, you need to wait for all of the above to happen and then have the virtual dom moved to the browser dom for the page to be viewable.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Name 3 ways to decrease page load?\n\n1. LocalStorage \n1. Caching resources \n1. DNS-prefetch (sample below) \n1. Keep resources on a CDN\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Ways to improve website performance\n\n* Minimize HTTP Requests\n    * Sites are mainly slow because of too many (or too large) HTTP requests. We can eliminate unnecessary request;\n        * combined files: js to a file, css to a file\n        * CSS sprites: CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.\n\n* Use a Content Delivery Network CDN\n\n    * A CDN is essentially many optimized servers around the world that deliver web content to users based on their geographic location. This means big performance improvements for site users. Because, say, if a person accessing your site in India, they will be retrieving web content from a server nearby\n\n* Optimize Images:\n\n    * image sizes make a huge difference to site speed. The larger content/images, the slower the site. we could:\n        * Changing the resolution: reducing the “quality” of the image (and thereby the file size)\n        * Compressing the picture: increasing the efficiency of image data storage\n        * Cropping the picture: when cropping, you are cutting out unneeded areas and thus making the image smaller in size\n\n* Put Scripts at the Bottom:\n\n    * Javascript files can load after the rest of your page. The simplest solution is to place your external Javascript files at the bottom of your page, just before the close of your body tag. Now more of your site can load before your scripts. Another method that allows even more control is to use the defer or async attributes when placing external .js files on your site.\n        \n        * Async tags load the scripts while the rest of the page loads, but this means scripts can be loaded out of order. Basically, lighter files load first. This might be fine for some scripts, but can be disastrous for others.\n        \n        * The defer attribute loads your scripts after your content has finished loading. It also runs the scripts in order. Just make sure your scripts run so late without breaking your site.\n\n* Add an Expires or a Cache-Control Header\n\n    * Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.\n\n* Gzip Components\n\n    * Compression reduces response times by reducing the size of the HTTP response. Gzipping generally reduces the response size by about 70%.\n\n* Put Stylesheets at the Top:\n\n    * This is because putting stylesheets in the HEAD allows the page to render progressively.\n\n* Avoid CSS Expressions\n\n* Use GET for AJAX Requests:\n\n    * Ajax is that it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server\n\n* Make JavaScript and CSS External:\n\n    *  Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.\n\n* Use get to ajax request:\n\n    *  POST is implemented in the browsers as a two-step process: sending the headers first, then sending data. So it's best to use GET, which only takes one TCP packet to send (unless you have a lot of cookies).\n\n* No 404s:\n\n    * HTTP requests are expensive so making an HTTP request and getting a useless response (i.e. 404 Not Found) is totally unnecessary and will slow down the user experience without any benefit.\n\n* Reduce Cookie Size:\n\n    * HTTP cookies are used for a variety of reasons such as authentication and personalization. Information about cookies is exchanged in the HTTP headers between web servers and browsers. It's important to keep the size of cookies as low as possible to minimize the impact on the user's response time.\n\n* Reduce DNS Lookups\n* Minify JavaScript and CSS\n* Avoid Redirects\n* Remove Duplicate Scripts\n* Configure Etags\n* Make Ajax Cacheable\n* Post-load Components\n* Preload Components\n* Reduce the Number of DOM Elements\n* Minimize the Number of iframes\n* Minimize DOM Access\n* Optimize CSS Sprites\n* Don't Scale Images in HTML\n* Make favicon.ico Small and Cacheable\n* Avoid Empty Image src\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Comparison of browsers engines like Chrome, Firefox, Internet explorer, Safari?\n\n* Chrome: \n    * Layout rendering engine **Webkit**. \n    * JavaScript engine **V8**\n\n* Firefox: \n    * Layout rendering engine **Gecko**. \n    * JavaScript engine **Spider monkey**\n        \n* Internet explorer: \n    * Layout rendering engine **Trident**. \n    * JavaScript  engine **Chakra**\n        \n* Safari:\n    * Layout rendering engine **Webkit**. \n    * JavaScript engine JavascriptCore i.e **Nitro**\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What does the lang attribute in html do?\n\n* Helps in styling pages by using them in css `:lang()` pseudo class Spelling and grammar checkers Languade detection by search engines\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is desktop first and mobile first design approach?\n\n* Desktop first : \n        General selectors and styles designed to make the site look good on DESKTOP screens defined globally. But they affect all devices, and must be overridden by max-width media queries targeting minimum screen size\n\n* Mobile First : \n        General selectors and styles designed to make the site look good on small MOBILE screens go here. But they affect all devices, and must be overridden by min-width media queries targeting maximum scrren size\n    \n    In desktop first approach the media queries will be written with respect to max-width whereas in mobile first approach media queries will be written with respect to min-width\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are `data-` attributes good for?\n\n* The HTML5 data attribute lets you assign custom data to an element. When we want to store more information/data about the element when no suitable HTML5 element or attribute exists\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain the difference between layout, painting and compositing?\n\n\u003cimg src=\"assets/lib/img/frame-full.jpg\" alt=\"Browser Engine\" /\u003e\n\n**1. JavaScript:**\n\nTypically JavaScript is used to handle work that will result in visual changes, whether it\\'s jQuery\\'s animate function, sorting a data set, or adding DOM elements to the page. It doesn\\'t have to be JavaScript that triggers a visual change, though: CSS Animations, Transitions, and the Web Animations API are also commonly used.\n\n**2. Style:**\n\nThis is the process of figuring out which CSS rules apply to which elements based on matching selectors, for example, .headline or .nav \u003e .nav__item. From there, once rules are known, they are applied and the final styles for each element are calculated.\n\n**3. Layout:**\n\nOnce the browser knows which rules apply to an element it can begin to calculate how much space it takes up and where it is on screen. The web\\'s layout model means that one element can affect others, for example the width of the `\u003cbody\u003e` element typically affects its children\\'s widths and so on all the way up and down the tree, so the process can be quite involved for the browser.\n\n**4. Paint:**\n\nPainting is the process of filling in pixels. It involves drawing out text, colors, images, borders, and shadows, essentially every visual part of the elements. The drawing is typically done onto multiple surfaces, often called layers.\n\n**5. Compositing:**\n\nSince the parts of the page were drawn into potentially multiple layers they need to be drawn to the screen in the correct order so that the page renders correctly. This is especially important for elements that overlap another, since a mistake could result in one element appearing over the top of another incorrectly.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain about HTML Layout Engines used by browsers?\n\n|Engine\t      |Status   |Embedded in           |\n|-------------|-----------------|--------------|\n|WebKit\t      |Active\t|Safari browser, plus all browsers hosted on the iOS App Store                        |\n|Blink\t      |Active\t|Google Chrome and all other Chromium-based browsers like Opera and Microsoft Edge    |\n|Gecko\t      |Active\t|Firefox browser and Thunderbird email client, plus forks like SeaMonkey and Waterfox |\n|EdgeHTML\t  |Discontinued\t  |formerly in the Microsoft Edge browser                                         |\n|Trident\t  |Discontinued\t  |Internet Explorer browser and Microsoft Outlook email client                   |\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How to make page responsive?\n\nResponsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).\n\n**1. Setting the viewport:**\n\n```html\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n```\n\n**2. Responsive Images:**\n\nIf the CSS width property is set to 100%, the image will be responsive and scale up and down\n\n```html\n\u003cimg src=\"img.png\" style=\"width:100%;\"\u003e\n```\n\n**3. Show different Images depending on Browser Width:**\n\nThe HTML `\u003cpicture\u003e` element allows you to define different images for different browser window sizes.\n\n```html\n\u003cpicture\u003e\n  \u003csource srcset=\"img_small.jpg\" media=\"(max-width: 600px)\"\u003e\n  \u003csource srcset=\"img_large.jpg\" media=\"(max-width: 1500px)\"\u003e\n  \u003csource srcset=\"img.jpg\"\u003e\n  \u003cimg src=\"img_small.jpg\" alt=\"Image\"\u003e\n\u003c/picture\u003e\n```\n\n**4. Responsive Text Size:**\n\nThe text size can be set with a \"vw\" unit, which means the \"viewport width\". That way the text size will follow the size of the browser window.\n\n```html\n\u003ch1 style=\"font-size:10vw\"\u003eHello World\u003c/h1\u003e\n```\n\n**5. Media Queries:**\n\nUsing media queries you can define completely different styles for different browser sizes.\n\n```css\n/* Use a media query to add a breakpoint at 800px: */\n@media screen and (max-width: 800px) {\n  .left, .main, .right {\n    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */\n  }\n}\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Does the following trigger http request at the time of page load?\n\n```html\n\u003cimg src=\"mypic.jpg\" style=\"visibility: hidden\" alt=\"My photo\"\u003e\n\n\u003cdiv style=\"display: none;\"\u003e\n    \u003cimg src=\"mypic.jpg\" alt=\"My photo\"\u003e\n\u003c/div\u003e\n```\n\n* Yes\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. List the API available in HTML5?\n\n**1. High Resolution Time API**\n\nThe High Resolution Time API provides the current time in sub-millisecond resolution and such that it is not subject to system clock skew or adjustments.\n\nIt exposes only one method, that belongs to the `window.performance` object, called `now()`. It returns a `DOMHighResTimeStamp` representing the current time in milliseconds. The timestamp is very accurate, with precision to a thousandth of a millisecond, allowing for accurate tests of the performance of our code.\n\n```javascript\nvar time = performance.now();\n```\n\n**2. User Timing API**\n\nIt allows us to accurately measure and report the performance of a section of JavaScript code. It deals with two main concepts: mark and measure. The former represents an instant (timestamp), while the latter represents the time elapsed between two marks.\n\n```javascript\nperformance.mark(\"startFoo\");\n// A time consuming function\nfoo();\nperformance.mark(\"endFoo\");\n\nperformance.measure(\"durationFoo\", \"startFoo\", \"endFoo\");\n```\n\n**3. Network Information API**\n\nThis API belongs to the connection property of the `window.navigator` object. It exposes two read-only properties: `bandwidth` and `metered`. The former is a number representing an estimation of the current bandwidth, while the latter is a Boolean whose value is true if the user\\'s connection is subject to limitation and bandwidth usage, and false otherwise.\n\n|Sl.No| API                            | Description\n|-----|--------------------------------|--------------------------------------------------------------------|\n| 01. |navigator.connection.type       |Network Type                               |\n| 02. |navigator.connection.downlink   |Effective bandwidth estimate ( downlink )                               |\n| 03. |navigator.connection.rtt        |Effective round-trip time estimate ( rtt )                                |\n| 04. |navigator.connection.downlinkMax|Upper bound on the downlink speed of the first network hop ( downlinkMax )|\n| 05. |navigator.connection.effectiveType|Effective connection type  |\n| 06. |navigator.connection.saveData   |True if the user has requested a reduced data usage mode from the user agent ( saveData )|\n\n**4.) Vibration API**\n\nIt exposes only one method, `vibrate()`, that belongs to the `window.navigator` object. This method accepts one parameter specifying the duration of the vibration in milliseconds. The parameter can be either an integer or an array of integers. In the second case, it\\'s interpreted as alternating vibration times and pauses.\n\n```javascript\n// Vibrate once for 2 seconds\nnavigator.vibrate(2000);\n```\n\n**5.) Battery Status API**\n\nThe Battery Status API exposes four properties (`charging`, `chargingTime`, `discharingTime`, and `level`) and four events. The properties specify if the battery is in charge, the seconds remaining until the battery is fully charged, the seconds remaining until the battery is fully discharged, and the current level of the battery. These properties belongs to the `battery` property of the `window.navigator` object.\n\n```javascript\n// Retrieves the percentage of the current level of the device's battery\nvar percentageLevel = navigator.battery.level * 100;\n```\n\n**6.) Page Visibility API**\n\nThe Page Visibility API enables us to determine the current visibility state of the page. The Page Visibility API is especially useful for saving resources and improving performance by letting a page avoid performing unnecessary tasks when the document isn\\'t visible.\n\n```javascript\n//document.hidden retuns true if page is not visible.\nconsole.log('Page Visibility: '+document.hidden); \n```\n\n**7.) Fullscreen API**\n\nThe Fullscreen API provides a way to request fullscreen display from the user, and exit this mode when desired. This API exposes two methods, `requestFullscreen()` and `exitFullscreen()`, allowing us to request an element to become fullscreen and to exit fullscreen.\n\n```javascript\ndocument.addEventListener(\"keypress\", function(e) {\n    if (e.keyCode === 13) { // Enter Key\n        toggleFullScreen();\n    }\n}, false);\n\nfunction toggleFullScreen() {\n    if (!document.fullscreenElement) {\n        document.documentElement.requestFullscreen();\n    } else {\n        if (document.exitFullscreen) {\n        document.exitFullscreen(); \n        }\n    }\n}\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How geolocation api works in html5?\n\nThe Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.\n\nThe Geolocation API is published through the `navigator.geolocation` object.\n\n```javascript\nif (\"geolocation\" in navigator) {\n  /* geolocation is available */\n} else {\n  /* geolocation IS NOT available */\n}\n```\n\n**Example**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n         \u003ctitle\u003eGeolocation\u003c/title\u003e\n    \u003c/head\u003e\n   \u003cbody\u003e\n    \u003cp\u003e\u003cbutton onclick=\"geoFindMe()\"\u003eShow my location\u003c/button\u003e\u003c/p\u003e\n    \u003cdiv id=\"out\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n    /**\n        The Geolocation API allows the user to provide their location to web applications \n        if they so desire. For privacy reasons, the user is asked for permission to report \n        location information.\n    **/\n    function geoFindMe() {\n        var output = document.getElementById(\"out\");\n\n        if (!navigator.geolocation){\n            output.innerHTML = \"\u003cp\u003eGeolocation is not supported by your browser\u003c/p\u003e\";\n            return;\n        }\n\n        function success(position) {\n            var latitude  = position.coords.latitude;\n            var longitude = position.coords.longitude;\n\n            output.innerHTML = '\u003cp\u003eLatitude is ' + latitude + '° \u003cbr\u003eLongitude is ' + longitude + '°\u003c/p\u003e';\n\n            var img = new Image();\n            img.src = \"https://maps.googleapis.com/maps/api/staticmap?center=\" + latitude + \",\" + longitude + \"\u0026zoom=13\u0026size=300x300\u0026sensor=false\";\n\n            output.appendChild(img);\n        }\n\n        function error() {\n            output.innerHTML = \"Unable to retrieve your location\";\n        }\n\n        output.innerHTML = \"\u003cp\u003eLocating…\u003c/p\u003e\";\n\n        navigator.geolocation.getCurrentPosition(success, error); //function to get the current position of the device\n    }\n\u003c/script\u003e\n\u003c/html\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the use of WebSocket API?\n\nThe **WebSocket API** is an advanced technology that makes it possible to open a two-way interactive communication session between the user\\'s browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.\n\n**Interfaces:**  \n\n|Sl.No|   API      | Description    |\n|-----|------------|----------------|\n| 01. |WebSocket   |The primary interface for connecting to a WebSocket server and then sending and receiving data on the connection.|   \n| 02. |CloseEvent  |The event sent by the WebSocket object when the connection closes.   |\n| 03. |MessageEvent|The event sent by the WebSocket object when a message is received from the server.|\n\nExample\n\n```javascript\n // Create WebSocket connection.\nconst socket = new WebSocket('ws://localhost:8080/');\n\n// Connection opened\nsocket.addEventListener('open', function(event) {\n    socket.send('Hello Server!');\n});\n\n// Listen for messages\nsocket.addEventListener('message', function(event) {\n    console.log('Message from server ', event.data);\n});\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain about HTML Canvas?\n\n**canvas** is an HTML element which can be used to draw graphics via JavaScript. This can, for instance, be used to draw graphs, combine photos, or create animations.\n\n**1. Colors, Styles, and Shadows:**\n\n|  Property    |\tDescription                                                                 |\n|--------------|--------------------------------------------------------------------------------|\n|fillStyle\t   | Sets or returns the color, gradient, or pattern used to fill the drawing       |\n|strokeStyle   | Sets or returns the color, gradient, or pattern used for strokes               |\n|shadowColor   | Sets or returns the color to use for shadows                                   |\n|shadowBlur\t   | Sets or returns the blur level for shadows                                     |\n|shadowOffsetX | Sets or returns the horizontal distance of the shadow from the shape           |\n|shadowOffsetY | Sets or returns the vertical distance of the shadow from the shape             |\n\n**2. Line Styles:**\n\n|Property\t |  Description                                                   |\n|------------|----------------------------------------------------------------|\n|lineCap\t |Sets or returns the style of the end caps for a line            |\n|lineJoin\t |Sets or returns the type of corner created, when two lines meet |\n|lineWidth\t |Sets or returns the current line width                          |\n|miterLimit\t |Sets or returns the maximum miter length                        |\n\n**3. Rectangles:**\n  \n|Method\t        |Description                                          |\n|---------------|-----------------------------------------------------|\n|rect()\t        |Creates a rectangle                                  |\n|fillRect()\t    |Draws a \"filled\" rectangle                           |\n|strokeRect()\t|Draws a rectangle (no fill)                          |\n|clearRect()\t|Clears the specified pixels within a given rectangle |\n\n**4. Paths:**\n\n| Method\t      |   Description                                                                                 |\n|-----------------|---------------------------------------------------------------------------------------------- |\n|fill()\t          |Fills the current drawing (path)                                                               |\n|stroke()\t      |Actually draws the path you have defined                                                       |\n|beginPath()\t  |Begins a path, or resets the current path                                                      |\n|moveTo()\t      |Moves the path to the specified point in the canvas, without creating a line                   |\n|closePath()\t  |Creates a path from the current point back to the starting point                               |\n|lineTo()\t      |Adds a new point and creates a line to that point from the last specified point in the canvas  |\n|clip()\t          |Clips a region of any shape and size from the original canvas                                  |\n|arc()\t          |Creates an arc/curve (used to create circles, or parts of circles)                             |\n|arcTo()\t      |Creates an arc/curve between two tangents                                                      |\n\n**5. Transformations:**\n\n|Method\t        |Description                                                                |\n|---------------|-------------------------------------------------------------------------- |\n|scale()\t    |Scales the current drawing bigger or smaller                               |\n|rotate()\t    |Rotates the current drawing                                                |\n|translate()\t|Remaps the (0,0) position on the canvas                                    |\n|transform()\t|Replaces the current transformation matrix for the drawing                 |\n|setTransform()\t|Resets the current transform to the identity matrix. Then runs transform() |\n\n**6. Text:**\n\n|Property\t    |Description                                                       |\n|---------------|----------------------------------------------------------------- |\n|font\t        |Sets or returns the current font properties for text content      |\n|textAlign\t    |Sets or returns the current alignment for text content            |\n|textBaseline\t|Sets or returns the current text baseline used when drawing text  |\n|fillText()\t    |Draws \"filled\" text on the canvas                                 |\n|strokeText()\t|Draws text on the canvas (no fill)                                |\n|measureText()\t|Returns an object that contains the width of the specified text   |\n\n**Example 01:** HTML5 Canvas for Text\n\n```html\n\u003cdiv\u003eText\u003c/div\u003e\n\u003ccanvas id=\"text\" width=\"200\" height=\"100\" \u003e\u003c/canvas\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n    // Text with style\n    var canvas = document.getElementById('text');\n    var context = canvas.getContext('2d');\n    context.font = '20pt Calibri';\n    context.fillStyle = 'blue';\n    context.fillText('Hello World!', 50, 50);\n\u003c/script\u003e\n```\n\n**Example 02:** HTML5 Canvas for Straight Line\n\n```html\n\u003cdiv\u003eStraight Line\u003c/div\u003e\n\u003ccanvas id=\"line\" width=\"300\" height=\"0\" style=\"border: 1px solid #333;\"\u003e\u003c/canvas\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n    // Straight Line\n    var canvas = document.getElementById(\"line\");\n    var context = canvas.getContext(\"2d\");\n    context.moveTo(50, 150);\n    context.lineTo(250, 50);\n    context.stroke();\n\u003c/script\u003e\n```\n\n**Example 03:** HTML5 Canvas for Rectangle\n\n```html\n\u003cdiv\u003eRectangle with Style\u003c/div\u003e\n\u003ccanvas id=\"rectangle\" width=\"300\" height=\"200\" style=\"border: 1px solid #999;\"\u003e\u003c/canvas\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n    // Rectange with style\n    var canvas = document.getElementById(\"rectangle\");\n    var context = canvas.getContext(\"2d\");\n    context.fillStyle = \"#FF0000\";\n    context.fillRect(0, 0, 300, 200);\n\u003c/script\u003e\n```\n\n**Example 04:** HTML5 Canvas for Circle\n\n```html\n\u003cdiv\u003eCircle\u003c/div\u003e\n\u003ccanvas id=\"circle\"\u003eThis browser does not support Canvas!\u003c/canvas\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n    // Circle\n    var canvas = document.getElementById(\"circle\");\n    var context = canvas.getContext(\"2d\");\n    context.beginPath();\n    context.arc(95, 50, 40, 0, 2 * Math.PI);\n    context.stroke();\n\u003c/script\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is difference between SVG and Canvas?\n\n**1. SVG:**\n\nThe Scalable Vector Graphics (SVG) is an XML-based image format that is used to define two-dimensional vector based graphics for the web. Unlike raster image (e.g. .jpg, .gif, .png, etc.), a vector image can be scaled up or down to any extent without losing the image quality.\n\nThere are following advantages of using SVG over other image formats like JPEG, GIF, PNG, etc.\n\n* SVG images can be searched, indexed, scripted, and compressed.\n* SVG images can be created and modified using JavaScript in real time.\n* SVG images can be printed with high quality at any resolution.\n* SVG content can be animated using the built-in animation elements.\n* SVG images can contain hyperlinks to other documents.\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n   \u003chead\u003e\n      \u003cstyle\u003e\n         #svgelem {\n            position: relative;\n            left: 50%;\n            -webkit-transform: translateX(-20%);\n            -ms-transform: translateX(-20%);\n            transform: translateX(-20%);\n         }\n      \u003c/style\u003e\n      \u003ctitle\u003eHTML5 SVG\u003c/title\u003e\n   \u003c/head\u003e\n   \u003cbody\u003e\n      \u003ch2 align=\"center\"\u003eHTML5 SVG Circle\u003c/h2\u003e\n      \u003csvg id=\"svgelem\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n         \u003ccircle id=\"bluecircle\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"blue\" /\u003e\n      \u003c/svg\u003e\n   \u003c/body\u003e\n\u003c/html\u003e\n```\n\n**2. Canvas:**\n\nCanvas is a HTML element is used to draw graphics on a web page. It is a  bitmap with an “immediate mode” graphics application programming interface (API) for drawing on it. The `\u003ccanvas\u003e` element is only a container for graphics. In order to draw the graphics, you are supposed to use a script. Canvas has several strategies when it comes to drawing paths, boxes, circles, text \u0026 adding images.\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n   \u003chead\u003e\n      \u003ctitle\u003eHTML5 Canvas Tag\u003c/title\u003e\n   \u003c/head\u003e\n   \u003cbody\u003e\n      \u003ccanvas id=\"newCanvas\" width=\"200\" height=\"100\" style=\"border:1px solid #000000;\"\u003e\u003c/canvas\u003e\n      \u003cscript\u003e\n         var c = document.getElementById('newCanvas');\n         var ctx = c.getContext('2d');\n         ctx.fillStyle = '#7cce2b';\n         ctx.fillRect(0,0,300,100);\n      \u003c/script\u003e\n   \u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Differences:**\n\n|SVG\t                |Canvas                                         |\n|-----------------------|-----------------------------------------------|\n|Vector based (composed of shapes)\t|Raster based (composed of pixel)\n|Multiple graphical elements, which become the part of the page's DOM tree|\tSingle element similar to \u003cimg\u003e in behavior. Canvas diagram can be saved to PNG or JPG format|\n|Modified through script and CSS\t|Modified through script only\n|Good text rendering capabilities\t|Poor text rendering capabilities\n|Give better performance with smaller number of objects or larger surface, or both\t|Give better performance with larger number of objects or smaller surface, or both|\n|Better scalability. Can be printed with high quality at any resolution. Pixelation does not occur\t|Poor scalability. Not suitable for printing on higher resolution. Pixelation may occur |\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain Drag and Drop in HTML5?\n\nHTML5 drag-and-drop uses the `DOM event model` and `drag events` inherited from `mouse events`. A typical drag operation begins when a user selects a draggable element, drags the element to a droppable element, and then releases the dragged element.\n\n|Event\t        |Description                                                            |\n|---------------|-----------------------------------------------------------------------|\n|Drag\t        |It fires every time when the mouse is moved while the object is being dragged.|\n|Dragstart\t    |It is a very initial stage. It fires when the user starts dragging object.|\n|Dragenter\t    |It fires when the user moves his/her mouse cursur over the target element.|\n|Dragover\t    |This event is fired when the mouse moves over an element.|\n|Dragleave\t    |This event is fired when the mouse leaves an element.|\n|Drop\t        |Drop It fires at the end of the drag operation.|\n|Dragend\t    |It fires when user releases the mouse button to complete the drag operation.|\n\nExample\n\n```html\n\u003c!DOCTYPE HTML\u003e\n\u003chtml\u003e\n   \u003chead\u003e\n   \u003cscript\u003e\n        function allowDrop(ev) {\n            ev.preventDefault();\n        }\n\n        function drag(ev) {\n            ev.dataTransfer.setData(\"text\", ev.target.id);\n        }\n\n        function drop(ev) {\n            ev.preventDefault();\n            var data = ev.dataTransfer.getData(\"text\");\n            ev.target.appendChild(document.getElementById(data));\n        }\n    \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"div1\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"\u003e\u003c/div\u003e\n  \u003cimg id=\"drag1\" src=\"img_logo.gif\" draggable=\"true\" ondragstart=\"drag(event)\" width=\"336\" height=\"69\"\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain Microdata in HTML5?\n\nMicrodata is a standardized way to provide additional semantics in web pages. Microdata lets you define your own customized elements and start embedding custom properties in your web pages. At a high level, microdata consists of a group of name-value pairs.\n\nThe groups are called **items**, and each name-value pair is a **property**. Items and properties are represented by regular elements. Search engines benefit greatly from direct access to this structured data because it allows search engines to understand the information on web pages and provide more \nrelevant results to users.\n\nAt a high level, microdata consists of a group of name-value pairs\n* **itemscope**:- To create an item\n* **itemprop**:- To add a property to an item\n\nExample\n\n```html\n\u003cdiv itemscope\u003e\n    \u003cp\u003eMy name is \u003cspan itemprop=\"name\"\u003eElizabeth\u003c/span\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv itemscope\u003e\n    \u003cp\u003eMy name is \u003cspan itemprop=\"name\"\u003eDaniel\u003c/span\u003e.\u003c/p\u003e\n\u003c/div\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are the HTML tags which deprecated in HTML5?\n\n**1. Deprecated Tags:**\n\nThe following elements are not available in HTML5 anymore and their function is better handled by CSS.\n\n|Sl.No|Tags (Elements)  |\tDescription        |\n|-----|-----------------|----------------------|\n| 01. |`\u003cacronym\u003e`\t    |Defines an acronym|\n| 02. |`\u003capplet\u003e`\t    |Defines an applet|\n| 03. |`\u003cbasefont\u003e`\t    |Defines an base font for the page.|\n| 04. |`\u003cbig\u003e`\t        |Defines big text|\n| 05. |`\u003ccenter\u003e`\t    |Defines centered text|\n| 06. |`\u003cdir\u003e`\t        |Defines a directory list|\n| 07. |`\u003cfont\u003e`\t        |Defines text font, size, and color|\n| 08. |`\u003cframe\u003e`\t    |Defines a frame|\n| 08. |`\u003cframeset\u003e`\t    |Defines a set of frames|\n| 10. |`\u003cisindex\u003e`\t    |Defines a single-line input field|\n| 11. |`\u003cnoframes\u003e`\t    |Defines a noframe section|\n| 12. |`\u003cs\u003e`\t        |Defines strikethrough text|\n| 13. |`\u003cstrike\u003e`\t    |Defines strikethrough text|\n| 14. |`\u003ctt\u003e`\t        |Defines teletype text|\n| 15. |`\u003cu\u003e`\t        |Defines underlined text|\n\n**2. Deprecated Attributes:**  \n\n|Removed Attributes\t  |From the Elements     |\n|---------------------|----------------------|\n|rev\t              |link, a|\n|charset\t          |link and a|\n|shape\t              |a|\n|coords\t              |a|\n|longdesc\t          |img and iframe.|\n|target\t              |link|\n|nohref\t              |area|\n|profile\t          |head|\n|version\t          |html|\n|name\t              |img|\n|scheme\t              |meta|\n|archive\t          |object|\n|classid\t          |object|\n|codebase\t          |object|\n|codetype\t          |object|\n|declare\t          |object|\n|standby\t          |object|\n|valuetype\t          |param|\n|type\t              |param|\n|axis\t              |td and t|\n|abbr\t              |td and t|\n|scope\t              |td|\n|align\t              |caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.|\n|alink\t              |body|\n|link\t              |body|\n|vlink\t              |body|\n|text\t              |body|\n|background\t          |body|\n|bgcolor\t          |table, tr, td, th and body.|\n|border\t              |table and object.|\n|cellpadding\t      |table|\n|cellspacing\t      |table|\n|char\t              |col, colgroup, tbody, td, tfoot, th, thead and tr.|\n|charoff \t          |col, colgroup, tbody, td, tfoot, th, thead and tr.|\n|clear\t              |br|\n|compact\t          |dl, menu, ol and ul.|\n|frame\t              |table|\n|compact\t          |dl, menu, ol and ul.|\n|frame\t              |table|\n|frameborder\t      |iframe|\n|hspace\t              |img and object.|\n|vspace\t              |img and object.|\n|marginheight\t      |iframe|\n|marginwidth\t      |iframe|\n|noshade\t          |hr|\n|nowrap\t              |td and th|\n|rules\t              |table|\n|scrolling\t          |iframe|\n|size\t              |hr|\n|type\t              |li, ol and ul.|\n|valign\t              |col, colgroup, tbody, td, tfoot, th, thead and tr|\n|width\t              |hr, table, td, th, col, colgroup and pre.|\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How you can Use Modernizr in HTML5?\n\nModernizr is a JavaScript library that detects which HTML5 and CSS3 features visitor\\'s browser supports. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them. This is called **feature detection** and is much more efficient than browser sniffing.\n\n**1. Using Modernizr with CSS:**\n\nBy default, Modernizr sets classes for all of your tests on the root element (`\u003chtml\u003e` for websites). This means adding the class for each feature when it is supported, and adding it with a no- prefix when it is not (e.g. `.feature` or `.no-feature`).\n\n```css\n.no-cssgradients .header {\n  background: url(\"images/glossybutton.png\");\n}\n\n.cssgradients .header {\n  background-image: linear-gradient(cornflowerblue, rebeccapurple);\n}\n```\n\n**2. Using Modernizr with JavaScript:**\n\nModernizr keeps track of the results of all of it\\'s feature detections via the `Modernizr` object.\n\n```javascript\nif (Modernizr.canvas) {\n    alert(\"This browser supports HTML5 canvas!\");\n} else {\n    alert(\"no canvas :(\");\n}\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is progressive rendering?\n\nProgressive Rendering is the technique of sequentially rendering portions of a webpage in the server and streaming it to the client in parts without waiting for the whole page to rendered.\n\nIt implies that once the important material is produced on the server, you may stream it to the client without having to wait for non-critical stuff to be displayed. It combines the advantages of both CSR (Client Side Rendering) and SSR (Server Side Rendering) (Server Side Rendering).\n\n**1. Client Side Rendering:**\n\nClient Side Rendering (CSR) is a technique in which content is rendered in the browser using JavaScript. Instead of getting all the content from the HTML file itself, the server sends HTML with an empty body and script tags that contain links to JavaScript bundles that the browser will use to render the content.\n\nTypical page load behaviour in CSR —\n\n* Browser requests the server for HTML\n* Server sends HTML with script tags in head and no content in body\n* Browser parses the HTML and makes http requests to load the scripts\n* Once the scripts are loaded, the browser parses them and makes API requests and loads all the content asynchronously\n\nSince the all the content starts loading only after loading the initial JavaScript, it takes a longer time to show any content on the page. If the user is on a slow network, the content is blocked for an even longer time due to lower bandwidth and higher latency.\n\n**2. Server Side Rendering:**\n\nWhen rendering on the server side, the HTML is rendered on the server and sent to the client. The content that we need to display on the screen becomes available immediately after the HTML is parsed; hence, primary rendering of content is faster than CSR.\n\nTypical page load behaviour in SSR —\n\n* Browser requests the server for HTML.\n* Server makes API requests (usually co-located) and renders the content in the server.\n* Once the page is ready, the server sends it to the browser.\n* The browser loads and parses the HTML and paints the content on the screen without waiting for the JavaScript bundle(s) to load.\n* Once the JavaScript bundle(s) are loaded, the browser hydrates interactivity to DOM elements, which is usually attaching event handlers and other interactive behaviours.\n\nSince the APIs are usually co-located with the server, the content is loaded super fast (faster than CSR) and the HTML is sent to the browser. Initial JavaScript load doesn\\'t block content load as the HTML sent by the server already has the content.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"assets/images/progressive-rendering.png\" alt=\"Progressive Rendering\" width=\"500px\" /\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is an iframe and how it works?\n\nThe `\u003ciframe\u003e` HTML element represents a nested browsing context, embedding another HTML page into the current one. Each embedded browsing context has its own **session history** and **document**. The browsing context that embeds the others is called the parent browsing context. The topmost browsing context — the one with no parent — is usually the browser window, represented by the **Window** object.\n\n**Example**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eHTML5 iframe\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cstyle type=\"text/css\"\u003e\n  iframe {\n    border: 1px solid #333;\n    width: 50%;\n  }\n  .output {\n    background: #eee;\n  }\n  \u003c/style\u003e\n  \u003cbody\u003e\n    \u003cp\u003eThe Inline iFrame Example\u003c/p\u003e\n    \u003ciframe id=\"inlineFrameId\"\n      title=\"Inline iFrame Example\"\n      width=\"300\"\n      height=\"200\"\n      src=\"https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606\u0026layer=mapnik\"\u003e\n        Sorry your browser does not support inline frames.\n    \u003c/iframe\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n**The Iframe Tag Attributes:**\n\n|Attribute       | Description                |\n|----------------|----------------------------|\n|allow           |indicates what features the iframe is allowed to use (e.g. fullscreen, camera, autoplay)|\n|allowfullscreen |grants or denies permission for the iframe to appear in full-screen mode|\n|height           |sets the height of the iframe (if not specified, the default height is 150 pixels)|\n|loading         |sets lazy loading or eager loading for the iframe|\n|referrerpolicy  |sets what referrer information should be sent in the request for the iframe|\n|src             |the address of the resource included in the iframe|\n|width           |sets the width of the iframe (if not specified, the default width is 300 pixels)|\n\n*Note: Because each browsing context is a complete document environment, every `\u003ciframe\u003e` in a page requires increased memory and other computing resources.*\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain the use of rel=\"nofollow\", rel=\"noreferrer\", rel=\"noopener\" attribute? \n\n**1. rel=\"nofollow\"**\n\nWhen `rel=\"nofollow\"` tag is used, it instruct the search engines not to pass any PageRank from one page to the other. It does not allow it to pass the authority to the specific website. The main advantage of using this attribute is to control the spam attack.\n\nThere may be times, when you do not have control over what people publish on your websites, for example some blog comments and some kind of forum posting.\n\n**Example:**\n\n```html\n\u003ca href=\"https://www.website.com\" rel=\"nofollow\"\u003eLink to yoursite.com\u003c/a\u003e\n```\n\n**2. rel=\"noreferrer\"**\n\nNoreferrer is related to analytics and tracking. The referrer value shows the previous page where a user came from. By using the noreferrer attribute on a link, you are preventing other pages from seeing that traffic came from a click on your link.\n\n**Example:**\n\n```html\n\u003ca href=\"https://www.website.com\" rel=\"noreferrer\"\u003eLink to yoursite.com\u003c/a\u003e\n```\n\n**3. rel=\"noopener\"**\n\nIt prevents the new page from being able to access the `window.opener` property and will make it run in a separate process. noopener tag works as a security fix which prevents malicious links to take control over an opened tab.\n\n**Example:**\n\n```html\n\u003ca href=\"https://www.website.com\" target=\"_blank\" rel=\"noopener\"\u003eLink to yoursite.com\u003c/a\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How can you highlight text in HTML?\n\nThe `\u003cmark\u003e` HTML element represents text which is marked or highlighted for reference or notation purposes, due to the marked passage\\'s relevance or importance in the enclosing context.\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eHighlight text in HTML\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cp\u003eSearch results for \"salamander\":\u003c/p\u003e\n    \u003chr\u003e\n    \u003cp\u003eSeveral species of \u003cmark\u003esalamander\u003c/mark\u003e inhabit the temperate rainforest of the Pacific Northwest.\u003c/p\u003e\n    \u003cp\u003eMost \u003cmark\u003esalamander\u003c/mark\u003es are nocturnal, and hunt for insects, worms, and other small creatures.\u003c/p\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How can I get indexed better by search engines?\n\nHTML tags are used to influence the way our pages appear in search results. With the help of certain tags, we can turn regular search snippets into rich snippets, and maybe even into featured snippets. And, as our search snippets get more advanced, they are able to secure better **Search Engine Results Pages (SERP)** positions and attract more traffic.\n\nHere are all the HTML tags that still matter:\n\n**1. Title tag:**\n\nTitle tags are used by search engines to determine the subject of a page and display it in SERP. As a rule of thumb, titles that are under 60 characters long will fit on most screens. In HTML, a title tag looks like this:\n\n```html\n\u003ctitle\u003eYour Title Goes Here\u003c/title\u003e\n```\n\n**2. Meta description tag:**\n\nMeta description is a short paragraph of text used to describe your page in search results. The function of meta description is similar to the title. It provides a little more detail about your page and it helps users decide whether to visit your page or not. In HTML, a meta description tag looks like this:\n\n```html\n\u003cmeta name=\"description\" content=\"Your description goes here\"\u003e\n```\n\n**3. Heading tags:**\n\nHeadings (H1-H6) are used to split your page into sections or chapters. Each heading is like a small title within the page. In HTML, a heading looks like this:\n\n```html\n\u003ch1\u003eYour heading goes here\u003c/h1\u003e\n```\n\n**4. Image alt attribute:**\n\nThe `alt` text attribute is a part of an image tag, and it provides a description for an image. Alt text plays a major role in image optimization. It makes your images accessible both to search engines (by telling them what a particular image means) and to people (by displaying an alternative text in case a particular image cannot be loaded or by helping screen readers convey images). In HTML it may look like this:\n\n```html\n\u003cimg src=\"url\" alt=\"Your image description goes here\"\u003e\n```\n\n**5. Open Graph tags:**\n\nOpen Graph (OG) tags are placed in the `\u003chead\u003e` section of a page and allow any webpage to become a rich object in social networks. OG tags let you control how the information about your page is represented when shared via social channels. This possibility may help you enhance the performance of your links on social media, thus driving more click-throughs and increasing conversions. In HTML, it can look like this:\n\n```html\n\u003cmeta name=\"og:title\" property=\"og:title\" content=\"Your Open Graph Title Goes Here\"\u003e\n```\n\n**6. Robots tag:**\n\nA robots tag is an element in the HTML of a page that informs search engines which pages on your site should be indexed and which should not. Its functions are similar to robots.txt, but robots.txt gives suggestions. Whereas robots tags give instructions. In HTML, it can look like this:\n\n```html\n\u003cmeta name=\"robots\" content=\"index, follow\"\u003e\n```\n\n**7. Canonical tag:**\n\nA canonical tag is a way of telling search engines that a specific URL represents the master copy of a page. Using the canonical tag prevents problems caused by identical or \"duplicate\" content appearing on multiple URLs. Practically speaking, the canonical tag tells search engines which version of a URL you want to appear in search results. In HTML, it may look like this:\n\n```html\n\u003clink href=\"URL\" rel=\"canonical\"\u003e\n```\n\n**8. HTML5 semantic tags:**\n\nOne of the most important features of HTML5 is its semantics tags. Semantic tags refers to syntax that makes the HTML more comprehensible by better defining the different sections and layout of web pages. It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content. For example, instead of using `\u003cdiv id=\"header\"\u003e\u003c/div\u003e` you can use a `\u003cheader\u003e\u003c/hrader\u003e` tag.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"assets/images/semantic-tags.png\" alt=\"HTML5 semantic tags\" width=\"300px\" /\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the difference between an \"attribute\" and a \"property\" in HTML?\n\nAttributes are defined by HTML. Properties are accessed from DOM (Document Object Model) nodes.\n\n**Example:**\n\n```html\n\u003cinput id=\"inputId\" type=\"text\" value=\"Hello World!\" /\u003e\n```\n\nThe **value** property reflects the current text-content inside the input box, whereas the **value** attribute contains the initial text-content of the **value** attribute from the HTML source code\n\n**Difference between HTML attributes and DOM properties:**\n\n|Attribute                               |Property                |\n|----------------------------------------|------------------------|\n|Attributes are defined by HTML.         |Properties are defined by the DOM.|\n|The value of an attribute is constant.  |The value of a property is variable.|\n|These are used to initialize the DOM properties.| No such job defined.|\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How do you set IE compatibility mode?\n\n**X-UA-Compatible** is a document mode meta tag that allows to choose what version of Internet Explorer the page should be rendered as. It is used by Internet Explorer 8 to specify whether a page should be rendered as IE 7 (compatibility view) or IE 8 (standards view).\n\n```html\n\u003chtml\u003e\n   \u003chead\u003e\n      \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n      \u003ctitle\u003eMy Web Page\u003c/title\u003e\n   \u003c/head\u003e\n   \u003cbody\u003e\n      \u003cp\u003eContent goes here.\u003c/p\u003e\n   \u003c/body\u003e\n\u003c/html\u003e\n```\n\nEmulating the version tells the browser to use the DOCTYPE to determine how to render content. pages without a DOCTYPE will be rendered in quirks mode. Edge mode tells Windows Internet Explorer to display content in the highest mode available, which actually breaks the \"lock-in\" paradigm. With Internet Explorer 8, this is equivalent to IE8 mode.\n\n**Setting the Meta Element:**\n\nThe meta element includes a content attribute that enables you to specify the mode that content is rendered in for the webpage, as the following table shows.\n\n|Value          |Rendering mode                                              |\n|---------------|------------------------------------------------------------|\n|IE=edge        |Display content in the highest mode available               |\n|IE=9           |Use the Windows Internet Explorer 9 standards rendering mode|\n|IE=8           |Use the Internet Explorer 8 standards rendering mode        |\n|IE=7           |Use the Windows Internet Explorer 7 standards rendering mode|\n|IE=5           |Use the Microsoft Internet Explorer 5 standards rendering mode|\n\n*Note: It is recommended that Web developers restrict their use of Edge mode to test pages and other non-production uses because of the possible unexpected results of rendering page content in future versions of Windows Internet Explorer.*\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is an optional tag?\n\nThe following lists all optional tags.\n\n|Tag            |Description  |\n|---------------|-------------|\n|`\u003carea\u003e`       |             |\n|`\u003cbase\u003e`       |             |\n|`\u003cbody\u003e`       |             |\n|`\u003cbr\u003e`         |             |\n|`\u003ccaption\u003e`    |             |\n|`\u003ccol\u003e`        |             |\n|`\u003ccolgroup\u003e`   |             |\n|`\u003cdd\u003e`         |             |\n|`\u003cdt\u003e`         |             |\n|`\u003cembed\u003e`      |             |\n|`\u003chead\u003e`       |             |\n|`\u003chr\u003e`         |             |\n|`\u003chtml\u003e`       |             |\n|`\u003cimg\u003e`        |             |\n|`\u003cinput\u003e`      |             |\n|`\u003cli\u003e`         |             |\n|`\u003clink\u003e`       |             |\n|`\u003cmeta\u003e`       |             |  \n|`\u003coptgroup\u003e`   |             |\n|`\u003coption\u003e`     |             |\n|`\u003cp\u003e`          |             |\n|`\u003cparam\u003e`      |             |\n|`\u003crp\u003e`         |             |\n|`\u003crt\u003e`         |             |\n|`\u003csource\u003e`     |             |\n|`\u003ctbody\u003e`      |             |\n|`\u003ctd\u003e`         |             |\n|`\u003ctfoot\u003e`      |             |\n|`\u003cth\u003e`         |             |\n|`\u003cthead\u003e`      |             |\n|`\u003ctr\u003e`         |             |\n|`\u003ctrack\u003e`      |             |\n|`\u003cwbr\u003e`        |             |\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is an HTML preprocessor? Have you used different HTML templating languages before?\n\nA **HTML preprocessor** is a program that takes one type of data and converts it to another one. In case of HTML and CSS, some of the more popular preprocessor languages are Slim and Sass. Slim is processed into HTML and Sass is processed into CSS.\n\nNo, but I heard about html template language like PUG (formerly Jade), Haml, ERB, Slim, Handlebars, Jinja, Liquid etc which is HTML preprocessor this mean that it is basically a language that will be converted to native html code.\n\nThe typical usage is when you render something on the server side. The usual use-case is when you have to add dynamic content to your website, so when you fetch something from your database, you will have to replace some parts in your original template.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How do you change the direction of html text?\n\nThe default text direction in HTML is left-to-right. However, when developing web content and applications, we may need to set it to right-to-left, for instance, to cater for languages such as Arabic, Hebrew, Pashto, Persian, Urdu, and Sindhi.\n\nWe can set text direction in HTML in one of two ways:\n\n* With the HTML **dir** attribute\n* With the CSS **direction** property\n\n**Example:**\n\n```html\n\u003c!-- Syntax --\u003e\n\u003celement dir=\"ltr|rtl|auto\"\u003e\n\n\u003c!-- Example --\u003e\n\u003ctextarea dir=\"rtl\"\u003e\u003c/textarea\u003e\n```\n\n**Attribute Values:**\n\n|Value          |Description                |\n|---------------|---------------------------|\n|ltr            |Default. Left-to-right text direction|\n|rtl            |Right-to-left text direction|\n|auto           |Let the browser figure out the text direction, based on the content|\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. When is it appropriate to use the small element?\n\nThe `\u003csmall\u003e` HTML element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from `small` to `x-small`.\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n      \u003ctitle\u003eSmall Element\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cstyle\u003e\n    small {\n      font-size: .7em\n    }\n  \u003c/style\u003e\n  \u003cbody\u003e\n    \u003cp\u003eLorem Ipsum is simply dummy text of the printing and typesetting industry.\u003c/p\u003e\n    \u003chr\u003e\n    \u003cp\u003e\u003csmall\u003eThe content is licensed under a W3C License.\u003c/small\u003e\u003c/p\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How do you serve a page with content in multiple languages?\n\nThe **lang** attribute specifies the language of the element\\'s content.\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003ctitle\u003eHTML5 Multilanguage Page\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n      \u003ch2\u003eEnglish\u003c/h2\u003e\n      \u003cp lang=\"en\"\u003eThis is demo text\u003c/p\u003e\n     \n      \u003ch2\u003eFrench\u003c/h2\u003e\n      \u003cp lang=\"fr\"\u003eCeci est un texte de démonstration\u003c/p\u003e\n     \n      \u003ch2\u003eSpanish\u003c/h2\u003e\n      \u003cp lang=\"es\"\u003eEste es un texto de demostración\u003c/p\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the difference between `\u003csection\u003e` and `\u003cdiv\u003e`?\n\nThe `\u003csection\u003e` tag creates independent sections within a webpage having logically connected content. And the `\u003cdiv\u003e` tag is an empty container specifying a division or a section.\n\n**The `\u003csection\u003e` Element**\n\nAccording to the W3C specification, the `\u003csection\u003e` tag means that the content inside this element is grouped. In other words, the content relates to a single theme. It must be an entry in the outline of the page.\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eSection Tag Example\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003eW3Docs\u003c/h1\u003e\n    \u003csection\u003e\n      \u003ch2\u003eW3Docs Sections\u003c/h2\u003e\n      \u003cul\u003e\n        \u003cli\u003eBooks\u003c/li\u003e\n        \u003cli\u003eQuizzes\u003c/li\u003e\n        \u003cli\u003eSnippets\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/section\u003e\n    \u003csection\u003e\n      \u003ch3\u003eBooks\u003c/h3\u003e\n      \u003cp\u003eLearn HTML\u003c/p\u003e\n      \u003cp\u003eLearn CSS\u003c/p\u003e\n      \u003cp\u003eLearn Javascript\u003c/p\u003e\n    \u003c/section\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n**The `\u003cdiv\u003e` Element**\n\nThe `\u003cdiv\u003e` element only represents its child elements and doesn\\'t have a special meaning. It can be used with the `lang`, `title`, and `class` attributes to add semantics that is common to a group of consecutive elements. This element can also be used in a `\u003cdl\u003e` tag and wrap groups of `\u003cdt\u003e` and `\u003cdd\u003e` elements.\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eDiv Tag Example\u003c/title\u003e\n    \u003cstyle\u003e\n      div {\n        background-color: #87f5b3\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003eExample\u003c/h1\u003e\n    \u003cdiv\u003e\n      \u003ch2\u003eA heading in a \u003cdiv\u003e tag.\u003c/h2\u003e\n      \u003cp\u003eSome text in a \u003cdiv\u003e tag.\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cp\u003eHere is some other text in a \u003cp\u003e tag.\u003c/p\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Discuss the differences between an HTML specification and a browser\\'s implementation thereof.\n\nHTML specifications such as HTML5 define a set of rules that a document must adhere to in order to be \"valid\" according to that specification. In addition, a specification provides instructions on how a browser must interpret and render such a document.\n\nA browser is said to \"support\" a specification if it handles valid documents according to the rules of the specification. As of yet, no browser supports all aspects of the HTML5 specification (although all of the major browser support most of it), and as a result, it is necessary for the developer to confirm whether the aspect they are making use of will be supported by all of the browsers on which they hope to display their content. This is why cross-browser support continues to be a headache for developers, despite the improved specificiations.\n\nIn addition, while HTML5 defines some rules to follow for an invalid HTML5 document (i.e., one that contains syntactical errors), invalid documents may contain anything, and it is impossible for the specification to handle all possibilities comprehensively. Thus, many decisions about how to handle malformed documents are left up to the browser.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Why you would use a srcset attribute in an image tag? Explain the process the browser used when evaluating the content of this attribute.\n\nThe `srcset` attribute allows to define a list of different image resources along with size information so that browser can pick the most appropriate image based on the actual device\\'s resolution.\n\n**Syntax:**\n\n```html\n\u003cimg \n   srcset=\" \n      url size, \n      url size, \n      url size \" \n    src=\"default url\" \n\u003e\n```\n\n**1. Using display density descriptor:**\n\n`srcset` provides a comma-separated list of image resources along with display density it should be used, for example1x, 2x etc.\n\n**Example:**\n\n```html\n\u003cimg src=\"image.jpg\" \n     srcset=\"image.jpg,\n             image_2x.jpg 2x\"\n/\u003e\n```\n\n**2. Using width descriptor:**\n\nThe syntax is similar to the display density descriptor, but instead of display density values, we provide the actual width of the image.\n\n**Example:**\n\n```html\n\u003cimg src=\"image.jpg\" \n     srcset=\"small.jpg 300w,\n             medium.jpg 600w,\n             large.jpg 900w\"\n/\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is accessibility \u0026 ARIA role means in a web application?\n\nThe **Accessible Rich Internet Applications (ARIA)** Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with HTML, JavaScript, and related technologies.\n\nScreen readers work with regular HTML, but adding ARIA can provide screen reader users with greater context and interactivity with the content on the page. ARIA has no effect on how elements are displayed or behave in browsers. It does not add new functionality, and is meant to act only as an extra descriptive layer for screen readers.\n\nWithout WAI-ARIA certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. WAI-ARIA addresses these accessibility challenges, for example, by defining ways for functionality to be provided to assistive technology. With WAI-ARIA, developers can make advanced Web applications accessible and usable to people with disabilities.\n\nARIA attributes are divided into two categories: roles, and states \u0026 properties.\n\n**ARIA Roles:**\n\nAn ARIA role is added via a `role=\"\u003cROLE TYPE\u003e\"` attribute, and does not ever change for an element once it is set. There are four categories of ARIA roles:\n\n* landmark\n* document\n* widget\n* abstract\n\n**Landmark ARIA Roles:**\n\nMuch like semantic HTML elements, landmark ARIA Roles are used to give users of assistive technology a better way to navigate and identify the different parts of a web page.\n\n**Example:**\n\n```html\n \u003cnav class='mobile-nav' role='navigation' aria-label='Mobile Menu'\u003e List of Links \u003c/nav\u003e\n```\n\nWhile seeming redundant, is actually useful for screen readers. It wouldn\\'t read the aria-label on this navigation, which is really helpful for giving greater context to visually impaired users, without the `role=\"navigation\"`.\n\nThe different landmark roles you can use are as follows, copied from the W3C Wiki Page:\n\n* **banner**: A region that contains the prime heading or internal title of a page.\n* **complementary**: Any section of the document that supports the main content, yet is separate and meaningful on its own.\n* **contentinfo**: A region that contains information about the parent document such as copyrights and links to privacy statements.\n* **form**: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.\n* **main**: Main content in a document. In almost all cases a page will have only one `role=“main”`.\n* **navigation**: A collection of links suitable for use when navigating the document or related documents.\n* **search**: The search tool of a Web document.\n* **application**: A region declared as a web application, as opposed to a web document.\n\n**Document ARIA Roles:**\n\nDocument roles describe the structure of the content on the page, as opposed to the structure of the whole page, which landmark roles describe. The roles in bold are the ones we think are the most common document aria roles, and the ones which are useful to think about including in your HTML.\n\n* **article**: A section of a page that consists of a composition that forms an independent part of a document, page, or site.\n* **columnheader**\n* **definition**: A definition of a term or concept.\n* **directory**\n* **document**\n* **group**: A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies.\n* **heading**: A heading for a section of the page.\n* **img**\n* **list**\n* **listitem**\n* **math**\n* **note**\n* **presentation**\n* **region**\n* **row**\n* **rowgroup**\n* **rowheader**\n* **separator**\n* **toolbar**\n\n**Widget ARIA Roles:**\n\nWidget Roles are used to describe what are often javascript-based interfaces, or the more complicated parts of your web page\\'s interface. The roles that are starred are the ones we think are the most common elements widget aria roles, and the ones which are useful useful to think about including in your HTML.\n\n* **alert**: A message with important, and usually time-sensitive, information. \n* **alertdialog**: A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. \n* **button**: An input that allows for user-triggered actions when clicked or pressed.\n* **checkbox**: A checkable input that has three possible values: true, false, or mixed.\n* **dialog**: A dialog is an application window that is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response. \n* **gridcell**\n* **link**\n* **log**\n* **marquee**\n* **menuitem**\n* **menuitemcheckbox**\n* **menuitemradio**\n* **option**\n* **progressbar**\n* **radio**: A checkable input in a group of radio roles, only one of which can be checked at a time.\n* **scrollbar**\n* **slider**\n* **spinbutton**\n* **status**\n* **tab**: A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.\n* **tabpanel**: A container for the resources associated with a tab, where each tab is contained in a tablist.\n* **textbox**: Input that allows free-form text as its value.\n* **timer**\n* **tooltip**\n* **treeitem**\n\n**Abstract ARIA Roles:**\n\nAbstract aria roles are the basis of how the other ARIA roles are defined. These are not to be used in HTML.\n\n**ARIA States \u0026 Properties:**\n\nARIA states and properties are often used to support ARIA roles that exist on a page. ARIA Properties often describe relationships with other elements, and for the most part, do not change once they\\'re set.\n\nARIA States are more dynamic and are typically updated with JavaScript as a user interacts with a page. Screen readers are notified when these states change, and can announce these changes to users after an interaction takes place.\n\nWhile there are 35 aria properties and states the W3C defines and which you can read more about on the W3C site, here are the ones we believe to most commonly used and practical for most web pages/applications.\n\n* **aria-activedescendant**: Identifies the currently active descendant of a composite widget. Use with autofill search suggestions.\n* **aria-autocomplete**: Indicates whether user input completion suggestions are provided. Use with autofill search suggestions.\n* **aria-checked (state)**: Indicates the current “checked” state of checkboxes, radio buttons, and other widgets. You can set this to true, false, or mixed state. \n* **aria-controls**: Identifies the element (or elements) whose contents or presence are controlled by the current element.\n* **aria-describedby**: Identifies the element (or elements) that describes the object.\n* **aria-disabled (state)**: Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n* **aria-expanded (state)**: Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.\n* **aria-hidden (state)**: Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.\n* **aria-invalid (state)**: Indicates the entered value does not conform to the format expected by the application.\n* **aria-label**: Defines a string value that labels the current element.\n* **aria-labelledby**: Identifies the element (or elements) that labels the current element.\n* **aria-live**: Indicates that an element is dynamic, changing, and will be updated, and describes the types of updates the user can expect from the live region.\n* **aria-owns**: Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child  relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n* **aria-pressed (state)**: Indicates the current “pressed” state of toggle buttons.\n* **aria-required**: Indicates that user input is required on the element before a form may be submitted.\n* **aria-selected (state)**: Indicates the current “selected” state of various widgets.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Create a traffic signal light in html?\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eTraffic Signal\n    \u003c/title\u003e\n    \u003cstyle\u003e\n      #green{\n        background-color: green;\n\twidth: 100px;\n\theight: 100px;\n\tborder-radius: 50%;\n\tborder: 2px solid #333;\n      }\n      #yellow{\n        background-color: yellow;\n\twidth: 100px;\n\theight: 100px;\n\tborder-radius: 50%;\n\tborder: 2px solid #333;\n      }\n      #red{\n        background-color: red;\n\twidth: 100px;\n\theight: 100px;\n\tborder-radius: 50%;\n\tborder: 2px solid #333;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody onload=\"timer;\"\u003e\n      \u003cdiv id=\"red\"\u003e\u003c/div\u003e\n      \u003cdiv id=\"yellow\"\u003e\u003c/div\u003e\n      \u003cdiv id=\"green\"\u003e\u003c/div\u003e\n      \n    \u003cscript\u003e\n      function startTrafficSignal() {\n        \n        const red = document.getElementById(\"red\");\n        const yellow = document.getElementById(\"yellow\");\n\tconst green = document.getElementById(\"green\");\n      \n        green.style.opacity = 1;\n      \n\t// Red Signal\n        setTimeout(function () {\n          green.style.opacity = 0.3;\n          red.style.opacity = 1;\n          yellow.style.opacity = 0.3;\n        }, 7000);\n\t\t\n        // Yellow Signal\n        setTimeout(function () {\n          green.style.opacity = 1;\n          red.style.opacity = 0.3;\n          yellow.style.opacity = 0.3;\n        }, 5000);\n\t\t\n\t// Green Signal\n        setTimeout(function () {\n          green.style.opacity = 0.3;\n          red.style.opacity = 0.3;\n          yellow.style.opacity = 1;\n        }, 12000);\n      }\n\n      const timer = setInterval(function () {\n        startTrafficSignal();\n      }, 12000);\n      \n      startTrafficSignal();\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearning-zone%2Fhtml-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearning-zone%2Fhtml-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearning-zone%2Fhtml-basics/lists"}