DEV Community

S Sarumathi
S Sarumathi

Posted on

HTML Interview Questions And Answers

1.HTML Attributes:

  • HTML attributes provide extra information about an element.
  • They always appear inside the opening tag.

Example:

<img src="photo.jpg" alt="profile picture">
Enter fullscreen mode Exit fullscreen mode

Common HTML Attributes
** 1. id:**
Gives a unique name to an element.

<p id="para1">Hello</p>
Enter fullscreen mode Exit fullscreen mode

2. Class:
Assigns a reusable class for styling or JS.

<p class="text-red">Hello</p>
Enter fullscreen mode Exit fullscreen mode

3. Style:
Adds inline CSS.

<p style="color:blue;">Hello</p>
Enter fullscreen mode Exit fullscreen mode

4. Src:
Used in images, audio, video.

<img src="image.jpg">
Enter fullscreen mode Exit fullscreen mode

5. Href:
Used in links.

<a href="https://example.com">Click</a>
Enter fullscreen mode Exit fullscreen mode

6. Alt:
Alternative text for images.

<img src="img.png" alt="logo">
Enter fullscreen mode Exit fullscreen mode

7. Title:
Shows a tooltip on hover.

<p title="This is a tooltip">Hover me</p>
Enter fullscreen mode Exit fullscreen mode

8. Placeholder
Shows hint text in input fields.

<input type="text" placeholder="Enter name">
Enter fullscreen mode Exit fullscreen mode

9. Value:
Sets the default value of input.

<input type="text" value="John">
Enter fullscreen mode Exit fullscreen mode

10. Disabled:
Disables buttons/inputs.

<button disabled>Submit</button>
Enter fullscreen mode Exit fullscreen mode

2.Semantic HTML:

  • Semantic HTML means using tags that describe the meaning and purpose of the content, not just the layout.

  • These tags clearly tell the browser, search engines, and screen readers what each part of the page represents.

Why Semantic HTML Is Important:

  • Makes pages easier to understand

  • Improves SEO (search engines read structure better)

  • Helps screen readers and accessibility tools

  • Makes code cleaner and easier to maintain

Common Semantic Tags:
1.<header>:
Top section of a page or section.

2. <nav>:
Navigation links.

3.<main>:
Main content of the page.

4. <section>:
Groups related content.
5.<article>:
Independent content like blog posts or news items.

6.<aside>:
Sidebar or extra info.

7. <footer>:
Bottom section with copyright, links, etc.

8. <figure> and <figcaption>:
Images with captions.
Example:

<header>
  <h1>My Blog</h1>
</header>

<article>
  <h2>Post Title</h2>
  <p>This is the content of the blog post.</p>
</article>

<footer>
  <p>© 2025 My Blog</p>
</footer>
Enter fullscreen mode Exit fullscreen mode

3.HTML Box Model:

Every HTML element on a webpage is treated like a box.
This box is made up of four layers, from inside to outside:

  • Content– text or image inside the element

  • Padding– space around the content

  • Border – a line around the padding

  • Margin – space outside the border (distance from other elements)

Box Model Structure:

┌───────────────────────────────┐
│           Margin              │
│  ┌─────────────────────────┐  │
│  │         Border          │  │
│  │  ┌───────────────────┐  │  │
│  │  │      Padding      │  │  │
│  │  │  ┌─────────────┐  │  │  │
│  │  │  │   Content   │  │  │  │
│  │  │  └─────────────┘  │  │  │
│  │  └───────────────────┘  │  │
│  └─────────────────────────┘  │
└───────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

Example in Css:

.box {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}
Enter fullscreen mode Exit fullscreen mode

4.Purpose of the <meta> Tag:
The <meta> tag gives important information about the webpage to the browser and search engines. It doesn’t appear on the page but controls how the page is understood and displayed.

Main Uses

- Character encoding

<meta charset="UTF-8">
Enter fullscreen mode Exit fullscreen mode

- Responsive design (mobile view):

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

- SEO description:

<meta name="description" content="My website description">
Enter fullscreen mode Exit fullscreen mode

- Keywords (rarely used now):

<meta name="keywords" content="html, css, web">
Enter fullscreen mode Exit fullscreen mode

- Auto refresh/redirect:

<meta http-equiv="refresh" content="5">
Enter fullscreen mode Exit fullscreen mode

5.self-closing tags:

  • Self-closing tags are HTML tags that do not need a separate closing tag.

  • They represent elements that don’t wrap any content.

Common Examples:

  • <br>— line break

  • <hr> — horizontal line

  • <img> — image tag

  • <input> — form input field

  • <meta> — metadata inside

  • <link> — link to external files like CSS

  • <source> — used in audio/video

  • <area>— image map area

Top comments (1)

Collapse
 
tracygjg profile image
Tracy Gilmore •

A few additional points:

  1. The id attribute is not guaranteed to be unique. i.e. duplicate ids can be specified without error or conflict.
  2. The class attribute can have a value containing any number of class names, including none, space separated.
  3. The CSS properties included in a style attribute have a higher specificity than those specified for a class, element or id and can only be overridden using the !important keyword.

Mozilla Developer Network (MDN) is your friend.