HTML question and answer

1. What is HTML?

Ans: HTML stands for HyperText Markup Language. It is used to design web pages using a
markup language.HTML uses a set of tags to define the structure and content of a web page.
Hypertext establishes the link between the web pages and markup language is used to describe
the text document within the tag which defines the structure of web pages.

2. What is the difference between HTML and HTML5

HTML HTML5

Does not allow JavaScript to run in the Using JS Web worker API in HTML5 it allows
browser. JavaScript to run in the background.

It didn’t support audio and video without the It supports audio and video controls with the
use of Flash player support. use of <audio> and <video> tags.

It does not allow drag-and-drop effects. It allows drag-and-drop effects.

3. What is!DOCTYPE?

A doctype or document-type declaration is an instruction that tells the web browser about the
markup language in which the current page is written. The doctype is not an element or tag, it
lets the browser know about the version of or standard of HTML or any other markup language
that is being used in the document.

4. What is HTML tag?

Ans: In HTML, a tag is a markup element used to define and enclose different parts of a
document's content. Tags are represented by angled brackets (<>) and come in pairs: an
opening tag and a closing tag. The opening tag denotes the beginning of an element, while the
closing tag indicates its end.

5. What are attributes?

Ans: Attributes are added to HTML elements to provide extra information or modify behavior.
They consist of name-value pairs and enhance element characteristics such as styling,
identification, source specification, behavior control, and link definition.

6. What is the difference between HTML elements and tags?

Ans: HTML elements communicate to the browser to render text. When the elements are
enclosed by brackets <>, they form HTML tags. Most of the time, tags come in a pair and
surround content.
7. What is the layout of HTML?

Ans: The layout of an HTML document refers to how its elements are structured and positioned
on a web page. HTML provides a variety of techniques to create different layouts of the page.

● <header>: It is 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>: It is used to define content aside from the content (like a sidebar)
● <footer>: It is used to define a footer for a document or a section

8. How to redirect to a particular section of a page using HTML?

Ans: The Anchor tag uses to redirect to a particular section on the same page. Using “id
attribute” to the section that want to show and use the same id in the href attribute with “#” in the
anchor tag. So that On clicking a particular link, the user will be redirected to the section that
has the same id mentioned in the anchor tag.

<a href=”#home_section”> Home </a>

<section id=”home_section”>
home content
</section>

9. How do you create a link that will connect to another web page when clicked?

Ans: To create hyperlinks, or links that connect to another web page, use the href tag. The
general format for this is: <a href=”site”>text</a>
Replace “site” with the actual page URL that is supposed to be linked to when the text is clicked.

10. How are comments added in HTML?

Ans: The comment tag (<!– Comment –>) is used to insert comments in the HTML code.

Types of HTML Comments: There are three types of comments in HTML which are:

● Single-line comment
● Multi-lines comment
● Using <comment> tag

11. How many HTML heading levels are there?

Ans: H1, H2, H3, H4, H5, and H6 are the heading elements in HTML. These components can
be used to build a hierarchical table of contents for HTML text. H1 is at the highest level and H6
at the least.
12. What are the different types of lists in HTML?

Ans: A list is a record of short pieces of related information used to display the data or any
information on web pages in the ordered or unordered form. HTML offers 3 ways for specifying
lists of information. All lists must contain one or more list elements. The types of lists that can be
used in HTML are:

● Unordered List: It will list the items using plain bullets.

● Ordered List: It will use different schemes of numbers to list your items.
● Definition List: It arranges your items in the same way as they are arranged in a
dictionary.

13. What is the difference between block and inline elements?

Ans: In HTML and CSS, elements are classified into two main types: block-level elements and
inline elements. The key difference between these two types lies in how they behave within the
document flow and how they are displayed on the page.

Block-level elements: Block-level elements start on a new line and occupy the full available
width of their parent container by default.
Examples of block-level elements include <div>, <p>, <h1> to <h6>, <ul>, <li>, <form>, and
many others.
Inline elements: Inline elements do not start on a new line and only occupy the necessary
width based on their content.
Examples of inline elements include <span>, <a>, <strong>, <em>, <img>, <input>, and others.

14. What is the use of alt attribute in images?

Ans: The <img> alt attribute is used to specify the alternate text for an image. It is useful when
the image is not displayed. It is used to give alternative information for an image.

Syntax:

<img alt="text">

15. What is the relationship between the border and rule attributes?

Ans: Default cell borders, with a thickness of 1 pixel, are automatically added between cells if
the border attribute is set to a nonzero value. Likewise, If the border attribute is not included, a
default 1-pixel border appears if the rules attribute is added to the <table> tag.

16. What are Semantic tags?

Ans: Semantic tags in HTML are elements that provide meaning and context to the structure
and content of a web page. They are used to describe the purpose or type of content contained
within the tags. These semantic tags provide a more meaningful structure to the HTML
document, making it easier for both humans and machines to understand the content and its
hierarchy.
Example of Semantic tags <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
 CSS question and answer
1. What is CSS?

Ans: CSS refers to Cascading Style Sheets, which is a simply designed language intended to
simplify the process of making web pages presentable. CSS allows you to apply styles to web
pages. More importantly, CSS enables you to do this independently of the HTML that makes up
each web page.

