HTML Interview Questions
HTML stands for "HyperText Markup Language" is not a programming language, it is a markup language that defines the structure of your content.
- H- Hyper
- T-Text
- M-Markup
- L-Language
That means it is a language that contains text, symbols, graphics, and links is called HTML. It is the standard markup language for creating web pages and web applications. With the help of Cascading Style Sheets (CSS) and JavaScript (JS).
History of the web, the internet is a worldwide system of computer networks, a network of networks in which users at any one computer can, if they have permission, get information from any other computer means that sometimes talk directly to users at other computers.
List of Top HTML Interview Questions
Q1 Explain the hierarchy of HTML documents.
HTML is a computer language used to create web pages, each page created in HTML contains the data to be included in the Web page and the HTML tags. The Web Browser understands these tags and displays the corresponding Web page. We browsed the World Wide Web (www) using a Web Browser. All text, graphics, and design elements of a Web page are "tagged" with codes that instruct the Web browser on how to display the files.
The hypertext is called hyper because the navigation through the pages using the hypertext is not linear. It means that if you click the hypertext present on a Web page, you are directed to the relevant page on the website or Internet, which is not necessarily the next page on the website.
Q2 Why use doctype in HTML?
The <!DOCTYPE> declaration should be the very first thing in an HTML document, before the tag. The doctype declaration is not an HTML tag, it is an instruction to the web browser about what version of the markup language the page is written in. Which specifies the Document Type Definition (DTD) used by the document.
The browser checks the code of the document against the rules in <!DOCTYPE> declaration. The <!DOCTYPE> element does not have a closing tag.
HTML 4.01, HTML5 spacifies three types of DTD's:
- HTML5 → <!DOCTYPE html>
- HTML 4.01 Strict DTD → <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Transitinal DTD → <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- HTML 4.01 Frameset DTD → <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Q3 What are the Editors in HTML?
The web pages can be created and modified by using professional HTML editors. For learning purposes, we can simply use a simple text editor like Notepad (For Windows PC) or TextEdit (Mac).
Q4 How to use HTML Editors?
Write HTML code using Notepad/TextEdit
For Notepad (PC)
- Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen). Just type notepad and open it.
- Windows 7 or earlier : Open Start > Programs > Accessories > Notepad
For TextEdit (Mac)
- Open Finder > Applications > TextEdit - Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"
Q5 What is the difference between HTML elements & tags?
HTML Elements - An HTML element is an individual component of an HTML document. HTML is composed of a tree of HTML nodes, such as text nodes.
- Each part of a web page, such as a paragraph, an image, a link, or anything else you can interact with, is an element.
- Each type of element has its own behavior - for example, you can click on links, or type in text boxes.
- Each node can have HTML attributes specified.
- Nodes can also have content, including other nodes and text.
- Many HTML nodes represent semantics or meaning.
- An HTML element usually consists of a start tag and end tag, with the content inserted in between
HTML Tags - Most tags have opening and closing tags; the opening tag is written with the tag name in angled brackets, like </open_tag> whereas the closing tag adds a forward slash: </close_tag>. Anything between these opening and closing tags is considered to be the contents of that tag.
- An HTML document is a simple, plain text document, which you are able to open with any text editor on your computer. When you open one, you’ll see the document is made up of tags, which are keywords surrounded by angled brackets, each of which describes an HTML element.
- Some tags such as <img> tag, are self-closing. This means that they cannot have any content. It is also called Empty Tag like <br />, <hr />, <img />, etc.
Q6 What are the common lists used when designing a page?
Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read. In modern web development, lists are workhorse elements, frequently used for navigation as well as general content. HTML Lists are used to specify lists of information. All lists may contain one or more list elements.
- Ordered list - The ordered list displays elements in a numbered format. It is represented by <ol> tag.
- Unordered list - The unordered list displays elements in bulleted format. It is represented by <ul> tag.
- Definition list - The definition list displays elements in definition form like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.
- Menu list & Directory list
Q7 What is semantic HTML?
Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or meaning of the content. For example - In semantic HTML <b> </b> tag is used for bold statement as well as <i> </i> tag is used for italic. Instead of these we use <strong> </strong> it is almost similar like b tag and <em> </em> tags.
Q8 What are attributes & how to use them?
HTML attribute is a modifier of an HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them.
- In HTML syntax, an attribute is added to an HTML start tag.
- All HTML elements can have attributes.
- HTML Attributes provide additional information about an element.
- Attributes are always specified in the start tag.
- The HTML Attributes usually come in name/value pairs for Example : attribute="value"
Q9 Do older HTML files work on newer browsers?
Yes, older HTML files are compliant with the HTML standard. Most older files work on the newer browsers, though some features may not work.
Q10 What is an image map?
It is very useful to link an HTML web page or Image map facilitates use to link many different web pages using a single image. It is represented by <map> tag. You can define shapes in images that you want to make a part of an image mapping.
Q11 What’s the difference between a block-level & an inline element?
Each element in HTML is displayed in one of a few ways. By default, most tags are either displayed as block-level or inline. This value can be overridden using CSS.
Block Level Element
A block-level element is drawn as a block that stretches to fill the full width available to it the width of its container and will always start on a new line.
- Elements Example like <div>, <img>, <section>, <form>, <nav>.
Inline Element
Inline elements are drawn where they are defined and only take up space that is absolutely needed. The easiest way to understand how they work is to look at how text flows on a page. When a line of text gets to the end of the space available, it wraps onto the next line and happily keeps going.
- Elements Example like <span>, <b>, <strong>, <a>, <input>.
Q12 Does a hyperlink apply to text only?
No, hyperlinks can be used in the text as well as images that means you can convert an image into a link that will allow users to link to another page when clicked. Surround the image within the <a> opening and close tag with 'href="URL" 'attribute combinations.
Q13 What is the advantage of grouping several checkboxes together?
- Although checkboxes don’t affect one another, grouping checkboxes together help to organize them.
- Checkbox buttons can have their name and do not need to belong to a group.
- A single web page can have many different groups of checkboxes.
Q14 How to create a nested webpage in HTML?
The HTML iframe tag is used to display a nested webpage. In other words, it represents a webpage within a webpage. The HTML <iframe> tag defines an inline frame.
Example of HTML Webpage
<!DOCTYPE html>
<html>
<body>
<h2>This is nested web page using iframe.</h2>
<iframe src="https://wwww.gdatamart.com" height="300" width="400"></iframe>
</body>
</html>
Q15 What are the limits of the text field size?
The default size for a text field is around 13 characters. However, if you include the size attribute, you can set the size value to be as low as 1. The maximum size value will be determined by the browser width. If the size attribute is set to 0, the size will be set to the default size of 13 characters.
Q16 What is the HTML5?
In the history of the internet, have been many versions of the HTML standard. The versions varied in features and how strict they were. In 2014, the official recommendation for HTML5 by the World Wide Web Consortium was released. It is a living standard, meaning new features can be added over time. It is the version HTML5.
Q17 What new features were added to HTML5?
In HTML5 some of the new semantic elements are added like - <header>, <footer>, <section>, and <article>. They are semantic in that they are not just simple containers, but they tell the browser more about their contents.
There are additional form element types, like 'number', 'date', 'calendar' and 'range'. Video and audio elements have also been added, as well as new graphic elements, such as <svg> and <canvas>.
Q18 What is a marquee?
A marquee allows you to put a scrolling text in a web page. To do this, place whatever text you want to appear scrolling within the using <marquee> and </marquee> tags.
Q19 Explain what is the layout of HTML5?
Following are different HTML5 elements that are used to define the different parts of a webpage.
- Header - Used to define a header for a document or a section.
- Nav - It is used to define a container for navigation links
- Section - It is used to define a section in a document
- Article - It is used to define an independent, self-contained article
- Aside - aside used to define content aside from the content like the sidebar.
- Footer - It defines a footer for a document or a section
Q20 What is a class? What is an ID?
A CLASS is a style that can be applied to one or more HTML elements. It can apply to instances of the same element or instances of different elements to which the same style can be attached. Classes are defined in CSS using a period followed by the class name. It is applied to an HTML element via the class attribute and the class name.
An ID selector is a name assigned to a specific style. In turn, it can be associated with one HTML element with the assigned ID within CSS, ID selectors are defined with the # character followed by the selector name. One ID selector with a unique name can call only one time in an HTML webpage
Q21 How to create comments in HTML?
In HTML Comment starts with <!-- and ends with -->
For more understanding follow the below example we have commented out some HTML elements.
<!DOCTYPE html>
<html>
<body>
<h2>This is a heading in web page</h2>
<!-- <h2> one is comment out.</h2> -->
</body>
</html>
Q22 How tags migrated from HTML4 to HTML5?
Typical HTML5
- <header>
- <menu>
- <content>
- <post>
- <footer>
Example in HTML5:
<header>
<h2>This is a heading in web page</h2>
</header>
Typical HTML4
- <div id="header">
- <div id="menu">
- <div id="content">
- <div id="post">
- <div id="footer">
Example in HTML4
<div id="header">
<h2>This is a heading in web page</h2>
</div>
Q23 What are two types of Web Storage in HTML5?
There are two types of Web Storage in HTML5
- Session Storage - Session stores data of current session only. It means that the data stored in session storage clear automatically when the browser is closed.
- Local Storage - Local storage is another type of HTML5 Web Storage. In local storage, data is not deleted automatically when the current browser window is closed.