HTML Flashcards
What does a DOCTYPE do?
DOCTYPE is an abbreviation for DOCument TYPE. A DOCTYPE is always associated to a DTD - for 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. If the browser recognizes a correct DOCTYPE, the no-quirks mode is triggered (a standard DOCTYPE is used), otherwise it will use quirks mode and try to support non-standard documents.
How do you serve a page content in multiple languages?
When an HTTP request is made to a server, the requesting user agent usually sends information about language preferences by using the Accept-Language header.
The server can then use this information to return a version of the document in the appropriate language if available. The returned HTML document should also declare the lang attribute in the tag, such as ….
In the back end, the HTML markup will contain i18n placeholders and content for the specific language stored in YML or JSON formats. The server dinamically generates the HTML page with content in that particular language, usually with the help of a back end framework. In React there are several packages that add this functionality.
Things to consider when developing multilingual sites
CO-CU-DE-IM-LA-RE-SE
CO-CU-DE-LA-IM-RE-SE
- Color meanings on different cultures.
- Currency and date formats should be adapted to the user’s culture.
- Default language. User should be directed to their browser language. But there should be an option in your page to change this.
- Images with embedded text. It’s not a good practice to have embedded text on images. This is not scalable because you would need different images for every language.
- Lang attribute in HTML tag. This information helps search engines return language specific results, and it is also used by screen readers that switch language profiles to provide the correct accent and pronunciation.
- Reading direction can vary in different countries.
- Sentence length varies with language. The same sentence can have different lengths depending on the language and this should be taken into consideration when setting the maximum length of texts for headlines, labels and buttons.
What are the building blocks of HTML5?
- Connectivity: html5 brings new ways of communicating between the page and the server like web sockets or WebRTC (real time communication).
- Device access: allowing for the usage of various input and output devices. Camera, touch events, geolocation, device orientation…
- Multimedia - Audio and video are made first-class citizens in the web. They have their own tags now.
- Offline mode and storage improvements. Allowing web pages to store data client-side and also to operate offline.
- Performance and integration: providing greater speed optimization and better usage of computer hardware.
- Semantics. HTML5 brings with it new tags that help you describe more precisely what your content is.
What are data- attributes good for?
- Before JavaScript frameworks became popular, front end developers used data- attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM.
- The data element is intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
- These days, using data- attributes is discouraged. One reason is that users can easily modify the values of the data- attributes by using their browsers developer tools. The data model is better stored within JavaScript itself and staying updated with the DOM via data binding possibly through a library or framework.
Differences between cookie, local storage and session storage
+———————————————————–+————–+—————-+
| cookie | localStorage | sessionStorage |
+—————————————-+——————+————–+—————-+
| Initiator | Client or server | Client | Client |
+—————————————-+——————+————–+—————-+
| Expiry | Manually set | Forever | On tab close |
+—————————————-+——————+————–+—————-+
| Persistent across browser sessions | Yes | Yes | No |
+—————————————-+——————+————–+—————-+
| Sent to server with every HTPP request | Yes | No | No |
+—————————————-+——————+————–+—————-+
| Capacity | 4kb | 5MB | 5MB |
+—————————————-+——————+————–+—————-+
| Accessibility | Any window | Any window | Same tab |
+—————————————-+——————+————–+—————-+
Difference between < script >, < script async > and < script defer >
- When the parser arrives to a without a modifier the parsing is stopped while the script is loaded. Once the script is loaded it will be executed and after that the parsing will resume.
- < script async > In this way the parser will continue parsing the HTML code but as soon as the JavaScript block is loaded it will be executed. This would mean that we could be referencing HTML elements that haven’t been parsed yet from our JavaScript.
- This option is pretty similar to the previous one but the JavaScript code won’t be executed till the whole document has been parsed. If there are several deferred scripts they will be executed in the order they appear in the document.
Why is it generally a good idea to put the < link > link > to our css file in the < head > head > element?
We do this so all the styles are loaded when the browser renders the HTML elements. Otherwise, we would potentially view unstyled pages.
Putting s in the head is part of proper specification in building an optimized website. When a page first loads, HTML and CSS are being parsed simultaneously; HTML creates the DOM (Document Object Model) and CSS creates the CSSOM (CSS Object Model). Both are needed to create the visuals in a website, allowing for a quick “first meaningful paint” timing.
This progressive rendering is a category optimization sites are measured in their performance scores. Putting style sheets near the bottom of the document is what prohibits progressive rendering in many browsers. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is then stuck viewing a blank white page. Other times there can be flashes of unstyled content (FOUC), which can show a web page with no styling applied.
Why is it a good practice to set our javascript code just before closing the < body > tag?
s block HTML parsing while they are being downloaded and executed. Placing the scripts at the bottom will allow the HTML to be parsed and displayed to the user first.
Additionally, we are making sure that all the HTML elements have been parsed and that any element we reference from our JavaScript code will exist already.
What is progressive rendering?
Progressive rendering is the name given to techniques used to improve the performance of a web page (in particular, improve perceived load time) to render content for display as quickly as possible.
Examples of such techniques:
- Lazy loading of images. Images on the page are not loaded all at once. JavaScript will be used to load an image when the user scrolls into the part of the page that contains the image.
- Prioritizing visible content (above-the-fold-rendering). Include only the minimum CSS/content/scripts necessary for the amount of page that will be rendered in the users browser first to display as quickly as possible. You can then use deferred scripts or listen for the load event to load in other resources and content.
Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
You would use the srcset attribute when you want to serve different images to users depending on their device display width - serve higher quality images to devices with retina display enhances the user experience while serving lower resolution images to low-end devices increase performance and decrease data wastage (because serving a larger image will not have any visible difference).
For example: < img srcset=”small.jpg 500w, medium.jpg 1000w, large.jpg 2000w” src=”…” alt=””> tells the browser to display the small, medium or large .jpg graphic depending on the client’s resolution. The first value is the image name and the second is the width of the image in pixels. For a device width of 320px, the following calculations are made:
500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25
If the client’s resolution is 1x, 1.5625 is the closest, and 500w corresponding to small.jpg will be selected by the browser.
If the resolution is retina (2x), the browser will use the closest resolution above the minimum. Meaning it will not choose the 500w (1.5625) because it is greater than 1 and the image might look bad. The browser would then choose the image with a resulting ratio closer to 2 which is 1000w (3.125).
srcsets solve the problem whereby you want to serve smaller image files to narrow screen devices, as they don’t need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low-density screens.
