Ok, Now let’s go back to HTML interview Questions!

1. WHAT IS HTML?

Before answering, I’d like to address that there’s a difference between “coding” and “programming”, because many of the answers of this question are misleading. Coding means writing code, well, obviously.

Programming means finding a way to solve a problem, i.e. an algorithm, and writing it for the computer to solve the problem by inputting data and outputting info. Now that we’ve covered this, HTML stands for Hyper Text Markup language. HTML is a language whose purpose is to mark up content. It was modelled on SGML (Standard Generalized Mark-up Language), which is a declarative general for describing record structure and attributes. it can flip textual content into snap shots, tables, links. HTML pages are saved via adding .html or .html in net page name

2. WHAT IS THE STRUCTURE OF A HTML DOCUMENT?

A browser uses HTML tags and attributes to determine how to display content, including the format, style, font size, and image to display. HTML is a case-insensitive programming language. Case insensitive means that there is no difference between upper and lower case (capital and small letters), which are both treated as the same, for example, ‘D’ and ‘d’ are both the same here.

In HTML, tags are classified into two types:
Paired Tags:-These tags are sold in sets of two. They have both opening opening(< >) and closing(</ >) tags.

Empty Tags:- That are not required to be closed: These tags are not required to be closed.

3. DIFFERENCE BETWEEN HTML ELEMENTS AND TAGS?

Elements are created using tags. And it can be nested and empty.
HTML tags are used to hold the HTML element. Whereas HTML element holds the content. HTML tag starts with < and ends with > Whatever written within a HTML tag are HTML elements. HTML tags are almost like keywords where every single tag has unique meaning.
HTML elements specifies the general content.

4. What is the difference between HTML and XHTML?

In summary, XHTML is a stricter and more structured version of HTML, Designed to be more compatible with XML. It requires proper syntax, a document type declaration, and does not allow for open tags. HTML is less strict and more forgiving, allowing for more flexibility in markup. As we know HTML stands for (Hypertext mark-up Language) and XHTML (Extensible Hypertext Mark-up Language) are both mark-up languages used for creating web pages. While they are similar in many ways, there are some important differences between the two.

1. Let’s talk about Syntax:- The syntax of XHTML is stricter than HTML. XHTML requires all tags to be properly nested and closed, while HTML allows some tags to be left open. In XHTML, all tags must be written in lowercase.

2. Let’s talk about the Document Declaration:- XHTML requires a document type declaration, Which specifies the version of XHTML being used, While HTML does not.

3. Extensibility:- XHTML is more extensible than HTML. XHTML allows for the creation of new custom tags, while HTML does not.

4. Compatibility:- XHTML is designed to be compatible in XML, While HTML is not. This means that XHTML can be parsed and processed by XML tools, while HTML cannot.

5. Error Handling:- In XHTML, any errors in the markup will cause the document to fail to render. In HTML, errors are often ignored by web browsers, allowing the document to still be displayed.

5.What is the difference between HTML4 and HTML5?

HTML4 and HTML5 are two different versions of this language, with HTML5 being the more recent and Advanced Version. Here are some of the key differences between the two:

1. Structure: HTML5 has a simpler and more flexible structure than HTML4. HTML5 uses new semantic tags, such as <header>, <nav>, <section>, <article>, <footer>, etc. that make it easier for search engines and screen readers to understand the content and structure of a web page.

2. Multimedia Support: HTML5 has native support for multimedia elements such as video and audio, which were not present in HTML4. This eliminates the need for third party plugins like Adobe Flash Player.

3. From input types: HTML5 offers new input types for forms such as date, time, email, and search, making it easier to collect data from users and improving the user experience.

4. Offline Storage: HTML5 includes new APIs that allow web applications to store data on user’s device, even when they are not connected to the internet.

5. Compatibility: HTML5 is backward compatible with HTML4, which means that older HTML4 documents can be easily converted to HTML5. However, HTML5 features may not be fully supported in older browsers.

Overall HTML5, has more advanced features and better compatibility with modern web technologies, making it the proffered choice for web development today.

6.What is the purpose of Doctype in HTML?

The DOCTYPE declaration in HTML is used to specify the type of document being displayed in a web browser. It tells the browser which version of HTML and XHTML is being used. In the document so that it can render the page correctly.

