Week 4 - HTML Flashcards by Muna Ahmed

What is the main purpose of headings in an HTML document?

To define sections and provide structure, establish a content hierarchy, improve accessibility and user experience, and help search engines index content.

How well did you know this?

Not at all

Perfectly

How many heading levels are there in HTML and what are they?

There are 6 heading levels: <h1> through <h6>. <h1> is the most important (main title), and <h6> is the least important.

How well did you know this?

Not at all

Perfectly

What is the correct way to use heading levels in a document?

Follow a logical hierarchy: start with <h1>, then <h2>, <h3>, etc., without skipping levels (e.g., don’t jump from <h1> to <h4>).

How well did you know this?

Not at all

Perfectly

Should headings be used to style text visually?

No. Headings should only reflect the structure and meaning of content, not be used just to style or resize text. Use CSS for styling.

How well did you know this?

Not at all

Perfectly

What are the default font sizes for each HTML heading in most browsers?

How well did you know this?

Not at all

Perfectly

Can the size of HTML headings be changed?

Yes, using CSS. But default sizes are consistent and reflect the importance of each heading level.

How well did you know this?

Not at all

Perfectly

What kind of content can go between headings?

Text, images, links, and other HTML elements relevant to that section. This helps structure and categorize information clearly.

How well did you know this?

Not at all

Perfectly

Why is heading hierarchy important for accessibility?

It allows screen readers and assistive technologies to understand the structure of the page, making it easier for users with disabilities to navigate.

How well did you know this?

Not at all

Perfectly

How do headings affect SEO (Search Engine Optimization)?

Search engines use headings to understand the structure and main topics of a page, which can influence indexing and rankings.

How well did you know this?

Not at all

Perfectly

Does a larger heading size mean more importance?

No. Importance is determined by heading level (<h1> to <h6>), not by visual size. Use headings semantically.

How well did you know this?

Not at all

Perfectly

What does the <p> tag do in HTML?

It defines a paragraph, creating spacing before and after text. It’s a block-level element that takes up the full container width.

How well did you know this?

Not at all

Perfectly

Name three inline tags used to style text and explain what they do.

<strong>: Makes text bold (used for importance).</strong>

<em>: Italicizes text (used for emphasis).</em>

<u>: Underlines text.</u>

How well did you know this?

Not at all

Perfectly

What tags are used for superscript and subscript text? Give examples.

^{: Superscript (e.g., 1^st)}

_{: Subscript (e.g., H₂O)}

How well did you know this?

Not at all

Perfectly

How can you show deleted and highlighted text?

<del>: Strikethrough (e.g., <del>$100</del>)</del>

<mark>: Highlight (e.g., <mark>Important</mark>)</mark>

How well did you know this?

Not at all

Perfectly

What is the difference between <q> and <blockquote>?</q>

<q>: Short inline quotes (adds quotation marks automatically).</q>

<blockquote>: Long block quotes, usually indented.
</blockquote>

How well did you know this?

Not at all

Perfectly

How do <cite>, cite attribute, and <footer> support quotes?</cite>

<cite>: Titles or sources of creative works.</cite>

cite attribute: Adds a URL source to quotes.

<footer>: Gives credit or attribution for a quote or section.
</footer>

How well did you know this?

Not at all

Perfectly

What do <br></br> and <hr> do?

<br></br>: Inserts a line break.

: Adds a horizontal line for section separation.

How well did you know this?

Not at all

Perfectly

When should you use <code> and <pre>?</code>

<code>: For inline code (monospaced font).</code>

<pre>: For preformatted text that preserves spaces and line breaks.
</pre>

How well did you know this?

Not at all

Perfectly

What are the three types of lists in HTML?

<ul>: Unordered list (bullets).

<ol>: Ordered list (numbers).

<dl>: Definition list with <dt> (term) and <dd> (definition).
</dd></dt></dl></ol></ul>

How well did you know this?

Not at all

Perfectly

What are nested lists, and why are they used?

Lists inside other lists; used to show hierarchy (e.g., substeps in a recipe).

How well did you know this?

Not at all

Perfectly

What are the basic elements of an HTML table?

<table>: The table container.

<tr>: Table row.

<td>: Table data/cell.

<th>: Table header (bold, centered by default).
</th></td></tr></table>

How well did you know this?

Not at all

Perfectly

How do colspan and rowspan work in tables?

colspan: Merges cells across columns.

rowspan: Merges cells across rows.

How well did you know this?

Not at all

Perfectly

What are semantic elements in tables and why use them?

