HTML Flashcards
What does a doctype do?
Explanation: Instructions to the browser about what version of HTML the webpage is written in, ensuring the web page is parsed the same way across web browsers.
Use: It’s the first line of code in the HTML document.
Example: For an HTML5 document the tag would be <!DOCTYPE html>
How do you serve a page with content in multiple languages?
Explanation: By setting the lang attributes on the various elements within the page.
Use: The lang attribute can be used on various elements (typically html, p, li…)
Example: You can set the whole site as being english by setting the html element <html lang="en"> Or you could set a paragraph as spanish with <p lang="es">
What kinds of things must you be wary of when designing or developing for multilingual sites?
Explanation: There are quite a few different nuances to pay attention to including:
- Including the lang attribute
- Allowing users to change the language
- Minimize text in raster based images
- Text overflow when translated
- How colors are perceived
- Date and currency formats
- Language reading direction
- Don’t concatenate translated strings
What are data- attributes good for?
Explanation: They store data private to the page or application.
Use: They were often used for storing extra data in the DOM, but are generally discouraged now.
Example: The exception is to add a hook for end to end testing frameworks like Selenium.
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
Explanation:
Semantics: Describe the content
Connectivity: Communicate with the server
Offline and storage: Store data client-side
Multimedia: Make audio and video first-class citizens
Graphics and effects: Diverse range of presentation options
Performance and integration: Speed optimization
Device access: Various input and output devices
Styling: More sophisticated themes
Describe the difference between a cookie, sessionStorage and localStorage.
Explanation: Cookies can be initiated by the server, have a manually set expiration date are small file size and are sent to the server with HTTP request. Local and session are both initiated by the client, are a relatively large file and aren’t sent to the server. The main difference between local and session is that local storage will persist forever until cleared manually.
Use: They are all used for client side storage of strings in key-value pairs.
Describe the difference between < script >, < script async > and < script defer >.
Explanation:
< script > HTML parsing is blocked, script is fetched and executed immediately.
< script async > script fetched in parallel to HTML parsing and executed as soon as it is available.
< script defer > script fetched in parallel to HTML parsing and executed when the page has finished parsing.
Use:
Use async when the script is independent of any other scripts on the page
defer is useful when you need to make sure the HTML is fully parsed before executing.
Example:
async could be used for analytics scripts.
A deferred script must not contain document.write
Why is it generally a good idea to position CSS < link >s within < head > and JS < script >s just before </ body >? Do you know any exceptions?
Explanation: Putting < link >s in the < head > allows for quick “first meaningful paint”. When a page first loads, HTML and CSS are being parsed simultaneously. Conversely < script > tags block HTML parsing while they are being downloaded and executed which can slow down your page. Placing the scripts at the bottom will allow the HTML to be parsed and displayed to the user first.
Exceptions: When your script contains document.write, however, it isn’t considered good practice to use document.write. Also, if you need scripts to run on page load it may be beneficial to split them out from your main script and place them in the head.
What is progressive rendering?
Explanation: Techniques used to improve the performance of a webpage to render content for display as quickly as possible.
Use: Improving perceived load time
Example: Lazy loading of images, Prioritizing visible content (or above-the-fold rendering) and Async HTML fragments
Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
Explanation: When you want to serve different images to users depending on their device display width.
Use: Sending lower resolution to limit data waste and increase performance or sending larger images to a higher resolution display to enhance the UX.
Example: < img srcset=”small.jpg 500w, medium.jpg 1000w, large.jpg 2000w” src=”…” alt=”” >
Have you used different HTML templating languages before?
Yes, I have used EJS. The popular templating languages include Ejs, Pug, Mustache, HandlebarsJS, Jinja2, and Blade.
Explanation: Template engines are mostly used for server-side applications. When you build a server-side application with a template engine, it allows you to embed some variables and features inside the HTML tags. The template engine replaces the variables in a template file with actual values, and displays this value to the client, which gives your application the flexibility of diplaying data dynamically. For a server-side application written with NodeJS runtime, you can use a templating engine like Embedded JS.
Use: With server-side applications that need to display dynamic content.
Example: <% if (user) { %>
<%= user.name %>
<% } %>
