HTML Deck 1 Flashcards

1
Q

What is the purpose of the <header> and <footer> tags in HTML5?

A

The <header> tag represents the introductory content of a section or a page, while the <footer> tag represents the closing content. They are typically used to provide header and footer sections for a webpage.

<header>
<h1>Welcome to My Website</h1>
</header>

<footer>
&copy; 2023 My Website. All rights reserved.
</footer>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

How can you embed an SVG (Scalable Vector Graphics) file in HTML?

A

To embed an SVG file, use the <svg> tag and include the SVG code within it.</svg>

<svg>
<circle></circle>
</svg>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Explain the purpose of the contenteditable attribute.

A

The contenteditable attribute allows elements to be editable by users directly in the browser. It is particularly useful for creating rich-text editors or editable sections on a webpage.

<div>
This content can be edited by the user.
</div>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is the purpose of the <figure> and <figcaption> tags?</figure>

A

The <figure> tag is used to encapsulate media content, such as images or videos, along with an optional caption provided by the <figcaption> tag. It helps associate the media with its description.</figure>

<figure>
<img></img>
<figcaption>A breathtaking view of nature.</figcaption>
</figure>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

How can you create a responsive image that scales with the screen size?

A

Use the max-width CSS property set to 100% to make an image responsive. This ensures that the image’s width adjusts to fit the container while maintaining its aspect ratio.

<img></img>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Explain the purpose of the download attribute in <a> tags.</a>

A

The download attribute allows users to download a linked resource instead of navigating to it. When clicked, the browser prompts the user to save the file with the specified filename.

<a>Download PDF</a>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

How can you create a checkbox input element in HTML?

A

Use the <input></input> tag with the type=”checkbox” attribute to create a checkbox input element.

<input></input>
<label>Check me</label>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Explain the purpose of the <nav> tag in HTML5.

A

The <nav> tag represents a section of a webpage that contains navigation links. It is typically used to mark the primary navigation menu of a website.

<nav>
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</nav>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

How can you embed a YouTube video in HTML?

A

To embed a YouTube video, use the <iframe> tag with the video’s embed code provided by YouTube.

<iframe></iframe>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the purpose of the hidden attribute in HTML?

A

The hidden attribute is used to hide an element from being displayed on the webpage. It can be applied to any HTML element.

<p>This paragraph is visible.</p>

<p>This paragraph is hidden.</p>