<thead>, <tbody>, <tfoot>: Group parts of a table for clarity and accessibility.
Improves structure and screen reader navigation.
</tfoot></tbody></thead>

How well did you know this?

Not at all

Perfectly

Why are table attributes like border and align considered outdated?

They’re mostly deprecated in HTML5. Use CSS instead for styling.

How well did you know this?

Not at all

Perfectly

What are the main attributes of the tag?

src: Image URL alt: Text if image fails to load or for screen readers width & height: Size control

Compare common image formats and when to use them.

JPEG: Best for photos PNG: Transparency, graphics GIF: Animations SVG: Scalable vector graphics WebP: Smaller, high-quality (check support)

What is the difference between relative and absolute image paths?

Relative: File within your project folder Absolute: Full URL to a hosted image

What does srcset do in responsive images?

Provides multiple versions of an image for different screen sizes and resolutions.

What tag is used for hyperlinks and what attribute specifies the URL?

tag href attribute specifies the destination URL

List different types of links in HTML.

Internal External Anchor (to same page sections) Email (mailto:) Telephone (tel:)

What does target="_blank" do in a link?

Opens the linked page in a new tab.

Name a few helpful link attributes.

download: Forces file download rel: Defines relationship title: Tooltip on hover

How do you embed videos and audio in HTML?

Use

What are common video and audio file formats?

Video: MP4, WebM Audio: MP3, Ogg

What are codecs and why do they matter?

They compress/decompress media. Common ones: H.264 (video), MP3/AAC (audio).

How can videos be made responsive?

Use media attribute in , the poster image for previews, and CSS media queries.

Why is testing media across devices and browsers important?

To ensure compatibility, smooth playback, and accessibility for all users.

What is the purpose of an HTML form?

To collect user input and interact with the webpage.

Name common uses of HTML forms.

What does the

It defines the form and contains all the input elements.

What does the action attribute in a form do?

Specifies the URL where the form data should be sent.

What does the method attribute specify?

The HTTP method used to send form data (GET or POST).

Difference between GET and POST methods?

GET sends data in the URL (less secure), POST sends data in the request body (more secure).

What does the element do?

Creates fields for user input.

List 5 common type attributes used with

text, email, number, password, checkbox.

What does the name attribute do in an input field?

Identifies the data for server-side processing.

What does the required attribute do?

Ensures a field must be filled before submission.

What is the purpose of the element?

Provides accessible text for an input field.

What does

do?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Creates a multi-line input field.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='50' id='card-596509340'>
<div class='header'>
50
</div>
<div class='card-face question'>
<div class='question-content'>
What element is used to create a dropdown list?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
<select>, with nested <option> elements.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='51' id='card-596509586'>
<div class='header'>
51
</div>
<div class='card-face question'>
<div class='question-content'>
What does the multiple attribute in <select> allow?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
A: Multiple options to be selected.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='52' id='card-596509696'>
<div class='header'>
52
</div>
<div class='card-face question'>
<div class='question-content'>
What does <fieldset> do?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Groups related form fields.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='53' id='card-596509740'>
<div class='header'>
53
</div>
<div class='card-face question'>
<div class='question-content'>
What does <legend> do?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Adds a caption to a <fieldset> group.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='54' id='card-596509868'>
<div class='header'>
54
</div>
<div class='card-face question'>
<div class='question-content'>
What does the readonly attribute do?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Allows viewing but prevents editing of input.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='55' id='card-596509960'>
<div class='header'>
55
</div>
<div class='card-face question'>
<div class='question-content'>
What does the disabled attribute do?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Disables the input so it can't be edited or submitted.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='56' id='card-596510135'>
<div class='header'>
56
</div>
<div class='card-face question'>
<div class='question-content'>
What is the use of the pattern attribute?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Enforces input format using regular expressions.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='57' id='card-596510170'>
<div class='header'>
57
</div>
<div class='card-face question'>
<div class='question-content'>
How is inline styling applied in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Using the style attribute in an element tag.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='58' id='card-596510232'>
<div class='header'>
58
</div>
<div class='card-face question'>
<div class='question-content'>
What is an internal stylesheet?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
A <style> tag in the <head> section with CSS rules.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='59' id='card-596510392'>
<div class='header'>
59
</div>
<div class='card-face question'>
<div class='question-content'>
Name three ways to apply color in CSS.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Color names, hexadecimal, RGB values.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='60' id='card-596510444'>
<div class='header'>
60
</div>
<div class='card-face question'>
<div class='question-content'>
What is the <span> tag used for?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
To style small inline portions of text.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='61' id='card-596510494'>
<div class='header'>
61
</div>
<div class='card-face question'>
<div class='question-content'>
What is the <div> tag used for?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
To group block elements for styling or layout.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='62' id='card-596510691'>
<div class='header'>
62
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the id attribute?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Gives an element a unique identifier.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='63' id='card-596510729'>
<div class='header'>
63
</div>
<div class='card-face question'>
<div class='question-content'>
What is the class attribute used for?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Groups elements to apply the same style or script.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='64' id='card-596511620'>
<div class='header'>
64
</div>
<div class='card-face question'>
<div class='question-content'>
What does the title attribute do?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Shows a tooltip on hover.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='65' id='card-596511774'>
<div class='header'>
65
</div>
<div class='card-face question'>
<div class='question-content'>
What does hidden do?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Hides the element from view.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='66' id='card-596511808'>
<div class='header'>
66
</div>
<div class='card-face question'>
<div class='question-content'>
What is the lang attribute used for?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Specifies the language of the element’s content.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='67' id='card-596512115'>
<div class='header'>
67
</div>
<div class='card-face question'>
<div class='question-content'>
What does the onclick attribute do?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Executes JavaScript when an element is clicked.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='68' id='card-596512223'>
<div class='header'>
68
</div>
<div class='card-face question'>
<div class='question-content'>
What are data attributes used for?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Storing custom data in HTML elements (data-*).
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='69' id='card-596512502'>
<div class='header'>
69
</div>
<div class='card-face question'>
<div class='question-content'>
What is a favicon?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
A small icon shown in browser tabs/bookmarks to represent a site.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='70' id='card-596512726'>
<div class='header'>
70
</div>
<div class='card-face question'>
<div class='question-content'>
How do you add a favicon to a site?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Use <link rel="icon" href="favicon.ico"> in the <head>.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='71' id='card-596513218'>
<div class='header'>
71
</div>
<div class='card-face question'>
<div class='question-content'>
What does an <iframe> do?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Embeds external content like videos or maps into a webpage.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='72' id='card-596513274'>
<div class='header'>
72
</div>
<div class='card-face question'>
<div class='question-content'>
Name three key attributes of <iframe>.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
src, width/height, allowfullscreen.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='73' id='card-596513586'>
<div class='header'>
73
</div>
<div class='card-face question'>
<div class='question-content'>
What are HTML entities?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Codes for characters that can't be typed directly (e.g., < for <).
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='74' id='card-596513641'>
<div class='header'>
74
</div>
<div class='card-face question'>
<div class='question-content'>
Give three HTML entity examples.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
&, ©, ♥.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='75' id='card-596513737'>
<div class='header'>
75
</div>
<div class='card-face question'>
<div class='question-content'>
How are emojis added in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Using Unicode (e.g., 😄) or entity codes.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='76' id='card-596513944'>
<div class='header'>
76
</div>
<div class='card-face question'>
<div class='question-content'>
What is an image map?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
An image with clickable areas (hotspots).
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='77' id='card-596514121'>
<div class='header'>
77
</div>
<div class='card-face question'>
<div class='question-content'>
Which two elements are used to create image maps?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
<map> and <area>.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='78' id='card-596514515'>
<div class='header'>
78
</div>
<div class='card-face question'>
<div class='question-content'>
What does the coords attribute define?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The shape and position of a clickable area.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='79' id='card-596514814'>
<div class='header'>
79
</div>
<div class='card-face question'>
<div class='question-content'>
What is an HTML API?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Tools that allow interaction between HTML and browser features.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='80' id='card-596514904'>
<div class='header'>
80
</div>
<div class='card-face question'>
<div class='question-content'>
What does the Geolocation API do?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Retrieves the user's geographic location.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='81' id='card-596516387'>
<div class='header'>
81
</div>
<div class='card-face question'>
<div class='question-content'>
Difference between localStorage and sessionStorage?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
localStorage persists after closing the browser; sessionStorage doesn't.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='82' id='card-596516712'>
<div class='header'>
82
</div>
<div class='card-face question'>
<div class='question-content'>
What does the Notifications API do?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Sends messages to users, even outside the browser tab.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='83' id='card-596516942'>
<div class='header'>
83
</div>
<div class='card-face question'>
<div class='question-content'>
What are the two main methods for creating graphics in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
<canvas> and SVG (Scalable Vector Graphics).
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='84' id='card-596517064'>
<div class='header'>
84
</div>
<div class='card-face question'>
<div class='question-content'>
What is the difference between <canvas> and SVG?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Canvas: Raster-based, uses JavaScript to draw, ideal for dynamic/interactive graphics.

SVG: Vector-based, uses XML markup, ideal for static or scalable graphics.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='85' id='card-596518058'>
<div class='header'>
85
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the <canvas> element?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
To draw graphics (shapes, images, animations) using JavaScript.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='86' id='card-596518144'>
<div class='header'>
86
</div>
<div class='card-face question'>
<div class='question-content'>
What attributes does <canvas> typically have?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
width, height, and id.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='87' id='card-596518197'>
<div class='header'>
87
</div>
<div class='card-face question'>
<div class='question-content'>
What happens if a browser doesn't support <canvas>?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Content inside the <canvas> tag is shown as fallback.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='88' id='card-596518351'>
<div class='header'>
88
</div>
<div class='card-face question'>
<div class='question-content'>
What JavaScript method is used to get the drawing context?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
getContext("2d") or getContext("webgl").
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='89' id='card-596518405'>
<div class='header'>
89
</div>
<div class='card-face question'>
<div class='question-content'>
Example: How do you draw a rectangle using <canvas> in JavaScript?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(10, 10, 100, 50);
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='90' id='card-596518731'>
<div class='header'>
90
</div>
<div class='card-face question'>
<div class='question-content'>
What does SVG stand for?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Scalable Vector Graphics.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='91' id='card-596518932'>
<div class='header'>
91
</div>
<div class='card-face question'>
<div class='question-content'>
How are SVG graphics created in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Using XML-like tags such as <svg>, <rect>, <circle>, <line>, <path>.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='92' id='card-596519200'>
<div class='header'>
92
</div>
<div class='card-face question'>
<div class='question-content'>
What is the main advantage of SVG over Canvas?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
SVG graphics are resolution-independent and searchable/editable as part of the DOM.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='93' id='card-596519312'>
<div class='header'>
93
</div>
<div class='card-face question'>
<div class='question-content'>
How is text added to an SVG graphic?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
How is text added to an SVG graphic?
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='94' id='card-596519394'>
<div class='header'>
94
</div>
<div class='card-face question'>
<div class='question-content'>
When is <canvas> preferred over SVG?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
For complex, real-time graphics like games, animations, or charts with many objects.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22865901&returnTo=%2Fpacks%2F22865901%2Fsubscribe&source=preview-card&subject=TM252' data-card-is-blurrable data-number='95' id='card-596519544'>
<div class='header'>
95
</div>
<div class='card-face question'>
<div class='question-content'>
When is SVG preferred over <canvas>?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
For scalable icons, static illustrations, logos, or graphics requiring accessibility and DOM interaction.
</div>
</div>
</div>

</div>
</div>
</div>
<div class='flashcards-sidebar'>
<div class='sidebar-header'>
<div class='react-component' id='flashcards-search-bar'>
<div class='placeholder market-search-bar' id='flashcards-search-bar-placeholder'></div>
</div>
</div>
<div class='sidebar-content'>
<p class='deck-subject-heading'>
<a class="decks-in-subject-link" href="/packs/tm252-22865901"><span class="pack-name">TM252</span> (7 decks)
</a></p>
<ul class='deck-list-items'>
<a class='deck-link ' href='/flashcards/week-1-18832220/packs/22865901'>
<li class='deck-list-item'>Week 1</li>
</a>
<a class='deck-link ' href='/flashcards/week-2-18832292/packs/22865901'>
<li class='deck-list-item'>Week 2</li>
</a>
<a class='deck-link ' href='/flashcards/week-3-18834104/packs/22865901'>
<li class='deck-list-item'>Week 3</li>
</a>
<a class='deck-link  selected' href='/flashcards/week-4-html-18834136/packs/22865901'>
<li class='deck-list-item'>Week 4 - HTML</li>
</a>
<a class='deck-link ' href='/flashcards/week-4-css-18920995/packs/22865901'>
<li class='deck-list-item'>Week 4 - CSS</li>
</a>
<a class='deck-link ' href='/flashcards/week-5-18930383/packs/22865901'>
<li class='deck-list-item'>Week 5</li>
</a>
<a class='deck-link ' href='/flashcards/week-10-19137052/packs/22865901'>
<li class='deck-list-item'>Week 10</li>
</a>
</ul>
</div>
</div>
</div>
<div id='tooltip-controller'></div>
<div data='{"packId":22865901,"source":"spaced-repetition-modal","subject":"TM252","resources":{"deckId":18834136,"packId":22865901},"returnTo":"/packs/22865901/subscribe"}' id='spaced-repetition-modal-controller'></div>
<div id='banner-controller'></div>
<div id='dialog-modal-controller'></div>

<div class='band band-footer'>
<div class='footer-main'>
<ul class='sections'>
<li class='section key-links'>
<p class='section-heading'>
Key Links
</p>
<ul class='options-list'>
<li class='option'>
<a id="footer-pricing-link" class="option-link" href="/pricing?paywall=upgrade">Pricing</a>
</li>
<li class='option'>
<a class="option-link" href="/companies">Corporate Training</a>
</li>
<li class='option'>
<a class="option-link" href="/teachers">Teachers & Schools</a>
</li>
<li class='option'>
<a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://itunes.apple.com/us/app/brainscape-smart-flashcards/id442415567?mt=8">iOS App</a>
</li>
<li class='option'>
<a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal">Android App</a>
</li>
<li class='option'>
<a class="option-link" target="_blank" rel="noopener" href="https://www.brainscape.com/faq">Help Center</a>
</li>
</ul>
</li>
<li class='section subjects'>
<p class='section-heading'>
Subjects
</p>
<ul class='options-list'>
<li class='option'>
<a class="option-link" href="/subjects/medical-nursing">Medical & Nursing</a>
</li>
<li class='option'>
<a class="option-link" href="/subjects/law">Law Education</a>
</li>
<li class='option'>
<a class="option-link" href="/subjects/foreign-languages">Foreign Languages</a>
</li>
<li class='option'>
<a class="option-link" href="/subjects-directory/a">All Subjects A-Z</a>
</li>
<li class='option certified-classes'>
<a class="option-link" href="/learn">All Certified Classes</a>
</li>
</ul>
</li>
<li class='section company'>
<p class='section-heading'>
Company
</p>
<ul class='options-list'>
<li class='option'>
<a class="option-link" href="/about">About Us</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" rel="nofollow noopener noreferrer" href="https://brainscape.zendesk.com/hc/en-us/articles/115002370011-Can-I-earn-money-from-my-flashcards-">Earn Money!</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="https://www.brainscape.com/academy">Academy</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="https://brainscapeshop.myspreadshop.com/all">Swag Shop</a>
</li>
<li class='option'>
<a target="_blank" rel="nofollow noopener" class="option-link" href="/contact">Contact</a>
</li>
<li class='option'>
<a target="_blank" rel="nofollow noopener" class="option-link" href="/terms">Terms</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="https://www.brainscape.com/academy/brainscape-podcasts/">Podcasts</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="/careers">Careers</a>
</li>
</ul>
</li>
<li class='section find-us'>
<p class='section-heading'>
Find Us
</p>
<ul class='social-media-list'>
<li class='option twitter-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://twitter.com/Brainscape"><img data-src="/pks/images/shared/twitterx-af917e8b474ed7c95a19.svg" alt="twitter badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option linkedin-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.linkedin.com/company/brainscape/"><img data-src="/pks/images/shared/linkedin-2f15819658f768056cef.svg" alt="linkedin badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option facebook-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.facebook.com/Brainscape"><img data-src="/pks/images/shared/facebook-1598a44227eabc411188.svg" alt="facebook badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option youtube-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.youtube.com/c/BrainscapeNY"><img data-src="/pks/images/shared/youtube-7f2994b2dc1891582524.svg" alt="youtube badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option pinterest-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.pinterest.com/brainscape/"><img data-src="/pks/images/shared/pinterest-04f51aa292161075437b.svg" alt="pinterest badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option tiktok-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.tiktok.com/@brainscapeu"><img data-src="/pks/images/shared/tiktok-644cf4608bd73fbbb24f.svg" alt="tiktok badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option insta-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.instagram.com/brainscape/"><img data-src="/pks/images/shared/insta-210cc2d059ae807961d2.svg" alt="insta badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
</ul>
<div class='get-the-app'>
<div class='qr-code'>
<img data-src="https://www.brainscape.com/assets/cms/public-views/shared/shortio-from-homepage.png" alt="QR code" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="130" height="130" />
</div>
<div class='app-badges'>
<div class='badge apple-badge'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://apps.apple.com/us/app/brainscape-smart-flashcards/id442415567"><img data-src="/pks/images/shared/apple-badge-b6e4f380fb879821d601.svg" alt="apple badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a>
</div>
<div class='badge android-badge'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img data-src="/pks/images/shared/android-badge-a2251833dc7f6ca8879c.svg" alt="android badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class='footer-blurb'>
Brainscape helps you reach your goals faster, through stronger study habits.
<br>
© 2025 Bold Learning Solutions. <a class="option-link" href="/terms">Terms and Conditions</a>
</div>
</div>

</body>
</html>

Week 4 - HTML Flashcards

Content covered in Week 4 (95 cards)