StackScholar

HTML Interview Questions 6-10 (Meta Tags, Semantics, Graphics, Paths)

Welcome back! In the previous lesson, we established the foundations of HTML structure. Now, we are going to refine that knowledge. A Senior Developer doesn't just write tags; they write code that is search-engine friendly, architecturally sound, and easy to navigate.

In this section, we tackle the invisible but crucial parts of a webpage (Meta Tags), solve the most common confusion in semantic HTML (Section vs. Article), and look at how to handle graphics and file linking. These concepts are vital for SEO, accessibility, and building robust applications.

6. What are meta tags in HTML?

Meta tags provide "metadata" about the HTML document. Metadata is data about data. These tags live inside the <head> element and are not displayed on the page itself, but they are readable by browsers, search engines (Google), and screen readers.

Analogy: The Shipping Label
If your website is a package delivered to a user, the content (body) is the item inside. The meta tags are the shipping label on the outside. They tell the courier (browser/Google) what language it is in, who sent it, and a summary of what's inside.

Three critical meta tags you must know for an interview:

  • Charset: Defines character encoding (usually UTF-8) so emojis and special characters render correctly.
  • Viewport: Essential for responsive design. It tells mobile browsers how to scale the page.
  • Description: The short text snippet that appears under your link in Google search results.
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta name="description" content="Learn Python and React for free at StackScholar.">
  
  <meta name="author" content="John Doe">
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

7. What are self-closing tags in HTML?

In HTML, most elements have a start tag and an end tag (like <p>...</p>) because they wrap content. However, some elements are void elements—they cannot hold content or child elements. These are known as self-closing tags.

Common examples include:

  • <img> (Image)
  • <br> (Line break)
  • <hr> (Horizontal rule/line)
  • <input> (Form input)
  • <meta> (Metadata)

Note on Syntax: In HTML5, the trailing slash is optional. Writing <br> is valid. However, in frameworks like React (JSX), you must include the slash: <br />. Most modern developers use the slash out of habit to keep code consistent.

<img src="logo.png" alt="Logo">
<br>
<input type="text">

<img src="logo.png" alt="Logo" />
<br />
<input type="text" />

8. What is the difference between <section>, <article>, <div>, and <main>?

This is the ultimate semantic HTML question. Beginners use <div> for everything. Experts know exactly when to use specific containers to help SEO and screen readers understand the page structure.

TagPurposeKey Characteristic
<div>Generic container.Has no semantic meaning. Use only for styling/layout wrappers.
<main>The dominant content.Should be used once per page. Excludes header/footer/sidebar.
<section>Thematic grouping.Groups related content. Usually has a heading inside.
<article>Independent content.Self-contained. Makes sense if you syndicated it (RSS) or printed it alone.

Rule of Thumb:
- Is it a blog post, a comment, or a product card? Use <article>.
- Is it the "About Us" part of the page? Use <section>.
- Do you just need to group elements to make them flex/grid? Use <div>.

9. What is the use of the <canvas> and <svg> elements?

Both are used for graphics, but they work in fundamentally different ways.

1. SVG (Scalable Vector Graphics):
- Vector-based: Made of lines, curves, and shapes defined by math (XML).
- Scalable: Never pixelates, no matter how much you zoom in.
- DOM: Each shape is an element in the DOM. You can attach click listeners to a specific circle or path.
- Best for: Logos, icons, simple charts.

2. Canvas:
- Raster-based: A grid of pixels, like a PNG or JPEG.
- Scripted: You draw on it using JavaScript (`ctx.fillRect(...)`).
- Performance: Very fast for rendering many moving objects because it doesn't update the DOM.
- Best for: Games, complex data visualizations, particle effects.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillText("Hello World", 10, 50);
</script>

10. What is the difference between absolute and relative paths in HTML?

When you link to an image or another page (href or src), you need to provide a path.

  • Absolute Path:
    Points to a specific location regardless of where the current file is.
    - Full URL: https://www.google.com/logo.png (External link).
    - Root-Relative: /images/logo.png (Starts from the root folder of your website). This is very common in web apps.
  • Relative Path:
    Points to a location relative to the file you are currently in.
    - logo.png or ./logo.png: Look in the same folder.
    - ../logo.png: Go up one folder, then look.

Scenario: You are editing /pages/about.html. You want to show an image located at /images/team.jpg.

<img src="/images/team.jpg">

<img src="../images/team.jpg">
PreviousNext
🚀 Deep Dive With AI Scholar