Banki Flashcards
HTML - What does a doctype do?
The <!DOCTYPE> declaration is a signal to the browser that tells it how to interpret the document. In modern web development, we use <!DOCTYPE html> to specify that the page is using HTML5. It’s crucial because it ensures the browser renders the page in Standards Mode, which follows modern web standards. Without it, the browser might switch to Quirks Mode, which can cause layout issues or unexpected behaviour. So, essentially, <!DOCTYPE> helps avoid inconsistencies and ensures the page displays properly across different browsers.
How do you serve a page with content in multiple languages?
To serve a page with content in multiple languages, you generally create separate versions of the page for each language. Users can select their preferred language via a dropdown, language switcher, or by detecting their browser language’s settings. The language of the page is indicated using the ‘lang’ attribute in the HTML, which helps the browser understand which language the content is in.
For dynamic websites, tools like i18n (internationalisation) libraries are often used. These allow you to store translations separately and change the content based on the user’s language preference. You also need to handle text direction for languages which read right to left, and make sure the page adjusts accordingly.
What kind of things must you be wary of when design or developing for multilingual sites?
The top three most important things to be wary of when designing or developing for multilingual sites:
- Different languages vary in length, so ensure your design can accommodate longer text without breaking. Plan flexible layouts that can handle these variations without impacting the user experience.
- For some languages you need to support right to left text. This affects not just text but the entire layout, including navigation, alignment, and icons.
- Translation isn’t enough - you also need to localise things like date formates, currencies, and images to fit the cultural context of each region. This ensures that the site feels native and relevant to different users.
What are data- attributes good for?
data- attributes are great for storing custom data directly in HTML elements without affecting how the page looks or behaves. They’re especially useful when you need to attach extra information to an element that JavaScript can later access. For example, you might use them to store something like a product ID or a user-specific setting. They don’t interfere with the HTML or CSS, but they make it really easy for JS to dynamically interact with the content through the ‘dataset’ property. It’s a simple way to pass around extra data without needing a more complex backend solution.
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
HTML5 is considered an open web platform because it provides a robust foundation for creating web applications and sites. The main building blocks of HTML5 include:
- Semantic Elements: HTML5 introduced new semantic elements like <header>, <footer>, <article>, and <section>, which provide meaning to the structure of the document. This enhances accessibility and SEO by helping browsers and assistive technologies understand the content better.
- Multimedia Support: HTML5 includes native support for audio and video through <audio> and <video> elements. This allows developers to embed multimedia content without needing third-party plugins like Flash, improving performance and user experience.</video></audio>
- Form Enhancements: HTML5 introduced new input types (like email, date, and range) and attributes (like placeholder and required) that make forms more user-friendly and reduce the need for JS for validation.
- Canvas and SVG: The <canvas> element allows for dynamic, scriptable rendering of 2D shapes and bitmap images. Additionally, SVGs can be used to create vector-based graphics, making it easier to draw and manipulate graphics on the web.</canvas>
- APIs and Storage: HTML5 provides various APIs, such as the Geolocation API, Web Storage (localStorage and sessionStorage), and the Drag-and-Drop API. These features enable developers to create more interactive and responsive web applications.
