HTML Interview Questions and Answers PDF

🙋🏻‍♂️Hey, developers are you preparing for a web developer role and looking for the Top HTML Interview Questions and Answers with PDF? If yes, then you are at the right place.🤗

👉🏻In this post, I covered the Top 20 HTML Interview Questions and Answers. And these HTML Interview Questions are collected from multiple resources including web articles, youtube videos, interviews, and some posts that are available on different social media platforms.

🤗I hope these questions will be helpful for you to crack your interview and "Start your journey as a Web Developer"🚀. An important thing you can also Download the PDF of these questions the link is given below this post. 👇🏻

complete html notes pdf, complete html notes for beginners, geeks help html css projects,

1. What is HTML and What is its purpose?

HTML stands for "HyperText Markup Language", it is a standard markup language for creating web pages. And the purpose of HTML is to create the structure of a web page and display the content on the web, such as text, images, and videos.


2. What are the Features of HTML?

  • HTML is a markup language that is used to create web pages with text easily.

  • HTML is easy to use and learn. It enables developers to add text, images, video, and audio to a web page to make it more interactive.

  • It is platform-independent and can be used on Windows, Linux, Macintosh, etc.


3. Explain the structure of an HTML document?

An HTML document consists of a DOCTYPE declaration, a head, and a body. The DOCTYPE declaration specifies the version of HTML being used, the head contains meta-information about the document such as the title, and the body contains the main content of the document. Here is an example HTML structure:

Structure of HTML:

<!DOCTYPE html>
<html>
<head>
    <title> </title>
</head>

<body>
   
</body>
</html>


4. What are the main components of an HTML document?

The main components of an HTML document are the doctype declaration, the head, and the body. The doctype declaration defines the version of HTML document, the head contains meta-information about the document, such as the title and character encoding, and the body contains the main content of the document which will be displayed on the webpage.


5. What are some common HTML tags?

Some common HTML tags are: <html>, <head>, <title>, <body>, <h1> to <h6>, <p>, <a>, <img>, <ul>, <ol>, <li>, <table>, <tr>, <th>, <td>, <form>, <input>, <textarea>, <select>, <option>, <button>.

Common HTML Tags:

<!-- ========= Common HTML Tags =========  -->

<!-- It is the root tag of HTML document -->
<html> </html>

<!-- Use to contains MetaData -->
<head> </head>

<!-- Used to define the title of HTML document -->
<title> </title>

<!-- It is used to define the body of document -->
<body> </body>

<!-- Used to create headings -->
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

<!-- It is used to create paragraph -->
<p> </p>

<!-- It is used to create hyper link -->
<a href=""> </a>

<!-- Used to add image in HTML document -->
<img src="" alt="">

<!-- It is used to create unordered list -->
<ul> </ul>

<!-- It is used to create ordered list -->
<ol> </ol>

<!-- It is used to define list item -->
<li> </li>

<!-- It is used to create tables in HTML -->
<table> </table>

<!-- It is used to create table row -->
<tr> </tr>

<!-- It is used to create table heading -->
<th> </th>

<!-- It is used to define table data -->
<td> </td>

<!-- It used to create forms in HTML document -->
<form action=""> </form>

<!-- It is used to create input fields in HTML form -->
<input type="text" name="" id="">
   
<!-- It is used to create text area in HTML form -->
<textarea name="" id="" cols="30" rows="10"> </textarea>

<!-- It is used to create a drop-down list -->
<select name="" id=""> </select>

<!-- It is used defines an option in a select list in HTML document -->
<option value=""> </option>

<!-- It is used to create buttons in HTML document -->
<button> </button>


complete html notes pdf, complete html notes for beginners, geeks help html css projects

6. What is the purpose of the alt attribute in an HTML image tag?

The alt attribute specifies an alternate text for the image if the image cannot be displayed then the alt attribute provides alternative information for an image. It is important for accessibility, as screen readers can read the alt text to users who are visually impaired.

Using alt attribute in the image tag:

<img src="./johnDoe.jpg" alt="image of john doe">


7. What is the difference between HTML and XHTML?

HTML stands for "Hypertext Markup Language" and XHTML stands for "Extensible Hypertext Markup Language". Both HTML and XHTML are markup languages for creating web pages. XHTML is a more strict and rigorous version of HTML. XHTML requires all elements to be properly nested and closed, and all attributes to be quoted. It also requires all elements to be in lowercase.


8. What is the purpose of CSS in a web page?

CSS stands for "Cascading Style Sheets". And it is used to control the layout and presentation of a web page. It is used to apply the styles on font, color, and spacing of elements. CSS helps to apply the same design on multiple HTML elements. CSS makes it easier to maintain and update the look and feel of a website.

Including External CSS in HTML:

<link rel="stylesheet" href="style.css">


9. How can you create a responsive web page?

A responsive web page is designed to adjust its layout and appearance based on the size of the user's device screen. We can create responsive web pages using CSS media queries, which allow us to apply different styles based on the size of the viewport. We can also use flexbox, and a flexible grid system, to make a web page more responsive.


10. What is semantic HTML?

Semantic HTML is a type of HTML that uses elements with specific meanings to describe the structure and content of a web page. It allows web browsers, search engines, and assistive technologies to better understand the purpose of each element on the page.

Some examples of semantic HTML elements are: <header>, <nav>, <main>, <article>, and <footer>.

HTML Semantic Elements:

<header> <!-- Header Secton Goes Here --> </header>

<nav> <!-- Navigation Secton Goes Here --> </nav>

<main> <!-- Main Secton Goes Here --> </main>

<article> <!-- Article Secton Goes Here --> </article>

