Basic HTML Flashcards
HyperText Markup Language HTML Elements Definition HTML Base Template Code Parent-to-Child Relationship HTML Word Wrap and Whitespace Block-Level Elements in HTML Inline Elements in HTML Void Elements and Self-Closing Tags HTML Attributes (63 cards)
1
Q
What does HTML stand for?
A
HyperText Markup Language
2
Q
What is the primary purpose of HTML?
A
To structure the content of web pages and tell the browser how to display that content.
3
Q
What are the fundamental building blocks of an HTML page?
A
HTML elements
4
Q
What are the two most common file extensions for HTML documents?
A
.html and .htm
5
Q
What is the latest version of the HTML specification?
A
HTML5
6
Q
What is the default character encoding for HTML5?
A
UTF-8
7
Q
What is the role of an HTML element in a web browser?
A
It helps the browser determine the default structure and style of the content to display on the screen.
8
Q
Are HTML elements and tags the same thing? Explain the difference.
A
No, they are not the same. Tags begin or end an element in the source code, while elements are part of the DOM (Document Object Model) used for displaying the page in the browser.
9
Q
Provide a few examples of common HTML tags.
A
<html></html>
, <head></head>, <body></body>, <div></div>, <p></p>, <img></img></img>
10
Q
What generally constitutes an HTML element?
A
An opening HTML tag and a closing HTML tag
11
Q
What is a self-closing HTML tag? Provide an example.
A
A tag that doesn’t require a separate closing tag. Example: <img></img>
12
Q
What is the purpose of the <!DOCTYPE> declaration at the beginning of an HTML document?
A
It tells the HTML validator which version of HTML standards the web page’s code should comply with.
13
Q
What happens during HTML validation testing in relation to the <!DOCTYPE> declaration?
A
The HTML validator checks the web page’s code against the HTML standard specified in the <!DOCTYPE> declaration and reports any code that doesn’t comply.
14
Q
What is the role of the <html> element in an HTML document?
A
It tells the browser that the document is an HTML document and represents the root of the HTML document.
15
Q
What is the purpose of the <head> element in an HTML document? Where is it located?
A
It’s a container for metadata about the HTML document, located between the <html> and <body> tags.
16
Q
Is the content within the <head> element typically displayed on the web page? What kind of information does it usually contain?
A
No, metadata within the <head> is not displayed. It typically defines the document title, character set, styles, links, scripts, and other meta-information.
17
Q
What is the function of the <title> element?</title>
A
It sets the title that appears in the browser’s title bar or tab.
18
Q
What is the purpose of the <body> element in an HTML document?
A
It contains all the visible content that is displayed on the web page within the HTML document.
19
Q
In the context of HTML, how can the document structure be visualized in terms of relationships between elements?
A
As a family tree, illustrating the parent-to-child relationships between different HTML elements.
20
Q
Define what a ‘child’ element is in HTML.
A
An element that is directly contained within another HTML element.
21
Q
How can developers easily visualize the parent-to-child relationships between HTML tags?
A
By using the browser’s Inspector tool (or developer tools), which clearly shows the nested structure of the HTML.
22
Q
Why is understanding the parent-to-child relationship important in HTML? (Give at least two reasons)
A
- It helps in understanding the overall structure and organization of the HTML document. 2. It significantly influences how styles (CSS) are applied to the content.
23
Q
In the provided HTML code, what is the purpose of the <!DOCTYPE html> declaration?
A
It declares the document type to be HTML5, ensuring the browser renders the page in standards mode.
24
Q
Identify the root element in the given HTML structure.
A
The <html> element.
25
What is the role of the element in this HTML example?
It contains metadata about the HTML document, such as the character set and the document's title.
26
What is the purpose of the tag within the ?
It specifies the character encoding for the HTML document, in this case, UTF-8.
27
What content would be displayed in the browser tab or window title based on this code? Which HTML element defines this?
"This Title". It is defined by the element.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='28' id='card-597383706'>
<div class='header'>
28
</div>
<div class='card-face question'>
<div class='question-content'>
What is the function of the <body> element in this HTML structure?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
It contains all the visible content of the web page.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='29' id='card-597383707'>
<div class='header'>
29
</div>
<div class='card-face question'>
<div class='question-content'>
Identify the main heading in the <body> of this HTML code. What tag is used for it?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
"Main Header". It is created using the <h1> tag.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='30' id='card-597383708'>
<div class='header'>
30
</div>
<div class='card-face question'>
<div class='question-content'>
In the paragraph (<p>) element, what is the purpose of the <em> tag around the word 'dolor'? How does it typically render in a browser?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <em> tag is used to emphasize text. It typically renders as italicized text in a browser.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='31' id='card-597383709'>
<div class='header'>
31
</div>
<div class='card-face question'>
<div class='question-content'>
What is the function of the <a> tag within the paragraph? What attribute does it have in this example?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <a> tag creates a hyperlink or anchor. It has the href attribute set to '#'.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='32' id='card-597383710'>
<div class='header'>
32
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the <strong> tag around the word 'adipisicing' within the link? How does it typically render?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <strong> tag indicates strong importance. It typically renders as bold text in a browser.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='33' id='card-597383711'>
<div class='header'>
33
</div>
<div class='card-face question'>
<div class='question-content'>
What type of list is created by the <ol> tag? How are the list items marked by default?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
An ordered list. The list items (<li>) are marked with numbers by default.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='34' id='card-597383712'>
<div class='header'>
34
</div>
<div class='card-face question'>
<div class='question-content'>
How does the typical behavior of word processors differ from web browsers in handling line breaks when typing text?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Word processors automatically determine line breaks as you type, while browsers ignore Enter key presses for line breaks within the same block of text.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='35' id='card-597383713'>
<div class='header'>
35
</div>
<div class='card-face question'>
<div class='question-content'>
How do web browsers treat newline characters, tab characters, and multiple spaces within HTML content by default?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Browsers typically collapse them into a single space.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='36' id='card-597383714'>
<div class='header'>
36
</div>
<div class='card-face question'>
<div class='question-content'>
If you want to insert a line break within a paragraph in HTML, how should you achieve this?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
You need to use specific HTML markup, such as the <br> tag.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='37' id='card-597383715'>
<div class='header'>
37
</div>
<div class='card-face question'>
<div class='question-content'>
What must you do in HTML if you want to display a tab character or multiple spaces in the rendered output?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
You need to use HTML markup or CSS.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='38' id='card-597383716'>
<div class='header'>
38
</div>
<div class='card-face question'>
<div class='question-content'>
What general rule should you follow regarding the inclusion of special formatting like new lines, tabs, or multiple spaces in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
If it's not plain, continuous text, you generally need to use HTML markup or CSS.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='39' id='card-597383717'>
<div class='header'>
39
</div>
<div class='card-face question'>
<div class='question-content'>
What is a common characteristic of Block-Level Elements in HTML regarding their width?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
They typically take up the full width available to their parent element.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='40' id='card-597383718'>
<div class='header'>
40
</div>
<div class='card-face question'>
<div class='question-content'>
What is the default behavior of Block-Level Elements in terms of vertical spacing in an HTML document flow?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
They start on a new line, creating a line break before and after the element.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='41' id='card-597383719'>
<div class='header'>
41
</div>
<div class='card-face question'>
<div class='question-content'>
List as many examples of Block-Level Elements in HTML as you can remember.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
<address>, <dd>, <figcaption>, <header>, <noscript>, <table>, <article>, <div>, <figure>, <hr>, <ol>, <tfoot>, <aside>, <dl>, <footer>, <li>, <p>, <ul>, <blockquote>, <dt>, <form>, <main>, <pre>, <video>, <canvas>, <fieldset>, <h1> to <h6>, <nav>, <section>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='42' id='card-597383720'>
<div class='header'>
42
</div>
<div class='card-face question'>
<div class='question-content'>
Describe how block-level elements are displayed on a web page in relation to surrounding content.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
They form a visible block, always starting on a new line.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='43' id='card-597383722'>
<div class='header'>
43
</div>
<div class='card-face question'>
<div class='question-content'>
What type of content do block-level elements typically represent in the structure of a web page? Provide some examples.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
They often represent structural elements such as paragraphs, lists, navigation menus, footers, and headings.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='44' id='card-597383723'>
<div class='header'>
44
</div>
<div class='card-face question'>
<div class='question-content'>
Can a block-level element be nested inside an inline element? Explain why or why not.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
No, a block-level element cannot be nested inside an inline element.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='45' id='card-597383724'>
<div class='header'>
45
</div>
<div class='card-face question'>
<div class='question-content'>
Can a block-level element be nested inside another block-level element? Provide an example.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Yes, block-level elements can be nested within each other. Example: a paragraph (<p>) within a <div>.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='46' id='card-597383725'>
<div class='header'>
46
</div>
<div class='card-face question'>
<div class='question-content'>
From the list provided earlier, name five different block-level elements in HTML.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
<address>, <article>, <div>, <h1>, <ol>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='47' id='card-597383726'>
<div class='header'>
47
</div>
<div class='card-face question'>
<div class='question-content'>
How do inline elements typically relate to block-level elements in an HTML document?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Inline elements are generally contained within block-level elements.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='48' id='card-597383727'>
<div class='header'>
48
</div>
<div class='card-face question'>
<div class='question-content'>
What is a key characteristic of inline elements regarding line breaks and their flow within a document?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Inline elements do not cause a new line to appear in the document.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='49' id='card-597383728'>
<div class='header'>
49
</div>
<div class='card-face question'>
<div class='question-content'>
Provide a few common examples of inline elements in HTML that are often used within a paragraph.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
<a>, <em>, <strong>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='50' id='card-597383729'>
<div class='header'>
50
</div>
<div class='card-face question'>
<div class='question-content'>
From the list provided, name five different inline elements in HTML.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
<a>, <abbr>, <em>, <img>, <strong>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='51' id='card-597383730'>
<div class='header'>
51
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the <span> element? Is it typically a block-level or inline element?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <span> element is a generic inline container used to group and style small sections of content.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='52' id='card-597383731'>
<div class='header'>
52
</div>
<div class='card-face question'>
<div class='question-content'>
Can you nest a block-level element inside an inline element? (Think back to our discussion on block-level elements!)
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
No, you generally cannot nest a block-level element inside an inline element.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='53' id='card-597383732'>
<div class='header'>
53
</div>
<div class='card-face question'>
<div class='question-content'>
What defines a 'void element' in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Void elements are HTML elements that do not have or require a closing tag.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='54' id='card-597383733'>
<div class='header'>
54
</div>
<div class='card-face question'>
<div class='question-content'>
Do self-closing tags technically exist in HTML? What happens if a trailing slash is present in the start tag of an HTML element?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
No, self-closing tags do not technically exist in HTML. HTML parsers will ignore the trailing slash character.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='55' id='card-597383734'>
<div class='header'>
55
</div>
<div class='card-face question'>
<div class='question-content'>
Why is it often considered good practice to use a trailing slash for void elements in HTML?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Using it in HTML improves readability and can aid in compatibility if the code is ever used in XML-based languages.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='56' id='card-597383735'>
<div class='header'>
56
</div>
<div class='card-face question'>
<div class='question-content'>
Name at least five void elements in HTML from the following list.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
<br>, <hr>, <img>, <input>, <link>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='57' id='card-597383736'>
<div class='header'>
57
</div>
<div class='card-face question'>
<div class='question-content'>
For a void element like <br>, is <br></br> considered correct HTML? Why or why not?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
No, <br></br> is not correct for a void element.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='58' id='card-597383737'>
<div class='header'>
58
</div>
<div class='card-face question'>
<div class='question-content'>
Why are attributes sometimes necessary for HTML tags? Provide an example.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Some tags require attributes to function correctly. Example: the <img> tag needs the src attribute.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='59' id='card-597383738'>
<div class='header'>
59
</div>
<div class='card-face question'>
<div class='question-content'>
In the context of the <img> tag, what information does the src attribute provide?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The src attribute specifies the path or URL of the image file to be displayed.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='60' id='card-597383739'>
<div class='header'>
60
</div>
<div class='card-face question'>
<div class='question-content'>
What is the purpose of the alt attribute in the <img> tag, and why is it important for validation?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The alt attribute provides a text alternative for the image if it cannot be displayed.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='61' id='card-597383740'>
<div class='header'>
61
</div>
<div class='card-face question'>
<div class='question-content'>
Describe the general structure or syntax of an HTML attribute. What three components does it typically consist of?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
1. A space after the element name. 2. The attribute name, followed by an equals sign (=). 3. The attribute value enclosed in quotation marks.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='62' id='card-597383741'>
<div class='header'>
62
</div>
<div class='card-face question'>
<div class='question-content'>
What is the common format for attributes in HTML? Provide a general example.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Attributes in HTML usually come in name/value pairs, such as name="value".
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22894117&returnTo=%2Fpacks%2F22894117%2Fsubscribe&source=preview-card&subject=Web+Design+Essentials' data-card-is-blurrable data-number='63' id='card-597383742'>
<div class='header'>
63
</div>
<div class='card-face question'>
<div class='question-content'>
In the example <img source=‘./some/source/location’ alt=‘An image description.’ />, identify the element name, the attribute names, and their corresponding values.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
- **Element Name:** `img`
- **Attribute Name:** `source`
- **Attribute Value:** `'./some/source/location'`
- **Attribute Name:** `alt`
- **Attribute Value:** `'An image description.'`
</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/web-design-essentials-22894117"><span class="pack-name">Web Design Essentials</span> (3 decks)
</a></p>
<ul class='deck-list-items'>
<a class='deck-link selected' href='/flashcards/basic-html-18950953/packs/22894117'>
<li class='deck-list-item'>Basic HTML</li>
</a>
<a class='deck-link ' href='/flashcards/html-elements-18951018/packs/22894117'>
<li class='deck-list-item'>HTML Elements</li>
</a>
<a class='deck-link ' href='/flashcards/organization-18951132/packs/22894117'>
<li class='deck-list-item'>Organization</li>
</a>
</ul>
</div>
</div>
</div>
<div id='tooltip-controller'></div>
<div data='{"packId":22894117,"source":"spaced-repetition-modal","subject":"Web Design Essentials","resources":{"deckId":18950953,"packId":22894117},"returnTo":"/packs/22894117/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>
<script>
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
}
</script>
<script>
window.addEventListener('load', () => {
setTimeout(() => {
const script = document.createElement('script');
script.src = "/pks/js/public-deck-cards-page-7b7ec236709c09bce023.js";
script.defer = true;
document.body.appendChild(script);
}, 0);
});
</script>
<script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js" defer="defer"></script>
<script>
document.addEventListener("mainSharedready", () => {
GaHelper.setGaDimension("dimension1","No");
});
</script>
<script type='application/ld+json'>
{"@context":"https://schema.org/","@type":"Quiz","about":{"@type":"Thing","name":"Basic HTML"},"hasPart":[{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What does HTML stand for?","acceptedAnswer":{"@type":"Answer","text":"HyperText Markup Language"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the primary purpose of HTML?","acceptedAnswer":{"@type":"Answer","text":"To structure the content of web pages and tell the browser how to display that content."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What are the fundamental building blocks of an HTML page?","acceptedAnswer":{"@type":"Answer","text":"HTML elements"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What are the two most common file extensions for HTML documents?","acceptedAnswer":{"@type":"Answer","text":".html and .htm"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the latest version of the HTML specification?","acceptedAnswer":{"@type":"Answer","text":"HTML5"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the default character encoding for HTML5?","acceptedAnswer":{"@type":"Answer","text":"UTF-8"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the role of an HTML element in a web browser?","acceptedAnswer":{"@type":"Answer","text":"It helps the browser determine the default structure and style of the content to display on the screen."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Are HTML elements and tags the same thing? Explain the difference.","acceptedAnswer":{"@type":"Answer","text":"No, they are not the same. Tags begin or end an element in the source code, while elements are part of the DOM (Document Object Model) used for displaying the page in the browser."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Provide a few examples of common HTML tags.","acceptedAnswer":{"@type":"Answer","text":", , , , , "}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What generally constitutes an HTML element?","acceptedAnswer":{"@type":"Answer","text":"An opening HTML tag and a closing HTML tag"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is a self-closing HTML tag? Provide an example.","acceptedAnswer":{"@type":"Answer","text":"A tag that doesn't require a separate closing tag. Example: "}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the purpose of the declaration at the beginning of an HTML document?","acceptedAnswer":{"@type":"Answer","text":"It tells the HTML validator which version of HTML standards the web page's code should comply with."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What happens during HTML validation testing in relation to the declaration?","acceptedAnswer":{"@type":"Answer","text":"The HTML validator checks the web page's code against the HTML standard specified in the declaration and reports any code that doesn't comply."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the role of the element in an HTML document?","acceptedAnswer":{"@type":"Answer","text":"It tells the browser that the document is an HTML document and represents the root of the HTML document."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the purpose of the element in an HTML document? Where is it located?","acceptedAnswer":{"@type":"Answer","text":"It's a container for metadata about the HTML document, located between the and tags."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Is the content within the element typically displayed on the web page? What kind of information does it usually contain?","acceptedAnswer":{"@type":"Answer","text":"No, metadata within the is not displayed. It typically defines the document title, character set, styles, links, scripts, and other meta-information."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the function of the element?","acceptedAnswer":{"@type":"Answer","text":"It sets the title that appears in the browser's title bar or tab."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the purpose of the element in an HTML document?","acceptedAnswer":{"@type":"Answer","text":"It contains all the visible content that is displayed on the web page within the HTML document."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"In the context of HTML, how can the document structure be visualized in terms of relationships between elements?","acceptedAnswer":{"@type":"Answer","text":"As a family tree, illustrating the parent-to-child relationships between different HTML elements."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Define what a 'child' element is in HTML.","acceptedAnswer":{"@type":"Answer","text":"An element that is directly contained within another HTML element."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"How can developers easily visualize the parent-to-child relationships between HTML tags?","acceptedAnswer":{"@type":"Answer","text":"By using the browser's Inspector tool (or developer tools), which clearly shows the nested structure of the HTML."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Why is understanding the parent-to-child relationship important in HTML? (Give at least two reasons)","acceptedAnswer":{"@type":"Answer","text":"1. It helps in understanding the overall structure and organization of the HTML document. 2. It significantly influences how styles (CSS) are applied to the content."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"In the provided HTML code, what is the purpose of the declaration?","acceptedAnswer":{"@type":"Answer","text":"It declares the document type to be HTML5, ensuring the browser renders the page in standards mode."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Identify the root element in the given HTML structure.","acceptedAnswer":{"@type":"Answer","text":"The element."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the role of the element in this HTML example?","acceptedAnswer":{"@type":"Answer","text":"It contains metadata about the HTML document, such as the character set and the document's title."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the purpose of the tag within the ?","acceptedAnswer":{"@type":"Answer","text":"It specifies the character encoding for the HTML document, in this case, UTF-8."}}],"educationalAlignment":[{"@type":"AlignmentObject","alignmentType":"educationalSubject","targetName":"Basic HTML"}]}
</script>
</body>
</html>