Mastering HTML Interview Questions Part-2: Explore autofocus, span, blockquote and progress tag

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

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.

Welcome back to the second part of our series! We're going to start from the basics and gradually climb up to advanced concepts, just like taking steps up a ladder of knowledge.

In this series, we're unlocking the answers to the first 10 tricky HTML interview questions. 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. Let's dive into these questions!

If you're curious to learn more about HTML and its magic, check out the official guide from the World Wide Web Consortium (W3C) at HTML — World Wide Web Consortium.

For nifty tips and tricks on making HTML work like a charm, the Mozilla Developer Network (MDN) has a user-friendly guide just for you. Discover it at HTML — Mozilla Developer Network.

And if you're interested in making your website easy for everyone to use, the Web Accessibility Initiative (WAI) website is a goldmine of helpful resources. Find them at Web Accessibility Initiative.

Remember, these extra resources can provide more information to help you grasp HTML better, along with the questions and examples we're covering.

Table Of Contents

1. How can you set the default checked state for a checkbox or radio button in HTML?
2. Explain the purpose of the autofocus attribute in <input> tags
3. What is the purpose of the span element in HTML?
4. What is the purpose of the <blockquote> element in HTML?
5. Explain the purpose of the contenteditable attribute in HTML.
6. What is the purpose of the <progress> element in HTML5?
7. How can you create a hyperlink that sends an email when clicked?
8. How can you create an ordered list in HTML?
9. How can you create an unordered list in HTML?
10. How can you create an ordered list with uppercase Roman numerals in HTML?

1- How can you set the default checked state for a checkbox or radio button in HTML?

👉 Answer:

To make checkboxes or radio buttons start checked, use the checked attribute.

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

2- Explain the purpose of the autofocus attribute in <input> tags

👉 Answer:

Autofocus makes an input field ready for typing as soon as a webpage loads.

<input type="text" name="username" autofocus>

3- What is the purpose of the span element in HTML?

👉 Answer:

Think of <span> as a tiny box for styling parts of a larger text block. It has no semantic meaning on its own but is useful for styling or targeting specific parts of the content.

<p>My name is <span class="highlight">Abidullah786</span>.</p>

4- What is the purpose of the <blockquote> element in HTML?

👉 Answer:

The <blockquote> element shows quoted content, setting it apart from the rest such as a quote from another source. It helps distinguish quoted content from the surrounding text.

<blockquote>
  <p>This is a quoted text.</p>
</blockquote>

5- Explain the purpose of the contenteditable attribute in HTML.

👉 Answer:

The contenteditable attribute lets you edit an element's content, like a word processor. It can be applied to any HTML element, enabling rich text editing within the browser.

<div contenteditable="true">You can edit this.</div>

6- What is the purpose of the <progress> element in HTML5?

👉 Answer:

The <progress> element represents the progress of a task or process, providing a visual indication of the completion percentage.

<progress value="69" max="100"></progress>

7- How can you create a hyperlink that sends an email when clicked?

👉 Answer:

Use mailto: in the href attribute to create an email link.

<a href="mailto:[e-mail]">Send email</a>

8- How can you create an ordered list in HTML?

👉 Answer:

Use <ol> for numbered lists.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

9- How can you create an unordered list in HTML?

👉 Answer:

Use <ul> for lists without numbers.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

10- How can you create an ordered list with uppercase Roman numerals in HTML?

👉 Answer:

Use the type attribute of the

element and set it to “I” to display uppercase Roman numerals e.g. <ol type="I">

<ol type="I">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Conclusion

In this second part, we've dived into HTML essentials, empowering you to conquer interviews with confidence. From checkbox tricks to crafting lists and email links, your HTML prowess is growing. Stay curious for our next advanced HTML installment, where we'll build upon this foundation. Keep practicing, and let's continue this journey together!

We're excited to hear your thoughts! Share your comments below.



Let's connect on Twitter, LinkedIn, and GitHub to stay updated and join the conversation!