DEV Community

Raj
Raj

Posted on

HTML & CSS Mock Interview Questions & Answers Part 2

11. Why do we use the viewport meta tag?

The viewport meta tag, typically written as , is essential for creating responsive web designs that look great on all device screens. By default, mobile browsers attempt to render desktop pages at a wide virtual viewport (often 980px), zooming out and making text unreadably small. This meta tag instructs mobile browsers to set the page viewport width equal to the physical screen width of the device and initializes the zoom scale to 100%. Without it, CSS media queries and responsive units cannot scale properly on mobile devices.
**

  1. What is an HTML element?**

An HTML element is an individual component of an HTML document that defines structure, content, or semantics within the Document Object Model (DOM). It typically consists of a opening tag (e.g.,

), content placed inside, and a corresponding closing tag (e.g.,

). Elements can also contain attributes within their opening tag to customize behavior or styling. Some elements are "void" or "self-closing" (such as or ), meaning they do not take text content or a separate closing tag.

13. What is an HTML attribute?

An HTML attribute is a special key-value pair added inside an element's opening tag to configure its behavior, provide metadata, or modify how it functions. Attributes follow a name="value" format (such as id="main", class="btn", or href="index.html") and extend the basic capability of the tag. They can control link destinations, image sources, input constraints, accessibility roles, or CSS styling references. Almost all HTML elements support global attributes like id, class, style, title, and data-* attributes.

14. What is the difference between an element and an attribute?

An element represents the entire structural unit in HTML, including the opening tag, enclosed content, nested child elements, and closing tag (e.g., Click Here). An attribute, on the other hand, is a configuration property placed inside the element's opening tag to define additional details or properties (e.g., href="link.html"). In short, an element forms the actual structural building block of the page, while an attribute modifies or defines the characteristics and behavior of that building block.

15. What is the difference between

and ?

The primary difference lies in their visual layout behavior and display properties:

is a block-level element, while is an inline element. A creates a section divider that automatically starts on a new line and spans 100% of the parent width, making it ideal for grouping large layout blocks. Conversely, a wraps smaller portions of text or elements inline without breaking the natural text flow onto a new line. Furthermore, respects all top/bottom margins and dimensions, whereas inline elements only respect horizontal margins.

16. What are heading tags?

Heading tags in HTML consist of six levels ranging from

down to

, used to establish an organized document hierarchy and outline structure for web content. The

element represents the most important main title on the page, while

represents the lowest sub-heading level. Using heading tags in a logical, non-skipping order creates a clear visual structure for reading and enables screen reader users to navigate sections easily. Search engine crawlers also heavily rely on headings to understand the main topic and structure of your page.

17. What is the difference between

and

?

The difference between

and

comes down to their visual size default and, more importantly, their semantic hierarchy and weight. The

tag is the highest-level heading that represents the single primary title or main topic of a web page, rendered largest by default browsers. In contrast,

is the lowest-level heading, rendered in the smallest text size, and used for deep sub-sections or minor details. From an SEO and accessibility perspective,

carries the greatest importance, while

carries the least structural weight.

18. What is the

tag used for?

The

tag represents a paragraph of text in an HTML document and is the standard element for displaying structural body copy. Browsers automatically add vertical white space (margins) before and after every

tag to visually separate blocks of text for readable paragraph formatting. It is a block-level element, meaning it starts on a fresh line and spans the full available width of its parent container. You should avoid putting other block-level elements (like

or headings) inside a

tag to keep DOM markup valid.

19. What is the
tag?

The
tag is a void (self-closing) element used to insert a single manual line break within text content without starting a new paragraph. It forces any text or inline content following it to move directly onto the next line while keeping everything inside the same logical block or element. Unlike creating a new

tag,
does not add extra vertical margins or paragraph spacing between the lines. It is primarily used when line breaks are a structural part of the content, such as in physical addresses, poetry, or signatures.

20. What is the


tag?

The


tag stands for Horizontal Rule and is a self-closing semantic element used to represent a thematic break or transition between topics within a page. Visually, browsers default to rendering a horizontal line across the container width to create a distinct section separator. In modern semantic HTML5, it is used to denote a shift in scene, a change of thought, or a transition in an article's narrative flow. While CSS can customize or remove its line style completely, its semantic meaning as a thematic divider remains intact.

Top comments (0)