Basic HTML Questions:
1. What is HTML?
– HTML stands for HyperText Markup Language. It is used to create and design web pages.
2. What are the new features in HTML5 compared to HTML4?
– HTML5 introduces new semantic elements like `<header>`, `<footer>`, `<article>`, `<section>`, `<nav>`, etc., native support for video and audio, new form input types (`<input type=”date”>`, `<input type=”email”>`, etc.), and the `<canvas>` element for drawing.
3. What are semantic elements in HTML? Give examples.
– Semantic elements describe their meaning to both the browser and the developer. Examples include `<header>`, `<footer>`, `<article>`, `<section>`, `<nav>`, `<aside>`, `<main>`, `<figure>`, `<figcaption>`, etc.
4. What is the purpose of `DOCTYPE` in HTML?
– `DOCTYPE` (Document Type Declaration) is used to specify the version and type of HTML used in a document to the browser. It helps the browser to render the document correctly.
5. What is the difference between HTML elements and tags?
– HTML tags are used to mark up the start and end of an element. Elements are the building blocks of HTML pages and are constructed using tags.
6. What is the `<meta>` tag used for in HTML?
– The `<meta>` tag is used to provide metadata about the HTML document, such as character set, description, author, and viewport settings.
7. What is the purpose of the `alt` attribute in images?
– The `alt` attribute provides alternative text for an image if the image cannot be displayed. It is also used by screen readers for visually impaired users.
8. What is the difference between `<div>` and `<span>`?
– `<div>` is a block-level element used for grouping larger chunks of HTML content, while `<span>` is an inline element used for grouping smaller chunks of HTML content.
9. How can you create links to other websites in HTML?
– Links are created using the `<a>` (anchor) element. Example: `<a href=”https://www.example.com”>Visit Example</a>`.
10. Explain the purpose of the `<table>` element in HTML.
– The `<table>` element is used to create a table in HTML to display data in rows and columns.
Intermediate HTML Questions:
11. What is the difference between `<strong>` and `<b>` tags?
– `<strong>` is a semantic element used to mark text that is of strong importance, while `<b>` is a presentational element used to bold text without implying any additional importance.
12. Explain the difference between HTML and XHTML.
– XHTML is a stricter and cleaner version of HTML that conforms to XML syntax rules. It requires tags to be properly nested, all tags to be closed, and attribute values to be enclosed in quotes.
13. What are data attributes in HTML5?
– Data attributes allow you to store extra information on standard HTML elements using attributes prefixed with `data-`. They are intended to store custom data private to the page or application.
14. Explain the concept of HTML entities.
– HTML entities are special characters that are reserved for use in HTML. They start with an ampersand (`&`) and end with a semicolon (`;`). For example, `<` represents `<` and `&` represents `&`.
15. What is the purpose of the `<form>` element in HTML?
– The `<form>` element is used to create an HTML form for user input, which can be submitted to a server for processing.
16. What are the new input types introduced in HTML5 for `<input>` element?
– HTML5 introduced new input types such as `date`, `email`, `url`, `number`, `tel`, `search`, `color`, etc., to improve user experience and validation.
17. Explain the difference between `GET` and `POST` methods in HTML forms.
– `GET` method submits form data as part of the URL, visible to everyone, and has limits on the amount of data. `POST` method sends form data in the HTTP request body, secure, and suitable for large amounts of data.
18. How can you embed audio and video in HTML?
– You can use the `<audio>` and `<video>` elements introduced in HTML5 to embed audio and video content. Example:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
19. What is the purpose of the `target` attribute in HTML anchors (`<a>`)?
– The `target` attribute specifies where to open the linked document. It can be set to `_blank` to open the link in a new window or tab.
20. Explain the concept of HTML5 web storage.
– HTML5 web storage provides mechanisms for storing data in the browser (client-side) beyond the session. It includes `localStorage` (persistent storage) and `sessionStorage` (storage that lasts for one session).
Advanced HTML Questions:
21. What is the `<canvas>` element in HTML5?
– The `<canvas>` element is used to draw graphics, animations, or other visual images on the fly using JavaScript.
22. Explain the concept of responsive web design.
– Responsive web design is an approach to designing and coding websites that make web pages render well on a variety of devices and window or screen sizes.
23. What is the purpose of the `<noscript>` element in HTML?
– The `<noscript>` element provides fallback content to be displayed if a browser does not support scripting or has scripting disabled.
24. Explain the role of the `<iframe>` element in HTML.
– The `<iframe>` element is used to embed another HTML page within the current HTML document.
25. How can you integrate SVG (Scalable Vector Graphics) into an HTML page?
– SVG can be integrated into an HTML page using the `<svg>` element directly in the HTML, or by linking to an external SVG file using the `<img>` element or as a background image in CSS.
26. Explain the importance of `DOCTYPE` declaration in HTML5.
– In HTML5, the `DOCTYPE` declaration is simpler (`<!DOCTYPE html>`), and it triggers standards mode for the browser, ensuring consistent rendering across different browsers.
27. What are the differences between `<script>`, `<script async>`, and `<script defer>`?
– `<script>`: Pauses HTML parsing and executes the script immediately.
– `<script async>`: Downloads the script asynchronously during HTML parsing and executes it immediately after downloading.
– `<script defer>`: Downloads the script asynchronously during HTML parsing and executes it after the HTML document has been fully parsed.
28. Explain the concept of semantic HTML and why it is important.
– Semantic HTML involves using HTML5 elements that clearly describe their meaning in a human- and machine-readable way. It improves accessibility, SEO, and makes the code more understandable.
29. How can you embed custom fonts in a web page using CSS and HTML?
– Custom fonts can be embedded using `@font-face` rule in CSS, specifying the font file format and location, and then applying the font-family in CSS styles.
30. What are some best practices for writing efficient HTML/CSS?
– Use semantic HTML5 elements, minimize the use of inline styles and CSS, optimize images and multimedia, leverage CSS preprocessors, minimize HTTP requests, and use caching.
HTML Interview Tips:
– **Understand HTML5 features thoroughly**, including new elements, APIs, and best practices.
– **Practice coding** common HTML tasks like forms, tables, and multimedia embedding.
– **Be familiar with semantic HTML** and its advantages in accessibility and SEO.
– **Know about browser compatibility** issues and how to handle them.
– **Stay updated** with the latest trends and updates in HTML and web development.
These questions cover a range of difficulty levels and should help you prepare comprehensively for an HTML interview.