Top 50+ HTML Asked Question in Interview
HTML, which stands for Hypertext Markup Language, is the standard markup language used to create and design web pages. It provides the structure and content of a webpage by using a system of tags and attributes to define elements within a document.
Key Components of HTML:
- Tags: HTML uses tags to define different elements within a webpage. Tags are enclosed in angle brackets, such as <tagname>. For example, <h1> defines a heading.
- Attributes: Tags can have attributes that provide additional information about an element. Attributes are placed within the opening tag and are used to modify the element's behavior or appearance.
- Elements: Elements are made up of tags and content, defining the structure and layout of a webpage. For example, <p> is a paragraph element.
Basic HTML Structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Features of HTML:
- Semantic Structure: HTML provides a way to structure content semantically, making it easier for search engines and screen readers to understand the content.
- Cross-Browser Compatibility: HTML is supported by all major browsers, ensuring consistent rendering of web pages across different platforms.
- Integration with CSS and JavaScript: HTML works seamlessly with CSS (Cascading Style Sheets) for styling and JavaScript for interactivity, allowing for dynamic and visually appealing web pages.
HTML tags are fundamental components of HTML (Hypertext Markup Language) used to structure and format content on web pages. Tags are enclosed in angle brackets, such as <tagname>, and are paired as opening and closing tags to define the beginning and end of an element.
Here's an example to illustrate the concept of HTML tags:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
In the above example:
- <html> is the root element that wraps the entire HTML document.
- <head> contains meta-information about the document.
- <title> sets the title of the web page displayed in the browser tab.
- <body> encloses the visible content of the web page.
- <h1> defines a top-level heading.
- <p> represents a paragraph of text.
HTML tags serve various purposes, including defining the structure of a webpage, formatting text, embedding media, creating links, and more. Each tag has a specific function and can be customized using attributes to modify its behavior or appearance.
In HTML, not all tags require an end tag. Tags that do not require a closing tag are known as "void" or "self-closing" tags. These tags are designed to be self-contained and do not have any content nested within them. Void tags are closed with a forward slash before the closing angle bracket.
Here is an example of a void tag in HTML:
<img src="image.jpg" alt="Description" />
On the other hand, most HTML tags do require an end tag to enclose the content within them. These are referred to as "container" tags. Container tags have an opening tag, content, and a closing tag to define the beginning and end of the content.
For instance, the <p> tag for paragraphs requires both an opening and closing tag:
<p>This is a paragraph.</p>
In HTML, heading tags (from <h1> to <h6>) are used to define headings and subheadings within a document. Each heading tag represents a different level of importance, with <h1> being the highest (most important) and <h6> being the lowest.
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>
To create a hyperlink in HTML, you can use the anchor <a> tag. This tag allows you to link to another webpage, a file, an email address, or any other URL. Here's a detailed breakdown of how to create a hyperlink:
1- Basic Hyperlink Structure: To create a basic hyperlink, you need to use the <a> tag with the href attribute, which specifies the URL the link should point to. Here's an example:
<a href="https://www.example.com">Visit our website</a>
2- Linking to a Specific File: If you want to link to a specific file, you can provide the file path in the href attribute. For example:
<a href="documents/example.pdf">Download PDF</a>
3- Linking to an Email Address: To create a link that opens the user's default email client with a pre-filled email, you can use the mailto: protocol in the href attribute. Here's how:
<a href="mailto:info@example.com">Contact Us</a>
4- Adding Additional Attributes: You can enhance your hyperlinks by adding attributes like target to specify how the linked content should open (e.g., in a new tab). Here's an example:
<a href="https://www.example.com" target="_blank">Visit our website</a>
5- Linking within the Same Page: To create a link that jumps to a specific section within the same page, you can use the id attribute to target the element. Here's an example:
<a href="#section2">Jump to Section 2</a>
...
<h2 id="section2">Section 2 Content</h2>
When it comes to constructing an HTML document, several essential building blocks form the foundation of the structure. Let's delve into each of these components in detail:
1- Document Type Declaration (DOCTYPE): The DOCTYPE declaration is the very first line of an HTML document and informs the browser about the version of HTML being used. It typically looks like this:
<!DOCTYPE html>
2- HTML Element: The <html> element encapsulates the entire HTML document and serves as the root element. It contains two main sections: the <head> and <body> sections.
<html>
<head>
<!-- Metadata, scripts, styles, etc. -->
</head>
<body>
<!-- Content visible on the webpage -->
</body>
</html>
3- Head Section: The <head> section contains meta-information about the document, such as the title, links to stylesheets, scripts, and other metadata.
<head>
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
4- Title Element: The <title> element specifies the title of the HTML document, which appears in the browser tab.
<title>Page Title</title>
5- Body Section: The <body> section contains the content that will be displayed on the webpage, including text, images, links, and other elements.
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<img src="image.jpg" alt="Description of Image">
<a href="https://www.example.com">Visit Example Website</a>
</body>
6- Heading Elements (h1-h6): HTML provides six levels of heading elements (<h1> to <h6>) to structure the content hierarchically based on importance.
<h1>Main Heading</h1>
<h2>Subheading</h2>
7- Paragraph Element: The <p> element is used to define paragraphs of text within the document.
<p>This is a paragraph of text.</p>
8- Image Element: The <img> element is used to embed images in the document.
<img src="image.jpg" alt="Description of Image">