<footer> <!-- Footer Secton Goes Here --> </footer>


11. How do you create links in HTML?

In HTML document links are created using <a> tag. And it contains a href attribute that specifies the URL of the page which you want to link. The text which is inside the opening and closing of <a> tags is the text that will be displayed as the link. Like in the given example Visit Now is the linked text.

Creating links in HTML:

<a href="www.geekshelp.com" target="_blank"> Visit Now </a>


12. What is the difference between block-level elements and inline elements in HTML?

Block-level elements are elements that create a new block formatting context. And HTML Block level elements take up the full width of the parent container. Examples of block-level elements are: <div>, <h1> to <h6>, and <p>.

HTML Inline Elements are elements that are placed inline with the text and only take up as much width as necessary. Examples of inline elements are: <a>, <strong>, <em>, and <span>.


complete html notes pdf, complete html notes for beginners, geeks help html css projects

13. How do you create tables in HTML?

Tables in HTML are created using the <table> element. In HTML document table rows are defined using <tr> element and cells are defined using <td> element. The <th> element is used to create the header cells of the table, which are typically used for column or row labels.

How to create a table in HTML with the example:

<table border="1">
        <thead>
            <tr>
                <th> Name </th>
                <th> Age </th>
                <th> Role </th>
            </tr>
            </thead>
        <tbody>
            <tr>
                <td> Raju </td>
                <td> 20 </td>
                <td> Frontend Developer </td>
            </tr>
            <tr>
                <td> Jassi </td>
                <td> 22 </td>
                <td> YouTuber </td>
            </tr>
            <tr>
                <td> Rehana </td>
                <td> 24 </td>
                <td> Frontend Developer </td>
            </tr>
</tbody>


14. What is the purpose of the <form> element in HTML?

The <form> element in HTML is used to create forms in HTML. Forms allow the users to input data, like text, numbers, select options, checkboxesradio buttons, etc. The form data is then typically submitted to a server-side script for processing.

A simple example of HTML form:

<form action="">
        Name: <input type="text">
        Phone: <input type="tel" name="ph">
        Email: <input type="email" name="email">
        Password: <input type="password">
        Gender: <br>
        Male: <input type="radio" name="radio">
        Female: <input type="radio" name="radio">
        <button type="submit"> Submit </button>
</form>


15. How do you create input fields in an HTML form?

In an HTML document input fields are created using the <input> element. The type attribute in <input> fields specifies the type of input field, such as text, passwordcheckbox, and radio button. And the <textarea> element can be used to create a multi-line input field in an HTML form.

Creating input fields in HTML form:

<form action="">
        Text: <input type="text">
        Password: <input type="password">
        Radio: <input type="radio" name="radio">
        Checkbox: <input type="checkbox" name="checkbox">
</form>


Must Check: Input Tags and Types in HTML


16. What is the difference between a division tag (<div>) and a section tag (<section>) in HTML?

In HTML the <div> is known as the division tag. The <div> tag is a block-level element in HTML. Block-level element only represents their child elements and doesn’t have a special meaning. The <div> element takes the whole width available on the screen. 

The <section> tag is a semantic element that represents a standalone section of a document. The main advantage of the section tag is that it describes its meaning on a web page. The <section> tag is mostly used when we need to create headers, footers, or any other section of documents in web page.

Example of <div> and <section> tag in HTML :

<!-- Example of creating section with <div> tag in HTML -->
<div class="main-content">
    <h2>Welcome to Geeks Help </h2>
    <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat, laudantium. </p>
</div>

<div class="sidebar">
    <h3>About me</h3>
    <p>I am a web developer and I love building websites.</p>
</div>

<div class="footer">
    <p>Copyright © 2023 Geeks Help </p>
</div>



<!-- ========================================= -->
<!-- Example of creating section with <section> tag in HTML -->
<header>
    <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
</header>
     
<section>
    <h2>Welcome to Geeks Help </h2>
    <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat, laudantium. </p>
</section>
     
<aside>
    <h3>About me</h3>
    <p>I am a web developer and I love building websites.</p>
</aside>


17. What is the HTML article element?

In an HTML document, the <article> tag specifies independent, self-contained content. The <article> element is one of the new sectioning elements in HTML5. The content inside an <article> element should make sense on its own and have a distinct structure, with a title, introductory text, headings, subheadings, and so on.

Example of using <article> element:

<article>

    <header>
        <h1> New Blog Post </h1>
        <p> By Raju Webdev </p>
        <p> Published on February 4, 2023 </p>
    </header>

    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta?. </p>
    <h2> Lorem ipsum dolor sit amet. </h2>
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, quibusdam? At nihil totam porro. Tenetur, iusto? </p>
    <h2> Lorem ipsum dolor sit amet consectetur. </h2>
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis assumenda odit eius aliquam deleniti? At velit reiciendis dolorum corrupti unde! </p>

</article>


18. What is a marquee?

In HTML, the marquee is a non-standard HTML element. It is used to create an automatic scroll up, down, left, or right text.

Example of using <marquee> tag:

<marquee> Geeks Help </marquee>


19. How to add a favicon in HTML?

Favicon in HTML document can be added using the code given below. We have to add the code in the <head> section of our HTML code.

How to add favicon in HTML:

<link rel="icon" type="image/png" href="/favicon.png" />


20. What is the button tag in HTML5?

Button tag to create a button in the HTML document that will be displayed on the web page.  We can create a Button inside a form or outside the form in the HTML document. We can use the button as a "submit", "reset" or "cancel" button.

The following code is used to create a button:

<button name="button" type="button" value="20"> Submit </button>


🤩 HTML Interview Questions and Answers PDF Free Download: Download Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad