HTML Deck 1 Flashcards
(39 cards)
What is the purpose of the <header> and <footer> tags in HTML5?
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>
© 2023 My Website. All rights reserved.
</footer>
How can you embed an SVG (Scalable Vector Graphics) file in HTML?
To embed an SVG file, use the <svg> tag and include the SVG code within it.</svg>
<svg>
<circle></circle>
</svg>
Explain the purpose of the contenteditable attribute.
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>
What is the purpose of the <figure> and <figcaption> tags?</figure>
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 can you create a responsive image that scales with the screen size?
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>
Explain the purpose of the download attribute in <a> tags.</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 can you create a checkbox input element in HTML?
Use the <input></input> tag with the type=”checkbox” attribute to create a checkbox input element.
<input></input>
<label>Check me</label>
Explain the purpose of the <nav> tag in HTML5.
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 can you embed a YouTube video in HTML?
To embed a YouTube video, use the <iframe> tag with the video’s embed code provided by YouTube.
<iframe></iframe>
What is the purpose of the hidden attribute in HTML?
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 can you create a dropdown menu in HTML?
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>
Explain the purpose of the placeholder attribute in “input” tags.
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 can you set the default checked state for a checkbox or radio button in HTML?
Use the checked attribute to set the default checked state for checkboxes and radio buttons.
<input></input>
<label>Check me</label>
What is the purpose of the required attribute in form input fields?
The required attribute specifies that an input field must be filled out before submitting the form.
<input></input>
How can you create a table with HTML?
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>
Explain the purpose of the target attribute in ‘a’ tags.
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>
How can you create a hyperlink that sends an email when clicked?
Use the mailto: protocol in the href attribute to create an email link.
<a>Send email</a>
What is the purpose of the “iframe” tag in HTML?
The <iframe> tag is used to embed external content, such as web pages or videos, within an HTML document.
<iframe></iframe>
How can you disable an input field in HTML?
Use the disabled attribute to disable an input field, preventing user interaction.
<input></input>
Explain the purpose of the <datalist> element in HTML5.</datalist>
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>
How can you add a background image to a webpage using HTML?
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>Explain the purpose of the autofocus attribute in “input” tags.
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>
How can you create an unordered list with custom bullet points using HTML?
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>
What is the purpose of the “progress” element in HTML5?
The <progress> element represents the progress of a task or process, providing a visual indication of the completion percentage.</progress>
<progress></progress>
My name is John Doe.
element in HTML?
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.This is a quoted text.
- element and set it to “I” to display uppercase Roman numerals.
- Item 1
- Item 2
- Item 3
