Mastering HTML Interview Questions Part-1: header & footer, input and anchor tag
Tags: html, webdev, interview, productivity
Published: 2023-08-11 02:04:26



> _This blog is originally published on my Blog website, where you can find the full version with detailed insights and examples. Click the link below to read the complete article and explore more tech-related content!_
> 👉 [Click Here](https://devwebbytes.blogspot.com/2023/08/mastering-html-tricky-interview-questions-download-file-autocomplete-header-footer.html)


## Introduction 

Imagine you're building a house. HTML (Hypertext Markup Language) is like the strong foundation that holds everything together. Knowing some cool HTML tricks can make you a superstar in job interviews.

In this series, we're going to start from the basics and go all the way to the advanced stuff, like climbing a ladder of knowledge.

In this part, we'll unlock the answers to the first 10 tricky HTML interview questions. But don't worry, we'll keep it super easy with examples. These answers will give you a boost of confidence during interviews, showing off what you know. So, let's get started with these questions!

If you're curious to know more about HTML and its magic, you can take a peek at the official guide from the World Wide Web Consortium (W3C) at [HTML — World Wide Web Consortium](https://www.w3.org/html/).

For some clever tips and tricks on making HTML work like a charm, the Mozilla Developer Network (MDN) has a friendly guide just for you. Check it out at [HTML — Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML).

And if you're keen on making your website a breeze for everyone to use, the Web Accessibility Initiative (WAI) website is like a treasure trove of helpful resources. Find them at [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/).

Remember, these extra resources can give you more information to help you understand HTML better, along with the questions and examples we're going to cover.

## Table Of Contents

1. [What's the Point of the <header> and <footer> Tags in HTML5?](#1)
2. [What's the Deal with the Placeholder in <input> Tags?](#2)
3. [How Can You Turn Off an Input Field in HTML?](#3)
4. [Why Hide Elements Using the Hidden Attribute in HTML?](#4)
5. [Why Do We Use the Required Attribute in Form Inputs?](#5)
6. [What's the Target Attribute in <a> Tags For?](#6)
7. [Why Use the Download Attribute in <a> Tags?](#7)
8. [How to Make a Checkmark Box in HTML?](#8)
9. [What's the Autocomplete Attribute in <input> Tags?](#9)
10. [What's the Use of the <nav> Tag in HTML5?](#10)

### 1- What's the Point of the <header> and <footer> Tags in HTML5? <a name="1"></a>
👉 **Answer:**

The `<header>` tag is like a section's title, and the `<footer>` tag is like a closing. They make the top and bottom parts of a webpage.

```html
<header>
  <h1>Welcome to Our Site</h1>
</header>

<footer>
  &copy; 2023 Our Site. All rights reserved.
</footer>
```

### 2- What's the Deal with the Placeholder in <input> Tags? <a name="2"></a>
👉 **Answer:**

The placeholder gives a hint or example for the input field. It's shown until you type something.

```html
<input type="text" placeholder="Enter your name">
```

### 3- How Can You Turn Off an Input Field in HTML? <a name="3"></a>
👉 **Answer:**

Use the disabled attribute to stop interaction with an input field.

```html
<input type="text" name="name" disabled>
```

### 4- Why Hide Elements Using the Hidden Attribute in HTML? <a name="4"></a>
👉 **Answer:**

The hidden attribute hides stuff on a webpage. You can use it with any HTML thing.

```html
<p>This shows up.</p>
<p hidden>This stays hidden.</p>
```

### 5- Why Do We Use the Required Attribute in Form Inputs? <a name="5"></a>
👉 **Answer:**

The required attribute says a field must be filled before sending a form.

```html
<input type="text" name="name" required>
```

### 6- What's the Target Attribute in \<a\> Tags For? <a name="6"></a>
👉 **Answer:**

The target attribute decides where a link opens. You can make it open in a new tab like this:

```html
<a href="https://www.example.com" target="_blank">Open in new tab</a>
```

### 7- Why Use the Download Attribute in \<a\> Tags? <a name="7"></a>
👉 **Answer:**

The `download` attribute makes a file download when you click a link, instead of opening it. You choose where to save it.

```html
<a href="document.pdf" download>Download PDF</a>
```

### 8- How to Make a Checkmark Box in HTML? <a name="8"></a>
👉 **Answer:**

Use `<input>` with `type="checkbox"` for a checkmark box.

```html
<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Check me</label>
```

### 9- What's the Autocomplete Attribute in <input> Tags? <a name="9"></a>
👉 **Answer:**

The autocomplete helps your browser suggest things you typed before. You can turn it on or off.

```html
<input type="text" name="email" autocomplete="off">
```

### 10- What's the Use of the <nav> Tag in HTML5? <a name="10"></a>
👉 **Answer:**

The `<nav>` tag is like a menu for a webpage. It helps you move around the site.

```html
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
```

## Conclusion

In this first part of our series about tricky HTML interview questions, we learned about things like `<header>` and `<footer>` tags, placeholders, disabling and hiding elements, and more. By knowing these things, you'll be ready for job interviews. Stay tuned for the next part, where we'll tackle even tougher HTML questions.

We're eager to hear what you think! Feel free to share your thoughts.

![Feel Free to Share](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h78nzd4ap1ve1cbped7k.gif)

Let's connect on [Twitter](https://twitter.com/abidullah_786), [LinkedIn](https://www.linkedin.com/in/abidullah786/), and [GitHub](https://github.com/abidullah786) to stay updated and join the conversation!