HTML Interview Questions and Answers
HTML refers for Hypertext Markup Language, which is a text-based approach to describing how content is structured in an HTML file. HTML is not a programming language. We have an impressive collection of HTML Interview Questions and Answers that is a must-read for all developers and designers!. It just tells a web browser how to structure content, graphics, and multimedia on a web page. Commonly used HTML tags include h1; h2; div; table; and form etc. The most significant advantage of HTML is that it comes with in-built tools for creating responsive websites as well as interface components.
| Quick Questions about HTML | |
|---|---|
| What is HTML? | It is the markup language for documents designed to be displayed in a web browser. |
| What is the latest version of HTML? | HTML5, released on 28th October 2014 |
| Created By | WHATWG |
| When was HTML first released? | 1993 |
| Who created html? | Tim Berners-Lee |
Most Frequently Asked HTML Interview Questions
Here in this article, we will be listing frequently asked HTML Interview Questions and Answers with the belief that they will be helpful for you to gain higher marks. Also, to let you know that this article has been written under the guidance of industry professionals and covered all the current competencies.
HTML is a language of www (world wide web). It is a text formatting language that gives us webpage structure. HTML elements are represented by tags. HTML is used to make interactive and dynamic websites — all web pages created by HTML tags.
HTML Stands for Hypertext Markup Language, and Berners Lee created it in 1991.
This is not an html tag. The <!DOCTYPE> syntax should be the first thing in HTML page, before the <html> tag. It is an instruction to the web browser about what version of HTML the page is written in. In HTML 4 we used <!DOCTYPE HTML PUBLIC ‘-//W3C//DTD HTML 4.01//EN’ ‘http://www.w3.org/TR/html4/strict.dtd’> But now in HTML 5 we used only <!DOCTYPE html>
HTML Heading tags can be used to define as a title or a subtitle which you want to display on your page. When you place the text in the heading tags <h1> This is your page title</h1>, These heading tags displayed on the browser in the bold format and size of the text depends on the number of heading.
There are six different HTML headings which are defined with the <h1> to <h6> tags. h1 is the largest heading tag, and h6 is the smallest one. So h1 is used for most important heading, and h6 is used for least important.
Advantages of HTML:
- HTMl is widely used.
- Every web browser supports HTML language.
- It is easy to use and learn.
- It is by default in every window, so you don't need to purchase extra software.
Disadvantages of HTML:
- HTML is used for a static web page, not for dynamic
- Need to write a lot of code for making a simple webpage.
- Security features are not useful in HTML.
HTML 5 is the latest version of HTML
<form> tag are used to making forms on web pages. These forms are used to interact directly with users. Its elements are different types of input, like text fields, checkboxes, radio buttons, submit buttons and more. Attributes of these <form> tag are action, method, name, class, id, etc. The <input> tag can be displayed in many ways, depending on the type attribute.
<form>
First name:
<input type="text" name="First_name">
Last name:
<input type="text" name="Last_name">
</form>
In HTML, Lists are used to specify lists of various types of information. All records items may contain one or more elements.
Types of HTML lists are listed below:
- Ordered List(ol)
- Unordered List(ul)
- Description List(dl)
Note: You can easily get marks in this HTML Interview Questions by just naming the types of lists in HTML.
In HTML, <table> tag is a block elements used to create a table. It is useful when you want to represent data using rows and columns. The basic elements that make up a table include <th>, <td>, and <tr>.
No, there are some HTML tags that do not need a closing tag. Examples are the <img> , <br>, <hr> tags
It is a process of formatting text for a much better look and feels. There are various formatting tags available in HTML. These formatting tags are used to make text bold, italicized, or underlined. There are 12 options available that how text appears in HTML pages.
There are 12 HTML formatting tags are listed below
- Bold Text If you write anything in between <b>............</b> tag, is shown in bold letters.
- Italic Text If you write anything in between <i>............</i> tag, is shown in italic letters.
- HTML Marked formatting If you want to highlight text in a webpage, you should write the content within <mark>....</mark> tag.
- Underlined Text If you write any text within <u>.........</u> tag, is shown in highlighted text.
- Strike Text Anything written in between <strike>....</strike> tag is displayed with strikethrough the page. It is a type of thin line which crosses the statement.
- Monospaced Font If you want the same width of every content then you should write the text in between <tt>.............</tt> tag.
- Superscript Text If you put the text in between <sup>..............</sup> tag, is shown in superscript. It is displayed half a character's height above the other characters.
- Subscript Text If you put the text in between <sub>..............</sub> tag, is shown in subscript. It means is displayed half a character's height below the other characters.
- Deleted Text Anything that puts within <del>..........</del>tag is shown as deleted text.
- Inserted Text Anything that puts in between <ins>.....</ins>tag is displayed as added text.
- Larger Text If you want to put font size more significant than the rest of the page text then put the text in between <big>.........</big> tag. It increases one font size more significant than the previous one.
- Smaller Text If you want to put font size lower than the rest of the text then set the text in between <small>.........</small> tag. This tag helps in to reduce the font size.
Semantic HTML tags are just a coding style. It is the use of HTML to reinforce the meaning of the text.
For example: In this <b> </b> and <i> </i> tag is not used. Instead of these we can use <strong></strong> and <em></em> tags.
The HTML, <a> tag defines a hyperlink that links to another page. The "href" attribute is the essential attribute of the HTML anchor tag.
Example :- <a href = "LINK PATH"> Link Text </a>
<iframe> is used to display a nested web page. In other words,<iframe> represents a page contents within a page. The HTML <iframe> tag defines an inline frame
HTML tag attributes are used for add additional functionality. Attributes like id, class, style, lang, title etc
<img> tag are used to show image in web page. <img src=" https://www.bestinterviewquestion.com/public/frontend/img/b2.jpg" alt="Blog Image"/> Attributes of this tag is width, height, class, alt, id etc
HTML elements with no text or content are called empty elements. For example: <br>, <hr> etc
The span tag is used for the following things
- For adding color to text
- For adding background on text
- Highlight any color text
<span> This is a example of span tag. </span>
| S.no | HTML | HTML5 |
|---|---|---|
| 1. | The primary language for making web pages. | The fifth and latest version of HTML |
| 3. | We can not track location | Easily tracking location with geolocation in HTML |
| 4. | Browser cache used for temporary storage | Application cache, web SQL DB, ad web storage used as temporary storage. |
| 5. | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | <!DOCTYPE html> |
Reset and submit button both are using within <form> element. Reset is used for reset the form. It means clear the form and Submits is used to present the form data.
The new input types for form validation are email, URL, number, tel, and date. With the help of the required attribute, it will work. Also if we want specific validation, then we have to add input type "text" or "email" or "tel."
Note: Learn the basic validations with HTML tags and work to crack the HTML Interview Questions.
For mail link, we have to add mailto: "mention here email address" in a href attribute in anchor tag.
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:9971083635">9971083635</a>
<html>
<head>
<meta charset ="UTF-8">
<title>Best interview questions</title>
</head>
<body>
<header> <nav></nav> </header>
<section>
<aside></aside>
</section>
<footer>
<address></address>
</footer>
</body>
</html>
The meta tag is information about data. Metadata will not be displayed on the application, but it will be machine parsable. These elements are typically used to specify page description, keywords, page title, author name of the document, and other metadata.
The metadata is used by web browsers (how to display content or reload the page), search engines (keywords), or other web services.
<meta name="description" content="Best Interview Questions">
<meta name="keywords" content="Interview questions, php interview questions, html interview questions">
<meta name="author" content="Best Interview Questions">
It is used to explain the two-dimensional vector and raster graphics. SVG images and their behaviors are defined in XML files. So as XML files, you can create and update SVG image with the text editor. It is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system.
You can add a copyright symbol on your webpage by using © or © in an HTML file.
<marquee> is used to put the text scrolling which is in scrolling mode on a web page. It scrolls the text or images up, down, left or right automatically. You have to put the content which you want to scroll in between the <marquee>......</marquee> tag.
| S.No | HTML4 | HTML5 |
|---|---|---|
| 1. | <div id="header"> </div> | <header> </header> |
| 2. | <div id="menu"></div> | <nav> </nav> |
| 3. | <div id="content"> </div> | <section> </section> |
| 4. | <div id="post"> </div> | <article> </article> |
| 5. | <div id="footer"> </div> | <footer> </footer> |
In HTML page comments begins with “<!–“ and ends with “–>.”
There are lots of new elements are using in html5 that are given below:-
- Color
- Date
- Datetime-local
- Time
- Url
- Range
- Telephone
- Number
- search
White spaces are a new sequence of space characters, which is treated as a single space character in HTML. Because the browser collapses multiple areas into a single space, we can indent lines of text without worrying about various fields. It enables you to organize the HTML code into a more human readable format.
Image map lets the user link to many different web pages using a single image. We can define shapes in pictures that we want to make part of an image mapping. It is the process of establishing unique ways inside a photo and links it to different destinations.
Alternate Texts, also known as Alternative Descriptions or simply Alt Tags help in better crawling and indexing of images on your website. By default, Google’s crawl bot cannot understand images. It needs guidance to help understand what the image is about. Alt Texts help Google bot to understand what the image is displaying. Besides this, people with visual imparity also benefit from these as they can understand the text in Braille but cannot see an image.
Entities in HTML are pieces of text “strings” which begin with an ampersand symbol (&) and end with a semicolon (;). These are usually used to display special characters which would otherwise be interpreted as simple HTML code and/or invisible characters.
| Local Storage | Session Storage |
|---|---|
| A type of Web Storage Object used in HTML 5 which allows users to store data without any expiry date. | Session Storage is another part of web storage that allows users to store data pertaining to only one session. |
| It is used particularly in environments where data needs to be transferred in multiple windows and should last more than the current session. | It allows users to carry out a single transaction but it can be carried out parallelly in multiple windows. |
Cell spacing is an attribute in HTML which is used to define the exact amount of spacing between pixels within cells. Whereas, Cell Padding is used to define the spacing between the cell wall and the cell content.
<p>Table without cell spacing:</p>
<table>
<tr>
<th>Months</th>
<th>Saving</th>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
</table><table cellspacing="10">
<tr>
<th>Months</th>
<th>Saving</th>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
</table><h4 class="mt-10 mb-10">Example of Cell Padding</h4>
<p>Table without cellpadding attribute :</p>
<table>
<tr>
<th>Months</th>
<th>Saving</th>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
</table><p>Table with cellpadding attribute:</p>
<table cell padding="10">
<tr>
<th>Months</th>
<th>Saving</th>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
</table>
| HTML | XHTML |
|---|---|
| Here, the tags are not extensible | Here the tags are extensible. |
| In HTML, the tags are not case-sensitive | In XHTML, only the lowercase tags are accepted. |
| It supports the overlapping of tags. | It does not support the overlapping of tags. |
Three types of CSS are accepted in HTML, they are
- Inline CSS
- Internal CSS
- External CSS
Physical tags in HTML are used to exactly specify how to display the text being enclosed. They specify accurately as to how many characters are needed to be formatted.
<B> <I> <BIG>
Normal & Active links are pretty much the same with one basic difference between them. It is:
| Normal Links | Active Links |
|---|---|
| This is just a line of code containing a pointer to another resource. | This is also a line of code pointing to another resource, but, it is in the action of opening the resource being pointed. |