`

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

How can you create a dropdown menu in HTML?

A

To create a dropdown menu, use the <select> element along with <option> elements to represent the menu items.</option></select>

<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Explain the purpose of the placeholder attribute in “input” tags.

A

The placeholder attribute provides a hint or example value for the input field. It is displayed in the field until the user enters a value.

<input></input>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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

A

Use the checked attribute to set the default checked state for checkboxes and radio buttons.

<input></input>
<label>Check me</label>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the purpose of the required attribute in form input fields?

A

The required attribute specifies that an input field must be filled out before submitting the form.

<input></input>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

How can you create a table with HTML?

A

Use the table, tr, and td tags to create a table structure, where <tr> represents a table row and td represents a table data cell.

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Explain the purpose of the target attribute in ‘a’ tags.

A

The target attribute specifies where the linked content should be opened. It can be set to _blank to open the link in a new browser tab or window.

<a>Open in new tab</a>

17
Q

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

A

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

<a>Send email</a>

18
Q

What is the purpose of the “iframe” tag in HTML?

A

The <iframe> tag is used to embed external content, such as web pages or videos, within an HTML document.

<iframe></iframe>

19
Q

How can you disable an input field in HTML?

A

Use the disabled attribute to disable an input field, preventing user interaction.

<input></input>

20
Q

Explain the purpose of the <datalist> element in HTML5.</datalist>

A

The <datalist> element provides a list of pre-defined options for an <input></input> field. It offers autocomplete functionality and helps users select options easily.</datalist>

<input></input>

<datalist>
<option>
<option>
<option>
</datalist>
</option></option></option></datalist>

21
Q

How can you add a background image to a webpage using HTML?

A

To add a background image to a webpage, you can use the background-image CSS property within the <style> tag or in an external CSS file.</style>

<style>

  body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>
22
Q

Explain the purpose of the autofocus attribute in “input” tags.

A

The autofocus attribute allows you to specify that an input field should automatically have focus when the page loads, ready for user input.

<input></input>

23
Q

How can you create an unordered list with custom bullet points using HTML?

A

You can customize the bullet points of an unordered list using CSS by assigning a specific image or shape to the list-style-image property.

<style>

  ul {
    list-style-image: url("bullet.png");
  }
</style>

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

24
Q

What is the purpose of the “progress” element in HTML5?

A

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

<progress></progress>

25
Q

How can you create a responsive video that adjusts to different screen sizes?

A

To create a responsive video, use the max-width CSS property and set the height to auto. Wrap the video element in a container to maintain its aspect ratio.

<style>

  .video-container {
    max-width: 100%;
    height: auto;
  }
</style>

<div>
<video></video>
</div>

26
Q

Explain the purpose of the autocomplete attribute in “input” tags.

A

The autocomplete attribute allows the browser to suggest or remember previously entered values for an input field. It can be set to on or off.

<input></input>

27
Q

How can you create a tooltip for an element using HTML?

A

To create a tooltip, you can use the title attribute on an HTML element. When the user hovers over the element, the tooltip text will be displayed.

<a>Hover me</a>

28
Q

What is the purpose of the “time” element in HTML5?

A

The <time> element represents a specific point in time or a duration. It helps provide semantic meaning to dates and times on a webpage.</time>

<p>My birthday is on <time>May 15th</time>.</p>

29
Q

How can you disable the browser’s default form validation in HTML?

A

Use the novalidate attribute on the <form> tag to disable the browser’s default form validation. This allows you to implement custom validation logic.

<form>
<!-- Form fields -->
</form>

30
Q

Explain the purpose of the meter element in HTML5.

A

The <meter> element represents a scalar measurement within a known range. It is commonly used to display measurements, such as disk space usage or progress indicators.</meter>

<meter>75%</meter>

31
Q

How can you embed an audio file in HTML?

A

To embed an audio file, use the <audio> element and specify the source file using the src attribute. You can include additional attributes like controls to add playback controls.</audio>

<audio></audio>

32
Q

Explain the purpose of the defer attribute in

 tags.
A

The defer attribute is used to indicate that the script should be executed after the HTML content has been parsed. It helps improve page load performance by allowing other resources to load in parallel.


33
Q

What is the purpose of the span element in HTML?

A

The <span> element is an inline container used to group and style elements within a larger block of content. It has no semantic meaning on its own but is useful for styling or targeting specific parts of the content.</span>

<p>My name is <span>John Doe</span>.</p>

34
Q

How can you make an HTML element draggable?

A

To make an HTML element draggable, use the draggable attribute and set it to true. You can then define event handlers to control the drag-and-drop behavior.

<div>Drag me!</div>

35
Q

Explain the purpose of the pattern attribute in <input></input> tags.

A

The pattern attribute is used to specify a regular expression pattern that the input value must match. It is commonly used for form field validation.

<input></input>

36
Q

How can you create a progress bar in HTML?

A

Use the <progress> element to create a progress bar, and specify the current value using the value attribute and the maximum value using the max attribute.</progress>

<progress></progress>

37
Q

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

A

The <blockquote> element is used to indicate a section of quoted content, 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>

38
Q

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

A

Use the type attribute of the <ol> element and set it to “I” to display uppercase Roman numerals.

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

39
Q

Explain the purpose of the contenteditable attribute in HTML.

A

The contenteditable attribute allows the content of an element to be editable by the user. It can be applied to any HTML element, enabling rich text editing within the browser.

<div>Editable content</div>