Interview Questions for Web Developer - HTML

1. What is HTML? / What does HTML mean? - Answer

2. What are HTML tags? - Answer

3. What are HTML Attributes? - Answer

4. What is alt attribute for img tag? Should we use it? - Answer

5. What is title attribute? Should we use it? - Answer

6. What are data- attributes used for? - Answer
In general, the data- attributes are mostly used to save some information inside an element like its state or value, it may also be used as selector for autotests.

7. What’s the meaning of word semantic in Web?
In the context of the web, "semantic" refers to the meaning or interpretation of content by computers or search engines based on its context within the structure of a web page, aiding in better understanding and indexing of information.
These are some of the roughly 100 semantic elements available:
<article>; <aside>; <details>; <figcaption>; <figure>; <footer>; <form>; <header>; <main>; <mark>; <nav>; <section>; <summary>; <time>.

8. What’s the difference between <b> and <strong> tags?
The <strong> released with HTML5 and it is a semantic tag, it is not only makes font bold but also says to search engines that the information in the element is important. Tag <b> just makes font bold.

9. What’s the difference between div and section?
The <div> is a generic container used for styling and grouping content, while <section> is a more semantically meaningful tag used to represent distinct sections of content within a document or a web page. <section> helps in better structuring the content for accessibility and SEO purposes by indicating thematic groupings.

10. What is srcset of images? - Answer

11. What is viewport? - Answer

12. How to add an image to the web page?
Example: <img src="image.jpg" alt="A beautiful image" width="400" height="300">

13. How to add font via HTML?
Example: <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">.

14. What is tabindex? How and when to use it?

The tabindex attribute in HTML is used to control the tab order of focusable elements (such as links, buttons, and form elements) when users navigate a webpage using the keyboard's Tab key. It specifies the order in which elements receive focus when the user presses the Tab key.

Here's how tabindex works:

• Positive Values (e.g., tabindex="1"): Elements with a positive tabindex value are included in the natural tab order. The elements with lower values receive focus first (e.g., tabindex="1" is focused before tabindex="2".

• Zero (tabindex="0"): Setting tabindex="0" allows an element to be included in the default tab order based on its position in the document flow. This is particularly useful for elements like <div> or <span> that are not natively focusable but need to be programmatically focusable. By assigning tabindex="0", you're allowing these elements to receive keyboard focus in the order they appear in the HTML.

• Negative Values (tabindex="-1"): Elements with tabindex="-1" can be programmatically focused using JavaScript but are excluded from the natural tab order. This is useful when you want to make an element focusable via scripting, like for a modal or a hidden element that should only receive focus under specific conditions, but shouldn't disrupt the normal tab flow.

15. What is DOCTYPE?
DOCTYPE stands for Document Type Declaration. It is an instruction or a declaration in an HTML (or XML) document that specifies the type and version of the markup language used in the document.

16. How works <br> tag? - Answer

17. How works <hr> tag? - Answer

18. Name list types in HTML?

• <ul> is an unordered list of items;
• <ol> is an ordered list of items;
• <dl> is a description list of items;

19. What does async and defer mean in <script>?

The async and defer attributes in the <script> tag are used to control the execution of JavaScript code when it is included in an HTML document. They affect how the browser fetches and runs the script and can impact the loading and rendering of the web page.

• Both async and defer allow the HTML parsing to continue while the script is being downloaded.

• With async, the script may execute before the HTML parsing is complete, leading to a potentially out-of-order execution of scripts.

• With defer, the script is guaranteed to be executed in the order it appears in the document after the HTML parsing is complete.