UI Developer interview questions
Part 3 — HTML
1. What is the purpose of semantics?
- SEO
- accessibility
2. What are the steps involved in rendering a html in browser?
Layout:-Browser will determine how much space each element takes up and where to place it.
Painting:-This is the process of filling in pixels. It involves drawing out elements.
Compositing:-Browser draws element to the screen in the correct order so the page renders correctly.
3.Where will the footer element position itself in viewport according to the below html?
<footer>I am footer</footer>
<main>I am inside Main</main>
<header>I am header </header>Footer will be the first element in the DOM and it will be on the top part of viewport. Without CSS, footer will always follow the document order for position.
4. How do you insert a copyright symbol on a browser page?
We have to use © or ©. This is one among the HTML symbols. HTML symbols are used to represent mathematical, technical, and currency symbols, are not present on a normal keyboard.
5. How will you customize the default error messages of a HTML5 form?
<input type=”text” id=”username” required placeholder=”Enter Name” oninvalid=”this.setCustomValidity(‘Enter User Name Here’) ”oninput=”this.setCustomValidity(‘’)” />6.How will you make any html editable?
contentEditable=true
7.How will you show an alert when the user clicks refresh button or back button?
We need to handle onbeforeunload event or onhashchange event.
window.onbeforeunload = function() {
return "Your work will be lost.";
};8. You have a page which looks like a table, but it is not a data table. Which one will you choose to design this page- table or div?
Table layout is not semantic friendly. It is intended for presentation of tabular data. Other disadvantages are:
Page Size will Increase
Table has lot of inner tags like TR, TD, TH and each inner tag will have separate styles in it. Need to write styles for each and every tag. Surely it will increase the page size and because of that downloading speed and the network bandwidth will get increased.
Page rendering will be slow
Page rendering will be slower in table based layout, because page content won’t be displayed until the end tag of table reached. But in Div based layout, rendering will be faster, since it won’t wait for the end tag for the content display.
Difficult to maintain
When we want to change the design in an existing page, it’s very difficult in table based layout, because code impact will be more.
Search Engine Tools
Div layout helps the search engine tools to search faster when compared with table layouts, since its need to traverse several HTML tags.
9. What is meta tag?
Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
10. What is the meta tag for responsive web design?
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
11. If an image is hidden, will it’s respective .jpg/png file be loaded?
No. Request for the resource will be fired as soon as the HTML parser reaches that file irrespective of it’s attributes.
12. You have a markup that have only multiple <div>. How will you select the second div using CSS and using Javascript?
CSS: div:nth-of-type(2)
JS: document.getElementsByTagName(‘div’)[1]
OR
document.querySelector(‘div:nth-of-type(2)’)
Before you go…
If you enjoyed this story, make sure to follow me so you don’t miss my updates!
Liked this story? Don’t forget to“clap” and share to help others find it. Thank you.
You might also like Part 2- General UI questions and ES6 Interview questions
