HTML Questions Flashcards
What does a doctype do?
The doctype, which appears at the very beginning of your markup, defines what type of markup you will be using.
How do you serve a page with content in multiple languages?
Begin by setting the language attribute in the <html> tag of your web page. This attribute informs search engines and browsers about the primary language of your content, such as lang=”en”.
What kind of things must you be wary of when designing or developing for multilingual sites?
When developing multilingual sites in HTML, consider character encoding, language markup, text direction, language-specific formatting, language switching, SEO, language-specific URLs, CMS support, and thorough localization testing for a seamless and effective user experience.
What are data- attributes good for?
Allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM. Provides a flexible and extensible way to enrich your HTML with custom data, enabling easier interaction, styling, and manipulation of elements using JavaScript and CSS.
Data attributes and Custom Data Storage
Data attributes allow you to attach specific data values to HTML elements, providing a convenient way to store information related to a particular element.
Data Attributes and JavaScript Interaction
Data attributes can be easily accessed and manipulated using JavaScript. They provide a simple way to pass data between HTML and JavaScript code, making it easier to enhance interactivity and dynamic behavior.
CSS Styling and Selectors in regards to data attributes
You can target elements based on their data attribute values in CSS. This allows for more precise styling and targeting of specific elements based on custom data associated with them.
Data Attributes and Markup Semantics:
By using data attributes, you can maintain the integrity of your HTML markup while adding custom data. This ensures that your HTML remains valid and adheres to standard semantics.
Frameworks and Libraries in regards to data attributes
Many JavaScript frameworks and libraries, such as jQuery and React, provide built-in support for data attributes. They offer convenient methods and APIs to access and manipulate data attributes, simplifying development and integration.
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
(tags, elements and attributes.)
- Semantic elements such as the header, main, section, footer, etc.
- Introduced new attributes for the form’s tag.
- The local storage of data that allows webpages to function more efficiently offline.
- Embedding multimedia is possible without third-party plugins.
- Canvas that offers a much greater range of presentation options.
- Document Object Model (DOM) and APIs.
- Support for mathematical formulas and SVG files.
Describe the difference between a cookie, sessionStorage and localStorage.
Local storage is useful for storing data that the user will need to access later, such as offline data. Session storage is a great way to improve the performance of your web applications (cookie side). Cookies are a good choice for storing data that should not be persisted for a long time, such as session IDs (client side)
<script> </script>
When the browser encounters a
tag, it pauses parsing the HTML, fetches and executes the JavaScript code before continuing to parse the rest of the HTML. It blocks the rendering of the page until the script has been fetched and executed.
<script> </script>
The async attribute tells the browser to fetch the script asynchronously while continuing to parse the HTML. Once the script is fetched, it is executed as soon as possible, even if the HTML parsing is not complete. This allows the script to be executed independently of the HTML parsing, potentially improving page load performance. Multiple
tags can load and execute scripts concurrently.
<script> </script>
The defer attribute also allows the browser to fetch the script asynchronously. However, the defer attribute ensures that the script is executed only after the HTML parsing is complete, just before the DOMContentLoaded event is fired. This preserves the order of execution of scripts as they appear in the HTML document.
Why is it generally a good idea to position CSS <link></link>s between <head></head> and JS
s just before </body>? Do you know any exceptions?
In a nutshell, such a placement of CSS <link></link> s and JavaScript
s allows for faster rendering of the page and better overall performance.
- The main reason as to why JS files are linked at the bottom of the body is because whenever a browser encounters any JS, it parses it and executes that on the spot. Hence if it was to be added at the top, it would make the page rendering slow and thus it would take more time for page load. Moreover since the DOM won’t be rendered fully, JS won’t be able to manipulate the elements.
- CSS files are linked in the head because they get applied regardless of DOM already rendered or not. Hence the webpage looks elegant as soon as the page loads. However just like JS you can link the CSS at the end which would mean that the webpage first loads with just plain HTML and then the CSS is applied to it. This shift is clearly visible to the user and moreover an important thing to remember is that the page would load with bare minimum HTML and if the user has slow Internet connection, the CSS load would take considerable amount of time, which means that the webpage shows just the HTML meanwhile. This might make the user close the website without waiting for it to load fully.
- However if you use Jquery, that won’t be an issue since it would execute only after the document is ready. But since in any case, the browser would parse it, it would slow the page load.
