HTML Elements Flashcards
Heading Element Paragraph Element Line Break and Thematic Break Elements Preformatted Text Element Text Formatting Elements Section Element List Elements Image Element Anchor Element (94 cards)
1
Q
What HTML tags are used to define headings?
A
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
</h6></h5></h4></h3></h2></h1>
2
Q
How does the importance of a heading relate to the number in the heading tag (e.g., <h1> vs. <h3>)?
A
The lower the number, the higher the importance. <h1> has the highest importance, and <h6> has the lowest.
3
Q
How is the relative importance of heading elements typically reflected when an HTML page is rendered in a browser?
A
It’s usually reflected in the formatting of the text, with higher-importance headings (like <h1>) being larger and possibly bolder than lower-importance headings (like <h6>).
4
Q
In the provided HTML example, what is the main heading of the content?
A
Lorem ipsum (defined by the <h1> tag)
5
Q
In the provided HTML example, what is the subheading that follows the main heading?
A
dolor sit amet, (defined by the <h2> tag)
6
Q
Why is it beneficial to use heading tags semantically, reflecting the structure of the content?
A
It improves accessibility for users with screen readers and helps search engines understand the hierarchy and importance of the content on the page.
7
Q
What is the primary purpose of the <p> HTML element?
A
To define a paragraph of text.
8
Q
How do browsers typically display paragraph elements in terms of line breaks?
A
A paragraph always starts on a new line.
9
Q
What kind of automatic spacing do browsers usually add around paragraph elements?
A
Browsers automatically add some white space (a margin) before and after a paragraph.
10
Q
In the provided HTML example, how many distinct paragraphs of text are there?
A
Two
11
Q
What kind of content should be enclosed within the <p> tags?
A
Blocks of text that form a paragraph.
12
Q
Can you have multiple sentences within a single <p> element?
A
Yes, a paragraph element can contain one or more sentences that form a cohesive block of text.
13
Q
Is it semantically correct to use multiple <br></br> tags to create spacing between paragraphs instead of using separate <p> elements? Why or why not?
A
No, it is generally not semantically correct. <p> elements define distinct blocks of content, and browsers add default spacing. Using <br></br> tags for paragraph spacing is a presentation hack and doesn’t convey the structural meaning of paragraphs.
14
Q
What is the purpose of the <br></br> HTML element?
A
To insert a line break (carriage return) in the text.
15
Q
When is the <br></br> element particularly useful?
A
For content where the division of lines is significant, such as in poems or addresses.
16
Q
Is <br></br> a block-level or an inline element?
A
Inline
17
Q
Does the <br></br> element have a closing tag?
A
No, it is a void element.
18
Q
What is the purpose of the <hr> HTML element?
A
To create a thematic break in the content, often displayed as a horizontal rule.
19
Q
What visual effect does the <hr> element typically have on a web page?
A
It usually renders as a horizontal line that spans the width of its container.
20
Q
What kind of break does the <hr> element represent semantically?
A
A thematic break, indicating a transition or separation between different topics or sections of content.
21
Q
Is <hr> a block-level or an inline element?
A
Block-level
22
Q
Does the <hr> element have a closing tag?
A
No, it is a void element.
23
Q
In the provided HTML example, what is the effect of the <br></br> tags within the paragraph?
A
They force the text to break onto a new line at the point where the tag is inserted.
24
Q
In the provided HTML example, what does the <hr> tag signify within the paragraph?
A
It indicates a thematic break or a visual separation within the content flow of the paragraph.
25
What does the
HTML element represent?
Preformatted text.
26
How is text within a
element typically rendered by browsers in terms of font?
Using a non-proportional or monospaced font (where each character has the same width).
27
How does the
element handle whitespace (spaces, tabs, newlines) in the HTML source code?
Whitespace inside a
element is displayed exactly as it is written in the HTML file, including spaces, tabs, and line breaks.
28
Does text within a
element still undergo word wrapping by default?
While whitespace is preserved, browsers will still typically word-wrap text within a
element if it exceeds the container's width.
29
In the provided HTML example, how will the text 'Lorem ipsum dolor sit amet...' be displayed on the web page due to the
tags?
It will be displayed exactly as it is formatted in the HTML, with the line breaks and the spaces preserved, and likely in a monospaced font.
30
When might the
element be particularly useful?
For displaying code snippets, ASCII art, or any text where the formatting (especially whitespace) is important.
31
Is
a block-level or an inline element?
Block-level
32
What does the HTML element represent, and how is it typically displayed?
Represents bold text. It is typically displayed in a bold font weight.
33
What does the HTML element represent, and how is it typically displayed?
Represents italicized text. It is typically displayed in italics.
34
What is the semantic difference between and ? How are they typically displayed?
represents text with strong importance or seriousness. It is typically displayed in bold. is purely presentational.
35
What is the semantic difference between and ? How are they typically displayed?
represents emphasized text. It is typically displayed in italics. is purely presentational.
36
What does the HTML element represent, and how is it typically displayed?
Represents text that should be marked or highlighted for reference purposes. It is typically displayed with a background color.
37
What does the HTML element represent, and how is it typically displayed?
Represents side comments and small print, like copyright and legal text. It is typically displayed in a smaller font size.
38
What does the HTML element represent, and how is it typically displayed?
Represents text that has been deleted from a document. It is typically displayed with a strikethrough.
39
What does the HTML element represent, and how is it typically displayed?
Represents text that has been inserted into a document. It is typically displayed underlined.
40
What does the HTML element represent, and how is it typically displayed?
Represents superscript text, which appears raised above the normal line of text.
41
What does the HTML element represent, and how is it typically displayed?
Represents subscript text, which appears lowered below the normal line of text.
42
Are these text formatting elements typically block-level or inline?
Inline
43
What does the HTML element represent?
A standalone section of a document that doesn't have a more specific semantic element to represent it.
44
What is the most frequent use case for the element?
To group together related elements within a web page.
45
What elements does a typically contain?
Usually includes one or more heading elements ( to
to ) and additional elements presenting related content.
46
In the provided HTML example, what does each element represent?
Each represents a distinct topic: the first is about 'HyperText Markup Language,' and the second is about 'Cascading Style Sheets.'
47
Is it appropriate to use
elements instead of elements for grouping related content? What's the key difference?
While
elements can also group content, has semantic meaning, indicating a thematic grouping of content.
48
Can you nest elements within each other?
Yes, it is possible and sometimes appropriate to nest elements.
49
Is a block-level or an inline element?
Block-level
50
When deciding whether to use or , what is a key consideration?
51
What are the two main types of lists in HTML?
Ordered lists (
- ) and unordered lists (
- ).
52
How are items typically displayed in an ordered list (
- )?
With numbers next to the list elements.
53
How are items typically displayed in an unordered list (
- )?
With bullet points next to the list elements.
54
What HTML element is used to define each item within an ordered or unordered list?
The (list item) element.
55
Can lists in HTML be nested within each other? Can you mix ordered and unordered lists in nesting?
Yes, lists can be nested within one another, and you can mix ordered and unordered lists.
56
What is the purpose of the type attribute in the
- element?
The type attribute allows you to change the characters used to order the list.
57
Is the element a block-level or an inline element?
Block-level
58
What is the parent element for elements in both ordered and unordered lists?
Either an
- or a
- .
59
Is it semantically correct to have elements directly within the without being inside an
- or
- ?
No, elements must be contained within a parent
- or
- .
60
What is the primary purpose of the ![]()
HTML element?
To embed or insert an image into an HTML document.
61
Is the image itself directly embedded into the HTML document using the ![]()
tag?
No, the ![]()
tag creates a placeholder.
62
What are the two required attributes for an ![]()
element?
src and alt
63
What is the function of the src attribute in the ![]()
tag?
It specifies the URL or file path to the image file.
64
What is the purpose of the alt attribute in the ![]()
tag? Why is it important?
It provides alternative text for the image if it cannot be displayed. It's crucial for accessibility.
65
Name a few optional attributes that can be used with the ![]()
tag.
height, width, and border
66
Is the ![]()
element a block-level or an inline element by default?
Inline
67
Does the ![]()
element have a closing tag?
No, it is a void element.
68
When specifying the src attribute, what are the two main types of paths you might use?
Absolute URLs and relative URLs.
69
Why is it important to optimize images for the web (e.g., using appropriate file formats and compression)?
To reduce file size, which leads to faster loading times.
71
How do web browsers typically style text hyperlinks created with the tag by default?
They are usually underlined and colored blue.
74
What is the target attribute used for in the element?
It specifies where the linked document should be opened.
75
What is the default value of the target attribute? What does it do?
_self. It opens the linked document in the same tab.
76
What does the target='_blank' attribute value do?
It opens the linked document in a new browser window or tab.
77
What does the target='_parent' attribute value do?
It opens the linked document in the parent frame.
78
What does the target='_top' attribute value do?
It opens the linked document in the full body of the window.
79
In the example Head to the Per Scholas Website!, what will happen when a user clicks on the text 'Head to the Per Scholas Website!'?
Their browser will open the Per Scholas website in a new tab.
81
While historically discouraged, HTML5 allows it in some cases.
82
What is the mailto: protocol used for in the href attribute of an anchor () tag?
To create a hyperlink that opens the user's default email client.
83
What is the correct syntax for using the mailto: protocol in an tag to link to the email address 'me@example.com'?
84
What happens when a user clicks on an anchor link with an href value starting with mailto:?
Their default email client should open.
85
What is the tel: protocol used for in the href attribute of an anchor () tag?
To create a hyperlink that opens the user's default phone dialer.
86
What happens when a user clicks on an anchor link with an `href` value starting with `mailto:`?
Their default email client should open, with a new email addressed to the email address specified in the `href`.
87
What is the `tel:` protocol used for in the `href` attribute of an anchor (``) tag?
To create a hyperlink that, when clicked on a device with telephony capabilities (like a smartphone), opens the user's default phone app and prepares to call the specified phone number.
88
What is the correct syntax for using the `tel:` protocol in an `` tag to link to the phone number '+15555551234'?
89
What happens when a user clicks on an anchor link with an `href` value starting with `tel:` on a compatible device?
Their default phone app should open, ready to dial the phone number specified in the `href`.
90
What is the purpose of the '+' sign before the phone number in the `tel:` protocol (e.g., `tel:+1555...`)?
The '+' sign is used to indicate the international dialing code and is generally recommended for international phone numbers.
91
Can you include additional information in a `mailto:` link, such as a subject line or body text? If so, how?
Yes, you can include a subject line using `?subject=YourSubject` and body text using `&body=YourBody` appended to the email address in the `href`.
92
Fill in the blank: The `mailto:` link can include a subject line using _______.
?subject=YourSubject
93
Fill in the blank: The `mailto:` link can include body text using _______.
&body=YourBody
94
True or False: The `tel:` protocol can only be used on desktop computers.
False
-
Key Links
-
Subjects
-
Company
-
Find Us
-
