HTML Interview Questions and Answers
HTML, also known as Hypertext Markup Language, is used to create multiple web pages, which helps define how a web page looks. It is a popular programming language simply used for web application development, created by Berners-Lee and published in 1995. If you are planning to start your full-fledged career as a web developer, you must learn HTML. With this knowledge, you can create websites from scratch and customize them accordingly. However, to start your career, you can apply for multiple jobs, and you need to learn various HTML interview questions.
This article will discuss the top HTML interview questions and answers you should know to crack those interviews to get your dream job.
Beginner Level: HTML Interview Questions
Q1: What is HTML?
Ans: HTML stands for Hypertext Markup Language, which allows users to create website pages by structuring sections, links, paragraphs, headings, and application block quotes. It is a language of the World Wide Web used to form and display pages on the web. The pages in HTML are saved by adding .html or .htmls in the web page name.
Q2: What are HTML tags?
Ans: HTML tags are just like keywords that explain how elements are added to display content. With the help of tags, a web browser can understand the difference between HTML tags and simple content. HTML tags contain three essential parts: the opening tag, content, and closing tag. Some basic HTML tags are <p>, <hr>, <body>, <a>, etc.
It is one of the most important HTML interview questions that interviewers can ask, so be prepared to answer.
Q3: What is the difference between HTML elements and tags?
Ans: Here is the significant difference between HTML elements and tags.
| Elements | Tags |
|---|---|
| Element is an individual component of an HTML web page or document that comprises a tag, end tag, and everything in between. | An HTML tag marks the starting or ending point of an element. |
| It consists of content, a starts tag, and an end tag. | It starts with symbol <, and ends with symbol >, and whatever is written between the symbols are called tags. |
| For Example: <p>I am an Element</p> | For example: <p> is an opening tag, and </p> is a closing tag. |
Q4: What is the basic structure of an HTML template?
Ans: Here is the basic structure of an HTML template:
<head>
<title>Title of the page </title>
</head>
<body>content of the page</body>
</html>
Q5: What are HTML Attributes?
Ans: HTML attributes offer additional information regarding HTML elements. It is defined directly after the tag name, which only appears in opening tags and not in closing tags. It changes the way the tags behave or are displayed.
Example:
Q6: What are void elements in HTML?
Ans: HTML elements that do not have any closing tags or do not need to be closed are called cloud elements. Some of the void elements examples are <hr/>, <br/>, <img/>, etc.
Q7: What is the difference between block-level and inline elements?
| Block-level | Inline |
|---|---|
| A block-level element always starts with a new line, and browsers instinctively add some space before and after the element. It always takes the complete width available. | Two basic used elements are: <div> and <p> |
| Incline elements do not start with a new line and only take up the needed space. | These are some inline elements in HTML: <span>, <script>, <map>, <output> |
It is one of the most basic HTML interview questions that can be asked during the interview, so keep this in your mind.
Q8: How do I create a hyperlink in HTML?
Ans: The HTML offers a tag to create a hyperlink, which links one page to another.
Example:
Q9: What basic lists are used while designing a page?
Ans: several common lists are used to design a page. You can choose one of them or a combination of the following types:
- Ordered list: This type of list shows elements in numerical format. It is represented by <ol> tag.
- Unordered list: This list type shows elements in bullet format, represented by <ul> tag.
- Definition list: This type of list shows elements in definition form such as dictionaries. The <dl>, <dt>, and <dd>, which are used to explain description lists.
Q10: What are semantic elements in HTML?
Ans: Semantic elements in HTML strengthen the meaning and effectively describe it to both browser and developer. It adds meaning to the web page instead of just a presentation. Some examples of semantic HTML tags include:
- Header tags <h1> through <h6>
- <article>
- <figure>
- <details>
- <code>
Q11: What is the difference between HTML and XHTML?
Ans: Here is the difference between HTML and XHTML:
| S.No | HTML | XHTML |
|---|---|---|
| 1. | Its full form is Hypertext Markup Language. | Its full form is Extensible Hypertext Markup Language. |
| 2. | It was built by Tim Berners-Lee. | It was built by W3C, also known as World Wide Web Consortium. |
| 3. | It was created in 1991. | It was released in 2000. |
| 4. | It is broadened from SGML. | It is broadened from XML and HTML. |
| 5. | It is a document file format. | It is a markup language format. |
| 6. | The tags and attributes are not needed to be in lower or upper case. | Every tag and attribute must be lower case. |
| 7. | Doctype is not required to write at the top. | Doctype must be written at the top of the file. |
| 8. | It is not compulsory to close the tags in the order they are opened. | It is not compulsory to close the tags in the order they are opened. |
| 9. | While using the attributes, it is not compulsory to mention quotes. | While using the attributes, it is compulsory to mention quotes. |
| 10. | File name extensions used in HTML are .htm, .html. | Filename extensions used in XHTML are .xml, .xhtml, .xht. |
Q12: Is it possible to hide HTML code from the user?
Ans: No. It is because the browser needs the code to display the web pages, and the browser enables the users to see the code.
Intermediate Level: HTML Interview Questions
Q1: Is it possible to apply hyperlinks to images?
Ans: Yes, you can apply hyperlinks to both texts and images. To add a hyperlink to an image, click on the image, choose the link icon, and then paste the link into the URL box.
Example:
<html>
<head>
<title>HTML Image as link</title>
</head>
<body>
The following image works as a link:<br>
<ahref=”https://www.contract-jobs.com/”>
<img alt =”image” src=”https://www.contract-jobs.com/assets/images/Partner-with-our-Recruiters.jpg “>
</a>
</body>
</html>
Q2: How to create multi-coloured text on a web page?
Ans: To create multi-coloured text on a web page, write <font color=” color”>. Use </font> tags for every word character that you want to apply colour. You can use this combination many times as needed, enclosing a single character or an entire word accordingly.
Example:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<span style=”color:#FF0000″>N</span>
<span style=”color:#66CC66″>A</span>
<span style=”color:#FF9966″>M</span>
<span style=”color:#FFCCCC”>E</span>
</body>
</html>
Q3: What is a marquee tag?
Ans: It is a tag <marquee> used for scrolling text or images shown horizontally or vertically on the website. However, it also depends on the web page settings.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tag <marquee></title>
</head>
<body>
<marquee>Here is marquee tag</marquee>
</body>
</html>
Q4: What is the usage of the span tag?
Ans: Span tag is used for multiple purposes, which are as follows:
- It is used for adding color to the text
- It is used for adding a background to the text
- It is used to highlight any color text
Example:
Q5: What is white space in HTML?
Ans: White space is a sequence of empty space characters. It is considered a single space character in HTML. In simple terms, it helps the browser combine multiple spaces into one single space, making it more readable from the user’s perspective. Besides, it also helps organize the content and tags effectively, making it easier to understand.
Q6: What is the usage of comments in HTML?
Ans: Comments are used in HTML documents to make essential points and help the developers add any amendments or modifications to be done afterwards. However, it is not displayed on the browser when it is executed. Besides, do remember that comment is always written between the ‘—‘ symbol at the beginning and end of the angular brackets.
Example:
<p>This is a paragraph.</p>
<!– Remember to add more information here –>
Q7: How to convert HTML to PDF in both Windows and Mac?
Ans: If you have a Windows system, you can open an HTML web page in Google Chrome or Firefox to convert HTML to PDF.
In mac, you need to follow the following steps:
- On a Mac, open an HTML web page in Firefox
- Click on the “Convert to PDF” button in the Adobe PDF toolbar to get started with the conversion
- Enter your file name and save your new PDF file at your desired location
It is one of the important HTML interview questions you can remember while appearing for the interview.
Q8: What is DOM in HTML?
Ans: DOM, also known as Document Object Model, is an object model for HTML. When a web page is loaded, during this period, the browser forms a Document Object Model of the web page and is built as a tree of objects. It describes the following things:
- HTML elements as objects
- Properties of HTML elements
- Methods of HTML elements
- Events of HTML elements
Q9: How can I add an image in HTML from a folder?
Ans: To add an image in HTML from a folder, you need to follow the following steps:
- Copy the image from your images folder
- Open index
- Code: <img src=” alt=”My test image”> is the HTML code that adds an image into the page
- Put the file path into your HTML code between the double quote marks of the src=” code.
Q10: How to save HTML files?
Ans: If you are looking for a way to save the HTML file, here is what you need to do:
- Go to the main menu
- Click the file and then press the save as button
- Right-click within the HTML document
- Click the file and then save as
- As the dialogue box opens up, save the file as your chosen file name and location
Q11: How to blink text in HTML?
Ans: The HTML <blink> tag stands for a non-standard element used to form an enclosed text. It lights up slowly and blinks normally, meaning the light flashes on and off regularly or irregularly. However, the blink tag is used rarely as it might not be soothing for many users to see the specific text of content constantly blinking on and off.
<!DOCTYPE html>
<html>
<head>
<title> Here is an example of Blink Element of HTML </title>
<style>
blink {
color: #2d38be;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<h1> About HTML BLINK Tag</h1>
<blink> HTML blink tags are not used these days and are not supported by most browsers. It probably won’t work on your current browser. </blink>
<p> See the effect above </p>
</body>
</html>
Q12: What is HTML5?
Ans: HTML5 is an enhanced version released in 2014 by the World Wide Web consortium. It is the latest version of Hypertext Markup Language, considered one of the easiest programming languages compared to others.
Advanced Level: HTML Interview Questions
Q1: How can you boost the website assets loading with HTML?
Ans: First, you must boost asset loading to boost your website loading time. Here are some ways to do that:
- File compression: It will help you reduce the asset size, which will help reduce the data transfer.
- Minify scripts: It will reduce the size of JavaScript and CSS files.
- Lazy loading: Instead of loading all the assets at the same time, you can load them separately as per requirement.
- File concatenation: It will help optimize loading by reducing the number of HTTP calls.
- CDN Hosting: It is a content delivery network that involves server distribution demographically to reduce latency.
- Parallel downloads: Organizing assets in several subdomains could help diversify the download limit of six assets per domain.
Q2: What are some new features of HTML5?
Ans: Here are some new features of HTML5 that you should know:
- Video and audio: Video and audio are the new tags that enable inserting a video into the website. YouTube also announced video inserting by giving the code to insert the videos. It makes the webpage look more involved with multimedia. Besides this, an audio tag is also used to insert audio on the web.
- SVG: The SVG element is used for the scalable vector graphics in HTML5. Using this tag, the developers can use any type of graphical animation such as a square, circle, etc.
- HTML5 APIs: A few APIs are introduced in the latest version of HTML5. These application programming interfaces are highly useful and JavaScript-based. It means that you need to understand JavaScript to understand the power of APIs.
- Required Attribute: It is another essential feature available as a tag. It helps in the collection of all the mandatory information that is there in the form. Without this, it will not be feasible to submit the form.
- ContentEditable: It is an attribute that allows the user to edit the content. You can edit your content just by clicking on it.
Q3: What are the two types of storage in HTML?
Ans: HTML has two types of web storage, which are as follows:
- Local storage: In local storage, data is not lost even when the browser is closed. To delete the stored data, you must manually do it from the browser settings.
- Session storage: In this type of storage, data is stored temporarily until the time the browser is closed. Once the browser is closed, the data is lost.
Q4: What types of tags can you use to separate a section of texts?
Ans: There are three important tags that can be used to separate the texts, which are as follow:
- <br> tag: This tag separates the line of text. It breaks the current line and carries the form of a new paragraph.
- <p> tag: This tag is used to separate the texts to create a new paragraph.
- <blockquote> tag: This tag is used to explain a large quoted section. Suppose you have a large quotation, then you can put the entire text within <blockquote> and </blockquote> tag.
Q5: What is Doctype?
Ans: A Doctype is also known as a document type declaration, an instruction that informs the web browser regarding the markup language in which the current page is written. It is not an element or tag; instead, it lets the browser know about the version, standard of HTML, or any other markup language used in the document. The doctype for the recent HTML version, HTML5, can be written as: <!DOCTYPE html>
It is one of the basic HTML interview questions that interviewers can ask you.
Q6: Name different types of heading tags and their importance
Ans: There are six different levels of heading that HTML defines. Those six headings are H1, H2, H3, H4, H5, and H6. H1 is the highest level, and H6 is the lowest level.
Here is the significant importance of heading:
- It is used for indexing the structure and content of web pages used by search engines.
- It is used for highlighting the essential topics in the content.
- It provides vital information and tells users about the structure of the document.
Q7: What are the several media types and formats supported by HTML?
Ans: HTML supports various media formats for sound, videos, music, movies, animations, graphics, etc. These are some different formats supported by HTML:
- Images: gif, jpg, jpeg, png, SVG,
- Video: AVI, RealVideo, MPEG, QuickTime, Flash, WMV, MP4, and WebM
- Audio: MP3, WMA, RealAudio, MIDI, MP4, AAC
Q8: How do HTML and CSS work together?
Ans: HTML and CSS work together to create effective web pages. HTML, also known as Hypertext Markup Language, is a structural code that constructs the layout of the webpage and creates multiple headers, footers, text, and images that can be displayed on the webpage. CSS is applied on top of the HTML and enables the web developers to make changes in the look and structure of the HTML. However, you should know that when you edit the HTML, you won’t be able to see the changes in the CSS due to the partition, but you will see the changes if you view the page in a different browser.
Q 9: What are the other important formatting tags in HTML?
Ans: HTML has numerous formatting tags; these are some important ones:
- <b>: It makes the text bold
- <i>: It makes the text italic
- <big>: It increases the font size of the text by one unit
- <em>: It makes the text italic, along with adding semantic importance
- <small>: It decreases the font size of the text by one unit
- <sup>: It makes the text a superior
- <sub>: It makes the text an inferior
- <del>: It displays as a strike-out text
- <ins>: It displays as added text
- <strong>: It marks the text as vital
- <mark>: It highlights the text
Q10: What is the purpose of the <head> tag in HTML?
Ans: <head> is one of the essential tags of HTML that provides information regarding the document. It is always enclosed in the <html> tag, which contains the metadata regarding the webpage and the tags that are enclosed by the head tag like <script>, <link>, <style>, and more. Also, remember that there can be only one <head> in an entire HTML document, which will always be placed before the <body> tag.
It is one of the most important HTML interview questions you should remember.
Q11: What are HTML frames?
Ans: HTML frames separate the browser window into several sections, where each section can load a different HTML document. The collection of frames in the browser window is called a frameset. Just like the tables are organized in rows and columns, the window is divided into frames.
Q12: Which HTML tags are used while displaying the data in the tabular form?
Ans: These are the tags that are used to display the data in the tabular form:
| 1 | <table> | It defines a table. |
| 2 | <tr> | It defines a row in a table. |
| 3 | <th> | It defines a header cell in a table. |
| 4 | <td> | It presents a cell in the table. |
| 5 | <caption> | It explains the table caption. |
| 6 | <colgroup> | It defines a group or more columns in a table format. |
| 7 | <col> | It is used with <colgroup> element to define column properties for each column. |
| 8 | <tbody> | This tag classifies the body content in a table. |
| 9 | <thead> | It categorizes the header content in the table. |
| 10 | <tfooter> | It classifies the footer content in the table. |
Q13: How to align text in HTML?
Ans: HTML content is aligned in the HTML page by using the CSS text-align property. It places the horizontal alignment of the content inside a table-cell box or a block element. It works like a vertical alignment but from a horizontal perspective. Besides this, it also works on texts and other content put inside the block elements such as images, buttons, etc.
Here is an example of how to align text in HTML:
<html>
<head></head>
<body>
<h1>Heading</h1>
<p style=”text-align:center/left/right/justify;”>text</p>
</body>
</html>
Q14: What are the new input types in HTML5 for forms?
Ans: These are the new input types available in HTML5 for forms:
| Input Type | Description | HTML Markup |
|---|---|---|
| Date | It allows the users to choose a date | <input type=”date”> |
| Datetime | It allows the users to choose a date and time using UTC date and time format | <input type=”datetime”> |
| Datetime-local | It is used to select date and time as per the local time | <input type=”datetime-local”> |
| Month | It allows you to select month and year | <input type=”month”> |
| Time | It is used to choose the time of the day | <input type=”time”> |
| Week | It permits you to choose week and year | <input type=”week”> |
| Color | It permits you to enter a simple color value | <input type=”color””> |
| It authenticates the input using the standard email format | <input type=”email”> | |
| Search | It enables you to search a data set | <input type=”search”> |
| Number | It accepts only numbers | <input type=”number”> |
| URL | It accepts only URLs | <input type=”url”> |
Q15: What is SVG?
Ans: HTML SVG is used to characterize the two-dimensional vector or raster graphics. It is defined in XML text files, where you can create and edit an SVG image with the text editor. Mostly, it is used for vector graphics such as pie charts, 2-dimensional graphics, etc.
Q16: What is button tag?
Ans: A button tag is used in the new version, which is HTML 5. It forms a clickable button within the HTML form on the web page. It creates a “submit” or “reset” button, which is as follows:
Conclusion
Preparing for a job interview is never easy because you do not know what the interviewer can ask you. We hope the HTML interview questions mentioned in this blog will help you enhance your knowledge and crack the interview to get your dream job.
| More Realted Blogs | |
|---|---|
| Interview Questions for Freshers | Seo Interview Questions 2022 |
| React Js Interview Questions | Java Interview Questions 2022 |
Find Latest Jobs in India
| S.no | Job Title | Employers | View Job |
|---|---|---|---|
| 1. | UI Developer Jobs | National Health Authority | Apply Now |
| 2. | UI Designer Jobs | Ministry of Health and Family Welfare | Apply Now |
| 3. | UI/UX Developer Jobs | Akal Infosys | Apply Now |
| 4. | UI/UX Designer Jobs | WNS Global | Apply Now |
Search Articles
Categories
- 55
- 19
- 7
- 171
