In this article, we have covered the essential HTML questions and answers for your HTML interview. If you understand these 20 more important questions, then you will become a master of HTML, and you can crack any HTML interview.
1. What is the use of meta tags?
Meta elements in HTML are used to offer information about a webpage. Meta tags appear between the elements of an HTML document. Meta tag data is not visible on the webpage, but it allows us to include information such as character encoding, page description, keywords, and much more that is useful for search engine optimization (SEO).
Additionally, meta tags are not only for defining the viewport but also for storing cookies on the user's device and enabling communication between the server and the browser.
<head>
<!-- This meta tag defines translating machine code into human-readable text and vice versa to be displayed in the browser. -->
<meta charset="UTF-8">
<!-- The meta tag specifies the viewport setting for the website to be displayed correctly on all devices. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- This meta tag defines a description of your web page. -->
<meta name="description" content="Learn Latest Web Technologies">
<!-- The above meta tag define keywords for search engines. -->
<meta name="keywords" content="HTML, CSS, JavaScript">
<!-- The above meta tag define the name of the actual person editing the page. -->
<meta name="author" content="Code Mafias">
<!-- The above meta tag define refreshes the document every 60 seconds. -->
<meta http-equiv="refresh" content="60">
</head>
2. What is the difference between div and span tags?
The <div> is a block-level element that covers the entire width and starts any other elements on a new line. It is used to group large sections of HTML content to make the layout easier to style.
The <span> is an inline-level element, meaning it only takes up as much width as necessary and does not force line breaks. It's commonly used for styling small portions of text within a larger block of content or for applying inline styling.
<body>
<div style=" background: lightblue;">The div tag </div>
<div style=" background: steelblue;">The div tag </div>
<br>
<span style="background: thistle;">The span tag inline</span>
<span style="background: thistle;">The span tag </span>
</body>
3. What are async, defer, type, and src attributes on a <script> tag?
Async Attribute: It specifies whether the script should be executed asynchronously. When set to "true", the script is loaded asynchronously after the HTML content, helping improve page loading speed.
Defer Attribute: Similar to async, it controls script execution timing. When set to "true", the script is deferred until after the HTML content is parsed. However, it maintains the order of execution relative to other deferred scripts.
Type Attribute: This attribute defines the scripting language of the content in the script tag. For JavaScript, the value is typically set to "text/javascript".
Src Attribute: It specifies the URL of an external JavaScript file to be linked with the HTML document. The browser loads and executes the script from the provided source location.
<script type="text/javascript" async="true"></script>
<script src="Script.js" defer="true"></script>
4. What is new in HTML5?
Semantic Elements: HTML5 introduced semantic elements like <header>, <footer>, <nav>, <article>, and <section>, which provide clearer structure and meaning to web content.
Audio and Video Elements: HTML5 introduced <audio> and <video> elements, allowing native embedding and playback of audio and video content without the need for third-party plugins like Flash.
Canvas: The <canvas> element provides a native drawing surface for rendering graphics, animations, and interactive content using JavaScript.
Improved Form Controls: HTML5 introduced new input types like date, email, number, range, and color, as well as attributes like required and placeholder, enhancing form validation and the user experience.
Offline Storage: HTML5 introduced APIs like localStorage and sessionStorage, allowing web applications to store data locally on the user's device, enabling offline access and improving performance.
Geolocation: HTML5 introduced the Geolocation API, allowing web applications to access the user's geographic location, facilitating location-based services and functionality.
Web Workers: In HTML5, the Web Workers API enables multi-threaded JavaScript execution to improve performance and responsiveness.
Responsive Images: HTML5 introduced the <picture> and <source> elements, along with the srcset and sizes attributes, allowing developers to deliver optimized images based on device capabilities and screen sizes.
5. Why did we utilize the data attribute in HTML, and why is it now advised not to use it?
HTML data attributes were initially introduced to store custom data within HTML elements, enabling dynamic interactions with JavaScript. However, they are now discouraged from sensitive data due to their accessibility and modifiability by users through browser tools like the inspect element feature. The use of data attributes for critical information is not recommended, and more secure methods should be used instead.
<ul>
<li data-language-type="web development">HTML CSS JS</li>
<li data-language-type="android app development">JAVA</li>
<li data-language-type="machine learning">Python</li>
</ul>
6. In an image tag, what is the benefit of the srcset attribute?
The srcset attribute is used to make any image responsive. When the website's image is open on multiple devices, srcset can load images of different sizes. This makes the website look better on different screens.
There are three different sizes of images included in this example, which will all load at different widths on different devices.
<img src="img/tree.jpg" style="width:100%;" srcset="img/tree1.jpg 500w,
img/tree2.jpg 1000w,
img/tree3.jpg 1500w,">7. What is an attribute in HTML?
Inside the HTML tag, we can define attributes that provide additional information to the tag, which affects its behavior or appearance. For instance, the href attribute directs a link to its destination, while the src attribute specifies the image source for an img tag. These attributes are typically included within the opening tag of an element, guiding its functionality or presentation.
<a href="http://www.codemafias.com">Code Mafias</a>
<img src="./img/tree.jpg" alt="">
8. What is a marquee in HTML?
The <marquee> tag in HTML is used to create scrolling text or images on a webpage. It allows text or images to move horizontally or vertically, with various behaviors such as alternate scrolling directions.
In this case, the text is being moved from left to right and will continue to do so. This text will rotate within 40% of its width.
<marquee behavior="alternate" width="40%" direction="right">
Moving text
</marquee>
9. What is semantic HTML? and How does it work?
Semantic HTML refers to using HTML tags that accurately describe the content they contain. This makes it much easier for any other developer to understand the code. Instead of using generic div or span tags, semantic HTML employs elements that accurately describe the content they enclose.
For example, using <header> for the header section of a webpage, <nav> for navigation links, <article> for a self-contained piece of content, <footer> for the footer section, and so on, makes the structure of the webpage clearer and more meaningful to both developers and search engines.
Semantic HTML improves the SEO and overall structure of the website, which makes it easier for both the developer and the system to understand.
In semantic HTML, the </b> tag is not used for bold statements; instead, you use the </em> and </strong> tags. Italic is indicated by the </i> element.
<h1>Heading</h1>
<p>Lorem ipsum dolor sit, <strong>Strong</strong> amet consectetur adipisicing elit. Voluptatem, et.</p>
<h2>Sub-heading</h2>
<li>list</li>
<ol>o-list</ol>
10. How do you display a table on an HTML web page?
The HTML <table> tag is used to display data in table format. It is also used to write the marks of many students, something is used for collection, and it is also used to control the layout of the page. For example, suggest a header, navigation bar, and footer section.
- <table>: Defines a table.
- <tr>: Defines a row in a table.
- <th>: Defines a header cell in a table.
- <td>: Defines a standard data cell in an HTML table.
- <caption>: Defines the table caption.
- <colgroup>: Specifies a group of one or more columns in a table for formatting.
- <col>: Used with <colgroup> to specify column properties for each column.
- <tbody>: Groups the body content in a table.
- <thead>: Groups the header content in a table.
- <tfoot>: Groups the footer content in a table.
<table border="15" style="text-align: center;" cellpadding="20px" cellspacing="5px">
<caption>Table</caption>
<thead>
<th colspan="4">The Table Heading</th>
</thead>
<tfoot>
<th colspan="4">The Table Footer</th>
</tfoot>
<tr>
<th>SR No.</th>
<th colspan="2">Name</th>
<th>Contact No</th>
</tr>
<tr>
<td>101</td>
<td>John</td>
<td>Jaggs</td>
<td>88888 88888</td>
</tr>
<tr>
<td>201</td>
<td>Justin</td>
<td>Bibber</td>
<td>99999 99999</td>
</tr>
<tr>
<td>301</td>
<td>Anna</td>
<td>Jos</td>
<td>77777 77777</td>
</tr>
<tr>
<td>401</td>
<td>Nebo</td>
<td>Sore</td>
<td>66666 66666</td>
</tr>
</table>
11. What is the difference between SVG and Canvas in HTML?
SVG (Scalable Vector Graphics) and Canvas are both used for creating graphics in HTML, but they have different characteristics and use cases.
Image Types:
SVG: SVG creates vector graphics, meaning images are made up of mathematical paths rather than pixels. This allows for unlimited scaling without loss of quality.
Canvas: Canvas creates raster graphics, which are composed of pixels. While this provides more control over individual pixels, it can lead to a loss of quality when scaling up.
Performance:
SVG: Performs better with fewer objects and larger surfaces.
Canvas: Performs better with more objects and smaller surfaces.
Creation and Manipulation:
SVG: SVG images are created using XML-based markup and can be manipulated using CSS and JavaScript.
Canvas: Graphics on a canvas are drawn using JavaScript only, with no built-in support for manipulation using CSS.
Text Rendering:
SVG: SVG has excellent text rendering capabilities, making it suitable for scenarios requiring high-quality typography.
Canvas: Text rendering in Canvas is less precise and may not provide the same level of quality as SVG.
Scalability:
SVG: SVG graphics can be scaled infinitely without loss of quality, making them suitable for high-resolution printing and responsive design.
Canvas: Canvas graphics have poor scalability and may not be suitable for high-resolution printing or responsive design.
SVG example
<body>
<svg width="200px" height="200px" style="border:1px solid black ;">
<rect x="60px" y="60px" width="80px" height="80px" fill="steelblue" stroke="rgb(124, 152, 175)"
stroke-width="2" />
</svg>
<svg height="100" width="100" style="border:1px solid black ;">
<line x2=" 100" y2="50" style="stroke:steelblue;stroke-width:2" />
<line y1="50" x2="100" y2="50" style="stroke:steelblue;stroke-width:1" />
<line y1="100" x2="100" y2="50" style="stroke:steelblue;stroke-width:2" />
</svg>
</body>
Canvas example
<body>
<canvas id="box"></canvas>
<script>
var c = document.getElementById("box");
var ctx = c.getContext("2d");
ctx.fillStyle = "steelblue";
ctx.fillRect(20, 20, 75, 50);
ctx.globalAlpha = 0.2;
ctx.fillStyle = "rgb(21, 134, 233)";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "rgb(87, 114, 137)";
ctx.fillRect(20, 80, 75, 50);
ctx.fillStyle = "rgb(8, 12, 15)";
ctx.fillRect(50, 110, 75, 50);
ctx.fillStyle = "black";
ctx.fillRect(50, 110, 75, 50);
</script>
</body>
12. In HTML, how do you separate a section of text?
To separate sections of text in HTML without providing examples, you can use various tags depending on the context:
Line Break: Use the <br> tag to insert a line break within a paragraph, allowing text to continue on the next line without starting a new paragraph.
Paragraph: Enclose blocks of text within <p> tags to create separate paragraphs. This adds vertical spacing between the paragraphs.
Blockquote: Use the <blockquote> tag to indicate longer quoted passages, typically with an indentation or distinct styling.
13. How do you create nested web pages in HTML?
To create nested web pages in HTML, you can use the <iframe> tag. This tag allows you to embed another web page within the current HTML document. Here's how you can use it:
<body>
<iframe src="https://codemafias.com/" height="500" width="600"></iframe>
</body>14. Differentiate between an ordered list and an unordered list.
The <ol> tag is used to order any item, such as an item with a number. And the list's elements are all written inside the <li> tag. In the order list <ol>, you can define roman numbers, lowercase, uppercase, and numbers.
The <ul> tag is used in an unordered list, it's not the number vice. All the elements of the list are written inside the <li> tag.
It is widely used for creating a navigation bar like home, about, content, and more.
For example
<body>
<ul type="square">
<li>Home</li>
<li>About</li>
<li>contact</li>
</ul>
<ul type="round">
<li>Home</li>
<li>About</li>
<li>contact</li>
</ul>
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
15. What is HTML?
HTML is a standard markup language that developers use to create documents on the World Wide Web. With the help of HTML, we can create structure and layout for web pages by using a system of tags and attributes to define various elements like headings, paragraphs, links, images, etc.
In short, HTML is like the foundation of a web page. It helps us organize and structure any information and layout on the internet browser.
16. What are the disadvantages of using HTML 5?
Compatibility: Older web browsers may not fully support HTML5 features, requiring developers to implement fallback solutions or use polyfills to ensure compatibility across different platforms.
Complexity: The adoption of new HTML5 features, such as Canvas and WebSockets, can introduce complexity to web development projects, requiring additional time and effort to master these technologies.
Security: HTML5's local storage feature, while convenient for storing data locally on the client side, may pose security risks if sensitive information is stored without proper encryption or protection measures.
Performance: HTML5-based web applications may experience performance issues, especially on low-powered devices or older hardware, due to the increased processing and memory requirements of modern web technologies.
Media Licensing: Implementing multimedia content, such as audio and video, in HTML5 may require dealing with complex licensing agreements and royalties, especially for commercial projects, which can add to the overall cost and complexity of development.
17. What is <!doctype>?
The <!DOCTYPE> declaration is not an HTML tag but an instruction to the web browser about what version of HTML the page is written in. It informs the browser how to interpret and render the content of the HTML document correctly. The <!DOCTYPE> declaration comes before the <html> tag at the beginning of the HTML document.
Including the <!DOCTYPE> declaration ensures browsers render pages consistently in Standards mode, not Quirks mode, avoiding rendering issues across browsers. It's necessary for proper rendering and compatibility of HTML documents on different browsers.
18. Explain the new form input type in HTML.
<input type="datetime-local">: This input type allows users to select both date and time in a local timezone.
<input type="date">: It provides a date picker interface for selecting dates.
<input type="month">: Users can select a month and year from a drop-down menu.
<input type="week">: This input type allows users to select a specific week and year.
<input type="time">: Users can select a time value (hours and minutes) using a time picker interface.
<input type="number">: This input type restricts input to numeric values and can be used for numerical input.
<input type="range">: It displays a slider control that allows users to select a value from within a specified range.
<input type="email">: This input type is used for entering an email address and typically triggers validation for a valid email format.
<input type="url">: It allows users to input a URL and often triggers validation for a valid URL format.
19. What is a hyperlink? Does it only apply to text?
A hyperlink is a reference or navigation element in a document that allows users to navigate to another location within the same document or to another document, webpage, or resource. It is typically represented as clickable text or an image that, when clicked or activated, directs the user to the linked location.
Hyperlinks are not just for text; they work with images and other HTML elements too. In HTML, we use the tag to create them, and the href attribute sets where they lead. So, you can make links with both text and images, giving you design and interaction options.
20. Explain web storage in HTML 5.
Web storage in HTML5 allows web applications to store data locally within the user's browser.
It offers two types: Session Storage, which persists data for the duration of the page session, and Local Storage, which retains data even after browser closure.
With up to 5 MB of storage per domain, Web Storage provides a more efficient and secure alternative to traditional cookies for storing key-value pairs of data directly in the browser.
21. What is the difference between the header and the h1 tag?
The header element in HTML is used to define a container for introductory content or navigation links at the top of a webpage. It typically includes elements like headings, logos, navigation menus, or search forms.
<header>
<h2>The dummy text</h2>
<img src="./img/tree.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam beatae placeat veniam, tempore voluptatibus non eos nihil, repellat totam autem, odit error explicabo minus maxime nisi? Cumque autem officiis officia. </p>
</header>The h1 tag is a heading element used to define the most important heading on a webpage. It represents the main heading of the document or a section of it, and it is usually the largest and most prominent text on the page.
<h1>The h1 Tag</h1>
22. What is a web application cache in HTML5 and why is it used?
Cache works like human memory by saving the data used by the user, which reduces the loading time for the user to navigate.
When a user opens a website, the browser first checks whether this data is on the cache server or not. If it happens, it is brought directly from the cache so that the user can get that information more quickly. Which benefits the user and the website owner.
Additionally, the cache server regularly checks for content updates. If something updates, the cache also updates the version accordingly. So that users always get the most up-to-date information as well as instant access to information.
Conclusion
Preparing for your HTML interview with these 22 questions is key to landing your dream job in web development. As you head into the interview, stay positive and confident. If you don't know an answer, it's okay to admit it honestly. Promise to learn and improve. With the right approach and preparation, you'll be well on your way to success in your web development career.
I hope you completely understand all these questions and their answers. If you have any questions, you can ask them in the question box given below.