The DOCTYPE declaration is an instruction to the web browser about the version of HTML or XHTML that the web page is written in. The DOCTYPE is typically included at the beginning of an HTML document, before the <html> tag.

The DOCTYPE declaration serves several purposes, Including:

1. Ensuring that the document is rendered in the correct mode or standard.
2. Helping browsers to correctly parse and render the document.
3. Triggering quirks mode or the standard mode in the browser.
4. Providing information to the validators about the document type being used.
5. Helping developers to write valid and well formed HTML code.
In summary the DOCTYPE declaration is an essential part of any HTML and helps to ensure that the web page is correctly rendered in the browser.

7.What is the difference Between block-level element and inline elements?

In HTML and CSS, Block-level and inline elements are used to control the layout and presentation of web content.
Block level elements are those that create a rectangular box on the web page, taking up the full width available and pushing any adjacent content below it. Some common examples of block level elements are <div>, <p>, <h1>-<h6>, <ul>, <ol> and <li>. Block level elements can also have margins, padding, and borders applied to them.

Inline elements, on the other hand, are those that only take up the space they need to display their content, without creating a rectangular box. They are typically used to style small pieces of content with in a block-level element. Examples of inline element is include <span>, <a>, <img>, <strong> and <em>. Inline elements height, width, margins or padding applied to them, but they can have a border.
Overall, the main differences between block-level and inline elements is how they affect the layout of content on a web page. Block-level elements create a rectangular block that can be styled, and push any adjacent content below it, while inline elements do not create a block and only take up the space they need.

8.What are the different types of Lists in HTML?

They are over all 3 types of lists in HTML:

1. Ordered lists- which is also known as numbered lists, are lists where each item is numbered sequentially. Ordered list are created using the ‘<ol>’ element, and each list item is contained within an ‘<li>’ element.

For an example

<ol>

</ol>

2.Unordered lists- also known to be an bulleted lists, are the lists where each item is marked with a bullet point on other symbol. Unordered lists are created using the ‘<ul> element, and each list item is contained within an ‘<li>’ element.

For an example
<ul>

</ul>

3. Definition Lists: are lists that consist of terms and their definitions. Definition lists are created using the ‘<dl>’ element, and each term is contained with in a ‘<dt>’ element, while each definition is contained within a ‘<dd>’ element.

For an example
<dl>

<dd>Definition 1</dd>

<dd>Definition 2</dd>

<dd>Definition 3</dd>

</dl>

9. What is the difference between GET and POST methods in HTML forms?

In HTML forms, GET and POST are two HTTP methods used to submit data to a server.

1. Get Method: With the GET method, the form data is appended to the URL in the form of a query string. This means that the data is visible in the URL and can be bookmarked or cached. GET is typically used for requests that are idempotent, meaning they can be repeated multiple times without changing the result, such as requesting a web page or searching for information.
2. POST Method: With the post method, the form data in sent in the body of the HTTP request. This means which mean the will not be visible in the URL or cannot be bookmarked or cached. POST is typically used for requests that modify or update server data, Such as submitting a form or uploading a file.

In summary, GET is used for retrieving data while POST is used for submitting data to a server. Its quit important to choose a appropriate method depending on the type of data being transmitted and the desired behaviour of the application.

10. How can you add multimedia to a web page to a server using HTML?

There are several ways to add multimedia content to a web page using HTML, depending on the type of content you want to include. Here are some examples:
1. Adding Images: To add an image to a web page, you can use the HTML “img” tag and specify the URL of the image file in the “src” attribute. Here is an example code:

<img src=”image.jpg” alt=”Description of image”>

In this code, “image.jpg” is the URL of the image file and “Description of image” is the text that will be displayed if the image cannot be loaded.
2. Adding Videos: To add a video to a web page, You can use the HTML “video” tag and specify the URL of the video file in the “src” attribute. Here is an example code:

<video width=”320″ height=”240″ controls>

Your browser does not support the video tag.

</video>

In this code, “video.mp4” is the URL of the video file and “type” specifies the file format. The “controls” attribute adds playback controls to the video player, and the text “your browser does not support the video tag. “ Will be displayed if the browser cannot play the video.
3. Adding audio: To add an audio file to a web page, you can use the HTML “audio” tag and specify the URL of the audio file in the “src” attribute. Here is an example code.

