Top 20 latest HTML & HTML5 interview questions and answers
A list of top 20 latest HTML interview questions and HTML5 interview questions and answers are given below.
We’ve prepared these common HTML interview questions and answers for all levels to test your knowledge about it. If you have another great answer or any questions, please comment below.
Most Frequently Asked HTML Interview Questions
1. What is the difference between the block tag and the inline tag? Provide some tags you know.
Answer:- Block tag always displays with default full-line, It accounts for 100% of the line and makes a new line for another tag. So never have two tags display in the same line.
- Inline tag display by content, Total width of them depends on the content inside them. So maybe have many tags display in the same line.
* Note: Block tags usually are container tags, So block tag will content inline tag and I recommend you shouldn't do the opposite.
Block tags: <div>, <p>, <h1> - <h6>, <ul>, <ol>, <li> and some tags in Html5 such as <article>, <nav>, <header>, <footer> ...
Inline tags: <img>, <span>, <strong>, <b>, <label>, <em>, <i> ...
You can refer Q&A What is the difference between block and inline html tag?
2. Does every tag in Html have to end with a close tag?
Answer:No, they don't, In Html provided 2 types of tag with contain content and no contain content.
1. Contain content
- The most tags contain content such as text, pictures or another tag, they always have a close tag, example a <div>, <span>, <p>, <h..> tag. You can call them are container tags.
<p>This is a contain content tag</p>2. No contain content
- This is some tag no contain content inside it so it no need close tag such as <img>, <input>, <link>....
<img alt="images" src="path/flower.jpg" />3. What is the difference between the input type submit and button type submit tag?
<input type="submit" .. AND <button type="submit" ....Answer:Maybe you know that
<input>is a void tag or tag no contain content you can read again question 2. So it only displays with the text throughvalueattribute.The
<button>is a contain content tag, so you can make a button with an image, text, another tag, you can design any style you want.In addition, they are the same.
4. What is the difference between <ol> tag and <ul> tag?
Answer:- The
<ol>is an ordered list, you can list by number or alphabet ascending or descending. You also start some value you want. For example :<ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>This is a number ordered list and starts with 50. You can see the result here.
- The
<ul>tag is an unordered list. It using the symbol bulleted such as square, circle, dot ... to display before each item. For example :<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>5. Which are tags should be put inside of <head> and <body> tag? Explain why?
Answer:1. Head tag
Inside of
<head>tag, we only put tags which are not displayed in the GUI browser, users can not see them except<title>tag. Such as <meta>, <link>, <script>, <style> tags .....So you will not be put a heading tag or paragraph tag inside <head> tag.
2. Body tag
You can understand the opposite with head tag, Inside of
<body>tag you should only put tags that are display in the browser and users can see them. However, we have some exceptions, you also put <script>, <style>, <link> tags inside this tag.Some tag can put inside
<body>tag : div, span, b, strong, div, h1-h6, p, ol, ul, li, table, ing ...etc6. What is a form in Html? Why do we need to use it?
Answer:The
<form>tag is a parent tag, it can contain many input tag to help collect information from the user. When using this tag, helps us easy manipulation with the <input> tags inside of it. You also submit a form to the server to process very easy.You also use javascript to manipulation with children tag such as validate, load data ... faster and easier.
7. How to create a list radio button? Why they must have the same
nameattribute value?Answer:To create a list radio button, we can use <input> tag with type is radio. For example :
<input type="radio" name="gender" id="male" /> <lable for="male">Male</lable> <input type="radio" name="gender" id="female" /> <lable for="female">Female</lable> <input type="radio" name="gender" id="other" /> <lable for="other">Other</lable>Why they must have the same name attribute value?
As you know that radio control only allows the user to select one option if they are a different name you can select many options. So the same name value is required for a list radio button.
8. How can we comment in HTML?
Answer:To comment code in the Html, we can use the syntax as below:
<!-- Code need comment here -->With this syntax, we can comment on only one line or many lines.
9. What is the viewport meta tag in Html?
Answer:The viewport is the user's visible area of a web page. If you do not have a viewport tag your webpage will not detect device screen and it always displays smaller on a mobile phone than on a computer screen.
I recommend you should always include the
<meta>viewport in all your web pages and syntax default as below:<meta name="viewport" content="width=device-width, initial-scale=1.0">The
width=device-widthpart sets the width of the page to follow the screen-width of the device (which will vary depending on the device).The
initial-scale=1.0part sets the initial zoom level when the page is first loaded by the browser.10. What is the difference between id and class attributes in the Html tag?
Answer:1. Id attribute
Id stands for identity. It helps identity for each element in an Html page, Id value is must unique, we can't have two elements in an HTML page with the same id and it only contains one value.
With style CSS, you can use the Id attribute to make some style for that element when using the id selector to style CSS, but it will not be reusable.
With javascript find an element through id attribute is a good way to manipulation with that element.
2. Class attribute
The class is also an attribute of an element, it helps set style CSS for that element.
With style CSS, the class can contain many values separate by space, many tags can have the same value class. So if you use a class selector you can reuse style code.
With javascript, you also find one or some element through a class attribute, it always returns an array of the element.
11. What is the <canvas> tag in html5?
Answer:The
<canvas>element is provided by html5 is used to draw graphics by using JavaScript. ... You must use JavaScript to actually draw the graphics. You can use canvas to the rendering of 2D shapes and bitmap images, Say about graphic canvas is a low level so it not support for rendering 3D but you can use WebGL to make graphic 3D.To manipulation with canvas, HTML5 provided some method help draw something inside canvas such as lineTo(), stroke(), arc()... but it only in the basic level, you can use some library to get better work with canvas such as processing.js
12. How to display a webpage from website A into a webpage of website B?
Answer:To import a webpage into another webpage you can use <iframe> tag. You can follow the syntax below:
<iframe src="path/demo_iframe.htm" height="500" width="300" title="Iframe Example"></iframe>
you can add style for iframe by using style or class attribute.
13. What is the attribute of the Html tag? Provide some attribute popular
Answer:HTML attributes are a modifier of an HTML element type. It is very important to identity, make style CSS, contain data, listen to events...etc, If not have the attribute we will difficult to target correct element and some function/event will work incorrectly.
Attributes always declare inside of the open tag. We have 2 attribute types:
- Primary attribute: They are attributes available and provided by Html such as id, type, class, src, href, target...
- Customize attribute: You can define one or more attributes for the element, you should start with data-
14. What is the difference between HTML and HTML5?
Answer:Html5 is a new version of the Html it also the latest version.
Have some features introduced in Html5:
- Support more new HTML tags such as nav, article, section, article, header, footer, aside, canvas...
- Canvas2D
- CSS3
- Drag and Drop
- File API
- Geolocation
- Offline Applications
- SVG
- Web Storage
- Web Sockets
- Web Workers ..etc
So you can understand that, html5 only a new version and it provides more functions when compared with html4
15. What is a hyperlink in Html? How many types of hyperlink support in Html?
Answer:Hyperlink help link from a webpage to another webpage, each webpage has a URL path, it's called a link. To make a hyperlink in HTML you can use <a> tag. For example:
<a href="https://quizdeveloper.com" title="quizdev">This is a hyperlink</a>In that:
hrefattribute is a link of another page.We have some hyperlink type :
- Text link : Inside of <a> tag only have text.
- Media link: Inside of <a> tag can be the image, video, audio, photograph, icon ..
- Tag link: Inside of <a> tag can contain some another tag
16. List out some tag support by Html5 and when we need to use it?
Answer:1. Canvas tag: using to display graphic 2D.
2. Nav tag: using to design a menu for the webpage.
3. Article tag: using for design some object have layout look like an article.
4. Section tag: It is a big container it contains one or more article tags.
5. Aside tag: It is a small box, it can be inside of an article or section tag.
6. Header tag: It is a header of a page or section or article tag.
7. Footer tag: It is a footer of a page or section or article tag.
8. Svg tag: It is used to define graphics for the Web.
9. Some input tag type such as tel, email ...
17. Can you list out some input tag type support by Html5?
Answer:1. color input
Allows the user to select a color from a color picker and returns the color value in hexadecimal format.
<form> <label for="mycolor">Select Color:</label> <input type="color" value="#00ffff"> </form>You can see an example here.
2. Date input
It allows the user to select a date from a drop-down calendar.
<form> <label for="mydate">Select Date:</label> <input type="date" value="2019-04-15"> </form>You can see an example here.
3. DateTime local input
Input allows the user to select both local date and time, including the year, month, and day as well as the time in hours and minutes.
<form> <label for="mydatetime">Choose Date and Time:</label> <input type="datetime-local" /> </form>You can see an example here.
4. Email input
It allows the user to enter the e-mail address. It is very similar to a standard text input type, and throw an error if the user enter incorrect format.
<form> <label for="myemail">Enter Email Address:</label> <input type="email" required> </form>You can see an example here.
5. Month input
This input type allows the user to select a month and year from a drop-down calendar.
<form> <label for="mymonth">Select Month:</label> <input type="month"> </form>You can see an example here.
6. Number input
The
numberinput type can be used for entering a numerical value. You can also restrict the user to enter only acceptable values using the additionalmin,max, andstepattributes<input type="number" min="1" max="10" step="0.5" id="mynumber">In addition, we have more many input types such as
Range,Search,Tel,Time,URL,Week.18. On a webpage can we have many <header> and <footer> tag?
Answer:Oh yes, the
<header>and<footer>are new tags introduced in Html5, and they are can a header or footer of a webpage or an aside block or an article block or a section block. So on a webpage, we can have many<header>and<footer>tags.19. Can I put a <div> tag inside of the <head> tag? Why?
Answer:Oh no, you should not put a
<div>tag inside<head>tag. You can read again question 5, you can see that the<head>tag only contains tags not display in the browser which end-user can not see except<title>tag.* Note: If you put div tag inside head tag is also display in the browser but follow by the standard of W3C it will get an error.
20. What is the mean of DOCTYPE in a Html page?
Answer:DOCTYPE is used to inform the browser about the version of HTML used on a web page. It is not a tag and no display anything in the browser.
The latest version of Html is 5.0 (HTML5) so syntax looks like :
<!DOCTYPE html>If you want using HTML version 4 you can declare as below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Note: Why this is important? Because maybe as you know html5 support more many new tags If you declare version 4 and using some tag of version 5 some browser will not understand to display. So I recommend using the latest version of Html.
COMMENT