DEV Community

Raj
Raj

Posted on

HTML & CSS Mock Interview Questions & Answers Part 1

1. What is HTML?

HTML stands for HyperText Markup Language, and it is the foundational standard markup language used to structure content on the World Wide Web. It provides the essential building blocks and structural skeleton for web pages by wrapping raw text, images, and forms inside descriptive tags. Unlike programming languages, HTML contains no logic or variables; instead, browsers read these markup tags to parse and render content into a visible web page. It works alongside CSS for visual presentation and JavaScript for dynamic client-side interactivity.

2. What does HTML stand for?

HTML stands for HyperText Markup Language, where each word defines a core concept of web architecture. "HyperText" refers to interconnected documents containing links (hyperlinks) that allow users to jump seamlessly from one page or resource to another. "Markup" refers to the system of structural tags used to annotate text, media, and interactive elements to define their purpose. "Language" signifies the standardized syntax and grammar rules understood and processed by every modern web browser globally.

3. What is the basic structure of an HTML document?

The basic structure of an HTML document begins with a <!DOCTYPE html> declaration, followed by the root element containing the entire document. Inside the root, it is divided into two main sections: the and the . The section holds document metadata, character encoding, the page title, and external resource links that are not directly visible on the page. The section contains all rendered visual elements like headings, paragraphs, images, forms, and scripts that users directly see and interact with.

4. Why do we use <!DOCTYPE html>?

We use <!DOCTYPE html> as an essential instruction to the browser, placed at the very top of the document before any other code. Its primary purpose is to inform the web browser which version of HTML the page is written in so it can render content correctly. In modern web development, declaring <!DOCTYPE html> ensures the browser runs in Standards Mode rather than Quirks Mode. Without this declaration, browsers may attempt to emulate older legacy behaviors, causing rendering glitches and layout inconsistencies across different browsers.

5. What is the purpose of the tag?

The tag serves as the absolute root element of an HTML document, enclosing every single piece of content on the web page except the <!DOCTYPE> declaration. It acts as the master container that tells the browser where the HTML content begins and ends. It typically holds crucial global attributes, such as lang="en", which define the primary language of the document. Every other tag, including and , must be properly nested as direct children inside this root element to maintain a valid Document Object Model (DOM) tree.

6. Why do we use lang="en"?

We use the lang="en" attribute inside the tag to explicitly declare English as the primary language of the web document. This is vital for accessibility, as screen readers rely on it to select the correct pronunciation rules, voice synth engines, and accent patterns for visually impaired users. Additionally, search engines use language attributes to properly index pages and display them to users searching in specific languages. It also assists automatic translation tools and spellcheckers in handling page text correctly without user intervention.

7. What is the purpose of the tag?

The tag is a non-visual container used to hold important metadata, document configuration, and resource declarations for the web page. It includes critical information such as character set declarations (), page title (

), viewport configurations for responsiveness, and social media tags. Furthermore, it is where external assets like CSS stylesheets, web fonts, favicon icons, and JavaScript files are linked or preloaded. Nothing rendered directly inside the <head> appears on the page body, but it fundamentally controls how the page behaves and presents itself.</p> <p><strong>8. What is the purpose of the <body> tag?</strong></p> <p>The <body> tag contains all the visible visual content and structural elements of an HTML document that users see and interact with in their browser viewport. This includes structural containers, headings, body text, image galleries, audio/video media, navigation links, buttons, and interactive forms. There can only be one <body> element per HTML document, positioned directly after the <head> tag inside the root <html> element. Modern web applications manipulate the contents of the <body> element dynamically using JavaScript to create interactive user interfaces.</p> <p><strong>9. What is the <title> tag?</strong></p> <p>The <title> tag is a required metadata element located inside the <head> section that defines the official title of the web document. This title is displayed directly on the browser tab or window, helping users identify and navigate between multiple open tabs easily. It is also the primary title text shown in search engine results pages (SERPs) and serves as the default name when a user bookmarks a website. A well-crafted title is crucial for Search Engine Optimization (SEO) and overall user experience.</p> <p><strong>10. Why do we use <meta charset="UTF-8">?</strong></p> <p>We use <meta charset="UTF-8"> to set the character encoding of the HTML document to UTF-8, which stands for UCS Transformation Format 8-bit. UTF-8 is the universal standard encoding for the modern web because it supports almost every written character, symbol, digit, and emoji across all global human languages. Declaring this tag prevents the browser from displaying garbled or broken text characters (often referred to as mojibake) when handling international text or special symbols. It should always be placed high up in the <head> section to ensure early parsing.</p>

Top comments (0)