<audio controls>

Your browser does not support the audio element.

</audio>

In this code, “audio.mp3” is the URL of the audio file and “type” specifies the file format. The “controls” attribute adds playback controls to the audio player, and the text “Your browser does not support the audio element. “will be displayed if the browser connat play the audio.

Note:- that you need to upload your multimedia files to your web server before you can use them in your HTML code. You can use an FTP client or a file manager provided by your hosting provider to upload your files to the server.

11. How can you embed a video in HTML?

in To embed a video in HTML, you can use the ‘<video>’ tag. Here’s an example of how to do it.

<video src=”video.mp4″ controls>

Your browser does not support the video tag.

</video>

In this example, the ‘src’ attribute specifies the location of the video file, and the ‘controls’ to the video player, such as play/pause, Volume, and full screen. The text “your browser does not support the video tag. “is displayed if the browser does not support the video tag. “is displayed if the browser does not support HTML5 video.

You can also add other attributes to the ‘<video>’ tag to customize the video player, such as ‘width’ and ‘height’ to set the dimensions of the player, or ‘autoplay’ to make the video play automatically when the page loads.

Here’s an example with additional attributes:

<video src=”video.mp4″ width=”640″ height=”360″ controls autoplay>

Your browser does not support the video tag.

</video>

Note that the ‘src’ attribute should be set to the location of the video file on your server or the internet, and the file should be in a compatible format (such as MP4 or WebM).

12. What is the difference between relative and absolute positioning CSS?

In CSS, Positioning refers to the way in which an HTML element is placed on a web page. There are two main types of positioning in CSS: relative positioning and absolute positioning.

Relative positioning refers to positioning an element relative to its default position on the web page. When an element is relatively positioned, it can be moved from its original position by using the top, bottom, left, and right properties. These properties specify the distance that the element should be moved from its original position.

For example, If you have an image that you want to move 10 pixels to the right of its default position, you can use the following CSS code:

img {

position: relative;

left: 10px;

}

Absolute positioning, on the other hand, refers to positioning an element relative to its closest positioned ancestor. An ancestor element is an element that contains the element you want to position. If no ancestor element is positioned, The element is positioned relative to the body element.

When an element is absolutely positioned, it is taken out of the normal flow of the document, meaning that it does not affect the positioning of other elements on the page. To position an element absolutely, you can use the top, bottom, left, and right properties, which specify the distance that the element should be positioned from the top, bottom, left, and right edges of its containing element.

For example, if you have a div that you want to position at the top-right corner of its containing element, you can use the following CSS code:

div {

position: absolute;

top: 0;

right: 0;

}

Overall, relative positioning moves an element from its default position by using the top, bottom, left, and right properties, while absolute positioning positions an element relative to its closest positioned ancestor by using the same properties.

13. What is CSS Selector?

A CSS (Cascading style sheets) selector is a pattern used to select and style specific HTML elements on web page. Selectors allow you to target specific elements or groups of elements or groups of elements in your HTML document and apply style rules to them.

There are several types of CSS selectors, including:

1. Type selectors: select elements based on their HTML tag name (e.g., ‘p’, ‘h1’, ‘div’).
2. Class selectors: select elements based on their class attributes (e.g., ‘.my-class’).
3. ID Selectors: select elements based on their ID attribute ( e.g., ‘#my-id’).
4. Attribute selector: Select elements based on their attributes (e.g., ‘[href]’, ‘[type=”checkbox’]’).
5. Pseudo-class selectors: select elements based on their state or position within the document (e.g., ‘:hover’, ‘:first-child’, ‘:nth-of-type()’).
6. Pseudo-element selectors: select specific parts of an element (e.g., ‘::before’, ‘::after’).
By using CSS selectors, you can apply styles to specific elements or groups of elements, making it easier to create a cohesive and visually appealing design for your web pages.

14. What are the different types of CSS selectors?

There are Several types of CSS selectors, Which are used to target and apply styles to specific elements in an HTML document. Here are some of the most common types of CSS selectors.

1. Type Selectors: These Selectors target elements based on their HTML tag names. For example, the selector “p” would target all paragraph elements.
2. Class Selectors: These Selectors target elements based on their class attribute. For example, the selector “.my class would target all elements with a class of “my-class”.
3. ID Selectors: These selectors target elements based on their ID attribute. For example, the selector “#my-id” would target the element with an ID of “my-id”.
4. Attribute Selectors: These Selectors target elements based on their attributes. For example, the selector “[href]” would target all elements with an href attribute.
5. Descendant Selectors: These selectors target elements that are nested inside another element. For example, The selector “ul li” would target all li elements that are descendants of ul elements.
6. Child Selectors: These selectors target elements that are direct children of another element. For example, the selector “ul>li” would target all li elements that are direct children of ul elements.
7. Adjacent Sibling Selectors: These selectors target elements that come immediately after another element. For example, the selector “h2 + p” would target the first P element that comes immediately after an h2 element.
8. General sibling selectors: These selectors target elements that come after another element, regardless of whether they are immediately adjacent or not. For example, the selector “h2 ~ p” would target all p elements that come after an h2 element.

There are also other types of CSS selectors, such as pseudo-classes and pseudo- elements, which allow for even more fine-grained targeting of elements based on their state or position in the document.

15. What is the box model in CSS?

The box model is a fundamental concept in CSS (cascading style sheets) that defines how an element is rendered in a web page. According to the box model, every element in a web page is considered to be a rectangular box, which consists of four parts:

1. Content: This is the actual content of the element, such as text, images, or videos.
2. Padding: This is the space between the content and the border of the element. Padding can be used to create space with an element.
3. Border: This is a line that surrounds the elements and separates it from the other elements on the page.
4. Margin: This is the space between the border of the element and the other elements on the page. Margins can be used to create space between elements.
In CSS, you can control the size of each of these parts using properties such as width, height, padding, border, and margin. By understanding and manipulating the box model, you can create sophisticated layouts and designs for your web pages.

16. What is a CSS framework?

A CSS (Cascading Style Sheets) framework is a pre-prepared library or set of files containing reusable CSS code that can be used to style and layout web pages quickly and consistently.

A CSS framework typically includes a set of ready-to-use CSS Classes, helper functions, and pre-defined styles for common UI components such as forms, buttons, navigation menus, grids, and typography. Frameworks can save time and effort by providing a standardized starting point for a design of a website or web application, and can also help ensure consistency across multiple pages or sections of a site.

Some popular CSS frameworks include Bootstrap, Foundation, Materialize, Bulma, and semantic UI. Each framework has its own unique set of features, design principles, customization options, So developers can choose the framework that best fits their needs and preferences.

17. What is the purpose of media queries in CSS?

Media queries in CSS are used to apply different styles to a web page based on the characteristics of the device that is being used to view the page. The Purpose of media queries is to make a website responsive, meaning that it can adapt to different screen sizes and devices.

By using media queries, developers can define specific styles for different devices, such as desktop computers, tablets, and smartphones, based on the screen size, orientation, resolution, and other properties of the device. This allows the website to be displayed correctly and optimally on any device, Providing a better user experience and increasing the accessibility and usability of the website.

Media queries are an essential component of modern web design, as they enable developers to create websites that are accessible and user-friendly across a wide range of devices, from large desktop displays to small mobile screens.

18. What is the difference between padding and margin in CSS?

In CSS, both padding and margin are used to create spacing between HTML elements. However, they work in different ways.

Padding is the space inside an element between its content and its border. It can be set using the ‘padding’ property and takes values in pixels, ems, rems, or percentages. Padding can be set separately for each side of an element using ‘padding-top’, ‘padding-right’, ‘padding-bottom’, and ‘padding-left’.

Margin, on the other hand, is the space outside an element, between its border and the adjacent elements. It can be set using the ‘margin’ property and takes values in Pixels, ems, rems, or percentages. Margin can be set separately for each side of an element using ‘margin-top’, ‘margin-right’, ‘margin-bottom’, and ‘margin-left’,.

In summary, Padding is used to add space inside an element, while margin is used to add space outside an element.

19. What is the difference between display: none and visibility: hidden in CSS?

The CSS properties ‘display’ and ‘visibility’ can both be used to hide elements on a web page, but they work in different ways:

. ‘Display: none’ removes the elements from the flow of the page entirely, So it takes up no space and is not visible to users. This means that any elements that were positioned relative to the hidden element will be rearranged, as if the hidden element did not exist.

. ‘Visibility: hidden’ hides the element from view, but it still takes up space on the page. This means that any elements that were positioned relative to the hidden element will be rearranged, as if the hidden element does not exist.

For an Example
.hidden {

display: none;

visibility: hidden;

}
In this example, both ‘display’ and ‘Visibility’ are set to ‘hidden’. This means that the element will be completely hidden from view and will take up no space on the page.

It’s important to choose the appropriate property for your use case. If you want to completely remove an element from the page layout, ‘display: none’ is the better option. If you want to hide an element while still taking up the space on the page, ‘visibility: hidden’ is going to be the best choice.

20. What is the difference between Margin and Padding in CSS?

Padding and margin are two common CSS properties used to create space around HTML elements, They their will be having an different functions.

Margin refers to the space outside an element’s border. You can use margin to decrease and increase the spaces between the elements and its neighbouring elements. For an example if you set the margin of a div to 10px, their will be a 10px space between the div and any adjacent elements.

Padding on the other hand, refers to the space between a elements content and its border. You can use padding to increase and decrease the space between the content and the border of an elements. For an example if you if you set the padding of a div to 10px there will be a 10px space between the content of the div and its border.
In Summary, padding effects the space inside an element, while margin effects the space outside an element.

21. What is the purpose of media Queries in CSS?

Media queries in CSS are used to create responsive designs that adapt to different devices, screen sizes, and orientation. The purpose of media queries is to define different styles for different media types and screen sizes, allowing web developers to create layouts and designs that work well on a variety of devices.

Media queries are written using the ‘@media’ rule, which allows you to specify a set of CSS rules that apply only when certain conditions are met, Such as the width or height of the viewport, the orientation of the device, or the resolution of the screen.

For example, you might use media queries to define different styles for a desktop computer, a tablet, and a mobile phone. By using media queries, you can ensure that your website looks and functions well on all devices, providing a better user experience for your visitors.

22. What is the purpose of the important rule in CSS?

The purpose of ‘important’ rule is a declaration in CSS, That gives priority to a specific CSS property value over other values. When a property is set with the ‘!important’ rule, It overrides all other declarations that might conflict with it, regardless of the specificity of the selector.

The ‘!important’ rule is often used when the author wants to ensure that a particular style is applied to an element regardless of any other styles that might be applied. However, it should be used with caution, as it can make it difficult to maintain and update a website’s styling.
It is generally considered good practice to avoid using the ‘!important’ rule whenever possible and to use more specific selectors and styles instead.

23. What is the difference between class and ID in CSS?

In CSS, both classes and IDs are used to select and style specific elements on a webpage. However, there are some important differences between them:

1. Syntax: TO select an element by its class, you use a period followed by the class name (e.g., .my-class). To select an element by its ID, you use a hash symbol followed by the ID name (e.g., #my-id).

2. Usage: A class is used to group elements together that share common styles, whereas an ID is used to uniquely identify a single element on a page. In other words, you can apply the same class to multiple elements, but each element can only have one ID.

3. Specificity: ID selectors have a higher specifically than class selectors. This means that if a style is applied to an element using both an ID selector and a class selector, the ID selector will take precedence.

4. Naming Conventions: It’s common to use descriptive names for classes that reflect their purpose (e.g., .header, .nav, .button), while IDs are typically used for more specific elements (e.g., #main-content, #sidebar).

In summary, Classes are used to apply a style to multiple elements, while IDs are used to identify and style a single, unique element.

24. What is a pseudo-class in CSS?

A pseudo-class in CSS is a keyword added to a selector that specifies a special state of the selected element. Pseudo-classes allow you to apply styles to elements based on user interactions or specific conditions that can’t be determined solely from the markup language.

For example, the ‘:hover’ pseudo-class selects and styles an element when the user hovers over it with the mouse pointer. Similarly, the ‘:active’ pseudo-class selects an element when it’s being activated by the user (e.g. clicked or tapped).

Other examples of pseudo-classes include ‘:focus’, which selects an element when it receives focus, ‘:first-child’, which selects the first child of a parent element, and ‘:nth-child()’, Which selects elements based on their position in a list.

Pseudo-classes are denoted by a colon ‘:’ followed by the name of the pseudo-class. They can be used in combination with element selectors, class selectors, and ID selectors to create more specific and targeted styles.

25. What is the purpose of the @media rule in CSS?

The @media rule in CSS is used to specify different styles for different media types and/or screen sizes.

Media types can include things like print, screen, or speech, while screen sizes can refer to the width and height of the device and will ensure that the content is displayed optimally on each device. For example, a website may use @media rules to adjust the font size, layout, and other designed elements based on the size of the user’s screen or the orientation of their device (portrait or the landscape).

Here is an example of how an @media rule might be used in CSS:

@media screen and (max-width: 600px) {

/* styles for screens with a maximum width of 600px */

body {

font-size: 16px;

}

In this example, the @media rule specifies that the styles within the curly braces should only apply to screens with a maximum width of 600px. Any screens larger than that would not use these styles.

26. What is the purpose of the @font face rule in CSS?

The ‘@font-face’ rule in CSS allows you to specify a custom font to be downloaded and used on a web page, even if the font is not installed on the user’s computer.

With the ‘@font-face’ rule, you can define a font family, specify the source of the font file, and the set of the style and weight of the font. Once the font is defined using the ‘@font-face’ rule, you can use it in your CSS styles just like any other font, by specifying the font-family property.

This can we very useful for web designers who want to use non-standard fonts on their website to achieve a unique look or match a brand identity. By using the ‘@font-face’ rule, designers can ensure that their chosen font is displayed consistently across different browsers and platforms, without relying on the user’s computer to have the font installed.

However, It’s important to note that using custom fonts can increase page load times and slow down website performance, So it’s important to optimize your font usage to ensure a good user experience.

27. What is a Web safe font in HTML?

Web safe fonts are fonts that are commonly available on most operating systems and web browsers. These fonts are considered “safe” because they are widely used and are therefore more likely to display consistently across different devices and browsers.

In HTML, Web safe fonts can be specified in the CSS (cascading style sheets) using font-family property. Here is an example of how to specify a web safe font in CSS:

body {

font-family: Arial, Helvetica, sans-serif;}

In this example, “arial” is a web safe font and is the preferred font for the body text. If arial is not available on the user’s device, the browser will look for the next font in the list, “Helvitica”. If that is not available, It will use a generic sans-serif font.

Other examples of web safe fonts include Times New Roman, Georgia, Verdana, and courier new. Its quit important to know that web safe fonts are limited and may not offer the variety of styles and design options available on other fonts.

28. What is the purpose of the tag in HTML?

The <meta> tag in HTML is used to provide metadata or additional information about the HTML document. It is placed inside the head element of an element of an HTML document and does not render any visible content on the webpage.

Some common uses of the <meta> tag include:

1. Specifying the character encoding of the document using the “charset” attribute.
2. Providing a description of the content of the document using the “description” attribute, which can be used by search engines to display a snippet of the page in search results.

3. Specifying keywords related to the content of the page using the “keywords” attribute, which can also be used by search engines to determine the relevance of the page to a search query.

4. controlling the behaviour of the viewport on mobile devices using the “viewport” attribute.
5. Preventing search engines from indexing the page using the “robots” attribute.

There are many other uses for the <meta> tag as well, and it can be customized to include any type of metadata that may be useful for a particular webpage.

29. What is the purpose of the tag in HTML?

The ‘<link> tag in HTML is used to define a link between the current document and an external resource. This external resource can be a CSS file, a favicon icon, a web font, or any other type of file that can be linked to a web page.

The ‘re1’ attribute of the ‘<link>’ tag specifies the relationship between the current document and the external resource. For example, ‘rel’ attribute can be set to “stylesheet” to indicate that the linked file is a CSS file.

Here’s an example of a ‘<link>’ tag used to link to a CSS file:

<head>

<title>My Website</title>

<link rel=”stylesheet” href=”style.css”>

</head>

This code would link the HTML document to a file called “style.css” in the same directory as the HTML file, allowing the CSS styles defined in “style.css” to be applied to the HTML document.