30 Top HTML Interview Questions And Answers [2022 LIST]
Có thể bạn quan tâm
List of Most Popular HTML Interview Questions For Freshers and Experienced Professionals:
In this tutorial, we have covered HTML interview questions which include both the basic as well as advanced portions of HTML which are helpful for freshers as well as experienced candidates.
HTML is a very basic language from which we begin our work on Web development.
Very strong knowledge of HTML is highly recommended to crack the interviews for any web development posts. I hope this informative tutorial would help you much to clear the interviews successfully at the first attempt.
Table of Contents:
- Most Frequently Asked HTML Interview Questions
- Conclusion
- Was this helpful?
- Recommended Reading
Most Frequently Asked HTML Interview Questions
Given below is the list of most popular HTML interview questions with the answers and examples codes for your easy understanding.
Let’s Start!!
Q #1) What does HTML stand for?
Answer: HTML stands for Hypertext Markup Language.
Q #2) Describe HTML.
Answer: Hypertext Markup Language or HTML is a markup language that is used to create website templates or WebPages to present the content on the World Wide Web.
HTML pages are saved by adding .html or .html in web page name.
Q #3) Write the basic structure of the HTML template?
Answer: The basic structure of the HTML template is:
<html> <head> <title></title> </head> <body> </body></html>Q #4) What is HTML5?
Answer: HTML5 is the latest or updated version of the markup language that defines HTML.
Q #5) Name some new features which were not present in HTML but are added to HTML5?
Answer: Some new features in HTML5 include:
- DOCTYPE declaration: <!DOCTYPE html>
- section: Section tag defines a section in the document, such as a header, footer or in other sections of the document. It is used to define the structure of the document. <section></section>
- header: Header tag defines the head section of the document. A header section always sticks at the top of the document. <header></header>
- footer: Footer tag defines the footer section of the document. A footer section always sticks at the bottom of the document. <footer></footer>
- article: Article tag defines an independent piece of the content of a document. <article> </article>
- main: The main tag defines the main section in the document which contains the main content of the document. <main></main>
- figcaption: Figcaption tag defines the caption for the media elements such as an image or video. <figcaption></figcaption>
Q #6) What is Anchor tag and how can you open an URL into a new tab when clicked?
Answer: Anchor tag in HTML is used to link between two sections or two different web pages or website templates.
To open an URL into a new tab in the browser upon a click, we need to add target attribute equal to _blank.
<a href=”#” target=”_blank”></a>Q #7) Write an HTML code to form a table to show the below values in a tabular form with heading as Roll No., Student name, Subject Name, and values as
- Ram, Physics
- Shyam, Math
- Murli, Chemistry
Answer: To represent the above values in an HTML table format, the code will be:
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table > <tr> <th> Roll No. </th> <th> Student Name </th> <th> Subject Name </th> </tr> <tr> <td> 1 </td> <td>Ram</td> <td> Physics </td> </tr> <tr> <td> 2 </td> <td> Shyam </td> <td> Math </td> </tr> <tr> <td> 3 </td> <td> Murli </td> <td> Chemistry </td> </tr> </table> </body> </html>Output:
Q #8) Define Semantic elements in HTML.
Answer: Semantic elements are HTML elements that represent its meaning to the browser and developer about its contents.
For Example – p tag represents a paragraph, a tag represents anchor tag, form tag, table tag, article tag and many more are semantic elements in HTML. Whereas, div tag, span tag, bold tag are not semantic elements.
Q #9) Define attributes in HTML tag.
Answer: The HTML tag contains a field inside their tag which is called attributes of that tag.
For Example:
<img src=”#”> here in this tag src is img tag attributes.
<input type=” text”> here in this tag type is input tag attributes.
Q #10) Can we modify the attribute’s value of the HTML tag dynamically?
Answer: Yes, we can modify the value of the attributes by using JavaScript.
Below is the input element whose attribute will be modified from text to password, JS code to modify the attribute value:
<input type=“text” id=“inputField”> document.getElementById(“inputField”).attr(“type”, “password”);Q #11) How can we comment in HTML?
Answer: Comments are used by developers to keep a track of the code functionality and also help the other developers in understanding the code functionalities easily.
The commented outlines will not be shown in the browser. To comment a line, the line should start by this <!– and end by this –>. Comments can be of one line or of multiple lines.
For Example:
<!-- This is one line comment ? <!-- This is multiple line of two or more line -->Q #12) What are inline elements and block-level elements in HTML?
Answer: Block elements are the blocks that take the full available width and always start from a new line. It will stretch itself to the full available width of the available container width. Block-level elements are <div>, <p>, <img>, <section> and many more.
Inline elements are the elements that will only take the width that is required to fit into the container.
For Example, take the flow of text on the page. When the line of the text takes the full width of the container it wraps itself into a new line and again goes in the same way.
Whereas, the inline element will take only that much space or width that it is needed for them. Inline elements are <span>, <label>, <a>, <b> and many more.
Q #13) Can we change inline elements into block-level elements?
Answer: Yes, we can change inline elements into block-level elements by adding display equal to block in its CSS tag. Writing it will change the inline elements into block elements and then inline elements will also take the full width of the container.
display: block;Q #14) What are the different browsers that support HTML5?
Answer: All modern browsers support HTML5 elements except some old browsers. But fortunately, most of the browsers will take html5 elements as inline elements.
Q #15) What are <br> tags in HTML?
Answer: <br> tags are used to enter a new line into the HTML contents. These tags are generally used to separate two different lines of text between each other.
Q #16) Explain the structure of the HTML webpage.
Answer: The common structure which all HTML pages follow are enlisted below:
(i) DOCTYPE – It is a special tag in HTML which is always written at the top of the HTML document, i.e. at the start of the HTML template. DOCTYPE is used to convey to the browser about the HTML version.
<!DOCTYPE html>(ii) HTML – After DOCTYPE tag, the HTML tag is written to start the template. All the code will be placed into this HTMLtag. It works as the container for the whole HTML page elements.
<html> <!-- Rest of the html code will come inside it --> </html>(iii) HEAD – <head> tag is the first element inside the <html> tag. It is used to provide information to the browser about the page and its contents.
Search Engine Optimization (SEO) techniques are written inside this tag. <title>, <meta> tags are written inside these tag. CSS and JS external links or internal CSS and JS are also written inside this tag.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale = 1.0"> <title>HTML Interview Questions</title> </head>(iv) BODY – <body> tags are written after the closing tag of the <head> tag, i.e. after </head>. Whatever HTML code is written inside these tags will be shown by the browser as website content.
<body> <h2>Top HTML Interview Questions</h2> <p>HTML stands for Hypertext Markup Language</p> </body>Together the whole body will be:
<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale = 1.0"> <title>HTML Interview Questions</title> <style type="text/css"> <!-- CSS Code will be written into these --> h2{ color: #1855b5; } p{ color: #3bd256; font-weight: 600; } </style> <script type="text/javascript"> <!-- Javascript code will be written into these --> </script> </head> <body> <h2>Top HTML Interview Questions</h2> <p>HTML stands for Hypertext Markup Language</p> </body> </html>Output:
Q #17) Why Meta tags are used in HTML?
Answer: Meta tags in HTML are used by the developer to tell the browser about the page description, author of the template, character set, keywords and many more.
Meta tags are used for search engine optimization to tell the search engine about the page contents.
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale = 1.0"> <meta name="description" content="HTML interview questions"> <meta name="author" content="Author Name"> <meta name="copyright" content="All Rights Reserved">Q #18) Explain list elements in HTML.
Answer: Enlisted below are the list elements in HTML:
- Ordered List (<ol>) – An Ordered List or ol tag is the list that lists the items in an ordered way, i.e. numbered or alphabetically.
- Unordered List (<ul>) – An Unordered List or ul tag is the list which will list the items in an unordered way, i.e. in bulleted format or in any other format.
- Definition List (<dl>) – A Definition List or dl tag arrange the items in the way in which they are arranged in a dictionary.
Ordered List:
<!DOCTYPE html> <html> <head> <title>HTML Interview Questions Ordered List</title> </head> <style> h1{ color: red; } li{ color: #0070ff; } </style> <body> <h1>Ordered List : </h1> <ol> <li>HTML</li> <li>CSS</li> <li>Bootstrap</li> <li>JavaScript</li> </ol> </body> </html>Output:
Unordered List:
<!DOCTYPE html> <html> <head> <title>HTML Interview Questions Unordered List</title> <style> h1{ color: red; } li{ color: #0070ff; } </style> </head> <body> <h1>Unordered List : </h1> <ul> <li>HTML</li> <li>CSS</li> <li>Bootstrap</li> <li>JavaScript</li> </ul> </body> </html>Output:
Definition List:
<!DOCTYPE html> <html> <head> <title>HTML Interview Question Definition List</title> <style> dt{ font-weight: 600; font-size: 25px; color: red; } dd{ font-weight: 500; font-size: 15px; color: #0070ff; } </style> </head> <body> <dl> <dt><strong>HTML</strong></dt> <dd>HTML stands for Hypertext Markup Language</dd> <dt><bold>CSS</bold></dt> <dd>CSS stands for Cascading Style Sheets</dd> </dl> </body> </html>Output:
Q #19) Define iframe in HTML.
Answer: Iframe tag is written as <iframe>.
An iframe is used to display different document content inside the different document content in a rectangular region in the browser. When different document content is embedded into a current HTML content, then it is known as an inline iframe.
The src attribute contains the path to the document that occupies the inline iframe.
<!DOCTYPE html> <html> <head> <title>HTML Interview Questions Iframes</title> </head> <body> Iframe HTML Code <iframe src = "demo_iframe.htm" width = "300" height = "300"> Sorry your browser does not support inline frames. </iframe> </body> </html>Output:
Q #20) Define forms in HTML.
Answer: Forms in HTML are required when we want to collect the user information whenever a user fills any form or provides any details and when we want to save it into our database.
<!DOCTYPE html> <html> <head> <title>HTML Interview Question Form tag</title> <style> form { width: 200px; border: 2px solid blue; margin: 0 auto; padding: 60px 100px; } p{ color: red; font-size: 16px; font-weight: 600; } input::placeholder{ color: blue; } button{ line-height: 20px; text-align: center; background: green; border: 0; color: #ffffff; font-size: 14px; padding: 15px 64px; margin-top: 20px; } </style> </head> <body> <form > <p>Name:</p> <input type = "text" name = "user_name" placeholder = "Enter Name"/> <br/> <br/> <p>Email: </p> <input type = "email" name = "user_email" placeholder = "Enter email"/> <br/> <br/> <p>Password: </p> <input type="password" name = "user_pwd" placeholder = "Enter Password" /> <br/> <button> Submit </button> </form> </body> </html>Output:
Q #21) In how many ways can a heading be written in HTML?
Answer: A heading can be defined as a block-level element that is used to give a heading to a particular section or topic.
Example using 6 types of headings in HTML:
<!DOCTYPE html> <html> <head> <style> h1{ color: red; } h2{ color: blue; } h3{ color : green; } h4{ color: purple; } h5{ color: yellow; } h6{ color: orange; } </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body>Output:
Q #22) How can we create a hyperlink in HTML?
Answer: An anchor tag or <a> tag in HTML is used to create hyperlinks. This creates a path between two different HTML web pages.
Hyperlinks can be displayed in three ways:
- Unvisited Link – These links are blue in color and underlined.
- Visited Link – These links are purple in color and underlined.
- Active Link – These links are red in color and underlined.
Q #23) Why do we use the required attribute in HTML?
Answer: The required attribute is used in HTML to make the field mandatory. It forces the user to fill that particular field to submit the form.
If the field is input then it will throw a default HTML error.
<input type="email" name = "user_email" required />Q #24) How can we include Google maps on a website?
Answer: HTML code to include Google maps on our web page:
<!DOCTYPE html> <html> <body> <h1>HTML Interview Questions Google Map</h1> <div id="map" style="width: 400px; height: 400px; background: yellow"> </div> <script> function myMap() { var mapOptions = { center: new google.maps.LatLng(51.5, -0.12), zoom: 10 } var map = new google.maps.Map(document.getElementById("map"), mapOptions); } </script> <script src= "https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script> </body></html>Output:
Q #25) Differentiate between HTML and XHTML.
Answer: The differences between HTML and XHTML are:
- HTML stands for Hypertext Markup Language, whereas XHTML stands for Extensible Markup Language.
- A static webpage is an HTML web page and dynamic web pages are XHTML.
- XHTML are more stricter than HTML.
- An XML application of HTML is defined as XHTML.
- All modern browsers support XHTML.
Q #26) What are Web Workers?
Answer: Web Workers is a code of JavaScript which runs in the background threads without disturbing the performance of the page. It is used for computing-heavy tasks like an access database or function.
Q #27) What is the SVG element?
Answer: SVG is a followed XML format; it stands for Scalable Vector Graphics which is used to create vector graphics with the support for interactivity and animation.
SVG is resolution independent as it does not lose its quality when they are resized or zoomed.
Q #28) Explain about Canvas.
Answer: Canvas is a pixel-based graphics and it is one of the new features of HTML5.
It provides a space in the document where we can draw graphics by using JavaScript and it is resolution dependent, hence the quality will be affected when it’s zoomed or resized.
Example:
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3; color: #c9cc18;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var can = document.getElementById("myCanvas"); var canvas = can.getContext("2d"); canvas.font = "20px Hind-sanserif"; canvas.fillText("Canvas Example",30,60); </script> </body>
Q #29) Explain new form elements in HTML5.
Answer: The new form elements that were added into HTML5 are:
- Datalist – It’s used as a list of options for input control.
- Keygen – This tag defines a key-pair generator (Private/Public) field.
- Output – It’s used to show the result of a calculation.
Q #30) What is Quirks mode in HTML5?
Answer: If we do not include the <!DOCTYPE> element in our HTML page or Document, it will go to Quirks Mode. In this mode, the HTML element depends on the browser. Hence the content will be displayed according to the browser.
Conclusion
These interview questions and answers will help you to crack the Web development interview successfully. Most questions include the HTML expert’s answers during their interviews.
Suggested reading =>> HTML Cheat Sheet
Hope, these interview questions would have enriched your knowledge of the HTML concept!!
We wish you all success!!
Was this helpful?
Submit Cancel Thanks for your feedback!Recommended Reading
- Interview Questions and Answers
- ETL Testing Interview Questions and Answers
- Top 30+ Popular Cucumber Interview Questions and Answers
- Top 30 SAS Interview Questions and Answers
- Top 30 Security Testing Interview Questions and Answers
- 30+ Top Scrum Interview Questions and Answers [2024 LIST]
- Top 30 DBMS Interview Questions and Answers
- 30+ TOP Servlet Interview Questions and Answers [2024 LIST]
Từ khóa » Html And Css Interview Questions With Answers
-
Top 40 CSS Interview Questions You Should Prepare - Simplilearn
-
Top 44 HTML Interview Questions - Javatpoint
-
TOP HTML & CSS Interview Questions With Answers - Medium
-
Top 50 HTML Interview Questions And Answers In 2022 - Edureka
-
Top 30+ CSS Interview Questions (2022) - InterviewBit
-
Top HTML And HTML5 Interview Questions (2022) - InterviewBit
-
Top 30+ Popular CSS Interview Questions And Answers
-
Top 35 HTML Interview Questions And Answers For 2022
-
Top 60 HTML & HTML5 Interview Questions & Answers (2022)
-
Top 37 HTML Interview Questions For Beginners And Experienced
-
HTML/CSS Interview Questions And Answers (2022) - Adaface
-
HTML Interview Questions & Answers Set - 1 - GeeksforGeeks
-
CSS Interview Questions And Answers - GeeksforGeeks
-
HTML Interview Questions & HTML5 Interview Questions In 2022