2. How is CSS different from CSS 3?

CSS CSS3

Responsive designing is not supported in CSS3 is the latest version, hence it supports
CSS. responsive design.

CSS is very slow compared to CSS3 Whereas, CSS3 is faster than CSS.

CSS can‘t do 3D animation and CSS3 we can perform all kinds of animation
transformation. and transformations

3. What is the syntax for CSS?

Ans: A CSS style rule consists of a selector, property, and its value. The selector points to the
HTML element where the CSS style is to be applied. The CSS property is separated by
semicolons.

4. What are CSS Selectors?

Ans: CSS Selectors: CSS Selectors are used to select HTML elements based on their element
name, id, attributes, etc. It can select one or more elements simultaneously.

5. How can we add comments in CSS?

Ans: Comments are the statements in your code that are ignored by the compiler and are not
executed. Comments are used to explain the code. They make the program more readable and
understandable.
Syntax: /* content */
6. What are the different CSS border properties?

Ans: CSS border properties allow us to set the style, color, and width of the border.

Border Style: The border-style property specifies the type of border. None of the other border
properties will work without setting the border style.
Border Width: Border width sets the width of the border. The width of the border can be in px,
pt, cm or thin, medium, and thick.
Border Color: This property is used to set the color of the border. Color can be set using the
color name, hex value, or RGB value. If the color is not specified border inherits the color of the
element itself.

7. What is the difference between margin and padding??

Margin Padding

Margin is used to create space around Padding is used to create space around
elements. elements inside the border.

Margin property can be set automatically Padding property can not be set automatically

In Margin property, we can allow negative or In the Padding property, we cannot allow
float number negative values.

8. What is CSS Box Model?

Ans: The CSS box model is a container that contains multiple properties including borders,
margin, padding, and the content itself. It is used to create the design and layout of web pages.
The web browser renders every element as a rectangular box according to the CSS box model.
Box-Model has multiple properties in CSS. Some of them are given below:

● borders
● margins
● padding
● Content

9. How can we hide an element in CSS?

Ans: The style display property is used to hide and show the content of HTML elements. Using
display hidden, though The element is not visible, it still occupies the same space as if it were
visible.

To hide an element, set the style display property to “none”.

display: "none";

To show an element, set the style display property to “block”.

display: "block";
10. What are the various positioning properties in CSS?

Ans: The position property in CSS tells about the method of positioning for an element or an
HTML entity. There are five different types of position properties available in CSS:

1. Fixed
2. Static
3. Relative
4. Absolute
5. Sticky

11. What is CSS overflow?

Ans: The CSS overflow controls the big content. It tells whether to clip content or add scroll
bars. The overflow contains the following property:

❖ visible
❖ hidden
❖ scroll
❖ auto

1. Visible: The content is not clipped and is visible outside the element box.
2. Hidden: The overflow is clipped and the rest of the content is invisible.
3. Scroll: The overflow is clipped but a scrollbar is added to see the rest of the content. The
scrollbar can be horizontal or vertical.
4. Auto: It automatically adds a scrollbar whenever it is required.

12. How can we center an image in CSS?

Ans: Given an image and the task is to set the image to align to the center (vertically and
horizontally) inside a bigger div. It can be done by using the position property of the element.

13. What are CSS transitions?

Ans: The transition allows us to determine how the change in color takes place. We can use the
transitions to animate the changes and make the changes visually appealing to the user and
hence, giving a better user experience and interactivity. In this article, we will show you how to
animate the transition between the CSS properties.

14. What is Class in CSS?

Ans: In CSS, Class is used as a selector to target and apply styles to specific HTML elements.
The same class can be applied to multiple elements, allowing you to define a consistent style for
them.

Class:
● A class selector in CSS is denoted by a period (.) followed by the class name.
● Classes allow multiple elements to share the same styling.
● Multiple elements can have the same class assigned to them.
● To apply a class to an HTML element, you use the class attribute and assign it a name.
15. What is ID in CSS?

Ans: In CSS, Class is used as a selector to target and apply styles to specific HTML elements.
IDs are often used for specific element styling or JavaScript manipulation.

ID
● An ID selector in CSS is denoted by a hash (#) followed by the ID name.
● IDs are used to target a specific unique element on the page.
● Each element should have a unique ID assigned to it.
● An ID can only be applied to one element on the page.

16. What is CSS flex-box?

Ans: It is also called a flexible box model. It is basically a layout model that provides an easy
and clean way to arrange items within a container. The flex-box is a one-dimension layout. It
provides a straightforward way to distribute and align elements within a container, regardless of
their sizes or dimensions.

Flex Properties:

● flex-direction
● flex-wrap
● flex-flow
● justify-content
● align-items
● Align-content

17. What is CSS Grid?

Ans: CSS Grid is a powerful layout system in CSS that allows for the creation of
two-dimensional grid-based layouts. It provides a precise and flexible way to arrange and align
elements in rows and columns, enabling complex and responsive web page designs.

Grid Properties:

● grid-template-columns
● grid-template-rows
● grid-gap
● grid-area