Top 20 HTML Technical Questions in Coding Interviews
1. What is the difference between an HTML element and an HTML tag?
Interview Question: Explain the difference between an HTML element and an HTML tag.
Answer: An HTML element refers to the collection of an opening tag, a closing tag, and the content in between them. An HTML tag, on the other hand, is the opening or closing part of an element, which is used to define the structure and the content of an HTML document.
Here's an analogy: think of an HTML element as a sandwich. The opening tag is the bottom slice of bread, the closing tag is the top slice of bread, and the content in between those tags is the filling.
For example, consider the following HTML code:
<p>This is a paragraph.</p>
In this case, the entire code is an HTML element, while <p> is the opening tag and </p> is the closing tag.
2. What is the purpose of the <!DOCTYPE> declaration?
Interview Question: What is the purpose of the <!DOCTYPE> declaration in an HTML document?
Answer: The <!DOCTYPE> declaration is used to inform the web browser about the version of HTML being used in the document. This directive is placed at the beginning of the HTML document and helps the browser to render the content correctly according to the specified HTML version.
For example, to specify that the HTML document is written in HTML5, you would include the following <!DOCTYPE> declaration:
<!DOCTYPE html>
3. What are the main differences between HTML and XHTML?
Interview Question: Explain the main differences between HTML and XHTML.
Answer: HTML (Hypertext Markup Language) and XHTML (Extensible Hypertext Markup Language) are both markup languages used to create web pages. Here are the main differences between them:
Syntax Rules: XHTML has stricter syntax rules compared to HTML. In XHTML, all elements must be properly nested, closed, and have lowercase tags.
MIME Types: HTML files are usually served with the text/html MIME type, while XHTML files are served with the application/xhtml+xml MIME type.
XML-Based: XHTML is an XML-based language, which means it follows the rules of XML, making it more suitable for data exchange between different platforms.
Here's an example of the same code snippet in both HTML and XHTML:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Example</title>
</head>
<body>
<img src="image.jpg" alt="An example image">
<br>
<input type="text" name="example">
</body>
</html>
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Example</title>
</head>
<body>
<img src="image.jpg" alt="An example image" />
<br />
<input type="text" name="example" />
</body>
</html>
Notice how in the XHTML example, all tags are lowercase, and self-closing elements have a trailing slash.
4. What is an HTML attribute, and what are some examples of attributes?
Interview Question: Explain what an HTML attribute is and provide some examples.
Answer: An HTML attribute is a property or characteristic that can be added to an HTML tag to provide additional information or modify the behavior of the element. Attributes are always included within the opening tag and are composed of a name-value pair, separated by an equal sign (=).
Here are some examples of HTML attributes:
src: Specifies the URL of an image or script file.
<img src="image.jpg" alt="A sample image">
alt: Provides alternate text for an image, which is displayed if the image cannot be loaded.
<img src="image.jpg" alt="A sample image">
href: Specifies the URL of the linked resource in an anchor tag.
<a href="https://example.com">Visit Example.com</a>
id: Assigns a unique identifier to an HTML element, which can be used for styling and JavaScript manipulation.
<div id="content">This is a content section.</div>
class: Assigns one or more CSS class names to an HTML element for styling purposes.
<p class="text-large">This is a large paragraph.</p>
5. What are empty or void elements in HTML?
Interview Question: Explain what empty (or void) elements are in HTML.
Answer: Empty (or void) elements are HTML elements that do not have any content or child elements. They only have an opening tag, and there is no need for a closing tag. These elements typically represent self-contained units of content or functionality, such as images, line breaks, or input fields.
Here are some examples of empty elements:
<img src="image.jpg" alt="A sample image"><br><input type="text" name="username"><meta charset="UTF-8"><link rel="stylesheet" href="styles.css">
In XHTML, empty elements must include a trailing slash before the closing angle bracket, like this:
<img src="image.jpg" alt="A sample image" />
<br />
<input type="text" name="username" />
6. How do you create a hyperlink in HTML?
Interview Question: Describe how to create a hyperlink in HTML.
Answer: A hyperlink (or link) in HTML is created using the <a> (anchor) element, along with the href attribute, which specifies the URL of the linked resource. The content within the <a> element represents the clickable text or image.
Here's an example of creating a simple text hyperlink:
<a href="https://www.example.com">Visit Example.com</a>
And here's an example of creating an image hyperlink:
<a href="https://www.example.com">
<img src="image.jpg" alt="Click to visit Example.com">
</a>
7. What is the purpose of the <head> and <body> elements in an HTML document?
Interview Question: Explain the purpose of the <head> and <body> elements in an HTML document.
Answer: The <head> and <body> elements are two main sections of an HTML document, serving different purposes:
<head>: The<head>element contains metadata (information about the document) and links to external resources, such as stylesheets and scripts. Metadata can include the document's title, character encoding, and meta tags for SEO. The content within the<head>element is not displayed in the browser's main viewport.
Example of a <head> element:
<head>
<title>My Website</title>
<meta charset="UTF-8">
<meta name="description" content="A sample website">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>: The<body>element contains the actual content of the web page, such as text, images, links, and multimedia elements. The content within the<body>element is displayed in the browser's main viewport and is what users interact with.
Example of a <body> element:
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample paragraph.</p>
<img src="image.jpg" alt="A sample image">
<a href="https://www.example.com">Visit Example.com</a>
</body>
8. What are the differences between block-level and inline elements in HTML?
Interview Question: Explain the differences between block-level and inline elements in HTML.
Answer: Block-level and inline elements are two types of HTML elements that have different display and formatting characteristics:
- Block-level elements: These elements create a new block (or line) in the document layout. They take up the entire width of their parent container by default, and their height is determined by the content inside them. Examples of block-level elements include
<div>,<p>,<h1>-<h6>, and<ul>.
Here's an example of block-level elements:
<div>
<p>This is a sample paragraph inside a div element.</p>
</div>
<h2>This is a level 2 heading.</h2>
- Inline elements: These elements do not create a new block in the document layout and only take up the space required by their content. They are typically used for styling a portion of text within a block-level element. Examples of inline elements include
<span>,<a>,<em>, and<strong>.
Here's an example of inline elements:
<p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
9. How do you create an ordered list and an unordered list in HTML?
Interview Question: Describe how to create an ordered list and an unordered list in HTML.
Answer: Ordered and unordered lists are created using the <ol> and <ul> elements, respectively. Each item within those lists is represented by the <li> (list item) element. The main difference between ordered and unordered lists is the type of marker that appears next to each list item:
- Ordered List (
<ol>): The list items are marked with numbers or letters in a specific order. This is typically used for lists where the order of items is important, such as instructions or rankings.
Example of an ordered list:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
- Unordered List (
<ul>): The list items are marked with bullet points or other symbols, and the order of items is not important. This is typically used for lists where the order of items is irrelevant, such as a list of features or resources.
Example of an unordered list:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
10. What is an HTML form, and how do you create one?
Interview Question: Explain what an HTML form is and provide an example of how to create one.
Answer: An HTML form is a collection of input fields, buttons, and other interactive elements that allow users to enter and submit data on a web page. Forms are typically used for various purposes, such as user registration, contact information, or search queries.
To create an HTML form, you need to use the <form> element, along with various input elements like <input>, <textarea>, and <select>. The action attribute of the <form> element specifies the URL where the form data will be sent, while the method attribute defines the HTTP method used to submit the data (usually "GET" or "POST").
Here's an example of a simple contact form:
<form action="/contact" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
## 11. What are some common HTML elements used for text formatting?
**Answer:** HTML provides several elements for formatting text, which help make the content more readable and visually appealing. Some common elements for text formatting include:
- `<strong>`: Bold text, typically used for emphasis.
- `<em>`: Italic text, also used for emphasis.
- `<sup>`: Superscript, used for things like footnote references or mathematical exponents.
- `<sub>`: Subscript, often used in chemical formulas or mathematical expressions.
- `<u>`: Underlined text, usually for highlighting or marking.
- `<mark>`: Highlighted text, often used to emphasize a portion of the text.
- `<del>`: Strikethrough text, used to indicate deleted or replaced content.
- `<ins>`: Underlined text, used to show inserted or added content.
- `<small>`: Smaller text, often used for fine print or disclaimers.
Here's an example that demonstrates the use of some of these elements:
```html
<p>The <strong>Earth</strong> is the <em>third</em> planet from the <u>sun</u>.</p>
<p>E = mc<sup>2</sup> is <mark>Albert Einstein</mark>'s famous equation.</p>
<p>The chemical formula for water is H<sub>2</sub>O.</p>
<p>Originally, Pluto was considered the <del>ninth</del> <ins>dwarf</ins> planet in our solar system.</p>
12. How do you insert an image in HTML?
Answer: To insert an image in HTML, you can use the <img> element. The most important attribute of the <img> element is the src (source) attribute, which specifies the URL of the image file. Additionally, you should also include the alt (alternative) attribute, which provides a text description of the image for cases when the image cannot be displayed (e.g., due to a broken link or if the user is using a screen reader).
Here's an example of how to insert an image:
<img src="path/to/image.jpg" alt="A description of the image">
You can also control the size of the image by setting the width and height attributes, either in pixels or as a percentage of the parent element's width:
<img src="path/to/image.jpg" alt="A description of the image" width="300" height="200">
13. What is the difference between a relative and an absolute URL?
Answer: A URL (Uniform Resource Locator) is used to specify the location of a resource on the web. There are two types of URLs: relative and absolute.
- Relative URL: A relative URL provides the path to a resource relative to the current document or context. It does not include the protocol (e.g.,
http://orhttps://) or the domain. Relative URLs are useful when linking to resources within the same website or directory structure, as they can make the links more portable and easier to maintain. For example:
html <a href="about.html">About Us</a>
- Absolute URL: An absolute URL provides the complete path to a resource, including the protocol, domain, and any subdirectories. Absolute URLs are necessary when linking to resources on different websites or when the resource's location is not relative to the current document. For example:
html <a href="https://www.example.com/about.html">About Us</a>
It's important to choose the appropriate type of URL for your specific use case. Using a relative URL when an absolute URL is necessary can lead to broken links, while using an absolute URL when a relative URL is sufficient can make your website harder to maintain and less portable.
14. How do you create a table in HTML?
Answer: To create a table in HTML, you use the <table> element along with several other elements that define the structure of the table, such as <tr> (table row), <th> (table header), and <td> (table data cell). Here's a basic example of an HTML table:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
## 15. How do you add a caption to an HTML table?
**Answer:** To add a caption to an HTML table, you can use the `<caption>` element. The `<caption>` element should be placed immediately after the opening `<table>` tag. The text content within the `<caption>` element serves as a title or description for the table. Here's an example of an HTML table with a caption:
```html
<table>
<caption>Example Table</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
The <caption> element helps improve the accessibility and usability of your table by providing context and meaning to users.
16. How do you use HTML comments, and why are they important?
Answer: HTML comments are used to provide additional information or notes within an HTML document that will not be displayed in the browser. They can be helpful for explaining your code to other developers, making it easier to understand and maintain.
To create an HTML comment, use the following syntax:
<!-- This is an HTML comment -->
You can place comments anywhere within your HTML document, between any elements or tags. Here's an example of using an HTML comment within a simple webpage:
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
<!-- This is a comment in the head section -->
</head>
<body>
<h1>Welcome to the Example Page</h1>
<!-- This is a comment in the body section -->
</body>
</html>
HTML comments are important because they allow you to provide explanations, reminders, and other notes within your code without affecting the appearance or functionality of the webpage.
17. What is the difference between the <span> and <div> elements?
Answer: The main difference between the <span> and <div> elements is how they display content within an HTML document. Both elements are used to group or style content, but they have different default display properties.
The <div> element is a block-level element, which means it creates a new block or section in the layout and takes up the entire width available, pushing other content to a new line. Here's an example of using a <div> element:
<div>
This is a block-level element.
</div>
The <span> element, on the other hand, is an inline element, which means it doesn't create a new block or section and only takes up as much width as necessary, allowing other content to flow around it. Here's an example of using a <span> element:
<p>This is a <span>text</span> within a paragraph.</p>
In summary, you would use a <div> element when you want to create a new block or section in your layout, and a <span> element when you want to style or group inline content without affecting the flow of the document.
18. What are HTML5 semantic elements, and why are they important?
Answer: HTML5 semantic elements are tags that convey meaning about the structure and purpose of the content they contain. They help improve the readability and accessibility of your HTML code by providing context and meaning to both developers and browsers.
Some common HTML5 semantic elements include:
<header>: Represents the top-level header of a section or page.<footer>: Represents the bottom-level footer of a section or page.<nav>: Represents a navigation menu or links within a webpage.<article>: Represents a self-contained piece of content, like a blog post or a news article.<section>: Represents a generic section of a document, like a chapter or a group of related content.<aside>: Represents content that is tangentially related to the main content, like a sidebar or an author's note.
Using semantic elements makes your code easier to understand and maintain, as it's clear what each section of the page is for. They also improve the accessibility of your webpage for people using screen readers and other assistive technologies, as these tools can use the semantic information to better navigate and understand the content.
Here's an example of using HTML5 semantic elements in a simple webpage:
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<header>
<h1>Welcome to the Example Page</h1>
</header>
<nav>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
</nav>
<article>
<section id="section1">
<h2>Section 1</h2>
<p>This is the first section of the example page.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is the second section of the example page.</p>
</section>
</article>
<footer>
<p>Thank you for visiting the Example Page!</p>
</footer>
</body>
</html>
19. What is the difference between the id and class attributes in HTML?
Answer: Both id and class attributes are used to identify and style HTML elements, but they have different purposes and rules.
The id attribute is used to uniquely identify a single element within an HTML document. Each id value must be unique within the document, meaning you can't have two elements with the same id. The id attribute is primarily used for linking to specific elements using fragment identifiers or for selecting elements in JavaScript.
Here's an example of using the id attribute:
<div id="unique-element">This element has a unique ID.</div>
The class attribute, on the other hand, is used to define a group of elements with similar characteristics or styles. You can apply the same class value to multiple elements, and a single element can have multiple class values, separated by spaces.
Here's an example of using the class attribute:
<div class="box red">This element has the 'box' and 'red' classes.</div>
<div class="box blue">This element also has the 'box' class, but with a 'blue' class instead of 'red'.</div>
In summary, you would use the id attribute to uniquely identify a single element within your HTML document, and the class attribute to group and style elements with similar characteristics.
20. How do you create an HTML element with a specific id and class attributes?
Answer: To create an HTML element with both id and class attributes, you simply include both attributes within the opening tag of the element. Here's an example of creating a <div> element with a specific id and class attributes:
<div id="unique-element" class="box red">This element has a unique ID and the 'box' and 'red' classes.</div>
Remember that the id attribute should have a unique value within the HTML document, while the class attribute can be applied to multiple elements and can have multiple values separated by spaces.
By using both id and class attributes, you can create elements with unique identifiers and shared styles, making your HTML code more organized and easier to maintain.
