HTML interview questions
Describe the difference between <script>, <script async> and <script defer>.
<script> regular tag will block rendering of the page to make a request to fetch the file, and after is downloaded execute the script. The page will not continue to load until the script finishes. the browser isn't really doing anything useful while the script file is downloading <script async> will run the script asynchronously, meaning that it will not block rendering, it makes a parallel requests to fetch the files, it continues parsing the document as if it was never interrupted and it executes the individual scripts the moment the files are downloaded. <script defer> will defer the script to run after the page is done parsing. It means that makes a parallel requests to fetch the individual files, it continues parsing the document as if it was never interrupted, and it finishes parsing the document even if the script files have downloaded and execute each script in the order they were encountered in the document.
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content. Semantic html: use the right tags in your html Ex <navbar>Logo|home|about</navbar> Use <form> To create a log in Not add <br /> to get space (is not semantic)
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
Blocks of HTML5 • more semantic text markup • new form elements • vedio and audio • new javascript API • canvas and SVG SVG is a language for creating 2D scalable vector graphics and images. • new communication API • geolocation API • web worker API • new data storage
How do you serve a page with content in multiple languages?
Each page has a main language for the content of a given page defined with: <html lang="en"> If on that page, you have a fragment that is in a different language, you have to change the language for that element, only, using the lang attribute, like so <p lang="es">texto en español</p> On the other hand, you have different pages, let say, one in english and one in spanish, on your head section, you should have a link element on your english page: <link rel="alternate" href="http://example.com/es" hreflang="es" /> and a link element on your spanish page <link rel="alternate" href="http://example.com/en" hreflang="en" />
What does a doctype do?
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in (HTML5, HTML4). With it the browser determines how to render the page according to the page's source code (must be the very first thing in the HTML document)
What's the difference between full standards mode, almost standards mode and quirks mode?
There are the modes that browsers use to render the page Quirks mode:The pages contain non-standard behaviors ( the rendering of any page in different browsers may be different) emulated in old browsers such as Internet Explorer 5 or Navigator 4. These were needed for websites written before introduction of web standards. Full standard mode: In this mode, the behavior described is same as described by HTML and CSS specifications. Most of the modern browsers uses full standard mode. There is typically less variation in webpage display between different browsers when standards-compliant mode is triggered Almost standard Mode: In almost standard mode there is very small number of quirks implementation. Modern browsers generally try to render according the full standard mode. However, to provide compatibility with older web pages, and to provide additional "intuitive" functionality, all browsers support an alternative "quirks mode". Generally, quirks mode is turned on when there is no correct DOCTYPE declaration, and turned off when there is a DOCTYPE definition. However, invalid HTML - with respect to the chosen DOCTYPE - can also cause the browser to switch to quirks mode.
Describe the difference between a cookie, sessionStorage and localStorage.
They are all storage on the client side Local store: With local storage, web applications can store data locally within the user's browser. Local storage is more secure than cookies, and large amounts of data can be stored locally(at leat 5Mb). Unlike cookies the information is never transferred to the server. Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data. The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. The 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 cookie (used for old versions before html5) A cookie is a small text file in which a website can store different information. Cookies are saved on the user's hard drive and not on the server. Most cookies expire (delete themselves) after a predetermined time period, which can range from one minute to several years. But the user can also identify and delete any cookies on his/her computer. Even though the user can choose no accept a cookie, without this every time you open a new web page the server where that page is stored will treat you like a completely new visitor. As cookies are used for authentication purposes and persistence of user data(like i the shopping car), all cookies valid for a page are sent from the browser to the server for every request to the same domain - this includes the original page request, any subsequent Ajax requests, all images, stylesheets, scripts and fonts. For this reason cookies should not be used to store large amounts of information.
12. What is progressive rendering?
This is when you initially load a lower resolution version of an image, and then progressively add resolution to the image, which prevents the user from just seeing no image until the entire image has loaded.
Are there any problems with serving pages as application/xhtml+xml?
To send XHTML markup to a browser with a MIME type that says that it is XML, you need to use one of the following MIME types: application/xhtml+xml, application/xml or text/xml. application/xhtml+xml: it is a MIME that tells the browser that the content send is XML ans he needs to uses an XML parser, not an HTML parser. The problem is that unfortunately, versions less than or equal to Internet Explorer 8, doesn't support files served as XML, although a number of other browsers do. To get around the fact that not all browsers support content served as XML, many XHTML files are actually served using the text/html MIME type. In this case, the user agent will read the file as if it were HTML, and use the HTML parser.
What's the difference between HTML and XHTML?
XHTML stands for EXtensible HyperText Markup Language, and is almost identical to HTML but is stricter than HTML. By combining the strengths of HTML and XML, XHTML was developed. XML is a markup language where documents must be marked up correctly (be "well-formed"). The Most Important Differences from HTML: Document Structure • XHTML DOCTYPE is mandatory • The xmlns attribute in <html> is mandatory • <html>, <head>, <title>, and <body> are mandatory XHTML Elements • XHTML elements must be properly nested • XHTML elements must always be closed • XHTML elements must be in lowercase • XHTML documents must have one root element XHTML Attributes • Attribute names must be in lower case • Attribute values must be quoted • Attribute minimization is forbidden (minimización de atributos es Prohibida) Wrong: <input type="checkbox" name="vehicle" value="car" checked /> Correct: <input type="checkbox" name="vehicle" value="car" checked="checked" />
Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before</body>? Do you know any exceptions?
You usually put the <link> tags in between the <head> to prevent Flash of Unstyled Content which gives the user something to look at while the rest of the page is being parsed. It is a good idea to place scripts at the bottom of the <body> element. This can improve page load, because script compilation can slow down the display. Exceptions are if you grab the scripts asynchronously, or at least defer them to the end of the page.
What are data- attributes good for?
data can be stored on semantic html elements that not visible to end users, also not violating the standard HTML5. data attribute: Any attribute on any element whose attribute name starts with data- is a <article id="electriccars" data-columns="3" data-parent="cars"> </article> Reading the values of these attributes out in JavaScript is also very simple with the dataset property. var article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.parent // "cars" Each property is a string and can be read and written. You can even access them from CSS. For example to show the parent data on the article you can use generated content in CSS with the attr() function: article::before { content: attr(data-parent); }
What kind of things must you be wary (cauteloso) of when design or developing for multilingual sites?
• hreflang attr in link • <html dir="rtl"> Set the direction of text by using the 'dir' attribute A 'dir' attribute is not needed for pages written using left-to-right languages such as English as this is the default direction of text. Different page layouts are often required for right-to-left languages, as most right-to-left languages should be right aligned rather than left aligned. • <meta charset='UTF-8'> Make sure your page will support all the various characters of the language, so be sure to set character encoding to utf-8 at the very beginning • font-size for :lang({language_code}) selectors in CSS use a css class to increase the font for languages(like Chinese) that are difficult to read at font sizes that are suitable for Engish • difference in word length for each language ie one language may require several lines for a certain content block, while another may just require one.