DEV Community

KIRAN RAJ
KIRAN RAJ

Posted on

INTERVIEW QUESTIONS html&css

1.Difference Between HTML and HTML5

  • HTML (Old versions up to HTML4)

HTML = Structure of a webpage
HTML4 was the older version before HTML5.

Characteristics:

Limited multimedia support

Required plugins like Flash, Silverlight to play videos/audios

No support for modern web apps
✅ Difference Between HTML and HTML5
🟦 HTML (Old versions up to HTML4)

HTML = Structure of a webpage
HTML4 was the older version before HTML5.

Characteristics:

  • Limited multimedia support
  • Required plugins like Flash, Silverlight to play videos/audios
  • No support for modern web apps
  • No built-in APIs

    Simple structure only for text and images

Example (HTML4):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Enter fullscreen mode Exit fullscreen mode
  • HTML5 (Latest version)

HTML5 = Modern, powerful version of HTML.
Characteristics:

  • Supports audio & video natively
  • Supports canvas, SVG, geolocation, offline storage
  • New semantic tags:
  • , , , ,
  • Mobile-friendly
  • Faster and lightweight
  • Simple doctype

Example (HTML5):

<!DOCTYPE html>
No built-in APIs
Enter fullscreen mode Exit fullscreen mode
  • Simple Difference Table:
Feature HTML (HTML4) HTML5
Version Old Latest
Doctype Long and complex Simple: <!DOCTYPE html>
Multimedia Needs plugins Built-in <video> + <audio>
Graphics No canvas <canvas> & SVG
Semantic Tags No Yes (<header>, <nav>, etc.)
Storage Cookies only LocalStorage & SessionStorage
Forms Basic New inputs like email, date, number
Mobile Support Poor Excellent
API Support None Many APIs (Geo, Drag-Drop, etc.)
  • Examples:

1️⃣ Video in HTML5

<video controls>
    <source src="movie.mp4" type="video/mp4">
</video>
Enter fullscreen mode Exit fullscreen mode

2️⃣ New Input Types

<input type="email">
<input type="date">
<input type="number">
 Video in HTML5
Enter fullscreen mode Exit fullscreen mode
  1. Difference Between HTML and CSS

1️⃣ HTML (HyperText Markup Language)

✔ HTML is used to create the structure of a webpage.
✔ It defines what appears on the page:

  • Headings
  • Paragraphs
  • Images
  • Buttons
  • Forms
  • Links

➤ Example:

<h1>Hello World</h1>
<p>This is a paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

2️⃣ CSS (Cascading Style Sheets)

✔ CSS is used to style the webpage created with HTML.
✔ It controls how the page looks:

  • Colors
  • Fonts
  • Sizes
  • Layout
  • Spacing
  • Backgrounds
  • Animations

➤ Example:

h1 {
    color: red;
    font-size: 40px;
}
Enter fullscreen mode Exit fullscreen mode
  • Simple Difference Table:
Feature HTML CSS
Purpose Structure of webpage Styling of webpage
Stands for HyperText Markup Language Cascading Style Sheets
Controls Content Design
Used for Headings, images, forms Colors, fonts, layout
File extension .html .css
Example tag <h1>, <p>, <div> h1 { color: blue; }
Browser role Shows content Makes content beautiful
  • Example: HTML + CSS Working Together HTML (structure): 
<h1 class="title">Welcome</h1>
Enter fullscreen mode Exit fullscreen mode

CSS (styling):

.title {
    color: blue;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode
  1. Difference Between HTML and XML 1️⃣ HTML (HyperText Markup Language)
  • Used to display data on web pages
  • Focuses on the look and structure
  • Has predefined tags like:

    ,

    , ,

    ,

    Example:

    <h1>Welcome</h1>
<p>This is a paragraph.</p>

    ✔ Key points:

    • Tags are fixed
    • Not case-sensitive
    • Used for presentation
    • Browsers show HTML directly

    2️⃣ XML (eXtensible Markup Language)

    • Used to store and transport data
    • Focuses on data accuracy & sharing
    • You can create your own tags

    Example:

    <student>
    <name>Kiran</name>
    <age>22</age>
</student>

    ✔ Key points:

    • Tags are custom
    • Case-sensitive
    • Used for data storage & exchange
    • Not used for displaying on browsers

    Simple Difference Table:



















































    Feature HTML XML
    Purpose Display data (web pages) Store & transport data
    Stands for HyperText Markup Language eXtensible Markup Language
    Tag Type Predefined User-defined
    Case Sensitive ❌ No ✔ Yes
    Errors Browser ignores small errors Requires well-formed data (strict)
    Use Web design Data transfer (APIs, config files)
    Closing tags Sometimes optional Always required
    Flexibility Less More

    Example to Understand
    ✔ HTML shows content:

    <p>Hello World</p>

    ✔ XML stores data:

    <message>Hello World</message>
    1. What is JavaScript? (Detailed Answer)

    JavaScript is a high-level, interpreted scripting language used primarily to make web pages dynamic and interactive. It runs in the browser (Chrome, Firefox, etc.) using JavaScript engines like V8.
    JavaScript supports features such as event handling, DOM manipulation, asynchronous programming, and network requests, making it essential for modern web applications.
    With the introduction of Node.js, JavaScript can also run on servers, enabling full-stack development using a single language.

    1. Difference between var, let, and const (Detailed Answer)

    var:

    • Function-scoped
    • Can be redeclared
    • Hoisted with undefined
    • Allows accidental overriding

    let:

    • Block-scoped
    • Cannot be redeclared in same scope
    • Hoisted but in “temporal dead zone”
    • Safer than var

    const:

    • Block-scoped
    • Value cannot be reassigned
    • Good for constants, arrays, and objects

    Example:

    var a = 10;
let b = 20;
const c = 30;
    1. Difference Between Hoisted and Non-Hoisted

    1️⃣ Hoisted

    Hoisted means the variable or function is moved to the top of its scope (before code runs).
    JavaScript does this automatically during the memory creation phase.

    ✔ What gets hoisted?

    • var declarations
    • Function declarations
    • let and const (hoisted but not initialized, so using them early causes error)

    Example (var hoisted):

    console.log(a); // undefined
var a = 10;

    ✔ Why?

    Because JavaScript treats it like this:

    var a;   // hoisted
console.log(a);
a = 10;

    Example (function hoisted):

    greet(); // Hello
function greet(){
  console.log("Hello");
}

    2️⃣ Non-hoisted

    Non-hoisted means the variable or function is NOT moved to the top.
    So you cannot use them before they are declared.

    ✔ Non-hoisted examples:

    • Function expressions
    • Arrow functions
    • Variables declared with let and const (temporal dead zone)

    📌 Example (let not hoisted for use):

    console.log(x); // ❌ Error
let x = 5;

    📌 Example (function expression not hoisted):

    sayHi(); // ❌ Error
const sayHi = function(){
  console.log("Hi");
};

Top comments (0)