Topics
What is HTML?
What is the difference between HTML and XML?
What is inline element and block element? Can you list some of them?
How do you upload file on HTTP POST Request and what is enctype?
What is <link rel=”preload”> option?
What does a doctype do?
What is role attribute good for and what is WAI-ARIA?
What are data- attributes good for?
Describe the difference between<script>,<script async>and<script defer>
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
What is HTML?
HTML stands for Hyper Text Markup Language and Hyper Text means linkable text. Back in days, HTML was working just like dictionary application nowadays. People just click the word and move to other pages. Browser downloads HTML from the server and parse it, generate DOM, and render it. It is read from top to bottom so if HTML finds script tag, it stops parsing and rendering.
What is the usage of role attribute good for and what is WAI-ARIA?
WAI-ARIA stands for Accessible Rich Internet Applications. It is guideline of accessibility of application.
The usage of role attribute is to define the role of the element not supported browser yet and also it makes content readable for users who can not use a mouse. Since it is hard to explore websites without clicking sliders, navbars, and menu so on, screen reader helps users to hear the content. Thus, developers should have screen readers understand what the elements are for so that it can convey information to users properly.
*Resource:
https://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html
https://www.w3.org/TR/wai-aria/#dfn-state
Whta is http-equiv Attribute?
This attribute can contain the name of an HTTP header, hence the attribute name http-equivalent.
It defines an instruction that can alter server and user-agent behavior. The value of the instruction is defined inside the content attribute, and can be one of the following:
<meta http-equiv="refresh" content="30">
What is Content Security Policy (CSP) and how to set them?
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
https://developers.google.com/web/fundamentals/security/csp/
Describe the difference between<script>,<script async>and<script defer>
The main difference between these is the timing of execution and whether if script blocks HTML parsing or not.
<script> is the most basic one and it stops HTML parsing and executes javascript immediately because HTML file loads from top to bottom. That’s why script tag which does DOM manipulation like react bundled files and does not need to load very top such as analytics tool is not inside a head tag.
<script defer> and <script async> allows browser to continue parsing the HTML during downloading script files. The difference between these two is the timing of execution.
<script defer> executes scripts in the order when DOM parsing is done. On the contrary, <script async> executes scripts when it is downloaded.