Here are some common questions and answers about HTML that you might encounter in a job interview, especially if you're just starting out in web development. This list also includes a few questions about CSS to help you improve your skills in HTML and web design.
HTML, also termed Hyper Text Markup Language is a language used on the World Wide Web. It is a common text formatting language utilized for designing and displaying web pages.
Today, text can become more dynamic and interactive because of HTML. It can change text into links, tables, and images. By prefixing the web page name with.html or.html, HTML pages can be stored.
HTML has the following features and characteristics:
An HTML tag comprises an opening tag, a content tag, and a closing tag. Some tags aren’t closed.
Two things are contained in HTML documents: content and tags.
A web browser examines an HTML document from top to bottom and from left to right. HTML tags are used to construct HTML documents and render their features. It has its own set of attributes.
<tag> content </tag> Content is added between tags to display data on a web page.
Here is a tabular comparison of HTML elements vs HTML tags to understand the differences between the two easily:
| HTML Elements | HTML Tags |
| HTML Elements are standalone parts of an HTML web page, including a start tag, attributes, content, and an end tag. | HTML Tags indicate the beginning or end of an element. They begin with '<' and end with '>'. What's in between '<' and '>' is a tag. |
| HTML Elements consist of a start tag, content, and an end tag. | HTML Tags serve as keywords, each with a specific meaning. |
| Content is held within HTML elements. | HTML Tags encapsulate HTML elements. |
| HTML Elements define the overall content of a web page. | HTML Tags are similar to keywords, as each tag has a distinct purpose. |
| Example: <p> This is an example of a paragraph.</p> | Example: <a> represents the opening anchor tag, and </a> represents the closing anchor tag. |
HTML formatting is the method of formatting text to make it look and feel better. It employs various tags to make text bold, italic, and underlined.
For example:
<b> This text is bold </b>
<i> This text is italic </i>
<u> This text is underlined </u>No, not all HTML tags have an end tag. Some are self-closing tags that do not require an end tag.
The br> tag, for instance, is used to break a line, and the image> tag is used to insert an image into a page.
To display the data in tabular form, the following HTML tags are used:
| 1. | <table> - | Represents a table |
| 2. | <tr> - | Defines a row in a table |
| 3. | <th> - | Used for a header cell in a table |
| 4. | <td> - | Defines a cell in the table |
| 5. | <caption> - | Represents the table caption |
| 6. | <col> - | Used with <colgroup> element to specify each column property |
| 7. | <tbody> - | Groups the body content in the table |
| 8. | <thead> - | Groups the header content in the table |
| 9. | <tfooter> - | Groups the footer content in a table |
This is one of the most common HTML interview questions for freshers, as they should know about all types of tags used.
Each HTML tag has a unique attribute that affects how the tag operates or appears.
For example, a type attribute on an input> tag can be used to indicate whether it’s a text field, checkbox, radio button, etc.
Inside the two angled brackets, attributes are specified directly after the tag’s name. They should only be used in opening or self-closing tags. They can never appear in closing tags.
<!-- Text field -->
<input type="text" />
<!-- Checkbox -->
<input type="checkbox" />
<!-- Radio button -->
<input type="radio" value="on" />The basic structure of an HTML template is as follows you must know while preparing for HTML interview questions and answers for freshers:
<html>
<head>
<title>Page Title </title>
</head>
<body>Page content</body>
</html>There are basically six different types of heading tags used in HTML. Each form of heading tag has a different font size than the others. For instance, H1 is the biggest heading, while H6 is the smallest one.
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>The HTML language has an anchor tag for creating a hyperlink that connects one page to another. These tags can appear in the following formats:
You must know the differences between block level and inline elements because this can be asked among the interview questions on HTML.
Here is a tabular comparison of block-level elements vs inline elements to understand the differences between the two easily:
| Block Element | Inline Element |
| A block-level element is represented by a block that stretches to occupy the entire width available to it, i.e., the width of its container, and will always begin on a new line. For Example: <div>, <img>, <section>, <form>, <nav> | Inline elements are defined and only take up the space that is required. Looking at how text flows on a page is the simplest method to understand how they work. For Example: <span>, <b>, <strong>, <a>, <input> |
You can add code comments to your HTML document to help you comprehend the code. These are not visible in the browser, but they assist in notifying yourself and other developers about the purpose of a part of HTML.
The beginning of the comment is denoted by !-, and the end is denoted by — >. Anything in the middle will be ignored, even if it contains valid HTML.
<!-- This is a comment! -->
<!-- Comments spanning multiple lines -->
<!-- This part is ignored in the browser -->HTML5 is the most recent version of the Hypertext Markup Language (HTML). HTML5’s new features include the following:
Semantic HTML is a code that uses HTML markup in web pages and web apps to reinforce semantics. It also defines the meaning of the text rather than just defining its look or form.
Overall, semantic HTML gives meaning to the code that we write.
<form>, <table>, and <article>, these tags clearly indicate the content.A nested webpage is displayed using the HTML iframe tag. In other words, it symbolizes a webpage within a webpage. An inline frame is defined by the HTML iframe> tag.
<!DOCTYPE html>
<html>
<body>
<h2>HTML example</h2>
Height and width attributes specify the iframe size:
<iframe src="https://www.arfitechnology.com/" height="200" width="300"></iframe>
</body>
</html>You must practice such concepts before going to the job interview so that you are well-prepared for the top HTML interview questions and answers.
No, hyperlinks can be placed in both text and graphics. The HTML anchor tag specifies a hyperlink connecting one page to another.
The “href” attribute of the HTML anchor element is the most crucial.
<a href = "..........."> Link Text </a>A style sheet creates a uniform, transportable, and visually appealing style template. These templates can be used on a variety of web pages.
It covers the appearance and formatting of a markup-language document. The Cascading Style Sheet (CSS) is the most well-known type of style sheet, and it is used to style web pages.
The style sheet provides the following formatting elements:
An image map connects multiple web pages with a single image. It is represented by <map> tag. You can describe the image shapes you want to include in an image mapping.
A marquee represents the scrolling text on a web page. It automatically scrolls the image or text up, down, left, or right.
You should put the text to scroll within the <marquee>……</marquee> tag.
The span tag is used:
Example:
<p>
<span style="color:#ffffff;">
In this page we use span.
</span>
</p>The difference between SPAN & DIV is that a SPAN element is inline and typically used for a tiny block of HTML within a line, such as within a paragraph.
On the other hand, A DIV or division element is a block line, comparable to having a line break before and after it.
<div id="HTML">
This is <span class="Web Dev">interview</span>
</div>Tim Berners-Lee wrote the first-ever version of HTML in 1993. Since then, different versions of HTML have been introduced.
HTML can be used for various purposes, including writing code that is clear and easy to understand. This language allows you to isolate meaning from text and style by writing descriptive and semantic code.
HTML, or Hyper Text Markup Language, was invented in 1993.
To include a picture in the background image, place the following tag code after the </head> tag:
<body background = “image.gif”>Now, substitute image.gif with the name of your picture file. This will make the image the background image of your web page.
To do so, use the mailto command within the href tag. Convert the text into a clickable link to send an email. It is possible to write it as follows:
<a href=”mailto:youremailaddress@xyz.com”>text to be clicked</a>The HTML layout describes how the web page is organized. Every website has a distinct layout that helps viewers focus on specific material.
The HTML5 components listed below define the distinct portions of a webpage.
Empty elements are HTML elements that have no content. For example, <br>, <hr>, and so on.
So, these are some of the popular and top HTML interview questions for freshers. Mastering these questions will surely place you in a good firm as a fresher web developer.
Now, moving to some typical interview questions on HTML for experienced professionals.
An inline frame is specified via the <iframe> tag. It displays a web page within a web page. For instance, the src element specifies the URL of the document that occupies the iframe.
<iframe src=”URL”></iframe>
Here is a tabular comparison of LocalStorage and SessionStorage objects in HTML to understand the differences easily:
| LocalStorage Object | SessionStorage Object |
|---|---|
| It keeps data that has no expiration date. | It only stores data for one session. |
| The data can be shared across numerous browser windows. | Data is only available in the current browser window. |
| When the browser window is closed, no data is removed. | If the browser is closed, the data is destroyed. |
There are three methods for incorporating CSS into HTML:
This approach is used to style smaller contexts. To use inline styles, provide the style attribute in the appropriate tag.
When the style is applied to many pages, an external style sheet is used. Using the <link> tag, each page must link to the style sheet. The <link> tag is placed within the head section.
Syntax:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>An internal style sheet is employed when a single document has a distinct style. Internal style sheets must be placed in the head section of an HTML page using the <style> tag.
Syntax:
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>This is yet another important thing that you must know and have in your list of HTML interview questions and answers for experienced professionals.
The distance or gap between two cells in the same table is called cell spacing. On the other hand, Cell Padding is defined as the gap or space between the cell’s content and the cell wall or cell border.
<table border cellspacing=3>
<table border cellpadding=3>
<table border cellspacing=3 cellpadding=3>Using the <br> tag, you can separate the lines of text.
Other tags, including <p> tag and <blockquote> tag, are also used to separate the text.
HTML supports a wide range of media forms, including music, video, movies, sounds, and animations.
HTML supports the following formats:
Some browsers recognize it when the mouse cursor is above an active link. Others recognize active links when the link has the attention. Those without a mouse cursor above the link are considered normal. Blue is the default color for normal and active links.
When you open the CSS file in a browser, nothing happens. It fails since the file has a different extension. So the only way to use an external CSS file is to reference it within another HTML document using the </link> tag.
The text is wrapped by default to fit within the browser window. However, if the text is part of a table cell with a fixed width, it may expand beyond the browser window.
This is among the crucial interview questions on HTML and you must know the correct answer.
Please find the tabular comparison of HTML vs XHTML to know the differences better:
| HTML | XHTML |
|---|---|
| HTML is an abbreviation for Hypertext Markup Language | XHTML is an abbreviation for Extensible Hypertext Markup Language |
| It is derived from SGML (Standard Generalized Markup Language) | It combines both XML and HTML features |
| HTML is a type of static Web Page language | XHTML is a dynamic Web Page language |
| It employs the document file format | It employs markup language |
| HTML is all about displaying data | XHTML is all about describing the data |
| HTML is not case-sensitive | XHTML is case-sensitive. Each tag and attribute should be written in lowercase. |
The code for adding a favicon is provided below. Enter the following code in your webpage’s <head> section.
<link rel=”icon” type=”image/png” href=”/favicon.png”/>
<link rel=”icon” type=”image/png” href=”https://example.com/favicon.png”/>The <figure> tag is used to identify self-contained information connected to the main content. It includes self-contained information such as images, diagrams, illustrations, etc.
The graphic, caption, and contents are all referred to as a single unit in the document’s main flow. The image src and figcaption elements are part of the <figure> tag. Img src is used to insert an image source into a document, whereas figcaption is used to change the caption of an image.
<figure>
<img src=”pancakes.jpg” alt=”Blueberry Pancakes”>
<figcaption>A Stack of Blueberry Pancakes</figcaption>
</figure>In HTML files, the <datalist> tag enables auto-complete functionality. It allows users to include an auto-complete form based on predetermined options. It can be combined with an input tag to allow users to conveniently fill out forms with predetermined options.
For Example: If you press A, it will show the car list starting with an A letter.
<label for=”car”>Choose your car from the list:</label>
<input list=”cars” name=”car” id=”car”>
<datalist id=”cars”>
<option value=”Honda”>
<option value=”Hyundai”>
<option value=”Maruti”>
<option value=”Audi”>
<option value=”BMW”>
</datalist>If you have been working as a web developer for some years now, then this is going to be one of the top HTML interview questions and answers for experienced professionals.
In HTML, white spaces are interpreted as a single space character. You can indent lines of text without worrying about numerous spaces because the browser combines several spaces into a single space. It allows you to structure the HTML code and make it much more readable.
If the border attribute is set to a non-zero value, default cell boundaries with one-pixel thickness are automatically placed between cells. When the rules attribute is introduced, a default 1-pixel border appears if the border attribute is not specified.
A text field’s default size is roughly 13 characters. If you add the size attribute, however, you can set the size value to as low as 1. The browser width will decide the maximum size value.
Furthermore, if the size attribute is set to 0, the size is set to the default size of 13 characters.
HTML SVG is a two-dimensional vector graphics format. An X, Y coordinate system is utilized for vector diagrams such as pie charts and 2-dimensional graphs. XML text files define SVG pictures and their actions.
<!DOCTYPE html>
<html>
<body>
<h2>HTML SVG example</h2>
<svg width="400" height="400">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="6" fill="red" />
</svg>
</body>
</html>The <canvas> element is a container for drawing pictures on a web page using a programming language such as JavaScript. It allows you to render 2D shapes and bitmap pictures dynamic and scriptable. You may draw paths, boxes, circles, text, and images on canvas using various methods.
HTML lists are used to organize a collection of similar objects into lists. It is identified by a tag.
Some types of HTML lists:
It is one of the top HTML interview questions that can be asked of experienced professionals.
The figure tag includes a photograph in a document on a web page. It manages a collection of diagrams, images, code listings, and embedded material.
<p>The Taj Mahal is widely recognized as "The jewel of Muslim art in India.”</p>
<figure>
<img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>
</figure>Logical tags are used to convey the meaning of the content included. The logical tag is illustrated with the <strong> </strong> tag.
On the other hand, physical tags instruct the browser on how to display the text contained within the physical tag.
Examples of physical tags include:
The checkboxes do not affect one another. However, placing these checkboxes together aids in their organization. Checkbox buttons can be given a name and are not required to be part of a group. A single web page can contain a variety of checkbox groups.
These are some of the most used HTML editors:
So, these are the top HTML interview questions and answers for experienced. We hope that this set of questions is enough to crack your interview at a glance.
Today, most web pages are built on HTML. Using this programming language, we instruct browsers to organize material into titles, headings, paragraphs, images, links, lists, forms, tables, and more.
Right? Well, the ever-rising demand for HTML has motivated newbies and experienced professionals to become a web developer. As a result, they look forward to kickstarting their career as a good web developer in one of the leading organizations.
The first step to becoming a web developer is cracking the interview process. Right? So, to help you achieve your goal, we’ve curated the list of the top HTML interview questions and answers for both freshers and experienced. These questions will give you a detailed insight into HTML from its basic to the advanced level.
Web developers are in high demand these days. So, there are ample perks individuals can experience while choosing HTML.
Well, a web developer’s salary differs from region to region. For instance, a web developer’s salary in India is initially Rs 35,000 and keeps increasing with experience.
There are plenty of reasons to build a career in web development, including:
Arfi Technology Pvt. Ltd. is a highly trusted IT company in India that offers the best online/offline training for web development.